wip

2021-07-09 10:41:03 +03:00
191 changed files with 2594 additions and 12964 deletions
@@ -12,4 +12,3 @@ Makefile
 .qmake.stash
 *_qml.cpp
 *_qmlcache.qrc
-sandbox/qmlcache_loader.cpp
@@ -1,607 +0,0 @@
-<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))
-
-
-
@@ -9,7 +9,6 @@ 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,239 @@
+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
+    }
+}
@@ -8,25 +8,10 @@ import StatusQ.Controls 0.1
 import Sandbox 0.1

 GridLayout {
-    columns: 1
+    columns: 6
    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"
    }
@@ -130,36 +115,6 @@ 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"
@@ -189,18 +144,31 @@ GridLayout {
        value: 40
    }

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

-    StatusProgressBar {
-        id: progressBar        
-        text: "Weak"
-        value: 0.5
-        fillColor : Theme.palette.pinColor1
+    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
+        }
    }
 }
@@ -7,64 +7,46 @@ 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: 1002
+    width: 902
    border.width: 1
    border.color: Theme.palette.baseColor2

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

-    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
-    }
+        spacing: 6
+        z: statusAppLayout.z + 1

-    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);
+        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
        }
-    }
-
-    StatusMacTrafficLights {
-        anchors.left: parent.left
-        anchors.top: parent.top
-        anchors.margins: 13
-        z: statusAppLayout.z + 1
-        visible: titleStyle === "osx"
-    }
-
-    StatusWindowsTitleBar {
-        id: windowsTitle
-        anchors.top: parent.top
-        width: parent.width
-        z: statusAppLayout.z + 1
-        visible: titleStyle === "windows"
    }

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

            id: navBar

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

-            communityNavBarButton: StatusNavBarTabButton {
+            navBarCommunityTabButtons.model: ListModel {
+                ListElement {
+                    name: "Status Community"
+                    tooltipText: "Status Community"
+                }
+            }
+
+            navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
+                id: communityBtn
                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
+                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
                onClicked: {
-                    if(model.sectionType === appSectionType.community)
-                    {
-                        appView.sourceComponent = statusAppCommunityView
-                        demoApp.setActiveItem(model.sectionId)
-                    }
+                    appView.sourceComponent = statusAppCommunityView
                }

                popupMenu: StatusPopupMenu {
@@ -174,7 +114,39 @@ 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 {
@@ -186,31 +158,713 @@ Rectangle {

    Component {
        id: statusAppChatView
-        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
+                        }
+                    }
+                }
+            }
+        }
    }

    Component {
        id: statusAppCommunityView
-        StatusAppCommunityView {
-            communityDetailModalTitle: demoCommunityDetailModal.header.title
-            communityDetailModalImage: demoCommunityDetailModal.header.image.source
-            onChatInfoButtonClicked: {
-                demoCommunityDetailModal.open();
+
+        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
+                }
            }
        }
    }

    Component {
        id: statusAppProfileSettingsView
-        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
+            }
+        }
    }

-    DemoContactRequestsModal {
+    StatusModal {
        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()
+            }
+        ]
    }

-    DemoCommunityDetailModal {
+    StatusModal {
        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"
+        }
    }
 }
@@ -0,0 +1,295 @@
+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"
+                }
+            ]
+        }
+    }
+}
+
@@ -85,8 +85,7 @@ GridLayout {
    StatusChatListItem {
        name: "has-mentions"
        type: StatusChatListItem.Type.PublicChat
-        hasUnreadMessages: true
-        notificationsCount: 1
+        badge.value: 1
    }

    StatusChatListItem {
@@ -96,20 +95,11 @@ GridLayout {
        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
@@ -117,24 +107,6 @@ GridLayout {
        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"
    }
@@ -144,45 +116,19 @@ GridLayout {
        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"
@@ -284,56 +230,11 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
        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
-    }
-
    StatusDescriptionListItem {
        title: "Title"
        subTitle: "Subtitle"
    }

-    StatusDescriptionListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        value: "None"
-        sensor.enabled: true
-    }
-
    StatusDescriptionListItem {
        title: "Title"
        subTitle: "Subtitle"
@@ -346,38 +247,4 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
        title: "Contact requests"
        requestsCount: 3
    }
-
-    StatusMemberListItem {
-        nickName: "This is an example"
-        userName: "annabelle"
-        chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-        trustIndicator: StatusMemberListItem.TrustedType.Verified
-        isMutualContact: true
-        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
-                      nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-        image.isIdenticon: true
-        isOnline: true
-    }
-
-    StatusMemberListItem {
-        nickName: "carmen.eth"
-        isOnline: false
-        trustIndicator: StatusMemberListItem.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
-    }
 }
@@ -1,498 +0,0 @@
-import QtQuick 2.14
-import StatusQ.Components 0.1
-
-QtObject {
-
-    property var demoChatListItems: ListModel {
-        id: demoChatListItems
-        ListElement {
-            itemId: "x012340000"
-            name: "#status"
-            icon: ""
-            isIdenticon: false
-            color: "blue"
-            description: ""
-            type: StatusChatListItem.Type.PublicChat
-            hasUnreadMessages: true
-            notificationsCount: 0
-            muted: false
-            active: false
-            position: 0
-            subItems: []
-        }
-        ListElement {
-            itemId: "x012340001"
-            name: "status-desktop"
-            icon: ""
-            isIdenticon: false
-            color: "red"
-            description: ""
-            type: StatusChatListItem.Type.PublicChat
-            hasUnreadMessages: true
-            notificationsCount: 1
-            muted: false
-            active: false
-            position: 1
-            subItems: []
-        }
-        ListElement {
-            itemId: "x012340002"
-            name: "Amazing Funny Squirrel"
-            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
-CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-            isIdenticon: true
-            color: "green"
-            description: ""
-            type: StatusChatListItem.Type.OneToOneChat
-            hasUnreadMessages: false
-            notificationsCount: 0
-            muted: false
-            active: true
-            position: 2
-            subItems: []
-        }
-        ListElement {
-            itemId: "x012340003"
-            name: "Black Ops"
-            icon: ""
-            isIdenticon: false
-            color: "purple"
-            description: ""
-            type: StatusChatListItem.Type.OneToOneChat
-            hasUnreadMessages: false
-            notificationsCount: 0
-            muted: false
-            active: false
-            position: 3
-            subItems: []
-        }
-        ListElement {
-            itemId: "x012340004"
-            name: "Spectacular Growing Otter"
-            icon: ""
-            isIdenticon: false
-            color: "orange"
-            description: ""
-            type: StatusChatListItem.Type.OneToOneChat
-            hasUnreadMessages: false
-            notificationsCount: 0
-            muted: false
-            active: false
-            position: 4
-            subItems: []
-        }
-        ListElement {
-            itemId: "x012340005"
-            name: "channel-with-a-super-duper-long-name"
-            icon: ""
-            isIdenticon: false
-            color: "green"
-            description: ""
-            type: StatusChatListItem.Type.PublicChat
-            hasUnreadMessages: false
-            notificationsCount: 0
-            muted: false
-            active: false
-            position: 5
-            subItems: []
-        }
-    }
-
-    property var demoCommunityChatListItems: ListModel {
-        id: demoCommunityChatListItems
-        ListElement {
-            itemId: "x012340000"
-            name: "general"
-            icon: ""
-            isIdenticon: false
-            color: "orange"
-            description: ""
-            type: StatusChatListItem.Type.CommunityChat
-            hasUnreadMessages: true
-            notificationsCount: 0
-            muted: false
-            active: false
-            position: 0
-            subItems: []
-        }
-        ListElement {
-            itemId: "x012340001"
-            name: "Public"
-            icon: ""
-            isIdenticon: false
-            color: "orange"
-            description: ""
-            type: StatusChatListItem.Type.Unknown0
-            hasUnreadMessages: false
-            notificationsCount: 0
-            muted: false
-            active: true
-            position: 1
-            subItems: [
-                ListElement {
-                    itemId: "x012340002"
-                    parentItemId: "x012340001"
-                    name: "random"
-                    icon: ""
-                    isIdenticon: false
-                    color: "orange"
-                    description: ""
-                    hasUnreadMessages: true
-                    notificationsCount: 4
-                    muted: false
-                    active: false
-                    position: 0
-                },
-                ListElement {
-                    itemId: "x012340003"
-                    parentItemId: "x012340001"
-                    name: "watercooler"
-                    icon: ""
-                    isIdenticon: false
-                    color: "orange"
-                    description: ""
-                    hasUnreadMessages: false
-                    notificationsCount: 0
-                    muted: false
-                    active: true
-                    position: 1
-                }
-            ]
-        }
-        ListElement {
-            itemId: "x012340004"
-            name: "Development"
-            icon: ""
-            isIdenticon: false
-            color: "orange"
-            description: ""
-            type: StatusChatListItem.Type.Unknown0
-            hasUnreadMessages: false
-            notificationsCount: 0
-            muted: false
-            active: false
-            position: 2
-            subItems: [
-                ListElement {
-                    itemId: "x012340005"
-                    parentItemId: "x012340004"
-                    name: "language-design"
-                    icon: ""
-                    isIdenticon: false
-                    color: "orange"
-                    description: ""
-                    hasUnreadMessages: false
-                    notificationsCount: 0
-                    muted: true
-                    active: false
-                    position: 0
-                }
-            ]
-        }
-    }
-
-    property var demoProfileGeneralMenuItems: ListModel {
-        id: demoProfileGeneralMenuItems
-
-        ListElement {
-            title: "My Profile"
-            icon: "profile"
-        }
-
-        ListElement {
-            title: "Contacts"
-            icon: "contact"
-        }
-
-        ListElement {
-            title: "ENS Usernames"
-            icon: "username"
-        }
-
-    }
-
-    property var demoProfileSettingsMenuItems: ListModel {
-        id: demoProfileSettingsMenuItems
-
-        ListElement {
-            title: "Privacy & Security"
-            icon: "security"
-        }
-
-        ListElement {
-            title: "Appearance"
-            icon: "appearance"
-        }
-
-        ListElement {
-            title: "Browser"
-            icon: "browser"
-        }
-
-        ListElement {
-            title: "Sounds"
-            icon: "sound"
-        }
-
-        ListElement {
-            title: "Language"
-            icon: "language"
-        }
-
-        ListElement {
-            title: "Notifications"
-            icon: "notification"
-        }
-
-        ListElement {
-            title: "Sync settings"
-            icon: "mobile"
-        }
-
-        ListElement {
-            title: "Advanced"
-            icon: "settings"
-        }
-
-    }
-
-    property var demoProfileOtherMenuItems: ListModel {
-        id: demoProfileOtherMenuItems
-
-        ListElement {
-            title: "Need help?"
-            icon: "help"
-        }
-
-        ListElement {
-            title: "About"
-            icon: "info"
-        }
-
-        ListElement {
-            title: "Sign out & Quit"
-            icon: "logout"
-        }
-    }
-
-    //dummy search popup models
-    property var searchResultsA: ListModel {
-        ListElement { itemId: "i1"; titleId: "t1"; title: "@Flea"; sectionName: "Messages"; time: "18:55 AM"; content: "lorem ipsum <font color='#4360DF'>@Nick</font> dolor sit amet";
-            image: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg";
-            color: "orange";
-            badgeImage: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg";
-            badgePrimaryText: "CryptoKities";
-            badgeSecondaryText: "";
-            badgeIconColor: "";
-            badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i2"; titleId: "t2"; image: ""; color: "blue"; title: "core"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i3"; titleId: "t3"; image: ""; color: "yellow"; title: "communities-phase3"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i4"; titleId: "t4"; image: ""; color: "black"; title: "core-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i5"; titleId: "t5"; image: ""; color: "green"; title: "desktop"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i6"; titleId: "t6"; image: ""; color: "red"; title: "Crocodile Vanilla Bird"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i7"; titleId: "t7"; image: ""; color: "purple"; title: "carmen eth"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i8"; titleId: "t8"; image: ""; color: "red"; title: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i9"; titleId: "t9"; image: ""; color: "blue"; title: "MyCommunity"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i10"; titleId: "t10"; image: ""; color: "green"; title: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-    }
-    property var searchResultsB: ListModel {
-        ListElement { itemId: "i1"; titleId: "t1"; title: "@Ant"; sectionName: "Messages"; time: "11:43 AM"; content: "<font color='#4360DF'>@John</font>, lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ";
-            image: "";
-            color: "orange";
-            badgeImage: "";
-            badgePrimaryText: "CryptoKities";
-            badgeSecondaryText: "#design";
-            badgeIconColor: "pink"; badgeIsLetterIdenticon: true }
-        ListElement { itemId: "i2"; titleId: "t2"; image: ""; color: "blue"; title: "support"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i3"; titleId: "t3"; image: ""; color: "red"; title: "desktop-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i4"; titleId: "t4"; image: ""; color: "orange"; title: "climate-change"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i5"; titleId: "t5"; image: ""; color: "black"; title: "food"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: "pink"; badgeIsLetterIdenticon: true }
-        ListElement { itemId: "i6"; titleId: "t6"; image: ""; color: "green"; title: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i7"; titleId: "t7"; image: ""; color: "purple"; title: "CryptoRangers"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
-        ListElement { itemId: "i8"; titleId: "t8"; image: ""; color: "yellow"; title: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: "orange"; badgeIsLetterIdenticon: true }
-    }
-
-    property ListModel optionsModel: ListModel {
-        ListElement {
-            value: "item_1"
-            title: "Item with icon"
-            imageSource: ""
-            iconName: "chat"
-            iconColor: ""
-            isIdenticon: false
-            subItems: [
-                ListElement {
-                    value: "sub_item_1_1"
-                    text: "Profile image item"
-                    imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-                    iconName: ""
-                    iconColor: ""
-                    isIdenticon: false
-                },
-                ListElement {
-                    value: "sub_item_1_2"
-                    text: "identicon item"
-                    imageSource: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-                    iconName: ""
-                    iconColor: ""
-                    isIdenticon: true
-                }]}
-        ListElement {
-            value: "item_2"
-            title: "Community item";
-            imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-            iconName: ""
-            iconColor: ""
-            isIdenticon: false
-            subItems: [
-                ListElement {
-                    value: "sub_item_2_1"
-                    text: "welcome"
-                    imageSource: ""
-                    iconName: "channel"
-                    iconColor: ""
-                    isIdenticon: false
-                },
-                ListElement {
-                    value: "sub_item_2_2"
-                    text: "support"
-                    imageSource: ""
-                    iconName: "channel"
-                    iconColor: ""
-                    isIdenticon: false
-                },
-                ListElement {
-                    value: "sub_item_2_3"
-                    text: "news"
-                    imageSource: ""
-                    iconName: "channel"
-                    iconColor: ""
-                    isIdenticon: false
-                }]}
-        ListElement {
-            value: "item_3"
-            title: "Other";
-            imageSource: "";
-            iconName: "info"
-            iconColor: ""
-            isIdenticon: false
-            subItems: [
-                ListElement {
-                    value: "sub_item_3_1"
-                    text: "news"
-                    imageSource: ""
-                    iconName: "channel"
-                    iconColor: ""
-                    isIdenticon: false
-                }]}
-        ListElement {
-            value: "item_4"
-            title: "Letter identicon";
-            imageSource: "";
-            iconName: ""
-            iconColor: "red"
-            isIdenticon: false
-            subItems: [
-                ListElement {
-                    value: "sub_item_4_1"
-                    text: "news"
-                    imageSource: ""
-                    iconName: "channel"
-                    iconColor: ""
-                    isIdenticon: false
-                }]}
-    }
-
-    //    App Section Types:
-    //    chat: 0
-    //    community: 1
-    //    wallet: 2
-    //    browser: 3
-    //    nodeManagement: 4
-    //    profileSettings: 5
-    //    apiDocumentation: 100
-    //    demoApp: 101
-
-    property ListModel mainAppSectionsModel: ListModel {
-        ListElement {
-            sectionId: "mainApp"
-            sectionType: 100
-            name: "API Documentation"
-            active: true
-            image: ""
-            icon: "edit"
-            color: ""
-            hasNotification: false
-            notificationsCount: 0
-        }
-        ListElement {
-            sectionId: "demoApp"
-            sectionType: 101
-            name: "Demo Application"
-            active: false
-            image: ""
-            icon: "status"
-            color: ""
-            hasNotification: false
-            notificationsCount: 0
-        }
-    }
-
-    property ListModel demoAppSectionsModel: ListModel {
-        ListElement {
-            sectionId: "chat"
-            sectionType: 0
-            name: "Chat"
-            active: true
-            image: ""
-            icon: "chat"
-            color: ""
-            hasNotification: false
-            notificationsCount: 0
-        }
-        ListElement {
-            sectionId: "0x123456789"
-            sectionType: 1
-            name: "Status Community"
-            active: false
-            image: "https://assets.brandfetch.io/51a495de903c46a.png"
-            icon: ""
-            color: ""
-            hasNotification: false
-            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: 6
-            name: "Profile"
-            active: false
-            image: ""
-            icon: "bigger/settings"
-            color: ""
-            hasNotification: true
-            notificationsCount: 0
-        }
-    }
-}
@@ -0,0 +1,174 @@
+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!"
+                }
+            }
+        ]
+    }
+}
@@ -0,0 +1,72 @@
+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"
+            }
+        }
+    }
+}
@@ -1,318 +0,0 @@
-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;
-            }
-        }
-    }
-}
@@ -1,443 +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
-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
-                    }
-                }
-            }
-        }
-
-
-    }
-}
-
@@ -1,367 +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: "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()
-    }
-
-    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
-    }
-
-    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"]
-    }
-}
@@ -1,103 +0,0 @@
-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
-            contactType: model.contactType
-            isPinned: model.isPinned
-            pinnedBy: model.pinnedBy
-            hasExpired: model.hasExpired
-        }
-        timestamp.text: "10:00 am"
-        timestamp.tooltip.text: "10:01 am"
-        // reply related data
-        isAReply: model.isReply
-        replyDetails: StatusMessageDetails {
-            amISender:  model.isReply ? model.replyAmISender : ""
-            displayName:  model.isReply ? model.replySenderName: ""
-            profileImage: StatusImageSettings {
-                width: 20
-                height: 20
-                source:  model.isReply ? model.replyProfileImage: ""
-                isIdenticon:  model.isReply ? model.replyIsIdenticon: ""
-            }
-            messageText:  model.isReply ? model.replyMessageText: ""
-            contentType: model.replyContentType
-            messageContent: model.replyMessageContent
-        }
-        quickActions: [
-            StatusFlatRoundButton {
-                id: emojiBtn
-                width: 32
-                height: 32
-                icon.name: "reaction-b"
-                type: StatusFlatRoundButton.Type.Tertiary
-                tooltip.text: "Add reaction"
-            },
-            StatusFlatRoundButton {
-                id: replyBtn
-                width: 32
-                height: 32
-                icon.name: "reply"
-                type: StatusFlatRoundButton.Type.Tertiary
-                tooltip.text: "Reply"
-            },
-            StatusFlatRoundButton {
-                width: 32
-                height: 32
-                icon.name: "tiny/edit"
-                type: StatusFlatRoundButton.Type.Tertiary
-                tooltip.text: "Edit"
-                onClicked: {
-                    delegate.editMode = !delegate.editMode
-                }
-            },
-            StatusFlatRoundButton {
-                id: otherBtn
-                width: 32
-                height: 32
-                icon.name: "more"
-                type: StatusFlatRoundButton.Type.Tertiary
-                tooltip.text: "More"
-            }
-        ]
-    }
-}
@@ -1,232 +0,0 @@
-import QtQuick 2.12
-import QtQuick.Controls 2.12
-import QtQuick.Layouts 1.12
-import QtQml.Models 2.2
-import QtGraphicalEffects 1.0
-
-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
-            implicitHeight: 44
-            toLabelText: qsTr("To: ")
-            warningText: qsTr("5 USER LIMIT REACHED")
-            //simulate model filtering, TODO this
-            //makes more sense to be provided by the backend
-            //figure how real implementation should look like
-            property ListModel sortedList: ListModel { }
-            onTextChanged: {
-                sortedList.clear();
-                if (text !== "") {
-                    for (var i = 0; i < contactsModel.count; i++ ) {
-                        var entry = contactsModel.get(i);
-                        if (entry.name.toLowerCase().includes(text.toLowerCase())) {
-                            sortedList.insert(sortedList.count, {"publicId": entry.publicId, "name": entry.name,
-                                                  "icon": entry.icon, "isIdenticon": entry.isIdenticon,
-                                                  "onlineStatus": entry.onlineStatus});
-                            userListView.model = sortedList;
-                        }
-                    }
-                } else {
-                    userListView.model = contactsModel;
-                }
-            }
-        }
-
-        StatusButton {
-            implicitHeight: 44
-            enabled: (tagSelector.namesModel.count > 0)
-            text: "Confirm"
-        }
-    }
-
-    contentItem: Item {
-        anchors.fill: parent
-        anchors.topMargin: headerRow.height + 16
-
-        Item {
-            anchors.fill: parent
-            visible: (contactsModel.count > 0)
-
-            StatusBaseText {
-                id: contactsLabel
-                font.pixelSize: 15
-                color: Theme.palette.baseColor1
-                text: "Contacts"
-            }
-            Control {
-                width: 360
-                anchors {
-                    top: contactsLabel.bottom
-                    topMargin: 8//Style.current.padding
-                    bottom: parent.bottom
-                    bottomMargin: 20//Style.current.bigPadding
-                }
-                background: Rectangle {
-                    id: statusPopupMenuBackgroundContent
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    height: (userListView.height + 8)
-                    visible: (tagSelector.sortedList.count > 0)
-                    color: Theme.palette.statusPopupMenu.backgroundColor
-                    radius: 8
-                    layer.enabled: true
-                    layer.effect: DropShadow {
-                        width: statusPopupMenuBackgroundContent.width
-                        height: statusPopupMenuBackgroundContent.height
-                        x: statusPopupMenuBackgroundContent.x
-                        visible: statusPopupMenuBackgroundContent.visible
-                        source: statusPopupMenuBackgroundContent
-                        horizontalOffset: 0
-                        verticalOffset: 4
-                        radius: 12
-                        samples: 25
-                        spread: 0.2
-                        color: Theme.palette.dropShadow
-                    }
-                }
-                contentItem: ListView {
-                    id: userListView
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    height: (count * 64) > parent.height ? parent.height : (count * 64)
-                    clip: true
-                    model: contactsModel
-                    ScrollBar.vertical: ScrollBar {
-                        policy: ScrollBar.AsNeeded
-                    }
-                    boundsBehavior: Flickable.StopAtBounds
-                    delegate: Item {
-                        id: wrapper
-                        anchors.right: parent.right
-                        anchors.left: parent.left
-                        height: 64
-                        property bool hovered: false
-                        Rectangle {
-                            id: rectangle
-                            anchors.fill: parent
-                            anchors.topMargin: 8
-                            anchors.rightMargin: 8
-                            anchors.leftMargin: 8
-                            radius: 8
-                            visible: (tagSelector.sortedList.count > 0)
-                            color: (wrapper.hovered) ? Theme.palette.baseColor2 : "transparent"
-                        }
-
-                        StatusSmartIdenticon {
-                            id: contactImage
-                            anchors.left: parent.left
-                            anchors.leftMargin: 16//Style.current.padding
-                            anchors.verticalCenter: parent.verticalCenter
-                            name: model.name
-                            icon: StatusIconSettings {
-                                width: 28
-                                height: 28
-                                letterSize: 15
-                            }
-                            image: StatusImageSettings {
-                                width: 28
-                                height: 28
-                                source: model.icon
-                                isIdenticon: model.isIdenticon
-                            }
-                        }
-
-                        StatusBaseText {
-                            id: contactInfo
-                            text: model.name
-                            anchors.right: parent.right
-                            anchors.rightMargin: 8
-                            anchors.left: contactImage.right
-                            anchors.leftMargin: 16
-                            anchors.verticalCenter: parent.verticalCenter
-                            elide: Text.ElideRight
-                            color: Theme.palette.directColor1
-                            font.weight: Font.Medium
-                            font.pixelSize: 15
-                        }
-
-                        StatusBadge {
-                            id: statusBadge
-                            width: 15
-                            height: 15
-                            anchors.left: contactImage.right
-                            anchors.leftMargin: -8
-                            anchors.bottom: contactImage.bottom
-                            border.width: 3
-                            border.color: Theme.palette.statusAppNavBar.backgroundColor
-                            color: {
-                                if (model.onlineStatus === 1)
-                                    return Theme.palette.successColor1;
-                                else if (model.onlineStatus === 2)
-                                    return Theme.palette.pinColor1;
-                                else if (model.onlineStatus === 3)
-                                    return Theme.palette.dangerColor1;
-
-                                return "transparent"
-                            }
-                        }
-
-                        MouseArea {
-                            cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
-                            acceptedButtons: Qt.LeftButton | Qt.RightButton
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            onEntered: {
-                                wrapper.hovered = true;
-                            }
-                            onExited: {
-                                wrapper.hovered = false;
-                            }
-                            onClicked: {
-                                tagSelector.insertTag(model.name, model.publicId);
-                            }
-                        }
-                    }
-                }
-            }
-            Component.onCompleted: {
-                if (visible) {
-                    tagSelector.textEdit.forceActiveFocus();
-                }
-            }
-        }
-
-        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;
-                }
-            }
-        }
-    }
-}
@@ -1,111 +0,0 @@
-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
-        }
-    }
-}
@@ -1,40 +0,0 @@
-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()
-        }
-    ]
-}
@@ -1,194 +0,0 @@
-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: parent.width
-            height: searchInput.height
-            anchors.top: headline.bottom
-            anchors.topMargin: 16
-            anchors.right: parent.right
-            anchors.rightMargin: 8
-
-            StatusBaseInput {
-                id: searchInput
-                Layout.fillWidth: true
-                Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
-                Layout.leftMargin: 17
-                implicitHeight: 36
-                topPadding: 8
-                bottomPadding: 0
-                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
-            width: parent.width
-            spacing: 8
-
-            StatusContactRequestsIndicatorListItem {
-                anchors.horizontalCenter: parent.horizontalCenter
-                title: "Contact requests"
-                requestsCount: 3
-                sensor.onClicked: demoContactRequestsModal.open()
-            }
-
-            StatusChatList {
-                anchors.horizontalCenter: parent.horizontalCenter
-                model: Models.demoChatListItems
-                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.dummyContactsModel
-        }
-    }
-
-    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
-                }
-            }
-        }
-    }
-}
@@ -1,272 +0,0 @@
-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.userName
-                chatKey: model.chatKey
-                trustIndicator: model.trustIndicator
-                isMutualContact: model.isMutualContact
-                image.source: model.source
-                image.isIdenticon: model.isIdenticon
-                isOnline: model.isOnline
-            }
-        }
-    }
-}
@@ -1,77 +0,0 @@
-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
-    }
-}
@@ -1 +0,0 @@
-singleton Models 1.0 Models.qml
@@ -12,12 +12,10 @@ 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
-                                                                  :  1224
+                                                                  :  1024
    height: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.height
                                                                   :840
    visible: true
@@ -33,33 +31,11 @@ StatusWindow {

    Component.onCompleted: {
        Theme.palette = lightTheme
+        apiDocsButton.checked = true
+
        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 {
        id: appLayout
        anchors.fill: parent
@@ -67,36 +43,37 @@ StatusWindow {
        appNavBar: StatusAppNavBar {
            height: rootWindow.height

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

-            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)
-                    {
+            navBarTabButtons: [
+                StatusNavBarTabButton {
+                    id: apiDocsButton
+                    icon.name: "edit"
+                    tooltip.text: "API Documentation"
+                    onClicked: {
+                        stackView.clear()
                        stackView.push(libraryDocumentationCmp)
-                        rootWindow.setActiveItem(sectionId)
+                        checked = !checked
+                        demoAppButton.checked = false
                    }
-                    else if(model.sectionType === appSectionType.demoApp)
-                    {
+                },
+                StatusNavBarTabButton {
+                    id: demoAppButton
+                    icon.name: "status"
+                    tooltip.text: "Demo Application"
+                    checked: stackView.currentItem == demoAppCmp
+                    onClicked: {
+                        stackView.clear()
                        stackView.push(demoAppCmp)
-                        rootWindow.setActiveItem(model.sectionId)
+                        checked = !checked
+                        apiDocsButton.checked = false
                    }
                }
-            }
+            ]
        }

        appView: StackView {
@@ -124,14 +101,6 @@ StatusWindow {
        id: libraryDocumentationCmp

        StatusAppTwoPanelLayout {
-            id: mainPageView
-
-            function page(name) {
-                viewLoader.source = Qt.resolvedUrl("./pages/" + name + "Page.qml");
-            }
-            function control(name) {
-                viewLoader.source = Qt.resolvedUrl("./controls/" + name + ".qml");
-            }

            leftPanel: Item {
                anchors.fill: parent
@@ -151,132 +120,56 @@ StatusWindow {

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

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

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

                        StatusNavigationListItem {
                            title: "StatusModal"
-                            selected: viewLoader.source.toString().includes("Popups")
-                            onClicked: mainPageView.control("Popups");
-                        }
-                        StatusListSectionHeadline { text: "StatusQ.Platform" }
-                        StatusNavigationListItem {
-                            title: "StatusMacNotification"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
+                            selected: page.sourceComponent == statusModalComponent
+                            onClicked: page.sourceComponent = statusModalComponent
                        }
                    }
                }
@@ -285,10 +178,12 @@ StatusWindow {
            rightPanel: Item {
                id: rightPanel
                anchors.fill: parent
+
                ScrollView {
-                    anchors.fill: parent
+                    width: parent.width
+                    height: parent.height
                    contentHeight: (pageWrapper.height + pageWrapper.anchors.topMargin) * rootWindow.factor
-                    contentWidth: (pageWrapper.width * rootWindow.factor)
+                    contentWidth: pageWrapper.width * rootWindow.factor
                    clip: true

                    Item {
@@ -296,17 +191,13 @@ StatusWindow {
                        width: rightPanel.width
                        anchors.top: parent.top
                        anchors.topMargin: 64
-                        height: Math.max(rootWindow.height, viewLoader.height + 128)
+                        height: Math.max(rootWindow.height, page.height + 128)
                        scale: rootWindow.factor
                        Loader {
-                            id: viewLoader
+                            id: page
+                            active: true
                            anchors.centerIn: parent
-                            source: mainPageView.control("Icons")
-                            onSourceChanged: {
-                                if (source.toString().includes("Icons")) {
-                                    item.iconColor = Theme.palette.primaryColor1;
-                                }
-                            }
+                            sourceComponent: iconsComponent
                        }
                    }
                }
@@ -337,42 +228,57 @@ 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
@@ -395,27 +301,6 @@ StatusWindow {
        anchors.top: parent.top
        anchors.margins: 13

-        visible: Qt.platform.os == "osx"
-
-        onClose: {
-            rootWindow.close()
-        }
-
-        onMinimised: {
-            rootWindow.showMinimized()
-        }
-
-        onMaximized: {
-            rootWindow.toggleFullScreen()
-        }
-    }
-
-    StatusWindowsTitleBar {
-        anchors.top: parent.top
-        width: parent.width
-
-        visible: Qt.platform.os == "windows"
-
        onClose: {
            rootWindow.close()
        }
@@ -1,64 +0,0 @@
-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: []
-            }
-        }
-    }
-}
@@ -1,25 +0,0 @@
-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
-        }
-    }
-}
@@ -1,40 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Popups 0.1
-
-import Sandbox 0.1
-
-Column {
-    spacing: 8
-
-    StatusAssetSelector {
-        getCurrencyBalanceString: function (currencyBalance) {
-            return currencyBalance.toFixed(2) + " USD"
-        }
-        tokenAssetSourceFn: function (symbol) {
-            return "../../assets/img/icons/snt.svg"
-        }
-        assets: ListModel {
-            ListElement {
-                address: "0x1234"
-                name: "Status Network Token"
-                balance: "20"
-                symbol: "SNT"
-                currencyBalance: 9992.01
-            }
-            ListElement {
-                address: "0x1234"
-                name: "DAI Token"
-                balance: "15"
-                symbol: "DAI"
-                currencyBalance: 20.00001
-            }
-        }
-    }
-}
-
@@ -1,26 +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 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"
-    }
-}
@@ -1,17 +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 Sandbox 0.1
-
-Column {
-    spacing: 8
-
-    StatusColorSelector {
-        model: ["red", "blue", "green"]
-    }
-}
@@ -1,152 +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
-
-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")
-            }
-        }
-    }
-}
@@ -1,133 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.14
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Controls.Validators 0.1
-
-import Sandbox 0.1
-
-Column {
-    spacing: 8
-
-    StatusInput {
-        input.placeholderText: "Placeholder"
-    }
-
-    StatusInput {
-        label: "Label"
-        input.placeholderText: "Disabled"
-        input.enabled: false
-    }
-
-    StatusInput {
-        input.placeholderText: "Clearable"
-        input.clearable: true
-    }
-
-    StatusInput {
-        input.placeholderText: "Invalid"
-        input.valid: false
-    }
-
-    StatusInput {
-        label: "Label"
-
-        input.icon.name: "search"
-        input.placeholderText: "Input with icon"
-    }
-
-    StatusInput {
-        label: "Label"
-        input.placeholderText: "Placeholder"
-        input.clearable: true
-    }
-
-    StatusInput {
-        charLimit: 30
-        input.placeholderText: "Placeholder"
-        input.clearable: true
-    }
-
-    StatusInput {
-        label: "Label"
-        charLimit: 30
-        input.placeholderText: "Placeholder"
-        input.clearable: true
-    }
-
-    StatusInput {
-        label: "Label"
-        charLimit: 30
-        errorMessage: "Error message"
-
-        input.clearable: true
-        input.valid: false
-        input.placeholderText: "Placeholder"
-    }
-
-    StatusInput {
-        label: "StatusInput"
-        secondaryLabel: "with right icon"
-        input.icon.width: 15
-        input.icon.height: 11
-        input.icon.name: text !== "" ? "checkmark" : ""
-        input.leftIcon: false
-    }
-
-    StatusInput {
-        label: "Label"
-        secondaryLabel: "secondary label"
-        input.placeholderText: "Placeholder"
-        input.implicitHeight: 56
-    }
-
-    StatusInput {
-        id: input
-        label: "Label"
-        charLimit: 30
-        input.placeholderText: "Input with validator"
-
-        validators: [
-            StatusMinLengthValidator {
-                minLength: 10
-                errorMessage: {
-                    if (input.errors && input.errors.minLength) {
-                        return `Value can't be shorter than ${input.errors.minLength.min} but got ${input.errors.minLength.actual}`
-                    }
-                    return ""
-                }
-            }
-        ]
-    }
-
-    StatusInput {
-        label: "Label"
-        input.placeholderText: "Input width component (right side)"
-        input.component: StatusIcon {
-            icon: "cancel"
-            height: 16
-            color: Theme.palette.dangerColor1
-        }
-    }
-
-
-    StatusInput {
-        input.multiline: true
-        input.placeholderText: "Multiline"
-    }
-
-    StatusInput {
-        input.multiline: true
-        input.placeholderText: "Multiline with static height"
-        input.implicitHeight: 100
-    }
-
-    StatusInput {
-        input.multiline: true
-        input.placeholderText: "Multiline with max/min"
-        input.minimumHeight: 80
-        input.maximumHeight: 200
-    }
-}
@@ -1,16 +0,0 @@
-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"
-    }
-}
@@ -1,38 +0,0 @@
-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
-    }
-}
@@ -1,150 +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()
-    }
-
-
-    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"
-            }
-        }
-    }
-}
@@ -1,54 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Popups 0.1
-
-import Sandbox 0.1
-Column {
-    spacing: 8
-
-    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
-            }
-        }
-    }
-}
-
@@ -1,50 +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 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
-        }
-    }
-}
@@ -1,24 +0,0 @@
-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"
-        }
-    }
-}
-
@@ -1,56 +0,0 @@
-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("5 USER LIMIT REACHED")
-    }
-}
@@ -1,38 +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 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
-        }
-    }
-}
@@ -1,17 +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 Sandbox 0.1
-
-Column {
-    spacing: 8
-
-    StatusWalletColorSelect {
-        model: Theme.palette.accountColors
-    }
-}
@@ -1,35 +1,16 @@
 <RCC>
    <qresource prefix="/">
        <file>main.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/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>Controls.qml</file>
+        <file>Icons.qml</file>
+        <file>Others.qml</file>
+        <file>Buttons.qml</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>
    </qresource>
-</RCC>
+</RCC>
@@ -1,8 +1,6 @@
 QT += quick svg

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

 DEFINES += QT_DEPRECATED_WARNINGS

@@ -14,39 +12,18 @@ DEFINES += QT_DEPRECATED_WARNINGS
 SOURCES += \
        handler.cpp \
        main.cpp \
-        sandboxapp.cpp \
-        spellchecker.cpp
+        sandboxapp.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 {
@@ -63,6 +40,8 @@ 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
@@ -72,11 +51,17 @@ else: unix:!android: target.path = /opt/$${TARGET}/bin
 HEADERS += \
    handler.h \
    sandboxapp.h \
-    statuswindow.h \
-    spellchecker.h
+    statuswindow.h

-OTHER_FILES += $$files($$PWD/../*.qml, true)
-OTHER_FILES += $$files($$PWD/*.qml, true)
+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

 android {

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

 #include "statuswindow.h"
-#include "spellchecker.h"

 SandboxApp::SandboxApp(int &argc, char **argv)
    : QGuiApplication(argc, argv),
@@ -17,10 +16,9 @@ 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 = QUrl::fromLocalFile(applicationDirPath() + "/../main.qml");
+    const QUrl url(applicationDirPath() + "/../main.qml");
 #else
    const QUrl url(QStringLiteral("qrc:/main.qml"));
 #endif
@@ -1,8 +1,6 @@
 #include "spellchecker.h"

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

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

-}
-
-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";
+    QString dictFile = QDir::homePath() + "/Status/StatusQ/sandbox/dictionaries/" + language  + "/index.dic";
+    QString affixFile = QDir::homePath() + "/Status/StatusQ/sandbox/dictionaries/" + language  + "/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);
@@ -84,7 +47,7 @@ void SpellChecker::initHunspell()
    }
    m_codec = QTextCodec::codecForName(encoding.toLatin1().constData());

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

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

 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());

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

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

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

-void SpellChecker::setUserDict(const QString& userDict)
+const QString &SpellChecker::displayText() const
 {
-    if (m_userDict != userDict) {
-        m_userDict = userDict;
-        emit userDictChanged();
+    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();
    }
 }
+
+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,17 +6,15 @@
 #include <QQuickTextDocument>
 #include <QSyntaxHighlighter>

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

-class SpellChecker : public QObject
+class SpellChecker : public QSyntaxHighlighter
 {
    Q_OBJECT
-    Q_PROPERTY(QString lang READ lang WRITE setLang NOTIFY langChanged)
-    Q_PROPERTY(QString userDict READ userDict WRITE setUserDict NOTIFY userDictChanged)
-
+    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)
 public:
    explicit SpellChecker(QObject *parent = nullptr);
    ~SpellChecker();
@@ -25,29 +23,34 @@ 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;

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

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

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

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

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

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

@@ -1,39 +0,0 @@
-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
-        }
-    }
-}
@@ -11,7 +11,6 @@ Item {
    implicitHeight: 56

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

    signal chatInfoButtonClicked()
@@ -28,20 +27,18 @@ Item {
        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: statusMenuButton
+        id: menuButton
        anchors.right: parent.right
        anchors.rightMargin: 8
        anchors.verticalCenter: parent.verticalCenter

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

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

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

        Loader {
@@ -99,7 +96,7 @@ Item {
            active: !!statusChatInfoToolBar.popupMenu
            onLoaded: {
                popupMenuSlot.item.closeHandler = function () {
-                    statusMenuButton.state = "default"
+                    menuButton.state = "default"
                }
            }
        }
@@ -1,10 +1,7 @@
 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

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

    property string categoryId: ""
-    property var model: []
-    property bool draggableItems: false
-
-    property alias statusChatListItems: statusChatListItems
+    property string selectedChatId: ""
+    property alias chatListItems: statusChatListItems

    property Component popupMenu

    property var filterFn
+    property var profileImageFn
+    property var chatNameFn

-    signal chatItemSelected(string categoryId, string id)
+    signal chatItemSelected(string id)
    signal chatItemUnmuted(string id)
-    signal chatItemReordered(string id, int from, int to)

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

-    DelegateModel {
-        id: delegateModel
-        model: statusChatList.model
-        delegate: Item {
-            id: draggable
-            width: statusChatListItem.width
-            height: statusChatListItem.height
-            property alias chatListItem: statusChatListItem
+    Repeater {
+        id: statusChatListItems
+        delegate: 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)
+                    return statusChatList.filterFn(model, statusChatList.categoryId)
                }
                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
-                    selected: model.active
-                    icon.color: model.color
-                    image.isIdenticon: model.isIdenticon
-                    image.source: model.icon
-
-                    sensor.cursorShape: dragSensor.cursorShape
-                    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.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,11 +1,8 @@
 import QtQuick 2.14
-import QtQml.Models 2.14
-import QtQuick.Controls 2.14 as QC
+import QtQuick.Controls 2.14

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

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

-    property StatusTooltipSettings categoryAddButtonToolTip: StatusTooltipSettings {
-        text: "Add channel inside category"
-    }
-    property StatusTooltipSettings categoryMenuButtonToolTip: StatusTooltipSettings {
-        text: "More"
-    }
-
-    property var model: []
+    property string selectedChatId: ""
    property bool showCategoryActionButtons: false
-    property bool showPopupMenu: true
+    property alias chatList: statusChatList.chatListItems
+    property alias categoryList: statusChatListCategories
    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 categoryId, string id)
+    signal chatItemSelected(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: {
@@ -53,7 +37,7 @@ Item {
        height: statusChatListAndCategories.height
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        onClicked: {
-            if (mouse.button === Qt.RightButton && showPopupMenu && !!statusChatListAndCategories.popupMenu) {
+            if (mouse.button === Qt.RightButton && !!statusChatListAndCategories.popupMenu) {
                popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6)
                return
            }
@@ -69,155 +53,34 @@ Item {
            StatusChatList {
                id: statusChatList
                anchors.horizontalCenter: parent.horizontalCenter
-                visible: statusChatList.model.count > 0
-                onChatItemSelected: statusChatListAndCategories.chatItemSelected(categoryId, id)
+                visible: !!chatListItems.model && chatListItems.count > 0
+                selectedChatId: statusChatListAndCategories.selectedChatId
+                onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
                onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
-                onChatItemReordered: statusChatListAndCategories.chatItemReordered(categoryId, id, from, to)
-                draggableItems: statusChatListAndCategories.draggableItems
-                model: statusChatListAndCategories.model
                filterFn: function (model) {
-                    return !model.isCategory
+                    return !!!model.categoryId
                }
                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
-                model: delegateModel
+
+                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
+                }
            }
        }
    }
@@ -7,21 +7,16 @@ 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
@@ -35,23 +30,18 @@ Column {
    StatusChatListCategoryItem {
        id: statusChatListCategoryItem
        title: statusChatListCategory.name
-        visible: model.isCategory
        opened: statusChatListCategory.opened
-        sensor.pressAndHoldInterval: 150

-        showMenuButton: showActionButtons && !!statusChatListCategory.popupMenu
-        highlighted: statusChatListCategory.dragged
-        sensor.onClicked: {
-            if (sensor.enabled) {
-                if (mouse.button === Qt.RightButton && showActionButtons && !!statusChatListCategory.popupMenu) {
-                    highlighted = true;
-                    popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6);
-                    return
-                }
-                statusChatListCategory.opened = !opened;
+        showMenuButton: !!statusChatListCategory.popupMenu
+
+        onClicked: {
+            if (mouse.button === Qt.RightButton && !!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
@@ -68,7 +58,7 @@ Column {
        visible: statusChatListCategory.opened
        categoryId: statusChatListCategory.categoryId
        filterFn: function (model) {
-            return !!model.parentItemId && model.parentItemId === statusChatList.categoryId
+            return !!model.categoryId && model.categoryId == statusChatList.categoryId
        }

        popupMenu: statusChatListCategory.chatListPopupMenu
@@ -23,12 +23,15 @@ 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

@@ -60,15 +63,7 @@ StatusListItem {
            icon.name: "chevron-down"
            icon.width: 18
            icon.rotation: statusChatListCategoryItem.opened ? 0 : 270
-            onPressed: {
-                sensor.enabled = false;
-            }
-            onClicked: {
-                statusChatListCategoryItem.toggleButtonClicked(mouse);
-            }
-            onReleased: {
-                sensor.enabled = true;
-            }
+            onClicked: statusChatListCategoryItem.toggleButtonClicked(mouse)
        }
    ]
 }
@@ -1,8 +1,4 @@
 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.Components 0.1
@@ -11,30 +7,19 @@ import StatusQ.Controls 0.1
 Rectangle {
    id: statusChatListItem

-    objectName: "chatItem"
-    property int originalOrder: -1
    property string chatId: ""
-    property string categoryId: ""
    property string name: ""
    property alias badge: statusBadge
    property bool hasUnreadMessages: false
-    property int notificationsCount: 0
+    property bool hasMention: false
    property bool muted: false
-    property StatusImageSettings image: StatusImageSettings {
-        width: 24
-        height: 24
-    }
+    property StatusImageSettings image: StatusImageSettings {}
    property StatusIconSettings icon: StatusIconSettings {
-        width: 24
-        height: 24
        color: Theme.palette.miscColor5
-        letterSize: 15
    }
    property int type: StatusChatListItem.Type.PublicChat
    property bool highlighted: false
    property bool selected: false
-    property bool dragged: false
-    property alias sensor: sensor

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

-        StatusSmartIdenticon {
+        Loader {
            id: identicon
            anchors.left: parent.left
            anchors.leftMargin: 8
            anchors.verticalCenter: parent.verticalCenter
-            image: statusChatListItem.image
-            icon: statusChatListItem.icon
-            name: statusChatListItem.name
+
+            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
+                }
+            }
        }

        StatusIcon {
@@ -95,30 +111,30 @@ Rectangle {
            width: 14
            visible: statusChatListItem.type !== StatusChatListItem.Type.OneToOneChat
            opacity: {
-                if (statusChatListItem.muted && !hoverHander.hovered && !statusChatListItem.highlighted) {
+                if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
                    return 0.4
                }
-                return statusChatListItem.hasUnreadMessages ||
-                        statusChatListItem.notificationsCount > 0 ||
-                        statusChatListItem.selected ||
-                        statusChatListItem.highlighted ||
-                        statusBadge.visible ||
-                        hoverHander.hovered ? 1.0 : 0.7
+                return statusChatListItem.hasMention || 
+                  statusChatListItem.hasUnreadMessages || 
+                  statusChatListItem.selected ||
+                  statusChatListItem.highlighted ||
+                  statusBadge.visible ||
+                  sensor.containsMouse ? 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"
+                    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"
                }
            }
        }
@@ -127,37 +143,48 @@ Rectangle {
            id: chatName
            anchors.left: statusIcon.visible ? statusIcon.right : identicon.right
            anchors.leftMargin: statusIcon.visible ? 1 : 8
-            anchors.right: mutedIcon.visible ? mutedIcon.left :
-                                               statusBadge.visible ? statusBadge.left : parent.right
+            anchors.right: statusBadge.visible ? statusBadge.left :
+                mutedIcon.visible ? mutedIcon.left : parent.right
            anchors.rightMargin: 6
            anchors.verticalCenter: parent.verticalCenter

-            text: (statusChatListItem.type === StatusChatListItem.Type.PublicChat &&
-                  !statusChatListItem.name.startsWith("#") ?
-                      "#" + statusChatListItem.name :
-                      statusChatListItem.name)
+            text: statusChatListItem.type === StatusChatListItem.Type.PublicChat &&
+                !statusChatListItem.name.startsWith("#") ?
+                "#" + statusChatListItem.name :
+                statusChatListItem.name
            elide: Text.ElideRight
            color: {
-                if (statusChatListItem.muted && !hoverHander.hovered && !statusChatListItem.highlighted) {
+                if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
                    return Theme.palette.directColor5
                }
-                return statusChatListItem.hasUnreadMessages ||
-                        statusChatListItem.notificationsCount > 0 ||
-                        statusChatListItem.selected ||
-                        statusChatListItem.highlighted ||
-                        hoverHander.hovered ||
-                        statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
+                return statusChatListItem.hasMention || 
+                  statusChatListItem.hasUnreadMessages ||
+                  statusChatListItem.selected ||
+                  statusChatListItem.highlighted ||
+                  sensor.containsMouse ||
+                  statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
            }
-            font.weight: !statusChatListItem.muted &&
-                         (statusChatListItem.hasUnreadMessages ||
-                          statusChatListItem.notificationsCount > 0 ||
-                          statusBadge.visible) ? Font.Bold : Font.Medium
+            font.weight: statusChatListItem.hasMention || 
+              statusChatListItem.hasUnreadMessages ||
+              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: statusBadge.visible ? statusBadge.left : parent.right
+            anchors.right: parent.right
            anchors.rightMargin: 8
            anchors.verticalCenter: parent.verticalCenter
            width: 14
@@ -168,7 +195,7 @@ Rectangle {
            MouseArea {
                id: mutedIconSensor
                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
+                cursorShape: Qt.PointingHandCursor 
                anchors.fill: parent
                onClicked: statusChatListItem.unmute()
            }
@@ -178,19 +205,5 @@ Rectangle {
                visible: mutedIconSensor.containsMouse
            }
        }
-
-        StatusBadge {
-            id: statusBadge
-
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.right: parent.right
-            anchors.rightMargin: 8
-
-            color: statusChatListItem.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
-            border.width: 4
-            border.color: color
-            value: statusChatListItem.notificationsCount
-            visible: statusChatListItem.notificationsCount > 0
-        }
    }
 }
@@ -14,8 +14,6 @@ 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
@@ -23,8 +21,6 @@ Rectangle {
    signal chatInfoButtonClicked()
    signal menuButtonClicked()
    signal notificationButtonClicked()
-    signal membersButtonClicked()
-    signal searchButtonClicked()

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

@@ -49,34 +44,6 @@ 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: "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: "Members"
-            tooltip.orientation: StatusToolTip.Orientation.Bottom
-            tooltip.y: parent.height + 12
-        }
-
        StatusFlatRoundButton {
            id: menuButton
            width: 32
@@ -85,40 +52,11 @@ Rectangle {
            type: StatusFlatRoundButton.Type.Secondary
            visible: !!statusChatToolBar.popupMenu

-            // initializing the tooltip
-            tooltip.visible: !!tooltip.text && menuButton.hovered && !popupMenuSlot.item.opened
-            tooltip.text: "More"
-            tooltip.orientation: StatusToolTip.Orientation.Bottom
-            tooltip.y: parent.height + 12
-
-            property bool showMoreMenu: false
            onClicked: {
-                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()
-            }
-
-            Loader {
-                id: popupMenuSlot
-                active: !!statusChatToolBar.popupMenu
+                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)
            }
        }

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

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

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

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

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

@@ -8,15 +8,12 @@ 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
@@ -24,77 +21,48 @@ Rectangle {

    color: Theme.palette.statusListItem.backgroundColor

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

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

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

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

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

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

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

-            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
-            }
+        StatusToolTip {
+            id: statusToolTip
        }
    }
 }
@@ -1,227 +0,0 @@
-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 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
-        active: 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; active: true}
-        },
-        State {
-            name: "COLLAPSED"
-            PropertyChanges {target: expandImage; icon: "chevron-down"}
-            PropertyChanges {target: statusExpandableItem; height: 82}
-            PropertyChanges {target: expandableRegion; active: false}
-        }
-    ]
-
-    transitions: [
-        Transition {
-            from: "COLLAPSED"
-            to: "EXPANDED"
-            NumberAnimation { properties: "height"; duration: 200 }
-        },
-        Transition {
-            from: "EXPANDED"
-            to: "COLLAPSED"
-            NumberAnimation { properties: "height"; duration: 200 }
-        }
-    ]
-}
@@ -5,7 +5,6 @@ import StatusQ.Core.Theme 0.1
 Rectangle {
    id: statusLetterIdenticon

-    property alias identiconText: identiconText
    property string name
    property int letterSize: 21

@@ -15,10 +14,7 @@ Rectangle {
    radius: width / 2

    StatusBaseText {
-        id: identiconText
-        text: ((statusLetterIdenticon.name.charAt(0) === "#")
-              || (statusLetterIdenticon.name.charAt(0) === "@") ?
-              statusLetterIdenticon.name.charAt(1) : statusLetterIdenticon.name.charAt(0)).toUpperCase()
+        text: (statusLetterIdenticon.name.charAt(0) == "#" ? statusLetterIdenticon.name.charAt(1) : statusLetterIdenticon.name.charAt(0)).toUpperCase()
        font.weight: Font.Bold
        font.pixelSize: statusLetterIdenticon.letterSize
        color: Qt.rgba(255, 255, 255, 0.7)
@@ -1,6 +1,4 @@
 import QtQuick 2.13
-import QtQuick.Controls 2.12
-import QtQuick.Layouts 1.12
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
@@ -9,110 +7,55 @@ import StatusQ.Controls 0.1
 Rectangle {
    id: statusListItem

-    property string itemId: ""
-    property string titleId: ""
+    implicitWidth: 448
+    implicitHeight: 64
+
+    enum Type {
+        Primary,
+        Secondary
+    }
+
+    color: {
+        if (sensor.containsMouse) {
+            return type === StatusListItem.Type.Primary ?
+                Theme.palette.baseColor2 :
+                Theme.palette.statusListItem.secondaryHoverBackgroundColor
+        }
+        return Theme.palette.statusListItem.backgroundColor
+    }
+
+    radius: 8
+
    property string title: ""
-    property string titleAsideText: ""
-    property bool titleIcon1Visible
-    property bool titleIcon2Visible
    property string subTitle: ""
-    property string tertiaryTitle: ""    
-    property string label: ""
    property real leftPadding: 16
    property real rightPadding: 16
-    property bool enabled: true
-    property int type: StatusListItem.Type.Primary
-    property list<Item> components
-
    property StatusIconSettings icon: StatusIconSettings {
-        height: isLetterIdenticon ? 40 : 20
-        width: isLetterIdenticon ? 40 : 20
+        height: 20
+        width: 20
        rotation: 0
-        isLetterIdenticon: false
-        letterSize: 21
-        color: isLetterIdenticon ? background.color : type === StatusListItem.Type.Danger ?
-            Theme.palette.dangerColor1 : Theme.palette.primaryColor1
        background: StatusIconBackgroundSettings {
            width: 40
            height: 40
-            color: {
-                if (sensor.containsMouse) {
-                    return type === StatusListItem.Type.Secondary ||
-                           type === StatusListItem.Type.Danger ? "transparent" :
-                           Theme.palette.primaryColor3
-                }
-                return type === StatusListItem.Type.Danger ?
-                    Theme.palette.dangerColor3 : Theme.palette.primaryColor3
-            }
+            color: sensor.containsMouse && type === StatusListItem.Type.Secondary ?
+                      "transparent" :
+                      Theme.palette.primaryColor3
        }
    }
    property StatusImageSettings image: StatusImageSettings {
        width: 40
        height: 40
-        isIdenticon: false
-    }
-    property StatusIconSettings titleIcon1: StatusIconSettings {
-        width: dummyImage.width
-        height: dummyImage.height
-        background: StatusIconBackgroundSettings {
-            width: 10
-            height: 10
-        }
-        // Only used to get implicit width and height from the actual image
-        property Image dummyImage: Image {
-            source: titleIcon1.name ? "../../assets/img/icons/" + titleIcon1.name + ".svg": ""
-            visible: false
-        }        
-    }
-    property StatusIconSettings titleIcon2: StatusIconSettings {
-        width: dummyImage.width
-        height: dummyImage.height
-        background: StatusIconBackgroundSettings {
-            width: 10
-            height: 10
-        }
-        // Only used to get implicit width and height from the actual image
-        property Image dummyImage: Image {
-            source: titleIcon2.name ? "../../assets/img/icons/" + titleIcon2.name + ".svg": ""
-            visible: false
-        }
    }
+    property string label: ""
+
+    property int type: StatusListItem.Type.Primary

    property alias sensor: sensor
-    property alias badge: statusListItemBadge
-    property alias statusListItemIcon: iconOrImage
    property alias statusListItemTitle: statusListItemTitle
-    property alias statusListItemTitleAside: statusListItemTitleAsideText
-    property alias statusListItemTitleArea: statusListItemTitleArea
    property alias statusListItemSubTitle: statusListItemSubTitle
-    property alias statusListItemTertiaryTitle: statusListItemTertiaryTitle
    property alias statusListItemComponentsSlot: statusListItemComponentsSlot

-    signal clicked(string itemId)
-    signal titleClicked(string titleId)
-
-    enum Type {
-        Primary,
-        Secondary,
-        Danger
-    }
-
-    implicitWidth: 448
-    implicitHeight: Math.max(64, statusListItemTitleArea.height + 16)
-    color: {
-        if (sensor.containsMouse) {
-            switch(type) {
-                case StatusListItem.Type.Primary:
-                    return Theme.palette.baseColor2
-                case StatusListItem.Type.Secondary:
-                    return Theme.palette.statusListItem.secondaryHoverBackgroundColor
-                case StatusListItem.Type.Danger:
-                    return Theme.palette.dangerColor3
-            }
-        }
-        return Theme.palette.statusListItem.backgroundColor
-    }
-    radius: 8
+    property list<Item> components

    onComponentsChanged: {
        if (components.length) {
@@ -125,154 +68,72 @@ Rectangle {
    MouseArea {
        id: sensor

-        enabled: statusListItem.enabled
        anchors.fill: parent
        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        hoverEnabled: true
-        preventStealing: true

-        onClicked: {
-            statusListItem.clicked(statusListItem.itemId)
-        }
-
-        StatusSmartIdenticon {
+        Loader {
            id: iconOrImage
            anchors.left: parent.left
            anchors.leftMargin: statusListItem.leftPadding
-            anchors.top: parent.top
-            anchors.topMargin: 12
-            image: statusListItem.image
-            icon: statusListItem.icon
-            name: statusListItem.title
-            active: statusListItem.icon.isLetterIdenticon ||
-                    !!statusListItem.icon.name ||
-                    !!statusListItem.image.source.toString()
-            badge.border.color: statusListItem.color
+            anchors.verticalCenter: parent.verticalCenter
+            sourceComponent: !!statusListItem.icon.name ? statusRoundedIcon : statusRoundedImage
+            active: !!statusListItem.icon.name || !!statusListItem.image.source.toString()
+        }
+
+        Component {
+            id: statusRoundedIcon
+            StatusRoundIcon {
+                icon.width: statusListItem.icon.width
+                icon.height: statusListItem.icon.height
+                icon.name: statusListItem.icon.name
+                icon.rotation: statusListItem.icon.rotation
+                color: statusListItem.icon.background.color
+                width: statusListItem.icon.background.width
+                height: statusListItem.icon.background.height
+            }
+        }
+
+        Component {
+            id: statusRoundedImage
+            StatusRoundedImage {
+                image.source: statusListItem.image.source
+                image.height: statusListItem.image.height
+                image.width: statusListItem.image.width
+            }
        }

        Item {
-            id: statusListItemTitleArea
            anchors.left: iconOrImage.active ? iconOrImage.right : parent.left
-            anchors.right: statusListItemLabel.visible ?
-                statusListItemLabel.left : statusListItemComponentsSlot.left
            anchors.leftMargin: statusListItem.leftPadding
-            anchors.rightMargin: statusListItem.rightPadding
            anchors.verticalCenter: parent.verticalCenter
-            height: childrenRect.height
+            height: statusListItemTitle.height + (statusListItemSubTitle.visible ? statusListItemSubTitle.height : 0)

            StatusBaseText {
                id: statusListItemTitle
                text: statusListItem.title
                font.pixelSize: 15
-                height: visible ? contentHeight : 0
-                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                anchors.left: parent.left
-                anchors.right: !statusListItem.titleAsideText && !statusListItem.titleIcon1Visible && !statusListItem.titleIcon2Visible
-                               ? parent.right : undefined
                color: {
-                  if (!statusListItem.enabled) {
-                    return Theme.palette.baseColor1
+                  if (statusListItem.type === StatusListItem.Type.Primary) {
+                      return Theme.palette.directColor1
                  }
-                  switch (statusListItem.type) {
-                      case StatusListItem.Type.Primary:
-                          return Theme.palette.directColor1
-                      case StatusListItem.Type.Secondary:
-                          return Theme.palette.primaryColor1
-                      case StatusListItem.Type.Danger:
-                          return Theme.palette.dangerColor1
-                  }
-                }
-
-                MouseArea {
-                    anchors.fill: parent
-                    cursorShape: containsMouse? Qt.PointingHandCursor : Qt.ArrowCursor
-                    hoverEnabled: true
-                    propagateComposedEvents: true
-                    onClicked: {
-                        statusListItem.titleClicked(statusListItem.titleId)
-                        mouse.accepted = false
-                    }
+                  return Theme.palette.primaryColor1
                }
            }

-            StatusBaseText {
-                id: statusListItemTitleAsideText
-                anchors.left: statusListItemTitle.right
-                anchors.leftMargin: 4
-                anchors.verticalCenter: statusListItemTitle.verticalCenter
-                text: statusListItem.titleAsideText
-                font.pixelSize: 10
-                color: Theme.palette.baseColor1
-                visible: !!statusListItem.titleAsideText
-            }
-
-            Row {
-                id: titleIconsRow
-                spacing: 4
-                anchors.left: !statusListItem.titleAsideText ? statusListItemTitle.right : statusListItemTitleAsideText.right
-                anchors.verticalCenter: statusListItemTitle.verticalCenter
-                anchors.leftMargin: titleIconsRow.spacing
-
-                StatusRoundIcon {
-                    visible: statusListItem.titleIcon1Visible
-                    icon.name: statusListItem.titleIcon1.name
-                    icon.width: statusListItem.titleIcon1.width
-                    icon.height: statusListItem.titleIcon1.height
-                    icon.rotation: statusListItem.titleIcon1.rotation
-                    icon.color: statusListItem.titleIcon1.color
-                    icon.background.color: statusListItem.titleIcon1.background.color
-                    icon.background.width: statusListItem.titleIcon1.background.width
-                    icon.background.height: statusListItem.titleIcon1.background.height
-                }
-
-                StatusRoundIcon {
-                    visible: statusListItem.titleIcon2Visible
-                    icon.name: statusListItem.titleIcon2.name
-                    icon.width: statusListItem.titleIcon2.width
-                    icon.height: statusListItem.titleIcon2.height
-                    icon.rotation: statusListItem.titleIcon2.rotation
-                    icon.color: statusListItem.titleIcon2.color
-                    icon.background.color: statusListItem.titleIcon2.background.color
-                    icon.background.width: statusListItem.titleIcon2.background.width
-                    icon.background.height: statusListItem.titleIcon2.background.height
-                }
-             }
-
            StatusBaseText {
                id: statusListItemSubTitle
                anchors.top: statusListItemTitle.bottom
-                width: parent.width
+
                text: statusListItem.subTitle
                font.pixelSize: 15
-                color: !statusListItem.enabled || !statusListItem.tertiaryTitle ? Theme.palette.baseColor1 : Theme.palette.directColor1
-                height: visible ? contentHeight : 0
-                visible: !!statusListItem.subTitle
-                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-            }
-
-            StatusBaseText {
-                id: statusListItemTertiaryTitle
-                anchors.top: statusListItemSubTitle.bottom
-                width: parent.width
-                height: visible ? contentHeight : 0
-                text: statusListItem.tertiaryTitle
                color: Theme.palette.baseColor1
-                font.pixelSize: 13
-                visible: !!statusListItem.tertiaryTitle
-                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-            }
-
-            StatusListItemBadge {
-                id: statusListItemBadge
-                anchors.top: statusListItemTertiaryTitle.bottom
-                width: contentItem.width
-                implicitHeight: visible ? 22 : 0
+                visible: !!statusListItem.subTitle
            }
        }

        StatusBaseText {
-            id: statusListItemLabel
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: statusListItemComponentsSlot.left
            anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0
@@ -1,80 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.12
-import QtQuick.Layouts 1.12
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-Control {
-    id: root
-    implicitWidth: contentItem.width
-    implicitHeight: visible ? 22 : 0
-    visible: !!root.primaryText
-
-    property string primaryText: ""
-    property string secondaryText: ""
-
-    property StatusImageSettings image: StatusImageSettings {
-        height: 16
-        width: 16
-        isIdenticon: false
-    }
-    property StatusIconSettings icon: StatusIconSettings {
-        height: 16
-        width: 16
-        isLetterIdenticon: false
-        background: StatusIconBackgroundSettings {}
-        color: "transparent"
-    }
-
-    background: Rectangle {
-        anchors.fill: parent
-        color: "transparent"
-        radius: 11
-        border.color: Theme.palette.directColor7
-    }
-
-    contentItem: Item {
-        id: contentItem
-        width: (contentItemRow.width + 10)
-        height: parent.height
-        RowLayout {
-            id: contentItemRow
-            anchors.centerIn: parent
-            anchors.horizontalCenterOffset: -spacing
-            spacing: 2
-            StatusRoundedImage {
-                implicitWidth: root.image.width
-                implicitHeight: root.image.height
-                visible: !root.icon.isLetterIdenticon
-                image.source: root.image.source
-                border.color: Theme.palette.baseColor1
-                border.width: root.image.isIdenticon ? 1 : 0
-            }
-            StatusLetterIdenticon {
-                implicitWidth: root.icon.width
-                implicitHeight: root.icon.width
-                letterSize: 11
-                visible: root.icon.isLetterIdenticon
-                color: root.icon.color
-                name: root.primaryText
-            }
-            StatusBaseText {
-                font.weight: Font.Medium
-                color: Theme.palette.baseColor1
-                text: root.primaryText
-            }
-            StatusIcon {
-                Layout.alignment: Qt.AlignVCenter
-                visible: !!root.secondaryText
-                color: Theme.palette.baseColor1
-                icon: "next"
-            }
-            StatusBaseText {
-                font.weight: Font.Medium
-                color: Theme.palette.baseColor1
-                visible: !!root.secondaryText
-                text: root.secondaryText
-            }
-        }
-    }
-}
@@ -1,76 +0,0 @@
-import QtQuick 2.0
-import StatusQ.Core.Theme 0.1
-import StatusQ.Core 0.1
-
-
-StatusListItem {
-    id: root
-
-    property string nickName: ""
-    property string userName: ""
-    property string chatKey: ""
-    property bool isMutualContact: false
-    property var trustIndicator: StatusMemberListItem.TrustedType.None
-    property bool isOnline: false
-
-    enum TrustedType {
-        None, //0
-        Verified, //1
-        Untrustworthy //2
-    }
-
-    // Subtitle composition:
-    function composeSubtitile() {
-        var compose = ""
-        if(root.userName !== "")
-            compose = "(" + root.userName + ")"
-
-        if(compose !== "" && root.chatKey !== "")
-            // Composition
-            compose += " • " + composeShortKeyChat(root.chatKey)
-
-        else if(root.chatKey !== "")
-            compose = composeShortKeyChat(root.chatKey)
-
-        return compose
-    }
-
-    // Short keychat composition:
-    function composeShortKeyChat(chatKey) {
-        return chatKey.substring(0, 5) + "..." + chatKey.substring(chatKey.length - 3)
-    }
-
-    // root object settings:
-    title: root.nickName
-    titleIcon1Visible: root.isMutualContact
-    titleIcon2Visible: root.trustIndicator !== StatusMemberListItem.TrustedType.None
-    subTitle: composeSubtitile()
-    statusListItemSubTitle.font.pixelSize: 10
-    icon.isLetterIdenticon: !root.image.source.toString()
-    statusListItemIcon.badge.visible: true
-    statusListItemIcon.badge.color: root.isOnline ? Theme.palette.successColor1 : Theme.palette.baseColor1
-    color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.baseColor4
-
-    // Default sizes/positions by design
-    implicitWidth: 256
-    implicitHeight: Math.max(56, statusListItemTitleArea.height + leftPadding)
-    leftPadding: 8
-    image.width: 32
-    image.height: 32
-    icon.width: 32
-    icon.height: 32
-    statusListItemIcon.anchors.verticalCenter: sensor.verticalCenter
-    statusListItemIcon.anchors.top: undefined
-    statusListItemIcon.badge.border.width: 2
-    statusListItemIcon.badge.implicitHeight: 12 // 8 px + 2 px * 2 borders
-    statusListItemIcon.badge.implicitWidth: 12 // 8 px + 2 px * 2 borders
-
-    // Trusted type icons definition:
-    titleIcon1.name: "tiny/tiny-contact"
-    titleIcon1.color: Theme.palette.indirectColor1
-    titleIcon1.background.color: Theme.palette.primaryColor1
-    // None and Untrustworthy types, same aspect (Icon will not be visible in case of None type):
-    titleIcon2.name: trustIndicator === StatusMemberListItem.TrustedType.Verified ? "tiny/tiny-checkmark" : "tiny/subtract"
-    titleIcon2.color: Theme.palette.indirectColor1
-    titleIcon2.background.color: trustIndicator === StatusMemberListItem.TrustedType.Verified ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1
-}
@@ -1,211 +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 "./private/statusMessage"
-
-Rectangle {
-    id: statusMessage
-
-    enum ContentType {
-        Unknown = 0,
-        Text = 1,
-        Emoji = 2,
-        Image = 3,
-        Sticker = 4,
-        Audio = 5,
-        Transaction = 6,
-        Invitation = 7
-    }
-
-    enum ContactType {
-        STANDARD = 0,
-        RENAME = 1,
-        CONTACT = 2,
-        VERIFIED = 3,
-        UNTRUSTWORTHY = 4
-    }
-
-    property alias messageHeader: messageHeader
-    property alias quickActions:quickActionsPanel.quickActions
-    property alias statusChatInput: editComponent.inputComponent
-    property alias linksComponent: linksLoader.sourceComponent
-    property alias footerComponent: footer.sourceComponent
-    property alias timestamp: messageHeader.timestamp
-
-    property string resendText: ""
-    property string cancelButtonText: ""
-    property string saveButtonText: ""
-    property string loadingImageText: ""
-    property string errorLoadingImageText: ""
-    property string audioMessageInfoText: ""
-    property string pinnedMsgInfoText: ""
-
-    property bool isAppWindowActive: false
-    property bool editMode: false
-    property bool isAReply: false
-    property StatusMessageDetails messageDetails: StatusMessageDetails {}
-    property StatusMessageDetails replyDetails: StatusMessageDetails {}
-
-    signal profilePictureClicked()
-    signal senderNameClicked()
-    signal editCompleted(var newMsgText)
-    signal replyProfileClicked()
-    signal stickerLoaded()
-    signal imageClicked(var imageSource)
-    signal resendClicked()
-
-    height: childrenRect.height
-    color: hoverHandler.hovered ? (messageDetails.hasMention ? Theme.palette.mentionColor3 : messageDetails.isPinned ? Theme.palette.pinColor2 :  Theme.palette.baseColor2) : messageDetails.hasMention  ? Theme.palette.mentionColor4 : messageDetails.isPinned ? Theme.palette.pinColor3 : "transparent"
-
-    HoverHandler {
-        id: hoverHandler
-    }
-
-    ColumnLayout {
-        id: messageLayout
-        width: parent.width
-        StatusMessageReply {
-            Layout.fillWidth: true
-            visible: isAReply
-            replyDetails: statusMessage.replyDetails
-            onReplyProfileClicked: statusMessage.replyProfileClicked()
-            audioMessageInfoText: statusMessage.audioMessageInfoText
-        }
-        RowLayout {
-            spacing: 8
-            Layout.fillWidth: true
-            StatusSmartIdenticon {
-                id: profileImage
-                Layout.alignment: Qt.AlignTop
-                Layout.topMargin: 10
-                Layout.leftMargin: 16
-                image: messageDetails.profileImage
-                name: messageHeader.displayName
-                MouseArea {
-                    cursorShape: Qt.PointingHandCursor
-                    acceptedButtons: Qt.LeftButton | Qt.RightButton
-                    anchors.fill: parent
-                    onClicked: statusMessage.profilePictureClicked()
-                }
-            }
-            Column {
-                spacing: 4
-                Layout.alignment: Qt.AlignTop
-                Layout.topMargin: 10
-                Layout.fillWidth: true
-                StatusPinMessageDetails {
-                    visible: messageDetails.isPinned && !editMode
-                    pinnedMsgInfoText: statusMessage.pinnedMsgInfoText
-                    pinnedBy: messageDetails.pinnedBy
-                }
-                StatusMessageHeader {
-                    id: messageHeader
-                    width: parent.width
-                    displayName: messageDetails.displayName
-                    secondaryName: messageDetails.secondaryName
-                    tertiaryDetail: messageDetails.chatID
-                    icon1.name: messageDetails.contactType === StatusMessage.ContactType.CONTACT ? "tiny/tiny-contact" : ""
-                    icon2.name: messageDetails.contactType === StatusMessage.ContactType.VERIFIED ? "tiny/tiny-checkmark" :
-                                messageDetails.contactType === StatusMessage.ContactType.UNTRUSTWORTHY ? "tiny/subtract": ""
-                    icon2.background.color:  messageDetails.contactType === StatusMessage.ContactType.UNTRUSTWORTHY ? Theme.palette.dangerColor1 : Theme.palette.primaryColor1
-                    icon2.color: Theme.palette.indirectColor1
-                    resendText: statusMessage.resendText
-                    showResendButton: messageDetails.hasExpired && messageDetails.amISender
-                    onClicked: statusMessage.senderNameClicked()
-                    onResendClicked: statusMessage.resendClicked()
-                    visible: !editMode
-                }
-                Loader {
-                    active: !editMode && !!messageDetails.messageText
-                    width: parent.width
-                    visible: active
-                    sourceComponent: StatusTextMessage {
-                        width: parent.width
-                        textField.text: messageDetails.messageText
-                    }
-                }
-                Loader {
-                    active: messageDetails.contentType === StatusMessage.ContentType.Image && !editMode
-                    visible: active
-                    sourceComponent: StatusImageMessage {
-                        source: messageDetails.contentType === StatusMessage.ContentType.Image ? messageDetails.messageContent : ""
-                        onClicked: statusMessage.imageClicked()
-                        shapeType: messageDetails.amISender ? StatusImageMessage.ShapeType.RIGHT_ROUNDED : StatusImageMessage.ShapeType.LEFT_ROUNDED
-                    }
-                }
-                StatusSticker {
-                    visible: messageDetails.contentType === StatusMessage.ContentType.Sticker && !editMode
-                    image.source: messageDetails.messageContent
-                    onLoaded: statusMessage.stickerLoaded()
-                }
-                Loader {
-                    active: messageDetails.contentType === StatusMessage.ContentType.Audio && !editMode
-                    visible: active
-                    sourceComponent: StatusAudioMessage {
-                        audioSource: messageDetails.messageContent
-                        hovered: hoverHandler.hovered
-                        audioMessageInfoText: statusMessage.audioMessageInfoText
-                    }
-                }
-                Loader {
-                    id: linksLoader
-                    active: !!linksLoader.sourceComponent
-                    visible: active
-                }
-                Loader {
-                    id: transactionBubbleLoader
-                    active: messageDetails.contentType === StatusMessage.ContentType.Transaction && !editMode
-                    visible: active
-                }
-                Loader {
-                    id: invitationBubbleLoader
-                    active: messageDetails.contentType === StatusMessage.ContentType.Invitation && !editMode
-                    visible: active
-                }
-                StatusEditMessage {
-                    id: editComponent
-                    width: parent.width
-                    msgText: messageDetails.messageText
-                    visible: editMode
-                    saveButtonText: statusMessage.saveButtonText
-                    cancelButtonText: statusMessage.cancelButtonText
-                    onCancelEditClicked: editMode = false
-                    onEditCompleted: {
-                        editMode = false
-                        statusMessage.editCompleted(newMsgText)
-                    }
-                }
-                StatusBaseText {
-                    id: retryLbl
-                    color: Theme.palette.dangerColor1
-                    text: statusMessage.resendText
-                    font.pixelSize: 12
-                    visible: messageDetails.hasExpired && messageDetails.amISender && !messageDetails.timestamp && !editMode
-                    MouseArea {
-                        cursorShape: Qt.PointingHandCursor
-                        anchors.fill: parent
-                        onClicked: statusMessage.resendClicked()
-                    }
-                }
-                Loader {
-                    id: footer
-                    active: sourceComponent && !editMode
-                    visible: active
-                }
-            }
-        }
-    }
-
-    StatusMessageQuickActions {
-        id: quickActionsPanel
-        anchors.right: parent.right
-        anchors.rightMargin: 20
-        anchors.top: parent.top
-        anchors.topMargin: -8
-        visible: hoverHandler.hovered && !editMode
-    }
-}
@@ -1,28 +0,0 @@
-import QtQuick 2.13
-
-import StatusQ.Core 0.1
-
-QtObject {
-    id: msgDetails
-
-    property bool amISender: false
-    property string displayName: ""
-    property string secondaryName: ""
-    property string chatID: ""
-    property StatusImageSettings profileImage: StatusImageSettings {
-        width: 40
-        height: 40
-    }
-    property bool isEdited: false
-    property string messageText: ""
-    property int contentType: 0
-    property string messageContent: ""
-    property int contactType: 0
-    property bool hasMention: false
-    property bool isPinned: false
-    property string pinnedBy: ""
-    property bool hasExpired: false
-    property string timestamp: ""
-}
-
-
@@ -6,6 +6,7 @@ import StatusQ.Components 0.1
 StatusListItem {
    id: statusNavigationListItem

+    signal clicked(var mouse)
    property bool selected: false
    property alias badge: statusBadge

@@ -16,7 +17,6 @@ StatusListItem {
    icon.background.height: 20
    icon.background.color: "transparent"

-    statusListItemIcon.anchors.topMargin: 14

    color: {
        if (selected) {
@@ -9,7 +9,6 @@ Rectangle {
        width: 24
        height: 24
        rotation: 0
-        color: Theme.palette.primaryColor1
        background: StatusIconBackgroundSettings {
            width: 40
            height: 40
@@ -30,7 +29,7 @@ Rectangle {
        width: statusRoundedIcon.icon.width
        height: statusRoundedIcon.icon.height

-        color: statusRoundedIcon.icon.color
+        color: Theme.palette.primaryColor1
        icon: statusRoundedIcon.icon.name
        rotation: statusRoundedIcon.icon.rotation
    }
@@ -1,93 +0,0 @@
-import QtQuick 2.13
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-Loader {
-    id: statusSmartIdenticon
-
-    property string name: ""
-
-    // Badge color properties must be set if badgeItem.visible = true
-    property alias badge: statusBadge
-
-    property StatusIconSettings icon: StatusIconSettings {
-        width: 40
-        height: 40
-    }
-
-    property StatusImageSettings image: StatusImageSettings {
-        width: 40
-        height: 40
-    }
-
-    sourceComponent: statusSmartIdenticon.icon.isLetterIdenticon ? letterIdenticon :
-                     !!statusSmartIdenticon.image.source.toString() ? roundedImage :
-                     !!statusSmartIdenticon.icon.name.toString() ? roundedIcon : letterIdenticon
-
-    Component {
-        id: roundedImage
-        Item {
-            width: statusSmartIdenticon.image.width
-            height: statusSmartIdenticon.image.height
-            StatusRoundedImage {
-                id: statusRoundImage
-                width: parent.width
-                height: parent.height
-                image.source: statusSmartIdenticon.image.source
-                showLoadingIndicator: true
-                border.width: statusSmartIdenticon.image.isIdenticon ? 1 : 0
-                border.color: Theme.palette.directColor7
-                color: statusSmartIdenticon.image.isIdenticon ?
-                           Theme.palette.statusRoundedImage.backgroundColor :
-                           "transparent"
-            }
-            Loader {
-                anchors.centerIn: parent
-                active: statusRoundImage.image.status === Image.Error
-                sourceComponent: letterIdenticon
-                onLoaded: {
-                    item.color = Theme.palette.miscColor5
-                    item.width = statusSmartIdenticon.image.width
-                    item.height = statusSmartIdenticon.image.height
-                }
-            }
-        }
-    }
-
-    Component {
-        id: roundedIcon
-        StatusRoundIcon {
-            icon.background.width: statusSmartIdenticon.icon.background.width
-            icon.background.height: statusSmartIdenticon.icon.background.height
-            icon.background.color: statusSmartIdenticon.icon.background.color
-            icon.width: statusSmartIdenticon.icon.width
-            icon.height: statusSmartIdenticon.icon.height
-            icon.name: statusSmartIdenticon.icon.name
-            icon.rotation: statusSmartIdenticon.icon.rotation
-            icon.color: statusSmartIdenticon.icon.color
-        }
-    }
-
-    Component {
-        id: letterIdenticon
-        StatusLetterIdenticon {
-            width: statusSmartIdenticon.icon.width
-            height: statusSmartIdenticon.icon.height
-            color: statusSmartIdenticon.icon.color
-            name: statusSmartIdenticon.name
-            letterSize: statusSmartIdenticon.icon.letterSize
-        }
-    }
-
-    // State component
-    StatusBadge {
-        id: statusBadge
-        visible: false
-        anchors.bottom: statusSmartIdenticon.bottom
-        anchors.right: statusSmartIdenticon.right
-        border.width: 3
-        implicitHeight: 15
-        implicitWidth: 15
-        z: 100
-    }
-}
@@ -1,126 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Layouts 1.12
-import QtQuick.Controls 2.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-Item {
-    id: root
-
-    implicitWidth: 448
-    implicitHeight: 44
-
-    property alias textEdit: edit
-    property alias text: edit.text
-    property string warningText: ""
-    property string toLabelText: ""
-    property int nameCountLimit: 5
-    property ListModel namesModel: ListModel { }
-
-    function find(model, criteria) {
-      for (var i = 0; i < model.count; ++i) if (criteria(model.get(i))) return model.get(i);
-      return null;
-    }
-
-    function insertTag(name, id) {
-        if (!find(namesModel, function(item) { return item.publicId === id }) && namesModel.count < root.nameCountLimit) {
-            namesModel.insert(namesModel.count, {"name": name, "publicId": id});
-            edit.clear();
-        }
-    }
-
-    Rectangle {
-        anchors.fill: parent
-        radius: 8
-        color: Theme.palette.baseColor2
-
-        RowLayout {
-            anchors.fill: parent
-            anchors.leftMargin: 16
-            anchors.rightMargin: 16
-            spacing: 8
-            StatusBaseText {
-                Layout.preferredWidth: 22
-                Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
-                color: Theme.palette.baseColor1
-                text: root.toLabelText
-            }
-
-            ListView {
-                id: namesList
-                Layout.preferredWidth: (count >= 5) ? (parent.width - warningTextLabel.width - 30) : childrenRect.width
-                implicitHeight: 30
-                visible: (count > 0)
-                Layout.alignment: Qt.AlignVCenter
-                model: namesModel
-                orientation: ListView.Horizontal
-                spacing: 8
-                clip: true
-                onWidthChanged: {
-                    positionViewAtEnd();
-                }
-
-                delegate: Rectangle {
-                    id: nameDelegate
-                    width: (nameText.contentWidth + 34)
-                    height: 30
-                    color: mouseArea.containsMouse ? Theme.palette.miscColor1 : Theme.palette.primaryColor1
-                    radius: 8
-                    StatusBaseText {
-                        id: nameText
-                        anchors.left: parent.left
-                        anchors.leftMargin: 8
-                        anchors.verticalCenter: parent.verticalCenter
-                        color: Theme.palette.indirectColor1
-                        text: name
-                    }
-                    StatusIcon {
-                        anchors.left: nameText.right
-                        anchors.verticalCenter: parent.verticalCenter
-                        color: Theme.palette.indirectColor1
-                        icon: "close"
-                    }
-                    MouseArea {
-                        id: mouseArea
-                        anchors.fill: parent
-                        hoverEnabled: true
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: {
-                            namesModel.remove(index, 1);
-                        }
-                    }
-                }
-            }
-
-            TextEdit {
-                id: edit
-                Layout.fillWidth: true
-                Layout.preferredHeight: 44
-                verticalAlignment: Text.AlignVCenter
-                visible: (namesModel.count < 5)
-                enabled: visible
-                focus: true
-                font.pixelSize: 15
-                font.family: Theme.palette.baseFont.name
-                color: Theme.palette.directColor1
-                Keys.onPressed: {
-                    if ((event.key === Qt.Key_Backspace || event.key === Qt.Key_Escape)
-                         && getText(cursorPosition, (cursorPosition-1)) === "") {
-                        namesModel.remove((namesList.count-1), 1);
-                    }
-                }
-            }
-
-            StatusBaseText {
-                id: warningTextLabel
-                visible: (namesModel.count === 5)
-                Layout.preferredWidth: 120
-                Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-                font.pixelSize: 10
-                color: Theme.palette.dangerColor1
-                text: root.warningText
-            }
-        }
-    }
-}
@@ -1,143 +0,0 @@
-import QtQuick 2.3
-import QtMultimedia 5.14
-import QtQuick.Layouts 1.14
-
-import StatusQ.Controls 0.1
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-// To-do update as per latest design -> Audio graphs. Also the player should ideally be in the BE?
-Rectangle {
-    id: audioChatMessage
-
-    property string audioMessageInfoText: ""
-    property bool isPreview: false
-    property bool hovered: false
-    property string audioSource: ""
-
-    width: 320
-    height: 32
-    radius: 20
-
-    color: hovered ? Theme.palette.directColor8 : Theme.palette.baseColor2
-
-    Audio {
-        id: audioMessage
-        source: audioSource
-        notifyInterval: 150
-    }
-
-    RowLayout {
-        id: preview
-        visible: isPreview
-        spacing: 5
-        anchors.centerIn: parent
-        StatusIcon {
-            id: icon
-            Layout.alignment: Qt.AlignVCenter
-            Layout.preferredWidth: 14
-            Layout.preferredHeight: 14
-            icon: "audio"
-            color: Theme.palette.baseColor1
-        }
-        StatusBaseText {
-            Layout.alignment: Qt.AlignVCenter
-            color: Theme.palette.baseColor1
-            text: audioMessageInfoText
-            font.pixelSize: 13
-        }
-    }
-
-    StatusFlatRoundButton {
-        id: playButton
-        width: 15
-        height: 15
-        anchors.left: parent.left
-        anchors.leftMargin: 16
-        anchors.verticalCenter: parent.verticalCenter
-        visible: !isPreview
-
-        type: StatusFlatRoundButton.Type.Tertiary
-        color: "transparent"
-        icon.name: audioMessage.playbackState == Audio.PlayingState ? "pause-filled" : "play-filled"
-        icon.color: Theme.palette.directColor1
-
-        onClicked: {
-            if(audioMessage.playbackState === Audio.PlayingState){
-                audioMessage.pause();
-            } else {
-                audioMessage.play();
-            }
-
-        }
-    }
-    
-    Rectangle {
-        height: 2
-        width: 240
-        color: Theme.palette.directColor5
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.left: playButton.right
-        anchors.leftMargin: 10
-        visible: !isPreview
-        Rectangle {
-            id: progress
-            height: 2
-            width: {
-                if(audioMessage.duration === 0) return 0;
-                if(audioMessage.playbackState === Audio.StoppedState) return 0;
-                return parent.width * audioMessage.position / audioMessage.duration;
-            }
-            color: Theme.palette.directColor5
-            anchors.verticalCenter: parent.verticalCenter
-        }
-
-        Rectangle {
-            id: handle
-            width: 10
-            height: 10
-            color: Theme.palette.directColor1
-            radius: 10
-            anchors.verticalCenter: parent.verticalCenter
-            x: progress.width
-            state: "default"
-
-            states: State {
-                name: "pressed"
-                when: handleMouseArea.pressed
-                PropertyChanges {
-                    target: handle;
-                    scale: 1.2
-                }
-            }
-            transitions: Transition {
-                NumberAnimation {
-                    properties: "scale";
-                    duration: 100;
-                    easing.type: Easing.InOutQuad
-                }
-            }
-
-            MouseArea {
-                id: handleMouseArea
-                cursorShape: Qt.PointingHandCursor
-                anchors.fill: parent
-                drag.target: parent
-                drag.axis: Drag.XAxis
-                drag.minimumX: 0
-                drag.maximumX: parent.parent.width
-                onPressed: {
-                    handle.state = "pressed"
-                    if(audioMessage.playbackState === Audio.PlayingState) {
-                        audioMessage.pause();
-                    }
-                }
-                onReleased: {
-                    handle.state = "default"
-                    audioMessage.seek(audioMessage.duration * handle.x / parent.parent.width)
-                    audioMessage.play()
-                }
-            }
-        }
-    }
-}
@@ -1,51 +0,0 @@
-import QtQuick 2.3
-import QtQuick.Layouts 1.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-
-Item {
-    id: editText
-
-    property alias inputComponent: chatInputLoader.sourceComponent
-
-    property string cancelButtonText: ""
-    property string saveButtonText: ""
-    property string msgText: ""
-
-    signal cancelEditClicked()
-    signal editCompleted(var newMsgText)
-
-    height: childrenRect.height
-
-    ColumnLayout {
-        spacing: 4
-        Loader {
-            id: chatInputLoader
-            // To-Do: Move to StatusChatInput once its moved to StatusQ
-            sourceComponent: StatusInput {
-                width: editText.width
-                input.placeholderText: ""
-                input.text: msgText
-                input.implicitHeight: 40
-            }
-        }
-        RowLayout {
-            spacing: 4
-            StatusFlatButton {
-                id: cancelBtn
-                text: cancelButtonText
-                size: StatusBaseButton.Size.Small
-                onClicked: cancelEditClicked()
-            }
-            StatusButton {
-                id: saveBtn
-                text: saveButtonText
-                size: StatusBaseButton.Size.Small
-                enabled: chatInputLoader.item.input.text.trim().length > 0
-                onClicked: editCompleted(chatInputLoader.item.input.text)
-            }
-        }
-    }
-}
@@ -1,114 +0,0 @@
-import QtQuick 2.3
-import QtGraphicalEffects 1.13
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-Item {
-    id: imageContainer
-
-    enum ShapeType {
-        ROUNDED = 0,
-        LEFT_ROUNDED = 1,
-        RIGHT_ROUNDED = 2
-    }
-
-    property alias imageAlias: imageMessage
-
-    property bool isAppWindowActive: false
-    property url source: ""
-    property bool allCornersRounded: false
-    property bool isLeftCorner: true
-    property int imageWidth: 350
-    property int shapeType: -1
-
-    property string loadingImageText: ""
-    property string errorLoadingImageText: ""
-
-    signal clicked(var image, var mouse)
-
-    width: loadingImage.visible ? loadingImage.width : imageMessage.width
-    height: loadingImage.visible ? loadingImage.height : imageMessage.paintedHeight
-
-    QtObject {
-        id: _internal
-        property bool isAnimated: !!source && source.toString().endsWith('.gif')
-        property bool pausePlaying: false
-    }
-
-    AnimatedImage {
-        id: imageMessage
-
-        width: sourceSize.width > imageWidth ? imageWidth : sourceSize.width
-        fillMode: Image.PreserveAspectFit
-        source: imageContainer.source
-        playing: _internal.isAnimated && isAppWindowActive && !_internal.pausePlaying
-
-        layer.enabled: true
-        layer.effect: OpacityMask {
-            maskSource: Item {
-                width: imageMessage.width
-                height: imageMessage.height
-
-                Rectangle {
-                    anchors.top: parent.top
-                    anchors.left: parent.left
-                    width: imageMessage.width
-                    height: imageMessage.height
-                    radius: 16
-                }
-                Rectangle {
-                    anchors.bottom: parent.bottom
-                    anchors.left: parent.left
-                    width: 32
-                    height: 32
-                    radius: 4
-                    visible: shapeType === StatusImageMessage.ShapeType.LEFT_ROUNDED //!isLeftCorner && !allCornersRounded
-                }
-                Rectangle {
-                    anchors.bottom: parent.bottom
-                    anchors.right: parent.right
-                    width: 32
-                    height: 32
-                    radius: 4
-                    visible: shapeType === StatusImageMessage.ShapeType.RIGHT_ROUNDED  //isLeftCorner && !allCornersRounded
-                }
-            }
-        }
-
-        MouseArea {
-            cursorShape: Qt.PointingHandCursor
-            acceptedButtons: Qt.LeftButton | Qt.RightButton
-            anchors.fill: parent
-            onClicked: {
-                if (imageContainer.isAnimated) {
-                    // FIXME the ListView completely removes Items that scroll out of view
-                    // so when we scroll backto the image, it gets reloaded and playing is reset
-                    _internal.pausePlaying = ! _internal.pausePlaying
-                    return
-                }
-                imageContainer.clicked(imageMessage, mouse)
-            }
-        }
-    }
-
-    Rectangle {
-        id: loadingImage
-        visible: imageMessage.status === Image.Loading
-                 || imageMessage.status === Image.Error
-        width: parent.width
-        height: width
-        border.width: 1
-        border.color: Theme.palette.baseColor2
-        radius: 8
-
-        StatusBaseText {
-            anchors.centerIn: parent
-            text: imageMessage.status === Image.Error ? errorLoadingImageText: loadingImageText
-            color: imageMessage.status === Image.Error?
-                       Theme.palette.dangerColor1 :
-                       Theme.palette.directColor1
-            font.pixelSize: 15
-        }
-    }
-}
@@ -1,158 +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
-import StatusQ.Controls 0.1
-
-Item {
-    id: statusMessageHeader
-
-    property alias displayNameLabel: primaryDisplayName
-    property alias secondaryNameLabel: secondaryDisplayName
-    property alias tertiaryDetailsLabel: tertiaryDetailText
-    property alias timestamp: timestampText
-
-    property string displayName: ""
-    property string secondaryName: ""
-    property string tertiaryDetail: ""
-    property string resendText: ""
-    property bool showResendButton: false
-    property StatusIconSettings icon1: StatusIconSettings {
-        width: dummyImage.width
-        height: dummyImage.height
-        rotation: 0
-        color: Theme.palette.indirectColor1
-        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: icon1.name ? "../../../../assets/img/icons/" + icon1.name + ".svg": ""
-            visible: false
-        }
-    }
-    property StatusIconSettings icon2: StatusIconSettings {
-        width: dummyImage.width
-        height: dummyImage.height
-        rotation: 0
-        color: Theme.palette.primaryColor1
-        background: StatusIconBackgroundSettings {
-            width: 10
-            height: 10
-            color: Theme.palette.indirectColor1
-        }
-        // only used to get implicit width and height from the actual image
-        property Image dummyImage: Image {
-            source: icon2.name ? "../../../../assets/img/icons/" + icon2.name + ".svg": ""
-            visible: false
-        }
-    }
-
-    signal clicked()
-    signal resendClicked()
-
-    height: childrenRect.height
-    width: primaryDisplayName.width + (secondaryDisplayName.visible ? secondaryDisplayName.width + header.spacing : 0)
-
-    RowLayout {
-        id: header
-        spacing: 4
-        TextEdit {
-            id: primaryDisplayName
-            font.family: Theme.palette.baseFont.name
-            font.weight: Font.Medium
-            font.pixelSize: 15
-            font.underline: mouseArea.containsMouse
-            readOnly: true
-            wrapMode: Text.WordWrap
-            selectByMouse: true
-            color: Theme.palette.primaryColor1
-            text: displayName
-            MouseArea {
-                id: mouseArea
-                anchors.fill: parent
-                cursorShape: Qt.PointingHandCursor
-                acceptedButtons: Qt.LeftButton | Qt.RightButton
-                hoverEnabled: true
-                onClicked: {
-                    statusMessageHeader.clicked()
-                }
-            }
-            Layout.alignment: Qt.AlignBottom
-        }
-        StatusRoundIcon {
-            icon.background.width: icon1.background.width
-            icon.background.height: icon1.background.height
-            icon.background.color: icon1.background.color
-            icon.width: icon1.width
-            icon.height: icon1.height
-            icon.name: icon1.name
-            icon.rotation: icon1.rotation
-            icon.color: icon1.color
-            visible: !!icon.name
-        }
-        StatusRoundIcon {
-            icon.background.width: icon2.background.width
-            icon.background.height: icon2.background.height
-            icon.background.color: icon2.background.color
-            icon.width: icon2.width
-            icon.height: icon2.height
-            icon.name: icon2.name
-            icon.rotation: icon2.rotation
-            icon.color: icon2.color
-            visible: !!icon.name
-        }
-        StatusBaseText {
-            id: secondaryDisplayName
-            Layout.alignment: Qt.AlignVCenter
-            color: Theme.palette.baseColor1
-            font.pixelSize: 10
-            text: secondaryName
-            visible: !!text
-        }
-        StatusBaseText {
-            id: dotSeparator1
-            Layout.fillHeight: true
-            font.pixelSize: 10
-            color: Theme.palette.baseColor1
-            text: "."
-            visible: secondaryDisplayName.visible
-        }
-        StatusBaseText {
-            id: tertiaryDetailText
-            Layout.alignment: Qt.AlignVCenter
-            Layout.maximumWidth: 58
-            font.pixelSize: 10
-            elide: Text.ElideMiddle
-            color: Theme.palette.baseColor1
-            text: tertiaryDetail
-        }
-        StatusBaseText {
-            id: dotSeparator2
-            Layout.fillHeight: true
-            font.pixelSize: 10
-            color: Theme.palette.baseColor1
-            text: "."
-            visible: tertiaryDetailText.visible
-        }
-        StatusTimeStampLabel {
-            id: timestampText
-        }
-        StatusBaseText {
-            Layout.alignment: Qt.AlignVCenter
-            color: Theme.palette.dangerColor1
-            font.pixelSize: 12
-            text: statusMessageHeader.resendText
-            visible: showResendButton && !!timestampText.text
-            MouseArea {
-                cursorShape: Qt.PointingHandCursor
-                anchors.fill: parent
-                onClicked: statusMessageHeader.resendClicked()
-            }
-        }
-    }
-}
@@ -1,51 +0,0 @@
-import QtQuick 2.13
-import QtGraphicalEffects 1.13
-import QtQuick.Layouts 1.14
-
-import StatusQ.Controls 0.1
-import StatusQ.Core.Theme 0.1
-
-Rectangle {
-    id: buttonsContainer
-
-    property list<Item> quickActions
-
-    QtObject {
-        id: _internal
-        readonly property int containerMargin: 2
-    }
-
-    width: buttonRow.width + _internal.containerMargin * 2
-    height: 36
-    radius: 8
-    color: Theme.palette.statusSelect.menuItemBackgroundColor
-
-    layer.enabled: true
-    layer.effect: DropShadow {
-        width: buttonsContainer.width
-        height: buttonsContainer.height
-        x: buttonsContainer.x
-        y: buttonsContainer.y + 10
-        horizontalOffset: 0
-        verticalOffset: 2
-        source: buttonsContainer
-        radius: 10
-        samples: 15
-        color: Theme.palette.dropShadow
-    }
-
-    Row {
-        id: buttonRow
-        spacing: _internal.containerMargin
-        anchors.left: parent.left
-        anchors.leftMargin: _internal.containerMargin
-        anchors.verticalCenter: buttonsContainer.verticalCenter
-        height: parent.height - 2 * _internal.containerMargin
-    }
-
-    onQuickActionsChanged: {
-        for (let idx in quickActions) {
-            quickActions[idx].parent = buttonRow
-        }
-    }
-}
@@ -1,125 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Shapes 1.13
-import QtGraphicalEffects 1.13
-import QtQuick.Layouts 1.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Components 0.1
-
-Loader {
-    id: chatReply
-
-    property StatusMessageDetails replyDetails
-    property string audioMessageInfoText: ""
-
-    signal replyProfileClicked()
-
-    active: visible
-
-    sourceComponent: RowLayout {
-        id: replyLayout
-        spacing: 8
-        Shape {
-            id: replyCorner
-            Layout.alignment: Qt.AlignTop
-            Layout.leftMargin: 35
-            Layout.topMargin: profileImage.height/2
-            Layout.preferredWidth: 20
-            Layout.preferredHeight: messageLayout.height - replyCorner.Layout.topMargin
-            asynchronous: true
-            antialiasing: true
-            ShapePath {
-                strokeColor: Qt.hsla(Theme.palette.baseColor1.hslHue, Theme.palette.baseColor1.hslSaturation, Theme.palette.baseColor1.hslLightness, 0.4)
-                strokeWidth: 3
-                fillColor: "transparent"
-                capStyle: ShapePath.RoundCap
-                joinStyle: ShapePath.RoundJoin
-                startX: 20
-                startY: 0
-                PathLine { x: 10; y: 0 }
-                PathArc {
-                    x: 0; y: 10
-                    radiusX: 13
-                    radiusY: 13
-                    direction: PathArc.Counterclockwise
-                }
-                PathLine { x: 0; y: messageLayout.height}
-            }
-        }
-        ColumnLayout {
-            id: messageLayout
-            Layout.fillWidth: true
-            Layout.alignment: Qt.AlignTop
-            Layout.topMargin: 4
-            RowLayout {
-                StatusSmartIdenticon {
-                    id: profileImage
-                    Layout.alignment: Qt.AlignTop
-                    image: replyDetails.profileImage
-                    name: replyDetails.displayName
-                    MouseArea {
-                        cursorShape: Qt.PointingHandCursor
-                        acceptedButtons: Qt.LeftButton | Qt.RightButton
-                        anchors.fill: parent
-                        onClicked: replyProfileClicked()
-                    }
-                }
-                TextEdit {
-                    Layout.alignment: Qt.AlignVCenter
-                    color: Theme.palette.baseColor1
-                    selectionColor: Theme.palette.primaryColor3
-                    selectedTextColor: Theme.palette.directColor1
-                    font.pixelSize: 13
-                    font.weight: Font.Medium
-                    selectByMouse: true
-                    readOnly: true
-                    text: replyDetails.displayName
-                }
-            }
-            StatusTextMessage {
-                Layout.fillWidth: true
-                textField.text: replyDetails.messageText
-                textField.font.pixelSize: 13
-                textField.color: Theme.palette.baseColor1
-                textField.height: 18
-                clip: true
-                visible: !!replyDetails.messageText
-            }
-            StatusImageMessage {
-                Layout.fillWidth: true
-                Layout.preferredHeight: imageAlias.paintedHeight
-                imageWidth: 56
-                source: replyDetails.contentType === StatusMessage.ContentType.Image ? replyDetails.messageContent : ""
-                visible: replyDetails.contentType === StatusMessage.ContentType.Image
-                shapeType: StatusImageMessage.ShapeType.ROUNDED
-            }
-            Item {
-                Layout.fillWidth: true
-                Layout.preferredHeight: 48
-                Layout.alignment: Qt.AlignLeft
-                visible: replyDetails.contentType === StatusMessage.ContentType.Sticker
-                StatusSticker {
-                    image.width: 48
-                    image.height: 48
-                    image.source: replyDetails.messageContent
-                }
-            }
-            Item {
-                Layout.fillWidth: true
-                Layout.preferredHeight: 22
-                visible: replyDetails.contentType === StatusMessage.ContentType.Audio
-                StatusAudioMessage {
-                    id: audioMessage
-                    anchors.left: parent.left
-                    width: 125
-                    height: 22
-                    isPreview: true
-                    audioSource: replyDetails.messageContent
-                    audioMessageInfoText: chatReply.audioMessageInfoText
-                }
-            }
-        }
-    }
-}
-
@@ -1,46 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Layouts 1.14
-import QtGraphicalEffects 1.13
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-Loader {
-    property string pinnedMsgInfoText: ""
-    property string pinnedBy: ""
-
-    active: visible
-
-    sourceComponent: Rectangle {
-        height: 24
-        width: layout.width + 16
-        color: Theme.palette.pinColor2
-        radius: 12
-        RowLayout {
-            id: layout
-            anchors.centerIn: parent
-            StatusIcon {
-                Layout.alignment: Qt.AlignVCenter
-                Layout.preferredWidth: 16
-                Layout.preferredHeight: 16
-                color: Theme.palette.pinColor1
-                icon: "tiny/pin"
-            }
-            StatusBaseText {
-                Layout.alignment: Qt.AlignVCenter
-                Layout.leftMargin: -4
-                color: Theme.palette.directColor1
-                font.pixelSize: 13
-                text: pinnedMsgInfoText
-            }
-            StatusBaseText {
-                Layout.alignment: Qt.AlignVCenter
-                Layout.leftMargin: -4
-                color: Theme.palette.directColor1
-                font.pixelSize: 13
-                font.weight: Font.Medium
-                text: pinnedBy
-            }
-        }
-    }
-}
@@ -1,125 +0,0 @@
-import QtQuick 2.3
-import QtGraphicalEffects 1.13
-
-import StatusQ.Components 0.1
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-Loader {
-    id: statusSticker
-
-    property bool noHover: false
-    property bool noMouseArea: false
-    property StatusImageSettings image: StatusImageSettings {
-        width: 140
-        height: 140
-    }
-
-    signal loaded()
-    signal clicked()
-
-    active: visible
-
-    sourceComponent: Rectangle {
-        id: root
-
-        color: Theme.palette.baseColor2
-        radius: 16
-
-        width: image.width
-        height: image.height
-
-        function reload() {
-            // From the documentation (https://doc.qt.io/qt-5/qml-qtquick-image.html#sourceSize-prop)
-            // Note: Changing this property dynamically causes the image source to
-            // be reloaded, potentially even from the network, if it is not in the
-            // disk cache.
-            const oldSource = sticker.source
-            sticker.cache = false
-            sticker.sourceSize.width += 1
-            sticker.sourceSize.width -= 1
-            sticker.cache = true
-        }
-
-        Loader {
-            id: loader
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
-
-        Image {
-            id: sticker
-            anchors.fill: parent
-            horizontalAlignment: Image.AlignHCenter
-            verticalAlignment: Image.AlignVCenter
-            cache: true
-            source: image.source
-
-            onStatusChanged: {
-                if (status === Image.Ready) {
-                    statusSticker.loaded()
-                }
-            }
-            MouseArea {
-                enabled: !noMouseArea && (sticker.status === Image.Ready)
-                cursorShape: noHover ? Qt.ArrowCursor : Qt.PointingHandCursor
-                anchors.fill: parent
-                onClicked: statusSticker.clicked()
-            }
-        }
-
-        Component {
-            id: loadingIndicator
-            StatusLoadingIndicator {
-                width: 24
-                height: 24
-                color: Theme.palette.baseColor1
-            }
-        }
-
-        Component {
-            id: reload
-            StatusIcon {
-                icon: "refresh"
-                color: Theme.palette.directColor1
-                mipmap: false
-                MouseArea {
-                    anchors.fill: parent
-                    cursorShape: Qt.PointingHandCursor
-                    onClicked: root.reload()
-                }
-            }
-        }
-
-        states: [
-            State {
-                name: "loading"
-                when: sticker.status === Image.Loading
-                PropertyChanges {
-                    target: loader
-                    sourceComponent: loadingIndicator
-                }
-            },
-            State {
-                name: "error"
-                when: sticker.status === Image.Error
-                PropertyChanges {
-                    target: loader
-                    sourceComponent: reload
-                }
-            },
-            State {
-                name: "ready"
-                when: sticker.status === Image.Ready
-                PropertyChanges {
-                    target: root
-                    color: "transparent"
-                }
-                PropertyChanges {
-                    target: loader
-                    sourceComponent: undefined
-                }
-            }
-        ]
-    }
-}
@@ -1,87 +0,0 @@
-import QtQuick 2.13
-import QtGraphicalEffects 1.0
-
-import StatusQ.Components 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Core.Theme 0.1
-
-Item {
-    id: textMessage
-
-    property int contentType: 0
-    property alias textField: chatText
-
-    signal linkActivated(url link)
-
-    implicitHeight: showMoreLoader.active ? childrenRect.height : chatText.height
-
-    QtObject {
-        id: _internal
-        property bool readMore: false
-        property bool veryLongChatText: chatText.length > 1000
-    }
-
-    TextEdit {
-        id: chatText
-        visible: !showMoreLoader.active || _internal.readMore
-        selectedTextColor: Theme.palette.directColor1
-        selectionColor: Theme.palette.primaryColor3
-        color: Theme.palette.directColor1
-        font.family: Theme.palette.baseFont.name
-        font.pixelSize: 15
-        textFormat: Text.RichText
-        wrapMode: Text.Wrap
-        readOnly: true
-        selectByMouse: true
-        height: _internal.veryLongChatText && !_internal.readMore ? Math.min(implicitHeight, 200) : implicitHeight
-        width: parent.width
-        clip: height < implicitHeight
-        onLinkActivated: textMessage.linkActivated(link)
-        onLinkHovered: {
-            cursorShape: Qt.PointingHandCursor
-        }
-    }
-
-    Loader {
-        id: mask
-        anchors.fill: chatText
-        active: showMoreLoader.active
-        visible: false
-        sourceComponent: LinearGradient {
-            start: Qt.point(0, 0)
-            end: Qt.point(0, chatText.height)
-            gradient: Gradient {
-                GradientStop { position: 0.0; color: "white" }
-                GradientStop { position: 0.85; color: "white" }
-                GradientStop { position: 1; color: "transparent" }
-            }
-        }
-    }
-
-    Loader {
-        id: opMask
-        active: showMoreLoader.active && !_internal.readMore
-        anchors.fill: chatText
-        sourceComponent: OpacityMask {
-            source: chatText
-            maskSource: mask
-        }
-    }
-
-    Loader {
-        id: showMoreLoader
-        active: _internal.veryLongChatText
-        anchors.top: chatText.bottom
-        anchors.topMargin: -10
-        anchors.horizontalCenter: parent.horizontalCenter
-        sourceComponent: StatusRoundButton {
-            implicitWidth: 24
-            implicitHeight: 24
-            type: StatusRoundButton.Type.Secondary
-            icon.name: _internal.readMore ? "chevron-up":  "chevron-down"
-            onClicked: {
-                _internal.readMore = !_internal.readMore
-            }
-        }
-    }
-}
@@ -1,24 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Layouts 1.14
-
-import StatusQ.Controls 0.1
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-StatusBaseText {
-    id: timestampLabe;
-    property alias tooltip: tooltip
-
-    Layout.alignment: Qt.AlignVCenter
-    color: Theme.palette.baseColor1
-    font.pixelSize: 10
-    visible: !!text
-    StatusToolTip {
-        id: tooltip
-        visible: hhandler.hovered && !!text
-        maxWidth: 350
-    }
-    HoverHandler {
-        id: hhandler
-    }
-}
@@ -1,6 +1,5 @@
 module StatusQ.Components

-StatusAddress 0.1 StatusAddress.qml
 StatusBadge 0.1 StatusBadge.qml
 StatusChatInfoToolBar 0.1 StatusChatInfoToolBar.qml
 StatusChatList 0.1 StatusChatList.qml
@@ -15,15 +14,8 @@ StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
 StatusListItem 0.1 StatusListItem.qml
 StatusListSectionHeadline 0.1 StatusListSectionHeadline.qml
 StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
-StatusMemberListItem 0.1 StatusMemberListItem.qml
 StatusNavigationListItem 0.1 StatusNavigationListItem.qml
 StatusNavigationPanelHeadline 0.1 StatusNavigationPanelHeadline.qml
 StatusRoundIcon 0.1 StatusRoundIcon.qml
 StatusRoundedImage 0.1 StatusRoundedImage.qml
 StatusMacWindowButtons 0.1 StatusMacWindowButtons.qml
-StatusListItemBadge 0.1 StatusListItemBadge.qml
-StatusExpandableItem 0.1 StatusExpandableItem.qml
-StatusSmartIdenticon 0.1 StatusSmartIdenticon.qml
-StatusMessage 0.1 StatusMessage.qml
-StatusMessageDetails 0.1 StatusMessageDetails.qml
-StatusTagSelector 0.1 StatusTagSelector.qml
@@ -1,277 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
-import QtQuick.Layouts 1.13
-import QtQml.Models 2.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Core.Utils 0.1
-import StatusQ.Controls 0.1
-
-Item {
-    id: root
-    property string label: "Choose account"
-    property bool showAccountDetails: !!selectedAccount
-    property var accounts
-    property var selectedAccount
-    property string currency: "usd"
-    property alias selectField: select
-    implicitWidth: 448
-    height: select.height +
-            (selectedAccountDetails.visible ? selectedAccountDetails.height + selectedAccountDetails.anchors.topMargin : 0)
-    // set to asset symbol to display asset's balance top right
-    // NOTE: if this asset is not selected as a wallet token in the UI, then
-    // nothing will be displayed
-    property string showBalanceForAssetSymbol: ""
-    property var assetFound
-    property double minRequiredAssetBalance: 0
-    property int dropdownWidth: width
-    property alias dropdownAlignment: select.menuAlignment
-    property bool isValid: true
-    property bool readOnly: false
-
-    property var assetBalanceTextFn: function (foundValue) {
-        return "Balance: " + (parseFloat(foundValue) === 0.0 ? "0" : Utils.stripTrailingZeros(foundValue))
-    }
-
-    readonly property string watchWalletType: "watch"
-
-    enum Type {
-        Address,
-        Contact,
-        Account
-    }
-
-    function validate() {
-        if (showBalanceForAssetSymbol == "" || minRequiredAssetBalance == 0 || !assetFound) {
-            return root.isValid
-        }
-        root.isValid = assetFound.balance >= minRequiredAssetBalance
-        return root.isValid
-    }
-
-    onSelectedAccountChanged: {
-        if (!selectedAccount) {
-            return
-        }
-        if (selectedAccount.color) {
-            selectedIconImg.color = Utils.getThemeAccountColor(selectedAccount.color, Theme.palette.accountColors) || Theme.palette.accountColors[0]
-        }
-        if (selectedAccount.name) {
-            selectedTextField.text = selectedAccount.name
-        }
-        if (selectedAccount.address) {
-            textSelectedAddress.text = selectedAccount.address  + " •"
-        }
-        if (selectedAccount.currencyBalance) {
-            textSelectedAddressFiatBalance.text = selectedAccount.currencyBalance + " " + currency.toUpperCase()
-        }
-        if (selectedAccount.assets && showBalanceForAssetSymbol) {
-            assetFound = Utils.findAssetBySymbol(selectedAccount.assets, showBalanceForAssetSymbol)
-            if (!assetFound) {
-                console.warn("Cannot find asset '", showBalanceForAssetSymbol, "'. Ensure this asset has been added to the token list.")
-            }
-        }
-        if (!selectedAccount.type) {
-            selectedAccount.type = StatusAccountSelector.Type.Account
-        }
-        validate()
-    }
-
-    onAssetFoundChanged: {
-        if (!assetFound) {
-            return
-        }
-        txtAssetBalance.text = root.assetBalanceTextFn(assetFound.balance)
-        txtAssetSymbol.text = " " + assetFound.symbol
-    }
-
-    StatusBaseText {
-        id: txtAssetBalance
-        visible: root.assetFound !== undefined
-        anchors.bottom: select.top
-        anchors.bottomMargin: -18
-        anchors.right: txtAssetSymbol.left
-        anchors.left: select.left
-        anchors.leftMargin: select.width / 2.5
-
-        color: !root.isValid ? Theme.palette.dangerColor1 : Theme.palette.baseColor1
-        elide: Text.ElideRight
-        font.pixelSize: 13
-        horizontalAlignment: Text.AlignRight
-        height: 18
-
-        StatusToolTip {
-            enabled: txtAssetBalance.truncated
-            id: assetTooltip
-            text: txtAssetBalance.text
-        }
-
-        MouseArea {
-            enabled: txtAssetBalance.truncated
-            anchors.fill: parent
-            hoverEnabled: enabled
-            onEntered: assetTooltip.visible = true
-            onExited: assetTooltip.visible = false
-        }
-    }
-    StatusBaseText {
-        id: txtAssetSymbol
-        visible: txtAssetBalance.visible
-        anchors.top: txtAssetBalance.top
-        anchors.right: parent.right
-
-        color: txtAssetBalance.color
-        font.pixelSize: 13
-        height: txtAssetBalance.height
-    }
-    StatusSelect {
-        id: select
-        label: root.label
-        model: root.accounts
-        width: parent.width
-        menuAlignment: StatusSelect.MenuAlignment.Left
-        selectMenu.delegate: menuItem
-        selectMenu.width: dropdownWidth
-        selectedItemComponent: Item {
-            anchors.fill: parent
-
-            StatusIcon {
-                id: selectedIconImg
-                anchors.left: parent.left
-                anchors.leftMargin: 16
-                anchors.verticalCenter: parent.verticalCenter
-                width: 20
-                height: 20
-                icon: "filled-account"
-            }
-
-            StatusBaseText {
-                id: selectedTextField
-                elide: Text.ElideRight
-                anchors.left: selectedIconImg.right
-                anchors.leftMargin: 8
-                anchors.right: parent.right
-                anchors.rightMargin: select.selectedItemRightMargin
-                anchors.verticalCenter: parent.verticalCenter
-                font.pixelSize: 15
-                verticalAlignment: Text.AlignVCenter
-                height: 22
-                color: Theme.palette.directColor1
-            }
-        }
-    }
-
-    Row {
-        id: selectedAccountDetails
-        visible: root.showAccountDetails
-        anchors.top: select.bottom
-        anchors.topMargin: 8
-        anchors.left: parent.left
-        anchors.leftMargin: 2
-
-        StatusBaseText {
-            id: textSelectedAddress
-            font.pixelSize: 12
-            elide: Text.ElideMiddle
-            width: 90
-            color: Theme.palette.baseColor1
-        }
-        StatusBaseText {
-            id: textSelectedAddressFiatBalance
-            font.pixelSize: 12
-            color: Theme.palette.baseColor1
-        }
-    }
-
-    Component {
-        id: menuItem
-        MenuItem {
-            id: itemContainer
-            visible: walletType !== root.watchWalletType
-            property bool isFirstItem: index === 0
-            property bool isLastItem: index === accounts.rowCount() - 1
-
-            Component.onCompleted: {
-                if (!root.selectedAccount && isFirstItem) {
-                    root.selectedAccount = { address, name, color: model.color, assets, currencyBalance }
-                }
-            }
-
-            height: walletType === root.watchWalletType ? 0 : (accountName.height + 14 + accountAddress.height + 14)
-
-            StatusIcon {
-                id: iconImg
-                anchors.left: parent.left
-                anchors.leftMargin: 16
-                anchors.verticalCenter: parent.verticalCenter
-                width: 20
-                height: 20
-                icon: "filled-account"
-                color: Utils.getThemeAccountColor(model.color, Theme.palette.accountColors) || Theme.palette.accountColors[0]
-            }
-
-            Column {
-                id: column
-                anchors.left: iconImg.right
-                anchors.leftMargin: 14
-                anchors.right: txtFiatBalance.left
-                anchors.rightMargin: 8
-                anchors.verticalCenter: parent.verticalCenter
-
-                StatusBaseText {
-                    id: accountName
-                    text: model.name
-                    elide: Text.ElideRight
-                    font.pixelSize: 15
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    height: 22
-                    color: Theme.palette.directColor1
-                }
-
-                StatusBaseText {
-                    id: accountAddress
-                    text: address
-                    elide: Text.ElideMiddle
-                    width: 80
-                    color: Theme.palette.baseColor1
-                    font.pixelSize: 12
-                    height: 16
-                }
-            }
-            StatusBaseText {
-                id: txtFiatBalance
-                anchors.right: fiatCurrencySymbol.left
-                anchors.rightMargin: 4
-                anchors.verticalCenter: parent.verticalCenter
-                font.pixelSize: 15
-                height: 22
-                text: currencyBalance
-                color: Theme.palette.directColor1
-            }
-            StatusBaseText {
-                id: fiatCurrencySymbol
-                anchors.right: parent.right
-                anchors.rightMargin: 16
-                anchors.verticalCenter: parent.verticalCenter
-                font.pixelSize: 15
-                height: 22
-                color: Theme.palette.baseColor1
-                text: root.currency.toUpperCase()
-            }
-            background: Rectangle {
-                color: itemContainer.highlighted ? Theme.palette.statusSelect.menuItemHoverBackgroundColor : Theme.palette.statusSelect.menuItemBackgroundColor
-            }
-            MouseArea {
-                cursorShape: Qt.PointingHandCursor
-                anchors.fill: itemContainer
-                onClicked: {
-                    root.selectedAccount = { address, name, color: model.color, assets, currencyBalance }
-                    select.selectMenu.close()
-                }
-            }
-        }
-    }
-}
-
@@ -1,146 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
-import QtQuick.Layouts 1.13
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Core.Utils 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Components 0.1
-
-Item {
-    id: root
-    property var assets
-    property var selectedAsset
-    property string defaultToken: ""
-    property var tokenAssetSourceFn: function (symbol) {
-        return ""
-    }
-    // Define this in the usage to get balance in currency selected by user
-    property var getCurrencyBalanceString: function (currencyBalance) { return "" }
-    implicitWidth: 86
-    implicitHeight: 32
-
-    function resetInternal() {
-        assets = null
-        selectedAsset = null
-    }
-
-    onSelectedAssetChanged: {
-        if (selectedAsset && selectedAsset.symbol) {
-            iconImg.image.source = tokenAssetSourceFn(selectedAsset.symbol.toUpperCase())
-            selectedTextField.text = selectedAsset.symbol.toUpperCase()
-        }
-    }
-
-    StatusSelect {
-        id: select
-        width: parent.width
-        bgColor: "transparent"
-        bgColorHover: Theme.palette.directColor8
-        model: root.assets
-        caretRightMargin: 0
-        select.radius: 6
-        select.height: root.height
-        selectMenu.width: 342
-        selectedItemComponent: Item {
-            anchors.fill: parent
-            StatusRoundedImage {
-                id: iconImg
-                anchors.left: parent.left
-                anchors.leftMargin: 4
-                width: 24
-                height: 24
-                anchors.verticalCenter: parent.verticalCenter
-                image.onStatusChanged: {
-                    if (iconImg.image.status === Image.Error) {
-                        iconImg.image.source = defaultToken
-                    }
-                }
-            }
-            StatusBaseText {
-                id: selectedTextField
-                anchors.left: iconImg.right
-                anchors.leftMargin: 4
-                anchors.verticalCenter: parent.verticalCenter
-                font.pixelSize: 15
-                height: 22
-                verticalAlignment: Text.AlignVCenter
-                color: Theme.palette.directColor1
-            }
-        }
-        selectMenu.delegate: menuItem
-    }
-
-    Component {
-        id: menuItem
-        MenuItem {
-            id: itemContainer
-            property bool isFirstItem: index === 0
-            property bool isLastItem: index === assets.rowCount() - 1
-
-            width: parent.width
-            height: 72
-            StatusRoundedImage {
-                id: iconImg
-                anchors.left: parent.left
-                anchors.leftMargin: 16
-                anchors.verticalCenter: parent.verticalCenter
-                image.source: root.tokenAssetSourceFn(symbol.toUpperCase())
-                image.onStatusChanged: {
-                    if (iconImg.image.status === Image.Error) {
-                        iconImg.image.source = defaultToken
-                    }
-                }
-            }
-            Column {
-                anchors.left: iconImg.right
-                anchors.leftMargin: 12
-                anchors.verticalCenter: parent.verticalCenter
-
-                StatusBaseText {
-                    text: symbol.toUpperCase()
-                    font.pixelSize: 15
-                    color: Theme.palette.directColor1
-                }
-
-                StatusBaseText {
-                    text: name
-                    color: Theme.palette.baseColor1
-                    font.pixelSize: 15
-                }
-            }
-            Column {
-                anchors.right: parent.right
-                anchors.rightMargin: 16
-                anchors.verticalCenter: parent.verticalCenter
-                StatusBaseText {
-                    font.pixelSize: 15
-                    text: parseFloat(balance).toFixed(4) + " " + symbol
-                }
-                StatusBaseText {
-                    font.pixelSize: 15
-                    anchors.right: parent.right
-                    text: getCurrencyBalanceString(currencyBalance)
-                    color: Theme.palette.baseColor1
-                }
-            }
-            background: Rectangle {
-                color: itemContainer.highlighted ? Theme.palette.statusSelect.menuItemHoverBackgroundColor : Theme.palette.statusSelect.menuItemBackgroundColor
-            }
-            Component.onCompleted: {
-                if(index === 0 ) {
-                    selectedAsset = { name: name, symbol: symbol, address: address, balance: balance, currencyBalance: currencyBalance}
-                }
-            }
-            MouseArea {
-                cursorShape: Qt.PointingHandCursor
-                anchors.fill: itemContainer
-                onClicked: {
-                    selectedAsset = {name: name, symbol: symbol, address: address, balance: balance, currencyBalance: currencyBalance}
-                    select.selectMenu.close()
-                }
-            }
-        }
-    }
-}
@@ -1,89 +0,0 @@
-import QtQuick 2.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-Column {
-    id: statusBanner
-    width: parent.width
-
-    property string statusText
-    property int type: StatusBanner.Type.Info
-    property int textPixels: 15
-    property int statusBannerHeight: 38
-
-    // "private" properties
-    QtObject {
-           id: d
-           property color backgroundColor
-           property color bordersColor
-           property color fontColor
-    }
-
-    enum Type {
-        Info, // 0
-        Danger, // 1
-        Success, // 2
-        Warning // 3
-    }    
-
-    // Component definition
-    Rectangle {
-        id: topDiv
-        color: d.bordersColor
-        height: 1
-        width: parent.width
-    }
-
-    Rectangle {
-        id: box
-        width: parent.width
-        height: statusBanner.statusBannerHeight
-        color: d.backgroundColor
-
-        StatusBaseText {
-            id: statusTxt
-            anchors.fill: parent
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-            font.pixelSize: statusBanner.textPixels
-            text: statusBanner.statusText
-            color: d.fontColor
-        }
-    }
-
-    Rectangle {
-        id: bottomDiv
-        color: d.bordersColor
-        height: 1
-        width: parent.width
-    }
-
-    // Behavior
-    states: [
-        State {
-            when: statusBanner.type === StatusBanner.Type.Info
-            PropertyChanges { target: d; backgroundColor: Theme.palette.primaryColor3}
-            PropertyChanges { target: d; bordersColor: Theme.palette.primaryColor2}
-            PropertyChanges { target: d; fontColor: Theme.palette.primaryColor1}
-        },
-        State {
-            when: statusBanner.type === StatusBanner.Type.Danger
-            PropertyChanges { target: d; backgroundColor: Theme.palette.dangerColor3}
-            PropertyChanges { target: d; bordersColor: Theme.palette.dangerColor2}
-            PropertyChanges { target: d; fontColor: Theme.palette.dangerColor1}
-        },
-        State {
-            when: statusBanner.type === StatusBanner.Type.Success
-            PropertyChanges { target: d; backgroundColor: Theme.palette.successColor2}
-            PropertyChanges { target: d; bordersColor: Theme.palette.successColor2}
-            PropertyChanges { target: d; fontColor: Theme.palette.successColor1}
-        },
-        State {
-            when: statusBanner.type === StatusBanner.Type.Warning
-            PropertyChanges { target: d; backgroundColor: Theme.palette.pinColor3}
-            PropertyChanges { target: d; bordersColor: Theme.palette.pinColor2}
-            PropertyChanges { target: d; fontColor: Theme.palette.pinColor1}
-        }
-    ]
-}
@@ -7,7 +7,6 @@ Rectangle {
    id: statusBaseButton

    enum Size {
-        Tiny,
        Small,
        Large
    }
@@ -34,32 +33,8 @@ Rectangle {

    property real defaultLeftPadding: size === StatusBaseButton.Size.Large ? 24 : 12
    property real defaultRightPadding: size === StatusBaseButton.Size.Large ? 24 : 12
-    property real defaultTopPadding: {
-        switch (size) {
-            case StatusBaseButton.Size.Tiny:
-              return 5
-            case StatusBaseButton.Size.Small:
-              return 10
-              break;
-            case StatusBaseButton.Size.Large:
-            default:
-              return 11
-              break;
-        }
-    }
-    property real defaultBottomPadding: {
-        switch (size) {
-            case StatusBaseButton.Size.Tiny:
-              return 5
-            case StatusBaseButton.Size.Small:
-              return 10
-              break;
-            case StatusBaseButton.Size.Large:
-            default:
-              return 11
-              break;
-        }
-    }
+    property real defaultTopPadding: size === StatusBaseButton.Size.Large ? 11 : 10
+    property real defaultBottomPadding: size === StatusBaseButton.Size.Large ? 11 : 10


    property real leftPadding: defaultLeftPadding
@@ -79,7 +54,6 @@ Rectangle {
    signal clicked(var mouse)
    signal pressAndHold(var mouse)

-    property bool highlighted: false


    /// Implementation
@@ -87,11 +61,11 @@ Rectangle {
    implicitWidth: sensor.width
    implicitHeight: sensor.height

-    radius: size !== StatusBaseButton.Size.Tiny ? 8 : 6
+    radius: 8

    color: {
        if (statusBaseButton.enabled) {
-            return sensor.containsMouse || highlighted ? hoverColor
+            return sensor.containsMouse ? hoverColor
                                        : normalColor
        } else {
            return disaledColor
@@ -20,14 +20,9 @@ Item {
    property alias selectedTextColor: edit.selectedTextColor
    property alias selectionStart: edit.selectionStart
    property alias selectionEnd: edit.selectionEnd
-    property alias cursorPosition: edit.cursorPosition
-
-    property alias edit: edit
-    property alias text: edit.text

    property alias color: edit.color
    property alias font: edit.font
-    property alias focussed: edit.activeFocus
    property alias verticalAlignmet: edit.verticalAlignment
    property alias horizontalAlignment: edit.horizontalAlignment

@@ -37,228 +32,115 @@ Item {

    property real leftPadding: 16
    property real rightPadding: 16
-    property real topPadding: 12
-    property real bottomPadding: 12
+    property real topPadding: 11
+    property real bottomPadding: 11

    property real minimumHeight: 0
    property real maximumHeight: 0
-    property int maximumLength: 0

-    property bool valid: true
-    property bool pristine: true
-    property bool dirty: false
-    property bool pending: false
-    property bool leftIcon: true
-
-    property StatusIconSettings icon: StatusIconSettings {
-        width: 24
-        height: 24
-        name: ""
-        color: Theme.palette.baseColor1
-    }
-
-    property Item component
-
-    onClearableChanged: {
-        if (clearable && !component) {
-            clearButtonLoader.active = true
-            clearButtonLoader.parent = statusBaseInputComponentSlot
-        } else {
-            clearButtonLoader.active = false
-        }
-    }
-
-    onComponentChanged: {
-        if (!!component) {
-            component.parent = statusBaseInputComponentSlot
-        }
-    }
-
-    implicitWidth: 448
-    implicitHeight: multiline ? Math.max((edit.implicitHeight + topPadding + bottomPadding), 44) : 44
+    implicitWidth: 200
+    implicitHeight: multiline ? Math.max(edit.implicitHeight + topPadding + bottomPadding, 40) : 40

    Rectangle {
        width: parent.width
        height: maximumHeight != 0 ? Math.min(
-                                         minimumHeight != 0 ? Math.max(statusBaseInput.implicitHeight, minimumHeight)
-                                         : statusBaseInput.implicitHeight, maximumHeight) : parent.height
+                                        minimumHeight != 0 ? Math.max(statusBaseInput.implicitHeight, minimumHeight)
+                                                          : implicitHeight,
+                                         maximumHeight)
+                                  : parent.height
        color: Theme.palette.baseColor2
        radius: 8

        clip: true

-        border.width: 1
-        border.color: {
-            if (!statusBaseInput.valid && statusBaseInput.dirty) {
-                return Theme.palette.dangerColor1;
-            }
-            if (edit.activeFocus) {
-                return Theme.palette.primaryColor1;
-            }
-            return sensor.containsMouse ? Theme.palette.primaryColor2 : "transparent"
-        }
+        Flickable {
+            id: flick

-
-        MouseArea {
-            id: sensor
-            enabled: !edit.activeFocus
-            hoverEnabled: true
            anchors.fill: parent
-            cursorShape: Qt.IBeamCursor
-            onClicked: {
-                edit.forceActiveFocus()
+            anchors.leftMargin: statusBaseInput.leftPadding
+            anchors.rightMargin: statusBaseInput.rightPadding + clearable ? clearButtton.width : 0
+            anchors.topMargin: statusBaseInput.topPadding
+            anchors.bottomMargin: statusBaseInput.bottomPadding
+            contentWidth: edit.paintedWidth
+            contentHeight: edit.paintedHeight
+            clip: true
+
+            QC.ScrollBar.vertical: QC.ScrollBar { interactive: multiline }
+
+
+            function ensureVisible(r) {
+                if (contentX >= r.x)
+                    contentX = r.x;
+                else if (contentX+width <= r.x+r.width)
+                    contentX = r.x+r.width-width;
+                if (contentY >= r.y)
+                    contentY = r.y;
+                else if (contentY+height <= r.y+r.height)
+                    contentY = r.y+r.height-height;
            }

-            StatusIcon {
-                id: statusIcon
-                anchors.topMargin: 10
-                anchors.left: statusBaseInput.leftIcon ? parent.left : undefined
-                anchors.right: !statusBaseInput.leftIcon ? parent.right : undefined
-                anchors.leftMargin: 10
-                anchors.rightMargin: 10
+
+
+            TextEdit {
+                id: edit
+                width: flick.width
+                selectByMouse: true
                anchors.verticalCenter: parent.verticalCenter
-                icon: statusBaseInput.icon.name
-                width: statusBaseInput.icon.width
-                height: statusBaseInput.icon.height
-                color: statusBaseInput.icon.color
-                visible: !!statusBaseInput.icon.name
-            }
+                focus: true

-            Flickable {
-                id: flick
-                anchors.top: parent.top
-                anchors.bottom: parent.bottom
-                anchors.left: (statusIcon.visible && statusBaseInput.leftIcon) ?
-                              statusIcon.right : parent.left
-                anchors.right: {
-                    if (!!statusBaseInput.component) {
-                        return statusBaseInputComponentSlot.left
+                font.pixelSize: 15
+                font.family: Theme.palette.baseFont.name
+                color: Theme.palette.directColor1
+
+                onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
+                wrapMode: TextEdit.NoWrap
+
+                Keys.onReturnPressed: {
+                    if (multiline) {
+                        event.accepted = false
+                    } else {
+                        event.accepted = true
                    }
-                    return statusIcon.visible && !statusBaseInput.leftIcon ? statusIcon.left : parent.right
                }
-                anchors.leftMargin: statusIcon.visible && statusBaseInput.leftIcon ? 8
-                                    : statusBaseInput.leftPadding
-                anchors.rightMargin: {
-                    return clearable ? clearButtonLoader.width + 12 : 
-                        (statusIcon.visible && !leftIcon) || !!statusBaseInput.component ? 8 : 0
+
+                Keys.onEnterPressed: {
+                    if (multiline) {
+                        event.accepted = false
+                    } else {
+                        event.accepted = true
+                    }
                }
-                contentWidth: edit.paintedWidth
-                contentHeight: edit.paintedHeight
-                boundsBehavior: Flickable.StopAtBounds
-                QC.ScrollBar.vertical: QC.ScrollBar { interactive: multiline; enabled: multiline }
-                clip: true
-                function ensureVisible(r) {
-                    if (contentX >= r.x)
-                        contentX = r.x;
-                    else if (contentX+width <= r.x+r.width)
-                        contentX = r.x+r.width-width;
-                    if (contentY >= r.y)
-                        contentY = r.y;
-                    else if (contentY+height <= r.y+r.height)
-                        contentY = r.y+r.height-height;
-                }
-                TextEdit {
-                    id: edit
-                    property string previousText: text
-                    width: flick.width
-                    height: flick.height
-                    verticalAlignment: Text.AlignVCenter
-                    selectByMouse: true
-                    selectionColor: Theme.palette.primaryColor2
-                    selectedTextColor: color
-                    focus: true
+
+                StatusBaseText {
+                    id: placeholder
+                    visible: edit.text.length === 0
+                    anchors.left: parent.left
+                    anchors.right: parent.right
                    font.pixelSize: 15
+
+                    elide: StatusBaseText.ElideRight
                    font.family: Theme.palette.baseFont.name
-                    color: Theme.palette.directColor1
-                    onCursorRectangleChanged: { flick.ensureVisible(cursorRectangle); }
-                    wrapMode: statusBaseInput.multiline ? Text.WrapAtWordBoundaryOrAnywhere : TextEdit.NoWrap
-                    onActiveFocusChanged: {
-                        if (statusBaseInput.pristine) {
-                            statusBaseInput.pristine = false
-                        }
-                    }
-
-                    Keys.onReturnPressed: {
-                        if (multiline) {
-                            event.accepted = false
-                        } else {
-                            event.accepted = true
-                        }
-                    }
-
-                    Keys.onEnterPressed: {
-                        if (multiline) {
-                            event.accepted = false
-                        } else {
-                            event.accepted = true
-                        }
-                    }
-
-                    Keys.forwardTo: [statusBaseInput]
-
-                    onTextChanged: {
-                        statusBaseInput.dirty = true
-                        if (statusBaseInput.maximumLength > 0) {
-                            if (text.length > statusBaseInput.maximumLength) {
-                                var cursor = cursorPosition;
-                                text = previousText;
-                                if (cursor > text.length) {
-                                    cursorPosition = text.length;
-                                } else {
-                                    cursorPosition = cursor-1;
-                                }
-                            }
-                            previousText = text
-                        }
-                    }
-                    StatusBaseText {
-                        id: placeholder
-                        visible: (edit.text.length === 0)
-                        anchors.left: parent.left
-                        anchors.right: parent.right
-                        anchors.rightMargin: statusBaseInput.rightPadding
-                        anchors.verticalCenter: parent.verticalCenter
-                        font.pixelSize: 15
-                        elide: StatusBaseText.ElideRight
-                        font.family: Theme.palette.baseFont.name
-                        color: statusBaseInput.enabled ? Theme.palette.baseColor1 :
-                                                        Theme.palette.directColor6
-                    }
+                    color: Theme.palette.baseColor1
                }
-
-            } // Flickable
-
-            Item {
-                id: statusBaseInputComponentSlot
-                anchors.right: parent.right
-                anchors.rightMargin: 12
-                width: childrenRect.width
-                height: childrenRect.height
-                anchors.verticalCenter: parent.verticalCenter
            }
-        }
+        } // Flickable
    } // Rectangle

-    Loader {
-        id: clearButtonLoader
-        sourceComponent: StatusFlatRoundButton {
-            id: clearButton
-            visible: edit.text.length != 0 &&
-                    statusBaseInput.clearable &&
-                    !statusBaseInput.multiline &&
-                    edit.activeFocus
-            type: StatusFlatRoundButton.Type.Secondary
-            width: 24
-            height: 24
-            icon.name: "clear"
-            icon.width: 16
-            icon.height: 16
-            icon.color: Theme.palette.baseColor1
-            onClicked: {
-                edit.clear()
-            }
+    StatusFlatRoundButton {
+        id: clearButtton
+        visible: edit.text.length != 0 && statusBaseInput.clearable && !statusBaseInput.multiline
+        anchors.right: parent.right
+        anchors.rightMargin: 11
+        anchors.verticalCenter: parent.verticalCenter
+        type: StatusFlatRoundButton.Type.Secondary
+        width: 14
+        height: 14
+        icon.name: "clear"
+        icon.width: 14
+        icon.height: 14
+        onClicked: {
+            edit.clear()
        }
    }

-
 }
@@ -1,71 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Components 0.1
-
-Rectangle {
-    id: root
-    implicitWidth: 168
-    implicitHeight: 95
-
-    property string text: ""
-    property bool highlighted: false
-    property bool enabled: true
-
-    signal clicked(var mouse)
-
-    property StatusIconSettings icon: StatusIconSettings {
-        width: 24
-        height: 24
-        background: StatusIconBackgroundSettings {}
-    }
-
-    color: {
-        let actualColor = Qt.darker(root.icon.color, 1)
-        actualColor.a = sensor.containsMouse && enabled ? 0.3 : 0.2
-        return actualColor
-    }
-
-    radius: 16
-
-    MouseArea {
-        id: sensor
-        cursorShape: root.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
-        anchors.fill: parent
-        hoverEnabled: true
-
-        onClicked: function (mouse) {
-            root.clicked(mouse)
-        }
-
-        StatusRoundIcon {
-            icon.name: root.icon.name
-            icon.width: root.icon.width
-            icon.height: root.icon.height
-            icon.rotation: root.icon.rotation
-            icon.color: Theme.palette.white
-            icon.background.width: 40
-            icon.background.height: 40
-            icon.background.color: root.icon.color
-            anchors.top: parent.top
-            anchors.topMargin: 8
-            anchors.left: parent.left
-            anchors.leftMargin: 8
-        }
-
-        StatusBaseText {
-            text: root.text
-            anchors.left: parent.left
-            anchors.leftMargin: 8
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 8
-            font.pixelSize: 13
-            font.weight: Font.Medium
-            color: Theme.palette.white
-        }
-    }
-}
-
-
@@ -7,26 +7,19 @@ import StatusQ.Components 0.1
 Rectangle {
    id: statusChatInfoButton

-    implicitWidth: identicon.width +
-                   Math.max(
-                       statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonTitle.implicitWidth,
-                       statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonSubTitle.implicitWidth
-                       ) + 8
+    implicitWidth: identicon.width + 
+        Math.max(
+          statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonTitle.width,
+          statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonSubTitle.width
+        ) + 8
    implicitHeight: 48

    property string title: ""
    property string subTitle: ""
    property bool muted: false
    property int pinnedMessagesCount: 0
-    property StatusImageSettings image: StatusImageSettings {
-        width: 36
-        height: 36
-    }
-    property StatusIconSettings icon: StatusIconSettings {
-        width: 36
-        height: 36
-        letterSize: 20
-    }
+    property StatusImageSettings image: StatusImageSettings {}
+    property StatusIconSettings icon: StatusIconSettings {}
    property int type: StatusChatInfoButton.Type.PublicChat
    property alias tooltip: statusToolTip
    property alias sensor: sensor
@@ -34,7 +27,6 @@ Rectangle {
    signal clicked(var mouse)
    signal pinnedMessagesCountClicked(var mouse)
    signal unmute()
-    signal linkActivated(string link)

    enum Type {
        Unknown0, // 0
@@ -57,14 +49,51 @@ Rectangle {

        onClicked: statusChatInfoButton.clicked(mouse)

-        StatusSmartIdenticon {
+        Loader {
            id: identicon
+
            anchors.left: parent.left
            anchors.leftMargin: 4
            anchors.verticalCenter: parent.verticalCenter
-            image: statusChatInfoButton.image
-            icon: statusChatInfoButton.icon
-            name: statusChatInfoButton.title
+
+            sourceComponent: !!statusChatInfoButton.image.source.toString() ?
+                statusRoundImageComponent :
+                statusLetterIdenticonComponent
+        }
+
+        Component {
+            id: statusRoundImageComponent
+
+            Item {
+                width: 36
+                height: 36
+                StatusRoundedImage {
+                    id: statusRoundImage
+                    width: parent.width
+                    height: parent.height
+                    image.source: statusChatInfoButton.image.source
+                    showLoadingIndicator: true
+                    border.width: statusChatInfoButton.image.isIdenticon ? 1 : 0
+                    border.color: Theme.palette.directColor7
+                }
+                Loader {
+                    sourceComponent: statusLetterIdenticonComponent
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    active: statusRoundImage.image.status === Image.Error
+                }
+            }
+        }
+
+        Component {
+            id: statusLetterIdenticonComponent
+
+            StatusLetterIdenticon {
+                width: 36
+                height: 36
+                name: statusChatInfoButton.title
+                color: statusChatInfoButton.icon.color
+            }
        }

        Item {
@@ -74,16 +103,9 @@ Rectangle {
            anchors.left: identicon.right
            anchors.leftMargin: 8

-            width: Math.min(parent.width - anchors.leftMargin
-                            - identicon.width - identicon.anchors.leftMargin,
-                            implicitWidth)
+            width: statusIcon.width + chatName.anchors.leftMargin + chatName.width + (mutedIcon.visible ? mutedIcon.width + mutedIcon.anchors.leftMargin : 0)
            height: chatName.height

-            implicitWidth: statusIcon.width + chatName.anchors.leftMargin + chatName.implicitWidth
-                           + mutedDelta
-
-            property real mutedDelta: mutedIcon.visible ? mutedIcon.width + 8 : 0
-
            StatusIcon {
                id: statusIcon
                anchors.top: parent.top
@@ -95,17 +117,17 @@ Rectangle {
                color: statusChatInfoButton.muted ? Theme.palette.baseColor1 : Theme.palette.directColor1
                icon: {
                    switch (statusChatInfoButton.type) {
-                    case StatusChatInfoButton.Type.PublicCat:
-                        return "tiny/public-chat"
-                        break;
-                    case StatusChatInfoButton.Type.GroupChat:
-                        return "tiny/group"
-                        break;
-                    case StatusChatInfoButton.Type.CommunityChat:
-                        return "tiny/channel"
-                        break;
-                    default:
-                        return "tiny/public-chat"
+                        case StatusChatInfoButton.Type.PublicCat:
+                            return "tiny/public-chat"
+                            break;
+                        case StatusChatInfoButton.Type.GroupChat:
+                            return "tiny/group"
+                            break;
+                        case StatusChatInfoButton.Type.CommunityChat:
+                            return "tiny/channel"
+                            break;
+                        default:
+                            return "tiny/public-chat"
                    }
                }
            }
@@ -117,22 +139,16 @@ Rectangle {
                anchors.leftMargin: statusIcon.visible ? 1 : 0
                anchors.top: parent.top

-                elide: Text.ElideRight
-                width: Math.min(implicitWidth, parent.width
-                                - statusIcon.width
-                                - statusChatInfoButtonTitle.mutedDelta)
-
                text: statusChatInfoButton.type === StatusChatInfoButton.Type.PublicChat &&
-                      !statusChatInfoButton.title.startsWith("#") ?
-                          "#" + statusChatInfoButton.title :
-                          statusChatInfoButton.title
+                    !statusChatInfoButton.title.startsWith("#") ?
+                    "#" + statusChatInfoButton.title :
+                    statusChatInfoButton.title
                color: statusChatInfoButton.muted ? Theme.palette.directColor5 : Theme.palette.directColor1
                font.pixelSize: 15
                font.weight: Font.Medium
            }

            StatusIcon {
-                objectName: "mutedIcon"
                id: mutedIcon
                anchors.left: chatName.right
                anchors.leftMargin: 4
@@ -146,7 +162,7 @@ Rectangle {
                MouseArea {
                    id: mutedIconSensor
                    hoverEnabled: true
-                    cursorShape: Qt.PointingHandCursor
+                    cursorShape: Qt.PointingHandCursor 
                    anchors.fill: parent
                    onClicked: statusChatInfoButton.unmute()
                }
@@ -165,27 +181,15 @@ Rectangle {
            id: statusChatInfoButtonSubTitle
            anchors.left: statusChatInfoButtonTitle.left
            anchors.top: statusChatInfoButtonTitle.bottom
-            visible: !!statusChatInfoButton.subTitle || statusChatInfoButton.pinnedMessagesCount > 0
+            visible: !!statusChatInfoButton.subTitle
            height: visible ? chatType.height : 0
-            width: Math.min(parent.width - statusChatInfoButtonTitle.anchors.leftMargin
-                            - identicon.width - identicon.anchors.leftMargin - 8,
-                            implicitWidth)
+            width: childrenRect.width

-            implicitWidth: chatType.implicitWidth + pinIconDelta + 8
-
-
-            property real pinIconDelta: pinIcon.visible ? pinIcon.width + pinIcon.anchors.leftMargin
-                                                          + divider.width + divider.anchors.leftMargin
-                                                        : 0
-
-            StatusSelectableText {
+            StatusBaseText {
                id: chatType
                text: statusChatInfoButton.subTitle
                color: Theme.palette.baseColor1
                font.pixelSize: 12
-                width: Math.min(parent.width - (pinIcon.visible ? divider.width + divider.anchors.leftMargin + pinIcon.width + pinIcon.anchors.leftMargin : 0),
-                                implicitWidth)
-                onLinkActivated: statusChatInfoButton.linkActivated(link)
            }

            Rectangle {
@@ -196,13 +200,13 @@ Rectangle {
                anchors.left: chatType.right
                anchors.leftMargin: 4
                anchors.verticalCenter: chatType.verticalCenter
-                visible: !!chatType.text && pinIcon.visible
+                visible: pinIcon.visible
            }

            StatusIcon {
                id: pinIcon

-                anchors.left: divider.visible ? divider.right : parent.left
+                anchors.left: divider.right
                anchors.leftMargin: -2
                anchors.verticalCenter: chatType.verticalCenter
                height: 14
@@ -224,11 +228,10 @@ Rectangle {
                color: pinCountSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1

                MouseArea {
-                    objectName: "pinMessagesCounterSensor"
                    id: pinCountSensor
                    anchors.fill: parent
                    hoverEnabled: true
-                    cursorShape: Qt.PointingHandCursor
+                    cursorShape: Qt.PointingHandCursor 
                    onClicked: statusChatInfoButton.pinnedMessagesCountClicked(mouse)
                }
            }
@@ -1,6 +1,5 @@
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
-import StatusQ.Core 0.1

 StatusFlatRoundButton {
    id: statusChatListCategoryItemButton
@@ -10,7 +9,7 @@ StatusFlatRoundButton {
    radius: 4

    property bool highlighted: false
-    property StatusTooltipSettings tooltip: StatusTooltipSettings {}
+    property alias tooltip: statusToolTip

    type: StatusFlatRoundButton.Type.Secondary
    icon.width: 20
@@ -23,9 +22,6 @@ StatusFlatRoundButton {
    StatusToolTip {
        id: statusToolTip
        visible: !!text && parent.hovered
-        text: tooltip.text
-        orientation: tooltip.orientation
-        offset: tooltip.offset
    }
 }

@@ -36,7 +36,6 @@ CheckBox {
        verticalAlignment: Text.AlignVCenter
        wrapMode: Text.WordWrap
        width: parent.width
-        color: Theme.palette.directColor1
        leftPadding: !!statusCheckBox.text ? statusCheckBox.indicator.width + statusCheckBox.spacing
                                           : statusCheckBox.indicator.width
    }
@@ -1,37 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
-import StatusQ.Controls 0.1
-
-Item {
-  id: root
-  property string selectedColor
-  property string label: "Color"
-  property var model
-  height: accountColorInput.height
-  implicitWidth: 448
-
-  StatusSelect {
-      id: accountColorInput
-      bgColor: selectedColor
-      label: root.label
-      model: root.model
-
-      selectMenu.delegate: Component {
-          MenuItem {
-              property bool isFirstItem: index === 0
-              property bool isLastItem: index === root.model.length - 1
-              height: 52
-              width: parent.width
-              padding: 10
-              onTriggered: function () {
-                  const selectedColor = root.model[index]
-                  root.selectedColor = selectedColor
-              }
-              background: Rectangle {
-                  color: root.model[index] || "transparent"
-              }
-          }
-      }
-  }
-}
-
@@ -18,19 +18,14 @@ Rectangle {
                return Theme.palette.directColor1;
            case StatusFlatRoundButton.Type.Primary:
                return Theme.palette.primaryColor1;
-            case StatusFlatRoundButton.Type.Tertiary:
-                return hovered ? Theme.palette.primaryColor1: Theme.palette.baseColor1;
-            case StatusFlatRoundButton.Type.Quaternary:
-                return hovered ? Theme.palette.primaryColor1: Theme.palette.directColor1;
            }
        }

-        disabledColor: {
+        property color disabledColor: {
            switch(statusFlatRoundButton.type) {
            case StatusFlatRoundButton.Type.Secondary:
+                return Theme.palette.baseColor1;
            case StatusFlatRoundButton.Type.Primary:
-            case StatusFlatRoundButton.Type.Tertiary:
-            case StatusFlatRoundButton.Type.Quaternary:
                return Theme.palette.baseColor1;
            }
        }
@@ -39,8 +34,6 @@ Rectangle {
    property bool loading: false

    property alias hovered: sensor.containsMouse
-    property alias tooltip: statusToolTip
-    property alias backgroundHoverColor: backgroundSettings.hoverColor

    property bool highlighted: false

@@ -53,9 +46,7 @@ Rectangle {

    enum Type {
        Primary,
-        Secondary,
-        Tertiary,
-        Quaternary
+        Secondary
    }

    /// Implementation
@@ -67,8 +58,6 @@ Rectangle {
            switch(statusFlatRoundButton.type) {
            case StatusFlatRoundButton.Type.Primary:
            case StatusFlatRoundButton.Type.Secondary:
-            case StatusFlatRoundButton.Type.Tertiary:
-            case StatusFlatRoundButton.Type.Quaternary:
                return "transparent";
            }
        }
@@ -78,8 +67,6 @@ Rectangle {
            case StatusFlatRoundButton.Type.Primary:
                return Theme.palette.primaryColor3;
            case StatusFlatRoundButton.Type.Secondary:
-            case StatusFlatRoundButton.Type.Tertiary:
-            case StatusFlatRoundButton.Type.Quaternary:
                return Theme.palette.baseColor2;
            }
        }
@@ -88,22 +75,9 @@ Rectangle {
            switch(statusFlatRoundButton.type) {
            case StatusFlatRoundButton.Type.Primary:
            case StatusFlatRoundButton.Type.Secondary:
-            case StatusFlatRoundButton.Type.Tertiary:
-            case StatusFlatRoundButton.Type.Quaternary:
                return "transparent";
            }
        }
-
-        property color highlightedColor: {
-            switch(statusFlatRoundButton.type) {
-            case StatusFlatRoundButton.Type.Primary:
-                return Theme.palette.primaryColor3;
-            case StatusFlatRoundButton.Type.Secondary:
-            case StatusFlatRoundButton.Type.Tertiary:
-            case StatusFlatRoundButton.Type.Quaternary:
-                return Theme.palette.baseColor4;
-            }
-        }
    }

    implicitWidth: 44
@@ -112,10 +86,8 @@ Rectangle {

    color: {
        if (statusFlatRoundButton.enabled) {
-            if (sensor.containsMouse) {
-                return backgroundSettings.hoverColor
-            }
-            return highlighted ? backgroundSettings.highlightedColor : backgroundSettings.color
+            return sensor.containsMouse || highlighted ? backgroundSettings.hoverColor
+                                        : backgroundSettings.color
        } else {
            return backgroundSettings.disabledColor
        }
@@ -136,7 +108,6 @@ Rectangle {
            visible: !loading

            icon: statusFlatRoundButton.icon.name
-            source: statusFlatRoundButton.icon.source
            rotation: statusFlatRoundButton.icon.rotation

            width: statusFlatRoundButton.icon.width
@@ -169,9 +140,4 @@ Rectangle {
        onReleased: statusFlatRoundButton.released(mouse)
        onPressAndHold: statusFlatRoundButton.pressAndHold(mouse)
    } // Sensor
-
-    StatusToolTip {
-        id: statusToolTip
-        visible: !!text && parent.hovered
-    } // Tooltip
 } // Rectangle
@@ -20,20 +20,56 @@ TabButton {

    contentItem: Item {
        anchors.fill: parent
-        StatusSmartIdenticon {
-            id: identicon
+
+        Loader {
+            active: true
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
-            image.source: statusIconTabButton.icon.source
-            image.width: 28
-            image.height: 28
-            icon.height: statusIconTabButton.icon.height
-            icon.width: statusIconTabButton.icon.width
-            icon.name: statusIconTabButton.icon.name
-            icon.color: (statusIconTabButton.hovered || highlighted || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color
-            icon.isLetterIdenticon: statusIconTabButton.name !== "" && !statusIconTabButton.icon.source.toString()
-            icon.letterSize: 15
-            name: statusIconTabButton.name
+            sourceComponent: statusIconTabButton.name !== "" && !icon.source.toString() ? letterIdenticon :
+              !!icon.source.toString() ? imageIcon : defaultIcon
+        }
+
+        Component {
+            id: defaultIcon
+            StatusIcon {
+                icon: statusIconTabButton.icon.name
+                height: statusIconTabButton.icon.height
+                width: statusIconTabButton.icon.width
+                color: (statusIconTabButton.hovered || highlighted || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color
+            }
+        }
+
+        Component {
+            id: imageIcon
+            Item {
+                width: 28
+                height: 28
+                StatusRoundedImage {
+                    id: statusRoundImage
+                    showLoadingIndicator: true
+                    width: parent.width
+                    height: parent.height
+                    image.source: icon.source
+                }
+                Loader {
+                    sourceComponent:letterIdenticon
+
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    active: statusRoundImage.image.status === Image.Error
+                }
+            }
+        }
+
+        Component {
+            id: letterIdenticon
+            StatusLetterIdenticon {
+                width: 26
+                height: 26
+                letterSize: 15
+                name: statusIconTabButton.name
+                color: (statusIconTabButton.hovered || highlighted || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color
+            }
        }
    }

@@ -1,214 +0,0 @@
-import QtQuick 2.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Backpressure 1.0
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Controls.Validators 0.1
-
-Item {
-    id: root
-    implicitWidth: 480
-    height: (label.visible ?
-                  label.anchors.topMargin +
-                  label.height :
-              charLimitLabel.visible ?
-                  charLimitLabel.anchors.topMargin +
-                  charLimitLabel.height :
-              0) +
-            statusBaseInput.anchors.topMargin +
-            statusBaseInput.height +
-            (errorMessage.visible ?
-                  errorMessage.anchors.topMargin +
-                  errorMessage.height :
-                  0) + 8
-
-    property alias input: statusBaseInput
-    property alias valid: statusBaseInput.valid
-    property alias pending: statusBaseInput.pending
-    property alias text: statusBaseInput.text
-    property string label: ""
-    property string secondaryLabel: ""
-    property int charLimit: 0
-    property string errorMessage: ""
-    property real leftPadding: 16
-    property real rightPadding: 16
-    property list<StatusValidator> validators
-    property list<StatusAsyncValidator> asyncValidators
-    property int validationMode: StatusInput.ValidationMode.OnlyWhenDirty
-    property string validatedValue
-
-    property var pendingValidators: []
-
-    enum ValidationMode {
-        OnlyWhenDirty, // validates input only after it has become dirty
-        Always // validates input even before it has become dirty
-    }
-
-    property var errors: ({})
-    property var asyncErrors: ({})
-
-    function reset() {
-        statusBaseInput.valid = false
-        statusBaseInput.pristine = true
-        statusBaseInput.text = ""
-        root.errorMessage = ""
-    }
-
-    function validate() {
-        if (!statusBaseInput.dirty && validationMode === StatusInput.ValidationMode.OnlyWhenDirty) {
-            return
-        }
-        statusBaseInput.valid = true
-        if (validators.length) {
-            for (let idx in validators) {
-                let validator = validators[idx]
-                let result = validator.validate(statusBaseInput.text)
-
-                if (typeof result === "boolean" && result) {
-                    statusBaseInput.valid = statusBaseInput.valid && true
-                    delete errors[validator.name]
-                } else {
-                    if (!errors) {
-                        errors = {}
-                    }
-                    if (typeof result === "boolean") {
-                        result = {
-                            valid: result
-                        }
-                    }
-                    result.errorMessage = validator.errorMessage
-                    errors[validator.name] = result
-                    statusBaseInput.valid = statusBaseInput.valid && false
-                }
-            }
-            if (errors){
-                let errs = Object.values(errors)
-                if (errs && errs[0]) {
-                    errorMessage.text = errs[0].errorMessage || root.errorMessage;
-                } else {
-                    errorMessage.text = ""
-                }
-            }
-        }
-
-        if (asyncValidators.length && !Object.values(errors).length) {
-            for (let idx in asyncValidators) {
-                let asyncValidator = asyncValidators[idx]
-                asyncValidator.validationComplete.connect(function (value, valid) {
-                    updateAsyncValidity(asyncValidator.name, value, valid)
-                })
-                root.pending = true
-                pendingValidators.push(asyncValidator.name)
-                asyncValidator.asyncOperationInternal(statusBaseInput.text)
-            }
-        } else if (!asyncValidators.length && !Object.values(errors).length) {
-            root.validatedValue = root.text
-        }
-    }
-
-    function updateAsyncValidity(validatorName, value, result) {
-        if (!asyncErrors) {
-            asyncErrors = {}
-        }
-
-        if (typeof result === "boolean" && result) {
-            if (asyncErrors[validatorName] !== undefined) {
-                delete asyncErrors[validatorName]
-            }
-            errorMessage.text = ""
-            root.validatedValue = value
-        } else {
-            asyncErrors[validatorName] = result
-            for (let idx in asyncValidators) {
-                errorMessage.text = asyncValidators[idx].errorMessage || root.errorMessage
-                break;
-            }
-        }
-        pendingValidators = pendingValidators.filter(v => v !== validatorName)
-        root.pending = pendingValidators.length > 0
-        root.valid = Object.values(asyncErrors).length == 0
-    }
-
-    Component.onCompleted: validate()
-
-    Row {
-        id: labelRow
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.topMargin: visible ? 8 : 0
-        anchors.leftMargin: root.leftPadding
-        anchors.right: (charLimitLabel.visible ? charLimitLabel.right : parent.right)
-        anchors.rightMargin: root.rightPadding
-        height: visible ? 17 : 0
-        visible: !!root.label
-        spacing: 5
-        StatusBaseText {
-            id: label
-            elide: Text.ElideRight
-            text: root.label
-            font.pixelSize: 15
-            color: statusBaseInput.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
-        }
-
-        StatusBaseText {
-            id: secondaryLabel
-            height: visible ? 17 : 0
-            visible: !!root.secondaryLabel
-            elide: Text.ElideRight
-            text: root.secondaryLabel
-            font.pixelSize: 15
-            color: Theme.palette.baseColor1
-        }
-    }
-
-    StatusBaseText {
-        id: charLimitLabel
-        height: visible ? implicitHeight : 0
-        anchors.top: parent.top
-        anchors.right: parent.right
-        anchors.topMargin: visible ? 11 : 0
-        anchors.rightMargin: root.rightPadding
-        visible: root.charLimit > 0
-
-        text: "%1 / %2".arg(statusBaseInput.text.length).arg(root.charLimit)
-        font.pixelSize: 12
-        color: statusBaseInput.enabled ? Theme.palette.baseColor1 : Theme.palette.directColor6
-    }
-
-    StatusBaseInput {
-        id: statusBaseInput
-        anchors.top:  labelRow.visible ? labelRow.bottom :
-                charLimitLabel.visible ? charLimitLabel.bottom : parent.top
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.topMargin: charLimitLabel.visible ? 11 : 8
-        anchors.leftMargin: root.leftPadding
-        anchors.rightMargin: root.rightPadding
-        maximumLength: root.charLimit
-        onTextChanged: root.validate()
-
-        Keys.forwardTo: [root]
-    }
-
-    StatusBaseText {
-        id: errorMessage
-
-        anchors.top: statusBaseInput.bottom
-        anchors.topMargin: 11
-        anchors.right: parent.right
-        anchors.rightMargin: root.rightPadding
-        anchors.left: parent.left
-        anchors.leftMargin: root.leftPadding
-
-        height: visible ? implicitHeight : 0
-        visible: !!text && !statusBaseInput.valid
-
-        font.pixelSize: 12
-        color: Theme.palette.dangerColor1
-
-
-        horizontalAlignment: Text.AlignRight
-        wrapMode: Text.WordWrap
-    }
-}
@@ -1,54 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-
-import StatusQ.Core.Theme 0.1
-import StatusQ.Core 0.1
-
-StatusProgressBar {
-    id: control
-
-    property var strength
-    property string labelVeryWeak: "Very weak"
-    property string labelWeak: "Weak"
-    property string labelSoso: "So-so"
-    property string labelGood: "Good"
-    property string labelGreat: "Great"
-
-    enum Strength {
-        VeryWeak, // 0
-        Weak, // 1
-        SoSo, // 2
-        Good, // 3
-        Great // 4
-    }
-
-    // Behavior:
-    states: [
-        // Strength states definition:
-        State {
-            when: control.strength === StatusPasswordStrengthIndicator.Strength.VeryWeak
-            PropertyChanges { target: control; fillColor : Theme.palette.dangerColor1}
-            PropertyChanges { target: control; text: labelVeryWeak}
-        },
-        State {
-            when: control.strength === StatusPasswordStrengthIndicator.Strength.Weak
-            PropertyChanges { target: control; fillColor : Theme.palette.pinColor1}
-            PropertyChanges { target: control; text: labelWeak}
-        },
-        State {
-            when: control.strength === StatusPasswordStrengthIndicator.Strength.SoSo
-            PropertyChanges { target: control; fillColor : Theme.palette.miscColor7}
-            PropertyChanges { target: control; text: labelSoso}
-        },
-        State {
-            when: control.strength === StatusPasswordStrengthIndicator.Strength.Good
-            PropertyChanges { target: control; fillColor : Theme.palette.miscColor12}
-            PropertyChanges { target: control; text: labelGood}
-        },
-        State {
-            when: control.strength === StatusPasswordStrengthIndicator.Strength.Great
-            PropertyChanges { target: control; fillColor : Theme.palette.successColor1}
-            PropertyChanges { target: control; text: labelGreat}
-        }
-    ]
-}
@@ -1,59 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.12
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-Button {
-    id: root
-    implicitWidth: 446
-    implicitHeight: 44
-
-    property color bgColor: Theme.palette.baseColor2
-    property color contentColor: Theme.palette.baseColor1
-    signal clicked()
-
-    background: Item {
-        anchors.fill: parent
-        Rectangle {
-            id: background
-            anchors.fill: parent
-            radius: 8
-            color: root.bgColor
-        }
-        StatusIcon {
-            id: nextIcon
-            anchors.right: parent.right
-            anchors.rightMargin: 8
-            anchors.verticalCenter: parent.verticalCenter
-            icon: "next"
-            color: !Qt.colorEqual(root.contentColor, Theme.palette.baseColor1)
-                   ? root.contentColor : Theme.palette.directColor1
-        }
-    }
-
-    contentItem: Item {
-        anchors.fill: parent
-        StatusBaseText {
-            id: textLabel
-            anchors {
-                fill: parent
-                leftMargin: 16
-            }
-            verticalAlignment: Text.AlignVCenter
-            font.pixelSize: 15
-            color: root.contentColor
-            text: root.text
-        }
-    }
-
-    MouseArea {
-        id: mouseArea
-        anchors.fill: parent
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-        onClicked: {
-            root.clicked();
-        }
-    }
-}
@@ -1,42 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-
-import StatusQ.Core.Theme 0.1
-import StatusQ.Core 0.1
-
-ProgressBar {
-    id: control
-
-    property string text
-    property color fillColor
-    property color backgroundColor: Theme.palette.directColor8
-
-    width: 416
-    height: 16
-    clip: true
-
-    background: Rectangle {
-        implicitWidth: parent.width
-        implicitHeight: parent.height
-        color: control.backgroundColor
-        radius: 5
-    }
-    contentItem: Item {
-        implicitHeight: parent.height
-
-        Rectangle {
-            id: bar
-            width: control.visualPosition * parent.width
-            height: parent.height
-            color: control.fillColor
-            radius: 5
-
-            StatusBaseText {
-                anchors.centerIn: parent
-                text: control.text
-                font.pixelSize: 12
-                color: Theme.palette.indirectColor1
-            }
-        }
-    }
-}
@@ -21,7 +21,7 @@ Rectangle {
            }
        }

-        disabledColor: {
+        property color disabledColor: {
            switch(statusRoundButton.type) {
            case StatusRoundButton.Type.Primary:
                return Theme.palette.baseColor1;
@@ -77,7 +77,7 @@ Rectangle {
        property color disabledColor: {
            switch(statusRoundButton.type) {
            case StatusRoundButton.Type.Primary:
-                return Theme.palette.baseColor2;
+                return Theme.palette.indirectColor1;
            case StatusRoundButton.Type.Secondary:
                return Theme.palette.baseColor1;
            }
@@ -1,175 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
-import QtQuick.Layouts 1.13
-import QtGraphicalEffects 1.13
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Popups 0.1
-
-Item {
-    enum MenuAlignment {
-        Left,
-        Right,
-        Center
-    }
-    property string label: ""
-    readonly property bool hasLabel: label !== ""
-    property color bgColor: Theme.palette.baseColor2
-    readonly property int labelMargin: 7
-    property var model
-    property alias selectMenu: selectMenu
-    property color bgColorHover: bgColor
-    property alias selectedItemComponent: selectedItemContainer.children
-    property int caretRightMargin: 16
-    property alias select: inputRectangle
-    property int menuAlignment: StatusSelect.MenuAlignment.Right
-    property Item zeroItemsView: Item {}
-    property string validationError: ""
-    property alias validationErrorAlignment: validationErrorText.horizontalAlignment
-    property int validationErrorTopMargin: 11
-    implicitWidth: 448
-
-    id: root
-    height: inputRectangle.height + (hasLabel ? inputLabel.height + labelMargin : 0) + (!!validationError ? (validationErrorText.height + validationErrorTopMargin) : 0)
-
-    StatusBaseText {
-        id: inputLabel
-        visible: hasLabel
-        text: root.label
-        anchors.left: parent.left
-        anchors.leftMargin: 0
-        anchors.top: parent.top
-        anchors.topMargin: 0
-        font.pixelSize: 15
-        color: root.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
-    }
-
-    Rectangle {
-        property bool hovered: false
-        id: inputRectangle
-        height: 56
-        color: hovered ? bgColorHover : bgColor
-        radius: 8
-        anchors.top: root.hasLabel ? inputLabel.bottom : parent.top
-        anchors.topMargin: root.hasLabel ? root.labelMargin : 0
-        anchors.right: parent.right
-        anchors.left: parent.left
-        border.width: !!validationError ? 1 : 0
-        border.color: Theme.palette.dangerColor1
-
-        Item {
-            id: selectedItemContainer
-            anchors.fill: parent
-        }
-
-        StatusIcon {
-            id: caret
-            anchors.right: parent.right
-            anchors.rightMargin: caretRightMargin
-            anchors.verticalCenter: parent.verticalCenter
-            width: 24
-            height: 24
-            icon: "chevron-down"
-            color: Theme.palette.baseColor1
-        }
-    }
-
-    Rectangle {
-        width: selectMenu.width
-        height: selectMenu.height
-        x: selectMenu.x
-        y: selectMenu.y
-        visible: selectMenu.opened
-        color: Theme.palette.statusSelect.menuItemBackgroundColor
-        radius: 8
-        border.color: Theme.palette.baseColor2
-        layer.enabled: true
-        layer.effect: DropShadow {
-            verticalOffset: 3
-            radius: 8
-            samples: 15
-            fast: true
-            cached: true
-            color: Theme.palette.dropShadow
-        }
-    }
-
-    StatusPopupMenu {
-        id: selectMenu
-        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
-        width: parent.width
-        clip: true
-
-        Repeater {
-            id: menuItems
-            model: root.model
-            property int zeroItemsViewHeight
-            delegate: selectMenu.delegate
-            onItemAdded: {
-                root.zeroItemsView.visible = false
-                root.zeroItemsView.height = 0
-            }
-            onItemRemoved: {
-                if (count === 0) {
-                    root.zeroItemsView.visible = true
-                    root.zeroItemsView.height = zeroItemsViewHeight
-                }
-            }
-            Component.onCompleted: {
-                zeroItemsViewHeight = root.zeroItemsView.height
-                root.zeroItemsView.visible = count === 0
-                root.zeroItemsView.height = count !== 0 ? 0 : root.zeroItemsView.height
-                selectMenu.insertItem(0, root.zeroItemsView)
-            }
-        }
-    }
-
-    StatusBaseText {
-        id: validationErrorText
-        visible: !!validationError
-        text: validationError
-        anchors.top: inputRectangle.bottom
-        anchors.topMargin: validationErrorTopMargin
-        anchors.right: parent.right
-        anchors.left: parent.left
-        font.pixelSize: 12
-        height: visible ? implicitHeight : 0
-        color: Theme.palette.dangerColor1
-        horizontalAlignment: TextEdit.AlignRight
-        wrapMode: Text.WordWrap
-    }
-
-    MouseArea {
-        id: mouseArea
-        anchors.fill: inputRectangle
-        cursorShape: Qt.PointingHandCursor
-        hoverEnabled: true
-        onEntered: {
-            inputRectangle.hovered = true
-        }
-        onExited: {
-            inputRectangle.hovered = false
-        }
-        onClicked: {
-            if (selectMenu.opened) {
-                selectMenu.close()
-            } else {
-                const rightOffset = inputRectangle.width - selectMenu.width
-                let offset = rightOffset
-                switch (root.menuAlignment) {
-                    case StatusSelect.MenuAlignment.Left:
-                        offset = 0
-                        break
-                    case StatusSelect.MenuAlignment.Right:
-                        offset = rightOffset
-                        break
-                    case StatusSelect.MenuAlignment.Center:
-                        offset = rightOffset / 2
-                }
-                selectMenu.popup(inputRectangle.x + offset, inputRectangle.y + inputRectangle.height + 8)
-            }
-        }
-    }
-}
-
@@ -1,105 +0,0 @@
-import QtQuick 2.14
-
-import QtQuick.Controls 2.14 as QC
-
-import StatusQ.Controls 0.1
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-
-Item {
-    id: statusSelectableText
-
-    property bool multiline: false
-    property string text: ""
-    property string hoveredLinkColor: Theme.palette.directColor1
-
-    property alias selectedText: edit.selectedText
-    property alias selectedTextColor: edit.selectedTextColor
-    property alias selectionStart: edit.selectionStart
-    property alias selectionEnd: edit.selectionEnd
-    property alias cursorPosition: edit.cursorPosition
-    property alias hoveredLink: edit.hoveredLink
-    property alias color: edit.color
-    property alias font: edit.font
-    property alias focussed: edit.activeFocus
-    property alias verticalAlignmet: edit.verticalAlignment
-    property alias horizontalAlignment: edit.horizontalAlignment
-
-    signal linkActivated(string link)
-
-    implicitWidth: multiline ? 0 :  edit.implicitWidth
-    implicitHeight: edit.implicitHeight
-
-    clip:true
-
-    MouseArea {
-        id: sensor
-        enabled: !edit.activeFocus
-        hoverEnabled: true
-        anchors.fill: parent
-        cursorShape: Qt.IBeamCursor
-        onClicked: {
-            edit.forceActiveFocus()
-        }
-        onExited: {
-            flick.contentX = 0
-            flick.contentY = 0
-        }
-
-        Flickable {
-            id: flick
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            anchors.left:  parent.left
-            anchors.right: parent.right
-            contentWidth: edit.paintedWidth
-            contentHeight: edit.paintedHeight
-            boundsBehavior: Flickable.StopAtBounds
-            QC.ScrollBar.vertical: QC.ScrollBar { interactive: multiline; enabled: multiline }
-            function ensureVisible(r) {
-                if (width-contentX >= r.x) {
-                    contentX = 0;
-                }
-                else if (contentX+width <= r.x+r.width) {
-                    contentX = r.x+r.width-width;
-                }
-                if (contentY >= r.y)
-                    contentY = r.y;
-                else if (contentY+height <= r.y+r.height)
-                    contentY = r.y+r.height-height;
-            }
-            TextEdit {
-                id: edit
-                width: flick.width
-                height: flick.height
-                verticalAlignment: Text.AlignVCenter
-                readOnly: true
-                selectByMouse: true
-                selectionColor: Theme.palette.primaryColor2
-                selectedTextColor: color
-                focus: true
-                font.pixelSize: 15
-                font.family: Theme.palette.baseFont.name
-                color: Theme.palette.directColor1
-                textFormat: Text.RichText
-                onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
-                wrapMode: statusSelectableText.multiline ? Text.WrapAtWordBoundaryOrAnywhere : TextEdit.NoWrap
-
-                Keys.forwardTo: [statusSelectableText]
-
-                onFocusChanged: {
-                    if(!focus) {
-                        flick.contentX = 0
-                        flick.contentY = 0
-                    }
-                }
-
-                onLinkActivated: statusSelectableText.linkActivated(link)
-
-                text: "<style>a:link { color: " + (!!hoveredLink ? statusSelectableText.hoveredLinkColor : Theme.palette.baseColor1) + "; }</style>" + statusSelectableText.text
-            }
-
-        }
-    }
-}
@@ -15,10 +15,8 @@ Slider {
    leftPadding: 0

    background: Rectangle {
-        id: bgRect
-        implicitWidth: 100
        implicitHeight: 4
-        height: implicitHeight
+        implicitWidth: 100
        color: {
            if (statusSlider.value === statusSlider.to) {
                return Theme.palette.primaryColor1
@@ -42,7 +40,7 @@ Slider {

    handle: Rectangle {
        x: statusSlider.leftPadding + statusSlider.visualPosition * (statusSlider.availableWidth - width / 2)
-        anchors.verticalCenter: bgRect.verticalCenter
+        anchors.verticalCenter: parent.verticalCenter
        color: Theme.palette.white
        implicitWidth: 28
        implicitHeight: 28
@@ -1,14 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import StatusQ.Core.Theme 0.1
-
-TabBar {
-    id: statusSwitchTabBar
-    padding: 1
-
-    background: Rectangle {
-        implicitHeight: 36
-        color: Theme.palette.directColor7
-        radius: 8
-    }
-}
--- a/Show More
+++ b/Show More