fix: Icon components had wrong color in sandbox app

Icon color in Icons page was broken as setting it
in main.qml was mistakenly removed. Set it back to
Theme.palette.primaryColor1

Closes #538

.gitignore

@@ -12,3 +12,4 @@ Makefile
 .qmake.stash
 *_qml.cpp
 *_qmlcache.qrc
+sandbox/qmlcache_loader.cpp

CHANGELOG.md

@@ -0,0 +1,607 @@
+<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))
+
+
+

README.md

@@ -9,6 +9,7 @@ These modules are:
 
 - [StatusQ.Core](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/qmldir)
 - [StatusQ.Core.Theme](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Theme/qmldir)
+- [StatusQ.Core.Utils](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Utils/qmldir)
 - [StatusQ.Components](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/qmldir)
 - [StatusQ.Controls](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/qmldir)
 - [StatusQ.Layout](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Layout/qmldir)

sandbox/Buttons.qml

@@ -1,239 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Layouts 1.14
-
-import StatusQ.Controls 0.1
-import StatusQ.Core.Theme 0.1
-
-Grid {
-
-    columns: 3
-    columnSpacing: 38
-    rowSpacing: 10
-
-    horizontalItemAlignment: Grid.AlignHCenter
-
-    // Large
-    StatusButton {
-        text: "Button"
-    }
-
-    StatusButton {
-        text: "Button"
-        enabled: false
-    }
-
-    StatusButton {
-        text: "Button"
-        loading: true
-    }
-
-    StatusButton {
-        text: "Button"
-        type: StatusBaseButton.Type.Danger
-    }
-
-    StatusButton {
-        text: "Button"
-        type: StatusBaseButton.Type.Danger
-        enabled: false
-    }
-
-    StatusButton {
-        text: "Button"
-        loading: true
-        type: StatusBaseButton.Type.Danger
-    }
-
-    StatusFlatButton {
-        text: "Button"
-    }
-
-    StatusFlatButton {
-        text: "Button"
-        enabled: false
-
-    }
-
-    StatusFlatButton {
-        text: "Button"
-        loading: true
-    }
-
-    StatusFlatButton {
-        text: "Button"
-        type: StatusBaseButton.Type.Danger
-    }
-
-    StatusFlatButton {
-        text: "Button"
-        type: StatusBaseButton.Type.Danger
-        enabled: false
-    }
-
-    StatusFlatButton {
-        text: "Button"
-        type: StatusBaseButton.Type.Danger
-        loading: true
-    }
-
-    // Small
-    StatusButton {
-        text: "Button"
-        size: StatusBaseButton.Size.Small
-    }
-
-    StatusButton {
-        text: "Button"
-        enabled: false
-        size: StatusBaseButton.Size.Small
-    }
-
-    StatusButton {
-        text: "Button"
-        size: StatusBaseButton.Size.Small
-        loading: true
-    }
-
-    StatusButton {
-        text: "Button"
-        type: StatusBaseButton.Type.Danger
-        size: StatusBaseButton.Size.Small
-    }
-
-    StatusButton {
-        text: "Button"
-        type: StatusBaseButton.Type.Danger
-        size: StatusBaseButton.Size.Small
-        enabled: false
-    }
-
-    StatusButton {
-        text: "Button"
-        type: StatusBaseButton.Type.Danger
-        size: StatusBaseButton.Size.Small
-        loading: true
-    }
-
-    StatusFlatButton {
-        text: "Button"
-        size: StatusBaseButton.Size.Small
-    }
-
-    StatusFlatButton {
-        text: "Button"
-        enabled: false
-        size: StatusBaseButton.Size.Small
-    }
-
-    StatusFlatButton {
-        text: "Button"
-        enabled: false
-        size: StatusBaseButton.Size.Small
-        loading: true
-    }
-
-    // Icon buttons
-
-    // blue
-
-    StatusRoundButton {
-        icon.name: "info"
-    }
-
-    StatusRoundButton {
-        icon.name: "info"
-        enabled: false
-    }
-
-    StatusRoundButton {
-        icon.name: "info"
-        loading: true
-    }
-
-    // black
-
-    StatusRoundButton {
-        type: StatusRoundButton.Type.Secondary
-        icon.name: "info"
-    }
-
-    StatusRoundButton {
-        type: StatusRoundButton.Type.Secondary
-        icon.name: "info"
-        enabled: false
-    }
-
-    StatusRoundButton {
-        type: StatusRoundButton.Type.Secondary
-        icon.name: "info"
-        loading: true
-    }
-
-    // Rounded blue
-
-    StatusFlatRoundButton {
-        width: 44
-        height: 44
-
-        icon.name: "info"
-    }
-
-    StatusFlatRoundButton {
-        width: 44
-        height: 44
-        icon.name: "info"
-        enabled: false
-    }
-
-    StatusFlatRoundButton {
-        width: 44
-        height: 44
-        icon.name: "info"
-        loading: true
-    }
-
-    // Rounded white
-
-    StatusFlatRoundButton {
-        type: StatusFlatRoundButton.Type.Secondary
-        width: 44
-        height: 44
-
-        icon.name: "info"
-    }
-
-    StatusFlatRoundButton {
-        type: StatusFlatRoundButton.Type.Secondary
-        width: 44
-        height: 44
-        icon.name: "info"
-        enabled: false
-    }
-
-    StatusFlatRoundButton {
-        type: StatusFlatRoundButton.Type.Secondary
-        width: 44
-        height: 44
-        icon.name: "info"
-        loading: true
-    }
-
-    StatusFlatButton {
-        icon.name: "info"
-        text: "Button"
-        size: StatusBaseButton.Size.Small
-    }
-    StatusFlatButton {
-        icon.name: "info"
-        text: "Button"
-        enabled: false
-        size: StatusBaseButton.Size.Small
-    }
-
-    StatusFlatButton {
-        icon.name: "info"
-        text: "Button"
-        loading: true
-        size: StatusBaseButton.Size.Small
-    }
-}

sandbox/DemoApp.qml

@@ -1,52 +1,41 @@
 import QtQuick 2.14
-import QtQuick.Controls 2.14
 
-import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
-import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
 import StatusQ.Popups 0.1
+import StatusQ.Platform 0.1
+
+import "demoapp"
 
 Rectangle {
     id: demoApp
     height: 602
-    width: 902
+    width: 1002
     border.width: 1
     border.color: Theme.palette.baseColor2
 
-    Row {
-        anchors.top: demoApp.top
-        anchors.left: demoApp.left
-        anchors.topMargin: 14
-        anchors.leftMargin: 14
+    property string titleStyle: "osx"
 
-        spacing: 6
+    StatusMacTrafficLights {
+        anchors.left: parent.left
+        anchors.top: parent.top
+        anchors.margins: 13
         z: statusAppLayout.z + 1
+        visible: titleStyle === "osx"
+    }
 
-        Rectangle {
-            color: "#E24640"
-            height: 12
-            width: 12
-            radius: 6
-        }
-        Rectangle {
-            color: "#FFC12F"
-            height: 12
-            width: 12
-            radius: 6
-        }
-        Rectangle {
-            color: "#2ACB42"
-            height: 12
-            width: 12
-            radius: 6
-        }
+    StatusWindowsTitleBar {
+        id: windowsTitle
+        anchors.top: parent.top
+        width: parent.width
+        z: statusAppLayout.z + 1
+        visible: titleStyle === "windows"
     }
 
     StatusAppLayout {
         id: statusAppLayout
-        anchors.top: demoApp.top
+        anchors.top: windowsTitle.visible ? windowsTitle.bottom : demoApp.top
         anchors.left: demoApp.left
         anchors.topMargin: demoApp.border.width
         anchors.leftMargin: demoApp.border.width
@@ -123,16 +112,16 @@ Rectangle {
                     tooltip.text: "Wallet"
                 },
                 StatusNavBarTabButton {
-                    icon.name: "browser"
+                    icon.name: "bigger/browser"
                     tooltip.text: "Browser"
                 },
                 StatusNavBarTabButton {
-                    icon.name: "status-update"
+                    icon.name: "bigger/status-update"
                     tooltip.text: "Timeline"
                 },
                 StatusNavBarTabButton {
                     id: profileNavButton
-                    icon.name: "profile"
+                    icon.name: "bigger/settings"
                     badge.visible: true
                     badge.anchors.rightMargin: 4
                     badge.anchors.topMargin: 5
@@ -147,6 +136,7 @@ Rectangle {
                     }
                 }
             ]
+
         }
 
         appView: Loader {
@@ -158,713 +148,31 @@ Rectangle {
 
     Component {
         id: statusAppChatView
-
-        StatusAppTwoPanelLayout {
-
-            leftPanel: Item {
-                anchors.fill: parent
-
-                StatusNavigationPanelHeadline {
-                    id: headline
-                    anchors.top: parent.top
-                    anchors.topMargin: 16
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    text: "Chat"
-                }
-
-                Column {
-                    anchors.top: headline.bottom
-                    anchors.topMargin: 16
-                    width: parent.width
-                    spacing: 8
-
-                    StatusContactRequestsIndicatorListItem {
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        title: "Contact requests"
-                        requestsCount: 3
-                        sensor.onClicked: demoContactRequestsModal.open()
-                    }
-
-                    StatusChatList {
-                        anchors.horizontalCenter: parent.horizontalCenter
-
-                        chatListItems.model: demoChatListItems
-                        selectedChatId: "0"
-                        onChatItemSelected: selectedChatId = id
-                        onChatItemUnmuted: {
-                            for (var i = 0; i < demoChatListItems.count; i++) {
-                                let item = demoChatListItems.get(i);
-                                if (item.chatId === id) {
-                                    demoChatListItems.setProperty(i, "muted", false)
-                                }
-                            }
-                        }
-
-                        popupMenu: StatusPopupMenu {
-
-                            property string chatId
-
-                            openHandler: function (id) {
-                                chatId = id
-                            }
-
-                            StatusMenuItem {
-                                text: "View Profile"
-                                icon.name: "group-chat"
-                            }
-
-                            StatusMenuSeparator {}
-
-                            StatusMenuItem {
-                                text: "Mute chat"
-                                icon.name: "notification"
-                            }
-
-                            StatusMenuItem {
-                                text: "Mark as Read"
-                                icon.name: "checkmark-circle"
-                            }
-
-                            StatusMenuItem {
-                                text: "Clear history"
-                                icon.name: "close-circle"
-                            }
-
-                            StatusMenuSeparator {}
-
-                            StatusMenuItem {
-                                text: "Delete chat"
-                                icon.name: "delete"
-                                type: StatusMenuItem.Type.Danger
-                            }
-                        }
-                    }
-                }
-            }
-
-            rightPanel: Item {
-                anchors.fill: parent
-
-                StatusChatToolBar {
-                    anchors.top: parent.top
-                    width: parent.width
-
-                    chatInfoButton.title: "Amazing Funny Squirrel"        
-                    chatInfoButton.subTitle: "Contact"
-                    chatInfoButton.icon.color: Theme.palette.miscColor7
-                    chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
-                    chatInfoButton.pinnedMessagesCount: 1
-
-                    notificationCount: 1
-
-                    onNotificationButtonClicked: notificationCount = 0
-
-                    popupMenu: StatusPopupMenu {
-                        id: contextMenu
-
-                        StatusMenuItem {
-                            text: "Mute Chat"
-                            icon.name: "notification"
-                        }
-                        StatusMenuItem {
-                            text: "Mark as Read"
-                            icon.name: "checkmark-circle"
-                        }
-                        StatusMenuItem {
-                            text: "Clear History"
-                            icon.name: "close-circle"
-                        }
-
-                        StatusMenuSeparator {}
-
-                        StatusMenuItem {
-                            text: "Leave Chat"
-                            icon.name: "arrow-right"
-                            icon.width: 14
-                            iconRotation: 180
-                            type: StatusMenuItem.Type.Danger
-                        }
-                    }
-                }
-            }
-        }
+        StatusAppChatView { }
     }
 
     Component {
         id: statusAppCommunityView
-
-        StatusAppTwoPanelLayout {
-
-            leftPanel: Item {
-                id: leftPanel
-                anchors.fill: parent
-
-                StatusChatInfoToolBar {
-                    id: statusChatInfoToolBar
-
-                    anchors.top: parent.top
-                    anchors.horizontalCenter: parent.horizontalCenter
-
-                    chatInfoButton.title: "CryptoKitties"
-                    chatInfoButton.subTitle: "128 Members"
-                    chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-                    chatInfoButton.icon.color: Theme.palette.miscColor6
-                    chatInfoButton.onClicked: demoCommunityDetailModal.open()
-
-                    popupMenu: StatusPopupMenu {
-
-                        StatusMenuItem {
-                            text: "Create channel"
-                            icon.name: "channel"
-                        }
-
-                        StatusMenuItem {
-                            text: "Create category"
-                            icon.name: "channel-category"
-                        }
-
-                        StatusMenuSeparator {}
-
-                        StatusMenuItem {
-                            text: "Invite people"
-                            icon.name: "share-ios"
-                        }
-
-                    }
-                }
-
-                ScrollView {
-                    id: scrollView
-
-                    anchors.top: statusChatInfoToolBar.bottom
-                    anchors.topMargin: 8
-                    anchors.bottom: parent.bottom
-                    width: leftPanel.width
-
-                    contentHeight: communityCategories.height
-                    clip: true
-
-                    StatusChatListAndCategories {
-                        id: communityCategories
-                        height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
-                        width: leftPanel.width
-
-                        chatList.model: demoCommunityChatListItems
-                        categoryList.model: demoCommunityCategoryItems
-
-                        showCategoryActionButtons: true
-                        onChatItemSelected: selectedChatId = id
-
-                        categoryPopupMenu: StatusPopupMenu {
-
-                            property string categoryId
-
-                            openHandler: function (id) {
-                                categoryId = id
-                            }
-
-                            StatusMenuItem {
-                                text: "Mute Category"
-                                icon.name: "notification"
-                            }
-
-                            StatusMenuItem { 
-                                text: "Mark as Read"
-                                icon.name: "checkmark-circle"
-                            }
-
-                            StatusMenuItem { 
-                                text: "Edit Category"
-                                icon.name: "edit"
-                            }
-
-                            StatusMenuSeparator {}
-
-                            StatusMenuItem {
-                                text: "Delete Category"
-                                icon.name: "delete"
-                                type: StatusMenuItem.Type.Danger
-                            }
-                        }
-
-                        chatListPopupMenu: StatusPopupMenu {
-
-                            property string chatId
-
-                            StatusMenuItem {
-                                text: "Mute chat"
-                                icon.name: "notification"
-                            }
-
-                            StatusMenuItem {
-                                text: "Mark as Read"
-                                icon.name: "checkmark-circle"
-                            }
-
-                            StatusMenuItem {
-                                text: "Clear history"
-                                icon.name: "close-circle"
-                            }
-
-                            StatusMenuSeparator {}
-
-                            StatusMenuItem {
-                                text: "Delete chat"
-                                icon.name: "delete"
-                                type: StatusMenuItem.Type.Danger
-                            }
-                        }
-
-                        popupMenu: StatusPopupMenu {
-                            StatusMenuItem {
-                                text: "Create channel"
-                                icon.name: "channel"
-                            }
-
-                            StatusMenuItem {
-                                text: "Create category"
-                                icon.name: "channel-category"
-                            }
-
-                            StatusMenuSeparator {}
-
-                            StatusMenuItem {
-                                text: "Invite people"
-                                icon.name: "share-ios"
-                            }
-                        }
-                    }
-                }
-            }
-
-            rightPanel: Item {
-                anchors.fill: parent
-
-                StatusChatToolBar {
-                    anchors.top: parent.top
-                    width: parent.width
-
-                    chatInfoButton.title: "general"        
-                    chatInfoButton.subTitle: "Community Chat"
-                    chatInfoButton.icon.color: Theme.palette.miscColor6
-                    chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
-                }
+        StatusAppCommunityView {
+            communityDetailModalTitle: demoCommunityDetailModal.header.title
+            communityDetailModalImage: demoCommunityDetailModal.header.image.source
+            onChatInfoButtonClicked: {
+                demoCommunityDetailModal.open();
             }
         }
     }
 
     Component {
         id: statusAppProfileSettingsView
-
-        StatusAppTwoPanelLayout {
-
-            leftPanel: Item {
-                anchors.fill: parent
-
-                StatusNavigationPanelHeadline {
-                    id: profileHeadline
-                    anchors.top: parent.top
-                    anchors.topMargin: 16
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    text: "Profile"
-                }
-
-                ScrollView {
-                    anchors.top: profileHeadline.bottom
-                    anchors.topMargin: 16
-                    anchors.bottom: parent.bottom
-                    width: parent.width
-
-                    contentHeight: profileMenuItems.height + 8
-                    contentWidth: parent.width
-                    clip: true
-
-                    Column {
-                        id: profileMenuItems
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        spacing: 4
-
-                        Repeater {
-                            model: demoProfileGeneralMenuItems
-                            delegate: StatusNavigationListItem {
-                                title: model.title
-                                icon.name: model.icon
-                            }
-                        }
-
-                        StatusListSectionHeadline { text: "Settings" }
-
-                        Repeater {
-                            model: demoProfileSettingsMenuItems
-                            delegate: StatusNavigationListItem {
-                                title: model.title
-                                icon.name: model.icon
-                            }
-                        }
-
-                        Item { 
-                            id: invisibleSeparator
-                            height: 16
-                            width: parent.width
-                        }
-
-                        Repeater {
-                            model: demoProfileOtherMenuItems
-                            delegate: StatusNavigationListItem {
-                                title: model.title
-                                icon.name: model.icon
-                            }
-                        }
-                    }
-                }
-            }
-
-            rightPanel: Item {
-                anchors.fill: parent
-            }
-        }
+        StatusAppProfileSettingsView { }
     }
 
-    StatusModal {
+    DemoContactRequestsModal {
         id: demoContactRequestsModal
         anchors.centerIn: parent
-
-        header.title: "Contact Requests"
-        headerActionButton: StatusFlatRoundButton {
-            type: StatusFlatRoundButton.Type.Secondary
-            width: 32
-            height: 32
-
-            icon.width: 20
-            icon.height: 20
-            icon.name: "notification"
-        }
-
-        content: StatusBaseText {
-            anchors.centerIn: parent
-            text: "Contact request will be shown here"
-            font.pixelSize: 15
-            color: Theme.palette.directColor1
-        }
-
-        rightButtons: [
-            StatusButton {
-                text: "Decline all"
-                type: StatusBaseButton.Type.Danger
-                onClicked: demoContactRequestsModal.close()
-            },
-            StatusButton {
-                text: "Accept all"
-                onClicked: demoContactRequestsModal.close()
-            }
-        ]
     }
 
-    StatusModal {
+    DemoCommunityDetailModal {
         id: demoCommunityDetailModal
-
-        anchors.centerIn: parent
-
-        header.title: "Cryptokitties"        
-        header.subTitle: "Public Community"
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-
-        content: Column {
-            width: demoCommunityDetailModal.width
-
-            StatusModalDivider { 
-                bottomPadding: 8 
-            }
-
-            StatusBaseText {
-                text: "A community of cat lovers, meow!"
-                verticalAlignment: Text.AlignVCenter
-                font.pixelSize: 15
-                height: 46
-                color: Theme.palette.directColor1
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.leftMargin: 16
-                anchors.rightMargin: 16
-            }
-
-            StatusModalDivider {
-                topPadding: 8
-                bottomPadding: 8
-            }
-
-            StatusDescriptionListItem {
-                title: "Share community"
-                subTitle: "https://join.status.im/u/0x04...45f19"
-                tooltip.text: "Copy to clipboard"
-                icon.name: "copy"
-                iconButton.onClicked: tooltip.visible = !tooltip.visible
-                width: parent.width
-            }
-
-            StatusModalDivider {
-                topPadding: 8
-                bottomPadding: 8
-            }
-
-            StatusListItem {
-                anchors.horizontalCenter: parent.horizontalCenter
-                statusListItemTitle.font.pixelSize: 17
-                title: "Members"
-                icon.name: "group-chat"
-                label: "184"
-                components: [
-                    StatusIcon {
-                        icon: "chevron-down"
-                        rotation: 270
-                        color: Theme.palette.baseColor1
-                    }
-                ]
-            }
-
-            StatusListItem {
-                anchors.horizontalCenter: parent.horizontalCenter
-                statusListItemTitle.font.pixelSize: 17
-                title: "Notifications"
-                icon.name: "notification"
-                components: [
-                    StatusSwitch {}
-                ]
-            }
-
-            StatusModalDivider {
-                topPadding: 8
-                bottomPadding: 8
-            }
-
-            StatusListItem {
-                anchors.horizontalCenter: parent.horizontalCenter
-                statusListItemTitle.font.pixelSize: 17
-                title: "Edit community"
-                icon.name: "edit"
-                type: StatusListItem.Type.Secondary
-            }
-
-            StatusListItem {
-                anchors.horizontalCenter: parent.horizontalCenter
-                statusListItemTitle.font.pixelSize: 17
-                title: "Transfer ownership"
-                icon.name: "exchange"
-                type: StatusListItem.Type.Secondary
-            }
-
-            StatusListItem {
-                anchors.horizontalCenter: parent.horizontalCenter
-                statusListItemTitle.font.pixelSize: 17
-                title: "Leave community"
-                icon.name: "arrow-right"
-                icon.rotation: 180
-                type: StatusListItem.Type.Secondary
-            }
-        }
-    }
-
-    ListModel {
-        id: demoChatListItems
-        ListElement {
-            chatId: "0"
-            name: "#status"
-            chatType: StatusChatListItem.Type.PublicChat
-            muted: false
-            hasUnreadMessages: false
-            hasMention: false
-            unreadMessagesCount: 0
-            color: "blue"
-        }
-        ListElement {
-            chatId: "1"
-            name: "status-desktop"
-            chatType: StatusChatListItem.Type.PublicChat
-            muted: false
-            hasUnreadMessages: true
-            color: "red"
-            unreadMessagesCount: 1
-        }
-        ListElement {
-            chatId: "2"
-            name: "Amazing Funny Squirrel"
-            chatType: StatusChatListItem.Type.OneToOneChat
-            muted: false
-            hasUnreadMessages: false
-            color: "green"
-            identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
-CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-            unreadMessagesCount: 0
-        }
-        ListElement {
-            chatId: "3"
-            name: "Black Ops"
-            chatType: StatusChatListItem.Type.GroupChat
-            muted: false
-            hasUnreadMessages: false
-            color: "purple"
-            unreadMessagesCount: 0
-        }
-        ListElement {
-            chatId: "4"
-            name: "Spectacular Growing Otter"
-            chatType: StatusChatListItem.Type.OneToOneChat
-            muted: true
-            hasUnreadMessages: false
-            color: "Orange"
-            unreadMessagesCount: 0
-        }
-        ListElement {
-            chatId: "5"
-            name: "channel-with-a-super-duper-long-name"
-            chatType: StatusChatListItem.Type.PublicChat
-            muted: false
-            hasUnreadMessages: false
-            color: "green"
-            unreadMessagesCount: 0
-        }
-    }
-
-    ListModel {
-        id: demoCommunityChatListItems
-        ListElement {
-            chatId: "0"
-            name: "general"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            hasUnreadMessages: false
-            hasMention: false
-            unreadMessagesCount: 0
-            color: "orange"
-        }
-        ListElement {
-            chatId: "1"
-            name: "random"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            hasUnreadMessages: false
-            hasMention: false
-            unreadMessagesCount: 0
-            color: "orange"
-            categoryId: "public"
-        }
-        ListElement {
-            chatId: "2"
-            name: "watercooler"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            hasUnreadMessages: false
-            hasMention: false
-            unreadMessagesCount: 0
-            color: "orange"
-            categoryId: "public"
-        }
-        ListElement {
-            chatId: "3"
-            name: "language-design"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            hasUnreadMessages: false
-            hasMention: false
-            unreadMessagesCount: 0
-            color: "orange"
-            categoryId: "dev"
-        }
-    }
-
-    ListModel {
-        id: demoCommunityCategoryItems
-        ListElement {
-            categoryId: "public"
-            name: "Public"
-        }
-        ListElement {
-            categoryId: "dev"
-            name: "Development"
-        }
-    }
-
-    ListModel {
-        id: demoProfileGeneralMenuItems
-
-        ListElement {
-            title: "My Profile"
-            icon: "profile"
-        }
-
-        ListElement {
-            title: "Contacts"
-            icon: "contact"
-        }
-
-        ListElement {
-            title: "ENS Usernames"
-            icon: "username"
-        }
-
-    }
-
-    ListModel {
-        id: demoProfileSettingsMenuItems
-
-        ListElement {
-            title: "Privacy & Security"
-            icon: "security"
-        }
-
-        ListElement {
-            title: "Appearance"
-            icon: "appearance"
-        }
-
-        ListElement {
-            title: "Browser"
-            icon: "browser"
-        }
-
-        ListElement {
-            title: "Sounds"
-            icon: "sound"
-        }
-
-        ListElement {
-            title: "Language"
-            icon: "language"
-        }
-
-        ListElement {
-            title: "Notifications"
-            icon: "notification"
-        }
-
-        ListElement {
-            title: "Sync settings"
-            icon: "mobile"
-        }
-
-        ListElement {
-            title: "Advanced"
-            icon: "settings"
-        }
-
-    }
-
-    ListModel {
-        id: demoProfileOtherMenuItems
-
-        ListElement {
-            title: "Need help?"
-            icon: "help"
-        }
-
-        ListElement {
-            title: "About"
-            icon: "info"
-        }
-
-        ListElement {
-            title: "Sign out & Quit"
-            icon: "logout"
-        }
     }
 }

sandbox/Popups.qml

@@ -1,174 +0,0 @@
-import QtQuick 2.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Popups 0.1
-
-Column {
-    spacing: 20
-
-    StatusButton {
-        text: "Simple modal"
-        onClicked: simpleModal.open()
-    }
-
-    StatusButton {
-        text: "Modal with header image"
-        onClicked: headerImageModal.open()
-    }
-
-    StatusButton {
-        text: "Modal with footer buttons"
-        onClicked: footerButtonsModal.open()
-    }
-
-    StatusButton {
-        text: "Modal with header action button"
-        onClicked: headerActionButtonModal.open()
-    }
-
-    StatusButton {
-        text: "Modal with content"
-        onClicked: modalExample.open()
-    }
-
-    StatusButton {
-        text: "Modal with changable content"
-        onClicked: modalWithContentAccess.open()
-    }
-
-    StatusModal {
-        id: simpleModal
-        anchors.centerIn: parent
-        header.title: "Some Title"
-        header.subTitle: "Subtitle"
-    }
-
-    StatusModal {
-        id: headerImageModal
-        anchors.centerIn: parent
-        header.title: "Some Title"
-        header.subTitle: "Subtitle"
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-    }
-
-    StatusModal {
-        id: footerButtonsModal
-        anchors.centerIn: parent
-        header.title: "Some Title"
-        header.subTitle: "Subtitle"
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-        leftButtons: [
-            StatusRoundButton {
-                icon.name: "arrow-right"
-                rotation: 180
-            }
-        ]
-        rightButtons: [
-            StatusButton {
-                text: "Button"
-            },
-            StatusButton {
-                text: "Button"
-            }
-        ]
-    }
-
-    StatusModal {
-        id: headerActionButtonModal
-        anchors.centerIn: parent
-        header.title: "Some Title"
-        header.subTitle: "Subtitle"
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-
-        headerActionButton: StatusFlatRoundButton {
-            type: StatusFlatRoundButton.Type.Secondary
-            width: 32
-            height: 32
-
-            icon.width: 20
-            icon.height: 20
-            icon.name: "info"
-        }
-
-        leftButtons: [
-            StatusRoundButton {
-                icon.name: "arrow-right"
-                rotation: 180
-            }
-        ]
-        rightButtons: [
-            StatusButton {
-                text: "Button"
-            },
-            StatusButton {
-                text: "Button"
-            }
-        ]
-    }
-
-    StatusModal {
-        id: modalExample
-        anchors.centerIn: parent
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-        header.title: "Header"
-        header.subTitle: "SubTitle"
-        rightButtons: [
-            StatusButton {
-                text: "Button"
-            },
-            StatusButton {
-                text: "Button"
-            }
-        ]
-
-        leftButtons: [
-            StatusRoundButton {
-                icon.name: "arrow-right"
-                rotation: 180
-            }
-        ]
-
-        content: StatusBaseText {
-            anchors.centerIn: parent
-            text: "Some text content"
-            font.pixelSize: 15
-            color: Theme.palette.directColor1
-        }
-
-        headerActionButton: StatusFlatRoundButton {
-            type: StatusFlatRoundButton.Type.Secondary
-            width: 32
-            height: 32
-
-            icon.width: 20
-            icon.height: 20
-            icon.name: "info"
-        }
-    }
-
-    StatusModal {
-        id: modalWithContentAccess
-        anchors.centerIn: parent
-        header.title: "Header"
-        header.subTitle: "SubTitle"
-
-        content: StatusBaseText {
-            id: text
-            anchors.centerIn: parent
-            text: "Some text content"
-            font.pixelSize: 15
-            color: Theme.palette.directColor1
-        }
-
-        rightButtons: [
-            StatusButton {
-                text: "Change text"
-                onClicked: {
-                    modalWithContentAccess.contentComponent.text = "Changed!"
-                }
-            }
-        ]
-    }
-}

sandbox/StatusPopupMenuPage.qml

@@ -1,72 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Layouts 1.14
-import QtQuick.Controls 2.13
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Popups 0.1
-
-GridLayout {
-    columns: 1
-    columnSpacing: 5
-    rowSpacing: 5
-
-    StatusButton {
-        text: "Simple"
-        onClicked: simpleMenu.popup()
-    }
-
-    StatusButton {
-        text: "Complex"
-        onClicked: complexMenu.popup()
-    }
-
-    StatusPopupMenu {
-        id: simpleMenu
-        StatusMenuItem { 
-            text: "One" 
-        }
-
-        StatusMenuItem { 
-            text: "Two"
-        }
-
-        StatusMenuItem { 
-            text: "Three"
-        }
-    }
-
-    StatusPopupMenu {
-        id: complexMenu
-        subMenuItemIcons: ['info']
-        StatusMenuItem { 
-            text: "One" 
-            icon.name: "info"
-        }
-
-        StatusMenuSeparator {}
-
-        StatusMenuItem { 
-            text: "Two"
-            icon.name: "info"
-        }
-
-        StatusMenuItem { 
-            text: "Three"
-            icon.name: "info"
-        }
-
-        StatusPopupMenu {
-            title: "Four"
-            StatusMenuItem { 
-                text: "One"
-                icon.name: "info"
-            }
-            StatusMenuItem { 
-                text: "Three"
-                icon.name: "info"
-            }
-        }
-    }
-}

sandbox/controls/Buttons.qml

@@ -0,0 +1,318 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import QtQuick.Dialogs 1.3
+
+import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1
+
+
+Column {
+    spacing: 10
+    Grid {
+        id: buttonGridWidth
+        columns: 3
+        columnSpacing: 38
+        rowSpacing: 10
+
+        horizontalItemAlignment: Grid.AlignHCenter
+
+        // Large
+        StatusButton {
+            text: "Button"
+        }
+
+        StatusButton {
+            text: "Button"
+            enabled: false
+        }
+
+        StatusButton {
+            text: "Button"
+            loading: true
+        }
+
+        StatusButton {
+            text: "Button"
+            type: StatusBaseButton.Type.Danger
+        }
+
+        StatusButton {
+            text: "Button"
+            type: StatusBaseButton.Type.Danger
+            enabled: false
+        }
+
+        StatusButton {
+            text: "Button"
+            loading: true
+            type: StatusBaseButton.Type.Danger
+        }
+
+        StatusFlatButton {
+            text: "Button"
+        }
+
+        StatusFlatButton {
+            text: "Button"
+            enabled: false
+
+        }
+
+        StatusFlatButton {
+            text: "Button"
+            loading: true
+        }
+
+        StatusFlatButton {
+            text: "Button"
+            type: StatusBaseButton.Type.Danger
+        }
+
+        StatusFlatButton {
+            text: "Button"
+            type: StatusBaseButton.Type.Danger
+            enabled: false
+        }
+
+        StatusFlatButton {
+            text: "Button"
+            type: StatusBaseButton.Type.Danger
+            loading: true
+        }
+
+        // Small
+        StatusButton {
+            text: "Button"
+            size: StatusBaseButton.Size.Small
+        }
+
+        StatusButton {
+            text: "Button"
+            enabled: false
+            size: StatusBaseButton.Size.Small
+        }
+
+        StatusButton {
+            text: "Button"
+            size: StatusBaseButton.Size.Small
+            loading: true
+        }
+
+        StatusButton {
+            text: "Button"
+            type: StatusBaseButton.Type.Danger
+            size: StatusBaseButton.Size.Small
+        }
+
+        StatusButton {
+            text: "Button"
+            type: StatusBaseButton.Type.Danger
+            size: StatusBaseButton.Size.Small
+            enabled: false
+        }
+
+        StatusButton {
+            text: "Button"
+            type: StatusBaseButton.Type.Danger
+            size: StatusBaseButton.Size.Small
+            loading: true
+        }
+
+        StatusFlatButton {
+            text: "Button"
+            size: StatusBaseButton.Size.Small
+        }
+
+        StatusFlatButton {
+            text: "Button"
+            enabled: false
+            size: StatusBaseButton.Size.Small
+        }
+
+        StatusFlatButton {
+            text: "Button"
+            enabled: false
+            size: StatusBaseButton.Size.Small
+            loading: true
+        }
+
+        // Icon buttons
+
+        // blue
+
+        StatusRoundButton {
+            icon.name: "info"
+        }
+
+        StatusRoundButton {
+            icon.name: "info"
+            enabled: false
+        }
+
+        StatusRoundButton {
+            icon.name: "info"
+            loading: true
+        }
+
+        // black
+
+        StatusRoundButton {
+            type: StatusRoundButton.Type.Secondary
+            icon.name: "info"
+        }
+
+        StatusRoundButton {
+            type: StatusRoundButton.Type.Secondary
+            icon.name: "info"
+            enabled: false
+        }
+
+        StatusRoundButton {
+            type: StatusRoundButton.Type.Secondary
+            icon.name: "info"
+            loading: true
+        }
+
+        // Rounded blue
+
+        StatusFlatRoundButton {
+            width: 44
+            height: 44
+
+            icon.name: "info"
+        }
+
+        StatusFlatRoundButton {
+            width: 44
+            height: 44
+            icon.name: "info"
+            enabled: false
+        }
+
+        StatusFlatRoundButton {
+            width: 44
+            height: 44
+            icon.name: "info"
+            loading: true
+        }
+
+        // Rounded white
+
+        StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Secondary
+            width: 44
+            height: 44
+
+            icon.name: "info"
+        }
+
+        StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Secondary
+            width: 44
+            height: 44
+            icon.name: "info"
+            enabled: false
+        }
+
+        StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Secondary
+            width: 44
+            height: 44
+            icon.name: "info"
+            loading: true
+        }
+
+        StatusFlatButton {
+            icon.name: "info"
+            text: "Button"
+            size: StatusBaseButton.Size.Small
+        }
+        StatusFlatButton {
+            icon.name: "info"
+            text: "Button"
+            enabled: false
+            size: StatusBaseButton.Size.Small
+        }
+
+        StatusFlatButton {
+            icon.name: "info"
+            text: "Button"
+            loading: true
+            size: StatusBaseButton.Size.Small
+        }
+
+        // Tertiary
+        StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Tertiary
+            icon.name: "gif"
+        }
+
+        StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Tertiary
+            icon.name: "gif"
+            enabled: false
+        }
+
+        StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Tertiary
+            icon.name: "gif"
+            loading: true
+        }
+
+        // No background Tertiary
+        StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Tertiary
+            color: "transparent"
+            icon.name: "gif"
+        }
+
+        StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Tertiary
+            icon.name: "gif"
+            color: "transparent"
+            enabled: false
+        }
+
+        StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Tertiary
+            icon.name: "gif"
+            color: "transparent"
+            loading: true
+        }
+
+        // Quartenery
+        StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Quaternary
+            icon.name: "gif"
+        }
+
+        StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Quaternary
+            icon.name: "gif"
+            enabled: false
+        }
+
+        StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Quaternary
+            icon.name: "gif"
+            loading: true
+        }
+    }
+
+    StatusPickerButton {
+        width: buttonGridWidth.width
+        bgColor: colorDialog.colorSelected ? colorDialog.color : Theme.palette.baseColor2
+        contentColor: colorDialog.colorSelected ? Theme.palette.indirectColor1 : Theme.palette.baseColor1
+        text: colorDialog.colorSelected ? colorDialog.color.toString().toUpperCase() : "Pick a color"
+        onClicked: {
+            colorDialog.open();
+        }
+        ColorDialog {
+            id: colorDialog
+            property bool colorSelected: false
+            onAccepted: {
+                colorSelected = true;
+            }
+        }
+    }
+}

sandbox/controls/Controls.qml

@@ -8,10 +8,25 @@ import StatusQ.Controls 0.1
 import Sandbox 0.1
 
 GridLayout {
-    columns: 6
+    columns: 1
     columnSpacing: 5
     rowSpacing: 5
 
+    StatusSelectableText {
+        color: Theme.palette.baseColor1
+        text: "This is a multiline paragraph that can be selected and copied. A paragraph is a group of words put together to form a group that is usually longer than a sentence. Paragraphs are often made up of several sentences. There are usually between three and eight sentences. Paragraphs can begin with an indentation (about five spaces), or by missing a line out, and then starting again."
+        font.pixelSize: 15
+        width: 300
+        multiline: true
+    }
+
+    StatusSelectableText {
+        color: Theme.palette.baseColor1
+        text: "<p>This is a selectable link in rich text format to test <a href='www.google.com'>www.google.com</a></p>"
+        font.pixelSize: 15
+        width: 200
+    }
+
     StatusIconTabButton {
         icon.name: "chat"
     }
@@ -115,6 +130,36 @@ GridLayout {
         pinnedMessagesCount: 1
     }
 
+    Item {
+        implicitWidth: 100
+        implicitHeight: 48
+        StatusChatInfoButton {
+            title: "Iuri Matias elided"
+            subTitle: "Contact"
+            icon.color: Theme.palette.miscColor7
+            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            type: StatusChatInfoButton.Type.OneToOneChat
+            muted: true
+            pinnedMessagesCount: 1
+            width: 100
+        }
+    }
+
+    Item {
+        implicitWidth: 100
+        implicitHeight: 48
+        StatusChatInfoButton {
+            title: "Iuri Matias big not elided"
+            subTitle: "Contact"
+            icon.color: Theme.palette.miscColor7
+            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            type: StatusChatInfoButton.Type.OneToOneChat
+            muted: true
+            pinnedMessagesCount: 1
+            width: 400
+        }
+    }
+
     StatusChatInfoButton {
         title: "group"
         subTitle: "Group Chat"
@@ -144,31 +189,18 @@ GridLayout {
         value: 40
     }
 
-    StatusBaseInput {
-        placeholderText: "One line"
+    StatusBanner {
+        id: banner
+        width: 360
+        topPadding: 20
+        type: StatusBanner.Type.Danger
+        statusText: "Banner"
     }
 
-    StatusBaseInput {
-        multiline: true
-        placeholderText: "Multiline"
-    }
-
-    StatusBaseInput {
-        multiline: true
-        placeholderText: "Multiline with static height"
-        implicitHeight: 100
-    }
-
-    Item {
-        implicitHeight: 300
-        implicitWidth: 300
-
-        StatusBaseInput {
-            anchors.centerIn: parent
-            multiline: true
-            placeholderText: "Multiline with max/min"
-            minimumHeight: 80
-            maximumHeight: 200
-        }
+    StatusProgressBar {
+        id: progressBar        
+        text: "Weak"
+        value: 0.5
+        fillColor : Theme.palette.pinColor1
     }
 }

sandbox/controls/ListItems.qml

@@ -95,11 +95,20 @@ GridLayout {
         onUnmute: muted = false
     }
 
+    StatusChatListItem {
+        name: "muted-with-mentions"
+        type: StatusChatListItem.Type.PublicChat
+        muted: true
+        hasUnreadMessages: true
+        badge.value: 1
+    }
+
     StatusChatListItem {
         name: "selected-channel"
         type: StatusChatListItem.Type.PublicChat
         selected: true
     }
+
     StatusChatListItem {
         name: "selected-muted-channel"
         type: StatusChatListItem.Type.PublicChat
@@ -107,6 +116,24 @@ 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
+        badge.value: 1
+    }
+
+
     StatusListItem {
         title: "Title"
     }
@@ -116,19 +143,45 @@ 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"
@@ -230,11 +283,56 @@ GridLayout {
         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"
@@ -247,4 +345,38 @@ GridLayout {
         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
+    }
 }

sandbox/controls/Popups.qml

@@ -0,0 +1,367 @@
+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"]
+    }
+}

sandbox/demoapp/DemoCommunityDetailModal.qml

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

sandbox/demoapp/DemoContactRequestsModal.qml

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

sandbox/demoapp/StatusAppChatView.qml

@@ -0,0 +1,348 @@
+import QtQuick 2.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
+
+    leftPanel: Item {
+        anchors.fill: parent
+
+        StatusNavigationPanelHeadline {
+            id: headline
+            anchors.top: parent.top
+            anchors.topMargin: 16
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: "Chat"
+        }
+
+        Item {
+            id: searchInputWrapper
+            anchors.top: headline.bottom
+            anchors.topMargin: 16
+            width: parent.width
+            height: searchInput.height
+
+            StatusBaseInput {
+                id: searchInput
+
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: parent.left
+                anchors.right: actionButton.left
+                anchors.leftMargin: 16
+                anchors.rightMargin: 16
+
+                height: 36
+                topPadding: 8
+                bottomPadding: 0
+                placeholderText: "Search"
+                icon.name: "search"
+            }
+
+            StatusRoundButton {
+                id: actionButton
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.right: parent.right
+                anchors.rightMargin: 8
+                width: 32
+                height: 32
+
+                type: StatusRoundButton.Type.Secondary
+                icon.name: "add"
+                state: "default"
+
+                onClicked: chatContextMenu.popup(actionButton.width-chatContextMenu.width, actionButton.height + 4)
+                states: [
+                    State {
+                        name: "default"
+                        PropertyChanges {
+                            target: actionButton
+                            icon.rotation: 0
+                            highlighted: false
+                        }
+                    },
+                    State {
+                        name: "pressed"
+                        PropertyChanges {
+                            target: actionButton
+                            icon.rotation: 45
+                            highlighted: true
+                        }
+                    }
+                ]
+
+                transitions: [
+                    Transition {
+                        from: "default"
+                        to: "pressed"
+
+                        RotationAnimation {
+                            duration: 150
+                            direction: RotationAnimation.Clockwise
+                            easing.type: Easing.InCubic
+                        }
+                    },
+                    Transition {
+                        from: "pressed"
+                        to: "default"
+                        RotationAnimation {
+                            duration: 150
+                            direction: RotationAnimation.Counterclockwise
+                            easing.type: Easing.OutCubic
+                        }
+                    }
+                ]
+
+                StatusPopupMenu {
+                    id: chatContextMenu
+
+                    onOpened: {
+                        actionButton.state = "pressed"
+                    }
+
+                    onClosed: {
+                        actionButton.state = "default"
+                    }
+
+                    StatusMenuItem {
+                        text: "Start new chat"
+                        icon.name: "private-chat"
+                    }
+
+                    StatusMenuItem {
+                        text: "Start group chat"
+                        icon.name: "group-chat"
+                    }
+
+                    StatusMenuItem {
+                        text: "Join public chat"
+                        icon.name: "public-chat"
+                    }
+
+                    StatusMenuItem {
+                        text: "Communities"
+                        icon.name: "communities"
+                    }
+                }
+            }
+        }
+
+        Column {
+            anchors.top: searchInputWrapper.bottom
+            anchors.topMargin: 16
+            width: parent.width
+            spacing: 8
+
+            StatusContactRequestsIndicatorListItem {
+                anchors.horizontalCenter: parent.horizontalCenter
+                title: "Contact requests"
+                requestsCount: 3
+                sensor.onClicked: demoContactRequestsModal.open()
+            }
+
+            StatusChatList {
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                chatListItems.model: Models.demoChatListItems
+                selectedChatId: "0"
+                onChatItemSelected: selectedChatId = id
+                onChatItemUnmuted: {
+                    for (var i = 0; i < Models.demoChatListItems.count; i++) {
+                        let item = Models.demoChatListItems.get(i);
+                        if (item.chatId === id) {
+                            Models.demoChatListItems.setProperty(i, "muted", false)
+                        }
+                    }
+                }
+
+                popupMenu: StatusPopupMenu {
+
+                    property string chatId
+
+                    openHandler: function (id) {
+                        chatId = id
+                    }
+
+                    StatusMenuItem {
+                        text: "View Profile"
+                        icon.name: "group-chat"
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: "Mute chat"
+                        icon.name: "notification"
+                    }
+
+                    StatusMenuItem {
+                        text: "Mark as Read"
+                        icon.name: "checkmark-circle"
+                    }
+
+                    StatusMenuItem {
+                        text: "Clear history"
+                        icon.name: "close-circle"
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: "Delete chat"
+                        icon.name: "delete"
+                        type: StatusMenuItem.Type.Danger
+                    }
+                }
+            }
+        }
+    }
+
+    rightPanel: Item {
+        anchors.fill: parent
+
+        StatusChatToolBar {
+            anchors.top: parent.top
+            width: parent.width
+
+            chatInfoButton.title: "Amazing Funny Squirrel"
+            chatInfoButton.subTitle: "Contact"
+            chatInfoButton.icon.color: Theme.palette.miscColor7
+            chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
+            chatInfoButton.pinnedMessagesCount: 1
+
+            searchButton.visible: false
+            membersButton.visible: false
+            notificationCount: 1
+
+            onNotificationButtonClicked: notificationCount = 0
+
+            popupMenu: StatusPopupMenu {
+                id: contextMenu
+
+                StatusMenuItem {
+                    text: "Mute Chat"
+                    icon.name: "notification"
+                }
+                StatusMenuItem {
+                    text: "Mark as Read"
+                    icon.name: "checkmark-circle"
+                }
+                StatusMenuItem {
+                    text: "Clear History"
+                    icon.name: "close-circle"
+                }
+
+                StatusMenuSeparator {}
+
+                StatusMenuItem {
+                    text: "Leave Chat"
+                    icon.name: "arrow-right"
+                    icon.width: 14
+                    iconRotation: 180
+                    type: StatusMenuItem.Type.Danger
+                }
+            }
+        }
+    }
+
+    centerPanel: ListView {
+        id: messageList
+        anchors.fill: parent
+        anchors.margins: 15
+        clip: true
+        model: Models.chatMessagesModel
+        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"
+                }
+            ]
+        }
+    }
+}

sandbox/demoapp/StatusAppCommunityView.qml

@@ -0,0 +1,274 @@
+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
+                chatList.model: Models.demoCommunityChatListItems
+                categoryList.model: Models.demoCommunityCategoryItems
+
+                showCategoryActionButtons: true
+                onChatItemSelected: selectedChatId = id
+
+                categoryPopupMenu: StatusPopupMenu {
+
+                    property string categoryId
+
+                    openHandler: function (id) {
+                        categoryId = id
+                    }
+
+                    StatusMenuItem {
+                        text: "Mute Category"
+                        icon.name: "notification"
+                    }
+
+                    StatusMenuItem {
+                        text: "Mark as Read"
+                        icon.name: "checkmark-circle"
+                    }
+
+                    StatusMenuItem {
+                        text: "Edit Category"
+                        icon.name: "edit"
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: "Delete Category"
+                        icon.name: "delete"
+                        type: StatusMenuItem.Type.Danger
+                    }
+                }
+
+                chatListPopupMenu: StatusPopupMenu {
+
+                    property string chatId
+
+                    StatusMenuItem {
+                        text: "Mute chat"
+                        icon.name: "notification"
+                    }
+
+                    StatusMenuItem {
+                        text: "Mark as Read"
+                        icon.name: "checkmark-circle"
+                    }
+
+                    StatusMenuItem {
+                        text: "Clear history"
+                        icon.name: "close-circle"
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: "Delete chat"
+                        icon.name: "delete"
+                        type: StatusMenuItem.Type.Danger
+                    }
+                }
+
+                popupMenu: StatusPopupMenu {
+                    StatusMenuItem {
+                        text: "Create channel"
+                        icon.name: "channel"
+                    }
+
+                    StatusMenuItem {
+                        text: "Create category"
+                        icon.name: "channel-category"
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: "Invite people"
+                        icon.name: "share-ios"
+                    }
+                }
+            }
+        }
+    }
+
+    centerPanel: Item {
+        StatusChatToolBar {
+            id: statusChatToolBar
+            anchors.top: parent.top
+            width: parent.width
+
+            chatInfoButton.title: "general"
+            chatInfoButton.subTitle: "Community Chat"
+            chatInfoButton.icon.color: Theme.palette.miscColor6
+            chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
+            onSearchButtonClicked: {
+                searchButton.highlighted = !searchButton.highlighted;
+                searchPopup.setSearchSelection(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
+            }
+        }
+    }
+}

sandbox/demoapp/StatusAppProfileSettingsView.qml

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

sandbox/demoapp/data/qmldir

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

sandbox/main.qml

@@ -15,7 +15,7 @@ import StatusQ.Platform 0.1
 StatusWindow {
     id: rootWindow
     width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
-                                                                  :  1024
+                                                                  :  1224
     height: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.height
                                                                    :840
     visible: true
@@ -101,6 +101,14 @@ 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
@@ -120,56 +128,127 @@ StatusWindow {
 
                         StatusListSectionHeadline { text: "StatusQ.Core" }
                         StatusNavigationListItem { 
-                            title: "Icons" 
-                            selected: page.sourceComponent == iconsComponent
-                            onClicked: page.sourceComponent = iconsComponent
+                            title: "Icons"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.control(title);
                         }
 
                         StatusListSectionHeadline { text: "StatusQ.Layout" }
                         StatusNavigationListItem { 
-                            title: "Layouts" 
-                            selected: page.sourceComponent == layoutComponent
-                            onClicked: page.sourceComponent = layoutComponent
+                            title: "Layouts"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.control(title.substring(0, title.length - 1));
                         }
 
                         StatusListSectionHeadline { text: "StatusQ.Controls" }
                         StatusNavigationListItem { 
-                            title: "Buttons" 
-                            selected: page.sourceComponent == buttonsComponent
-                            onClicked: page.sourceComponent = buttonsComponent
+                            title: "Buttons"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.control(title);
                         }
                         StatusNavigationListItem { 
-                            title: "Controls" 
-                            selected: page.sourceComponent == controlsComponent
-                            onClicked: page.sourceComponent = controlsComponent
+                            title: "StatusSwitchTab"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page("StatusTabSwitch");
+                        }
+                        StatusNavigationListItem { 
+                            title: "StatusChatCommandButton"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem { 
+                            title: "Controls"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.control(title);
+                        }
+                        StatusNavigationListItem { 
+                            title: "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);
                         }
                         StatusListSectionHeadline { text: "StatusQ.Components" }
+                        StatusNavigationListItem { 
+                            title: "StatusAddress"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
                         StatusNavigationListItem { 
                             title: "List Items"
-                            selected: page.sourceComponent == listItemsComponent
-                            onClicked: page.sourceComponent = listItemsComponent
+                            selected: viewLoader.source.toString().includes(title.replace(/\s+/g, ''))
+                            onClicked: mainPageView.control(title.replace(/\s+/g, ''));
                         }
                         StatusNavigationListItem { 
                             title: "StatusChatInfoToolBar"
-                            selected: page.sourceComponent == chatInfoToolBarComponent
-                            onClicked: page.sourceComponent = chatInfoToolBarComponent
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                         StatusNavigationListItem { 
                             title: "Others"
-                            selected: page.sourceComponent == othersComponent
-                            onClicked: page.sourceComponent = othersComponent
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.control(title);
+                        }
+                        StatusNavigationListItem {
+                            title: "StatusExpandableItem"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page("StatusExpandableSettingsItem");
                         }
                         StatusListSectionHeadline { text: "StatusQ.Popup" }
                         StatusNavigationListItem { 
                             title: "StatusPopupMenu"
-                            selected: page.sourceComponent == popupMenuComponent
-                            onClicked: page.sourceComponent = popupMenuComponent
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
 
                         StatusNavigationListItem {
                             title: "StatusModal"
-                            selected: page.sourceComponent == statusModalComponent
-                            onClicked: page.sourceComponent = statusModalComponent
+                            selected: viewLoader.source.toString().includes("Popups")
+                            onClicked: mainPageView.control("Popups");
+                        }
+                        StatusListSectionHeadline { text: "StatusQ.Platform" }
+                        StatusNavigationListItem {
+                            title: "StatusMacNotification"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
                         }
                     }
                 }
@@ -178,12 +257,10 @@ StatusWindow {
             rightPanel: Item {
                 id: rightPanel
                 anchors.fill: parent
-
                 ScrollView {
-                    width: parent.width
-                    height: parent.height
+                    anchors.fill: parent
                     contentHeight: (pageWrapper.height + pageWrapper.anchors.topMargin) * rootWindow.factor
-                    contentWidth: pageWrapper.width * rootWindow.factor
+                    contentWidth: (pageWrapper.width * rootWindow.factor)
                     clip: true
 
                     Item {
@@ -191,13 +268,17 @@ StatusWindow {
                         width: rightPanel.width
                         anchors.top: parent.top
                         anchors.topMargin: 64
-                        height: Math.max(rootWindow.height, page.height + 128)
+                        height: Math.max(rootWindow.height, viewLoader.height + 128)
                         scale: rootWindow.factor
                         Loader {
-                            id: page
-                            active: true
+                            id: viewLoader
                             anchors.centerIn: parent
-                            sourceComponent: iconsComponent
+                            source: mainPageView.control("Icons")
+                            onSourceChanged: {
+                                if (source.toString().includes("Icons")) {
+                                    item.iconColor = Theme.palette.primaryColor1;
+                                }
+                            }
                         }
                     }
                 }
@@ -228,57 +309,42 @@ 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
@@ -301,6 +367,27 @@ 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()
         }

sandbox/pages/StatusAccountSelectorPage.qml

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

sandbox/pages/StatusAddressPage.qml

@@ -0,0 +1,25 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Components 0.1
+
+import Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    StatusAddress {
+        text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
+    }
+
+    Item {
+        width: 200
+        height: childrenRect.height
+        StatusAddress {
+            text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
+            expandable: true
+            width: parent.width
+        }
+    }
+}

sandbox/pages/StatusAssetSelectorPage.qml

@@ -0,0 +1,40 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+import Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    StatusAssetSelector {
+        getCurrencyBalanceString: function (currencyBalance) {
+            return currencyBalance.toFixed(2) + " USD"
+        }
+        tokenAssetSourceFn: function (symbol) {
+            return "../../assets/img/icons/snt.svg"
+        }
+        assets: ListModel {
+            ListElement {
+                address: "0x1234"
+                name: "Status Network Token"
+                balance: "20"
+                symbol: "SNT"
+                currencyBalance: 9992.01
+            }
+            ListElement {
+                address: "0x1234"
+                name: "DAI Token"
+                balance: "15"
+                symbol: "DAI"
+                currencyBalance: 20.00001
+            }
+        }
+    }
+}
+

sandbox/pages/StatusChatCommandButtonPage.qml

@@ -0,0 +1,26 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+import Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    StatusChatCommandButton {
+        icon.name: "send"
+        icon.color: Theme.palette.miscColor2
+        text: "Send transaction"
+    }
+
+    StatusChatCommandButton {
+        icon.name: "send"
+        icon.rotation: 180
+        icon.color: Theme.palette.miscColor8
+        text: "Receive transaction"
+    }
+}

sandbox/pages/StatusColorSelectorPage.qml

@@ -0,0 +1,17 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+import Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    StatusColorSelector {
+        model: ["red", "blue", "green"]
+    }
+}

sandbox/pages/StatusExpandableSettingsItemPage.qml

@@ -0,0 +1,152 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+Column {
+    spacing: 12
+    width: 800
+    anchors.top:parent.top
+    leftPadding: 20
+    rightPadding: 20
+
+    Rectangle {
+        width: parent.width
+        height: 30
+        color: Theme.palette.baseColor2
+        StatusBaseText {
+            anchors.verticalCenter: parent.verticalCenter
+            text: "Type Primary"
+            color: Theme.palette.directColor1
+        }
+    }
+
+    StatusExpandableItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        expandable: false
+        icon.name: "seed-phrase"
+        primaryText: "Back up seed phrase"
+        secondaryText: "Back up your seed phrase now to secure this account ajhaDH SDHSAHDLSADBSA,DLISAHDLASD ADASDHASLDHALSDHAS DAS,DASJDGLIASGD"
+        button.text: qsTr("Back up seed phrase")
+    }
+
+    StatusExpandableItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        expandable: true
+        icon.name: "secret"
+        primaryText: "Account signing phrase"
+        secondaryText: "View your signing phrase and ensure that you never get scammed. View your signing phrase and ensure that you never get scammed."
+        expandableComponent: notImplemented
+    }
+
+    StatusExpandableItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        expandable: true
+        icon.name: "seed-phrase"
+        primaryText: "View private key"
+        secondaryText: "Back up your seed phrase now to secure this account"
+        expandableComponent: notImplemented
+        button.text: "View private key"
+        button.icon.name: "tiny/public-chat"
+        button.onClicked: {
+            // To-do open  enter password Modal
+            expanded = !expanded
+        }
+    }
+
+    Rectangle {
+        width: parent.width
+        height: 30
+        color:  Theme.palette.baseColor2
+        StatusBaseText {
+            anchors.verticalCenter: parent.verticalCenter
+            text: "Type Secondary"
+            color: Theme.palette.directColor1
+        }
+    }
+
+    StatusExpandableItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        type: StatusExpandableItem.Type.Secondary
+        expandable: true
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        primaryText: "CryptoKitties"
+        additionalText: "1456 USD"
+        expandableComponent: notImplemented
+    }
+
+    StatusExpandableItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        type: StatusExpandableItem.Type.Secondary
+        expandable: true
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        primaryText: "Adding Really long text to test scenario of having very long text along with tertiary text"
+        additionalText: "564.90 USD"
+        expandableComponent: notImplemented
+    }
+
+    StatusExpandableItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        type: StatusExpandableItem.Type.Secondary
+        expandable: true
+        primaryText: "CryptoKitties"
+        additionalText: "1456 USD"
+        expandableComponent: notImplemented
+    }
+
+    Rectangle {
+        width: parent.width
+        height: 30
+        color:  Theme.palette.baseColor2
+        StatusBaseText {
+            anchors.verticalCenter: parent.verticalCenter
+            text: "Type Tertiary"
+            color: Theme.palette.directColor1
+        }
+    }
+
+    StatusExpandableItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        type: StatusExpandableItem.Type.Tertiary
+        expandable: true
+        primaryText: "CryptoKitties"
+        expandableComponent: notImplemented
+    }
+
+    StatusExpandableItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        type: StatusExpandableItem.Type.Tertiary
+        expandable: true
+        primaryText: "Rescue Moon"
+        expandableComponent: notImplemented
+    }
+
+    Component {
+        id: notImplemented
+        Rectangle {
+            anchors.centerIn: parent
+            width: 654
+            height: infoText.implicitHeight
+            color: Theme.palette.baseColor5
+            StatusBaseText {
+                id: infoText
+                anchors.centerIn: parent
+                color: Theme.palette.directColor4
+                font.pixelSize: 15
+                lineHeight: 22
+                lineHeightMode: Text.FixedHeight
+                font.weight: Font.Medium
+                text: qsTr("Not Implemented")
+            }
+        }
+    }
+}

sandbox/pages/StatusInputPage.qml

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

sandbox/pages/StatusMacNotificationPage.qml

@@ -0,0 +1,16 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Platform 0.1
+
+import Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    StatusMacNotification {
+        name: "Some name"
+        message: "Some message here"
+    }
+}

sandbox/pages/StatusPasswordStrengthIndicatorPage.qml

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

sandbox/pages/StatusPopupMenuPage.qml

@@ -0,0 +1,150 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import QtQuick.Controls 2.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+GridLayout {
+    columns: 1
+    columnSpacing: 5
+    rowSpacing: 5
+
+    StatusButton {
+        text: "Simple"
+        onClicked: simpleMenu.popup()
+    }
+
+    StatusButton {
+        text: "Complex"
+        onClicked: complexMenu.popup()
+    }
+
+
+    StatusButton {
+        text: "Menu with custom images and icons"
+        onClicked: customMenu.popup()
+    }
+
+
+    StatusPopupMenu {
+        id: simpleMenu
+        StatusMenuItem { 
+            text: "One" 
+        }
+
+        StatusMenuItem { 
+            text: "Two"
+        }
+
+        StatusMenuItem { 
+            text: "Three"
+        }
+    }
+
+    StatusPopupMenu {
+        id: complexMenu
+        subMenuItemIcons: [{ icon: 'info' }]
+
+        StatusMenuItem { 
+            text: "One" 
+            iconSettings.name: "info"
+        }
+
+        StatusMenuSeparator {}
+
+        StatusMenuItem { 
+            text: "Two"
+            iconSettings.name: "info"
+        }
+
+        StatusMenuItem { 
+            text: "Three"
+            iconSettings.name: "info"
+        }
+
+        StatusPopupMenu {
+            title: "Four"
+            StatusMenuItem { 
+                text: "One"
+                iconSettings.name: "info"
+            }
+            StatusMenuItem { 
+                text: "Three"
+                iconSettings.name: "info"
+            }
+        }
+    }
+
+    StatusPopupMenu {
+        id: customMenu
+
+        subMenuItemIcons: [
+            { icon: "chat" },
+            { 
+                source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" 
+            },
+            { 
+                isLetterIdenticon: true, 
+                color: "red" 
+            }
+        ]
+
+        StatusMenuItem {
+            text: "Anywhere"
+        }
+
+        StatusMenuSeparator {}
+
+        StatusPopupMenu {
+            title: "Chat" 
+
+            StatusMenuItem { 
+                text: "vitalik.eth"
+                image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+                image.isIdenticon: true
+            }
+
+            StatusMenuItem { 
+                text: "Pascal"
+                image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            }
+        }
+
+        StatusPopupMenu {
+            title: "Cryptokitties"
+
+            StatusMenuItem { 
+                text: "welcome" 
+                iconSettings.name: "channel"
+                iconSettings.color: Theme.palette.directColor1
+            }
+            StatusMenuItem { 
+                text: "support" 
+                iconSettings.name: "channel"
+                iconSettings.color: Theme.palette.directColor1
+            }
+
+            StatusMenuHeadline { text: "Public" }
+
+            StatusMenuItem { 
+                text: "news" 
+                iconSettings.name: "channel"
+                iconSettings.color: Theme.palette.directColor1
+            }
+        }
+
+        StatusPopupMenu {
+            title: "Another community"
+
+            StatusMenuItem { 
+                text: "welcome" 
+                iconSettings.isLetterIdenticon: true
+                iconSettings.background.color: "red"
+            }
+        }
+    }
+}

sandbox/pages/StatusSelectPage.qml

@@ -0,0 +1,54 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+import Sandbox 0.1
+Column {
+    spacing: 8
+
+    StatusSelect {
+        id: select
+        label: "Some label"
+        model: ListModel {
+            ListElement {
+                name: "Pascal"
+            }
+            ListElement {
+                name: "Khushboo"
+            }
+            ListElement {
+                name: "Alexandra"
+            }
+            ListElement {
+                name: "Eric"
+            }
+        }
+        selectMenu.delegate: StatusMenuItemDelegate {
+            statusPopupMenu: select
+            action: StatusMenuItem {
+                iconSettings.name: "filled-account"
+                text: name
+                onTriggered: {
+                    selectedItem.text = name
+                }
+            }
+        }
+        selectedItemComponent: Item {
+            id: selectedItem
+            anchors.fill: parent
+            property string text: ""
+
+            StatusBaseText {
+                text: selectedItem.text
+                anchors.centerIn: parent
+                color: Theme.palette.directColor1
+            }
+        }
+    }
+}
+

sandbox/pages/StatusTabBarIconButtonPage.qml

@@ -0,0 +1,50 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+import Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    Row {
+        StatusTabBarIconButton {
+            icon.name: "smileys-and-people"
+            onClicked: highlighted = !highlighted
+        }
+
+        StatusTabBarIconButton {
+            icon.name: "animals-and-nature"
+            onClicked: highlighted = !highlighted
+        }
+
+        StatusTabBarIconButton {
+            icon.name: "activity"
+            onClicked: highlighted = !highlighted
+        }
+
+        StatusTabBarIconButton {
+            icon.name: "travel-and-places"
+            onClicked: highlighted = !highlighted
+        }
+
+        StatusTabBarIconButton {
+            icon.name: "objects"
+            onClicked: highlighted = !highlighted
+        }
+
+        StatusTabBarIconButton {
+            icon.name: "symbols"
+            onClicked: highlighted = !highlighted
+        }
+
+        StatusTabBarIconButton {
+            icon.name: "flags"
+            onClicked: highlighted = !highlighted
+        }
+    }
+}

sandbox/pages/StatusTabSwitchPage.qml

@@ -0,0 +1,24 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import QtQuick.Controls 2.13
+
+import StatusQ.Controls 0.1
+
+GridLayout {
+    columns: 1
+    columnSpacing: 5
+    rowSpacing: 5
+
+    StatusSwitchTabBar {
+        StatusSwitchTabButton {
+            text: "Swap"
+        }
+        StatusSwitchTabButton {
+            text: "Swap & Send"
+        }
+        StatusSwitchTabButton {
+            text: "Send"
+        }
+    }
+}
+

sandbox/pages/StatusWalletColorButtonPage.qml

@@ -0,0 +1,38 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+import Sandbox 0.1
+Column {
+    spacing: 8
+
+    Row {
+        spacing: 4
+        StatusWalletColorButton {
+            icon.color: Theme.palette.miscColor1
+            selected: true
+        }
+        StatusWalletColorButton {
+            icon.color: Theme.palette.miscColor2
+        }
+        StatusWalletColorButton {
+            icon.color: Theme.palette.miscColor3
+        }
+        StatusWalletColorButton {
+            icon.color: Theme.palette.miscColor4
+        }
+        StatusWalletColorButton {
+            icon.color: Theme.palette.miscColor5
+        }
+        StatusWalletColorButton {
+            icon.color: Theme.palette.miscColor6
+        }
+        StatusWalletColorButton {
+            icon.color: Theme.palette.miscColor7
+        }
+    }
+}

sandbox/pages/StatusWalletColorSelectPage.qml

@@ -0,0 +1,17 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+import Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    StatusWalletColorSelect {
+        model: Theme.palette.accountColors
+    }
+}

sandbox/qml.qrc

@@ -1,16 +1,35 @@
 <RCC>
     <qresource prefix="/">
         <file>main.qml</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>
+        <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>
     </qresource>
-</RCC>
+</RCC>

sandbox/sandbox.pro

@@ -1,6 +1,8 @@
 QT += quick svg
 
-CONFIG += c++11 warn_on
+CONFIG += c++11 warn_on qtquickcompiler
+
+QML_IMPORT_PATH= $$PWD/../src
 
 DEFINES += QT_DEPRECATED_WARNINGS
 
@@ -12,18 +14,39 @@ DEFINES += QT_DEPRECATED_WARNINGS
 SOURCES += \
         handler.cpp \
         main.cpp \
-        sandboxapp.cpp
+        sandboxapp.cpp \
+        spellchecker.cpp
 
 !macx {
     SOURCES += statuswindow.cpp
 }
 
 TARGET = sandboxapp
+DESTDIR = $$PWD/bin
+
+DESTDIR = $$PWD/bin
 
 macx {
     CONFIG -= app_bundle
     OBJECTIVE_SOURCES += \
         statuswindow_mac.mm
+
+    hunspellTarget.depends = FORCE
+    hunspellTarget.commands = brew install hunspell
+    QMAKE_EXTRA_TARGETS += hunspellTarget
+
+    exists (/usr/local/lib/libhunspell-1.7.a) {
+        LIBS += -L"/usr/local/lib" -lhunspell-1.7
+        INCLUDEPATH += /usr/local/include/hunspell
+        DEFINES += USE_HUNSPELL
+        message("hunspell exists in /usr/local/lib")
+    }
+
+    copydata.commands = $(COPY_DIR) $$PWD/dictionaries $$DESTDIR
+    first.depends = $(first) copydata
+    export(first.depends)
+    export(copydata.commands)
+    QMAKE_EXTRA_TARGETS += first copydata
 }
 
 ios {
@@ -40,8 +63,6 @@ ios {
 RESOURCES += qml.qrc \
             $$PWD/../statusq.qrc
 
-DESTDIR = $$PWD/bin
-
 # Default rules for deployment.
 qnx: target.path = /tmp/$${TARGET}/bin
 else: unix:!android: target.path = /opt/$${TARGET}/bin
@@ -51,17 +72,11 @@ else: unix:!android: target.path = /opt/$${TARGET}/bin
 HEADERS += \
     handler.h \
     sandboxapp.h \
-    statuswindow.h
+    statuswindow.h \
+    spellchecker.h
 
-DISTFILES += \
-    ../src/StatusQ/Components/StatusMacWindowButtons.qml \
-    ../src/StatusQ/Controls/StatusBaseButton.qml \
-    ../src/StatusQ/Controls/StatusButton.qml \
-    ../src/StatusQ/Controls/StatusCheckBox.qml \
-    ../src/StatusQ/Controls/StatusFlatRoundButton.qml \
-    ../src/StatusQ/Controls/StatusRadioButton.qml \
-    ../src/StatusQ/Controls/StatusSlider.qml \
-    ../src/StatusQ/Controls/StatusSwitch.qml
+OTHER_FILES += $$files($$PWD/../*.qml, true)
+OTHER_FILES += $$files($$PWD/*.qml, true)
 
 android {
 

sandbox/sandboxapp.cpp

@@ -5,6 +5,7 @@
 #include <QDebug>
 
 #include "statuswindow.h"
+#include "spellchecker.h"
 
 SandboxApp::SandboxApp(int &argc, char **argv)
     : QGuiApplication(argc, argv),
@@ -16,9 +17,10 @@ SandboxApp::SandboxApp(int &argc, char **argv)
 void SandboxApp::startEngine()
 {
     qmlRegisterType<StatusWindow>("Sandbox", 0, 1, "StatusWindow");
+    qmlRegisterType<SpellChecker>("Sandbox", 0, 1, "Spellchecker");
 
 #ifdef QT_DEBUG
-    const QUrl url(applicationDirPath() + "/../main.qml");
+    const QUrl url = QUrl::fromLocalFile(applicationDirPath() + "/../main.qml");
 #else
     const QUrl url(QStringLiteral("qrc:/main.qml"));
 #endif

sandbox/spellchecker.cpp

@@ -1,6 +1,8 @@
 #include "spellchecker.h"
 
+#ifdef USE_HUNSPELL
 #include "hunspell.hxx"
+#endif
 #include <QTextCodec>
 #include <QFile>
 #include <QDebug>
@@ -11,18 +13,53 @@
 #include <QDir>
 
 SpellChecker::SpellChecker(QObject *parent)
-    : QSyntaxHighlighter(parent)
+    : QObject(parent)
+    , m_userDict("userDict_")
+#ifdef USE_HUNSPELL
+    , m_hunspell(nullptr)
+#endif
 {
-    auto language = QLocale::system().bcp47Name();
 
-    QString dictFile = QDir::homePath() + "/Status/StatusQ/sandbox/dictionaries/" + language  + "/index.dic";
-    QString affixFile = QDir::homePath() + "/Status/StatusQ/sandbox/dictionaries/" + language  + "/index.aff";
+}
+
+SpellChecker::~SpellChecker()
+{
+#ifdef USE_HUNSPELL
+    delete m_hunspell;
+#endif
+}
+
+bool SpellChecker::spell(const QString &word)
+{
+#ifdef USE_HUNSPELL
+    return m_hunspell->spell(m_codec->fromUnicode(word).toStdString());
+#else
+    return true;
+#endif
+}
+
+bool SpellChecker::isInit() const
+{
+#ifdef USE_HUNSPELL
+    return !m_hunspell;
+#endif  
+    return false;
+}
+
+void SpellChecker::initHunspell()
+{
+#ifdef USE_HUNSPELL
+    if (m_hunspell) {
+        delete m_hunspell;
+    }
+
+    QString dictFile = QApplication::applicationDirPath() + "/dictionaries/" + m_lang  + "/index.dic";
+    QString affixFile = QApplication::applicationDirPath() + "/dictionaries/" + m_lang  + "/index.aff";
     QByteArray dictFilePathBA = dictFile.toLocal8Bit();
     QByteArray affixFilePathBA = affixFile.toLocal8Bit();
     m_hunspell = new Hunspell(affixFilePathBA.constData(),
                              dictFilePathBA.constData());
 
-    qDebug() << "TEST" << dictFile;
     // detect encoding analyzing the SET option in the affix file
     auto encoding = QStringLiteral("ISO8859-15");
     QFile _affixFile(affixFile);
@@ -47,7 +84,7 @@ SpellChecker::SpellChecker(QObject *parent)
     }
     m_codec = QTextCodec::codecForName(encoding.toLatin1().constData());
 
-    QString userDict = "userDict_" + language + ".txt";
+    QString userDict = m_userDict + m_lang + ".txt";
 
     if (!userDict.isEmpty()) {
       QFile userDictonaryFile(userDict);
@@ -65,22 +102,14 @@ SpellChecker::SpellChecker(QObject *parent)
     } else {
       qDebug() << "User dictionary not set.";
     }
-}
-
-SpellChecker::~SpellChecker()
-{
-    delete m_hunspell;
-}
-
-bool SpellChecker::spell(const QString &word)
-{
-    return m_hunspell->spell(m_codec->fromUnicode(word).toStdString());
+#endif
 }
 
 QVariantList SpellChecker::suggest(const QString &word)
 {
     int numSuggestions = 0;
     QVariantList suggestions;
+#ifdef USE_HUNSPELL
     std::vector<std::string> wordlist;
     wordlist = m_hunspell->suggest(m_codec->fromUnicode(word).toStdString());
 
@@ -92,20 +121,22 @@ QVariantList SpellChecker::suggest(const QString &word)
                 QByteArray::fromStdString(wordlist[i]));
         }
     }
+#endif
 
     return suggestions;
 }
 
 void SpellChecker::ignoreWord(const QString &word)
 {
+#ifdef USE_HUNSPELL
     m_hunspell->add(m_codec->fromUnicode(word).constData());
+#endif
 }
 
 void SpellChecker::addToUserWordlist(const QString &word)
 {
-    auto language = QLocale::scriptToString(QLocale::system().script());
-
-    QString userDict = "userDict_" + language + ".txt";
+#ifdef USE_HUNSPELL
+    QString userDict = m_userDict + m_lang + ".txt";
     if (!userDict.isEmpty()) {
         QFile userDictonaryFile(userDict);
         if (userDictonaryFile.open(QIODevice::Append)) {
@@ -119,74 +150,32 @@ void SpellChecker::addToUserWordlist(const QString &word)
     } else {
         qDebug() << "User dictionary not set.";
     }
+#endif
 }
 
-void SpellChecker::setText(const QString &text)
+const QString& SpellChecker::lang() const
 {
-    if (m_text != text) {
-        m_text = text;
-        emit textChanged();
-        makeDisplayText(m_text);
+    return m_lang;
+}
+
+void SpellChecker::setLang(const QString& lang)
+{
+    if (m_lang != lang) {
+        m_lang = lang;
+        initHunspell();
+        emit langChanged();
     }
 }
 
-const QString &SpellChecker::text() const
+const QString& SpellChecker::userDict() const
 {
-    return m_text;
+    return m_userDict;
 }
 
-const QString &SpellChecker::displayText() const
+void SpellChecker::setUserDict(const QString& userDict)
 {
-    return m_displayText;
-}
-
-QQuickTextDocument *SpellChecker::textDocument() const
-{
-    return m_document;
-}
-
-void SpellChecker::setTextDocument(QQuickTextDocument *document)
-{
-    if (m_document != document) {
-        m_document = document;
-        setDocument(m_document->textDocument());
-        emit textDocumentChanged();
+    if (m_userDict != userDict) {
+        m_userDict = userDict;
+        emit userDictChanged();
     }
 }
-
-void SpellChecker::highlightBlock(const QString &text)
-{
-    QTextCharFormat format;
-    format.setUnderlineColor(Qt::red);
-    format.setFontUnderline(true);
-//    format.setUnderlineStyle(QTextCharFormat::DotLine);
-   format.merge(currentBlock().charFormat());
-
-
-
-    QRegularExpression expression("\\S+");
-    QRegularExpressionMatchIterator i = expression.globalMatch(text);
-    while(i.hasNext()) {
-        QRegularExpressionMatch match = i.next();
-        if (!spell(match.captured())) {
-            setFormat(match.capturedStart(), match.capturedLength(), format);
-        }
-    }
-}
-
-void SpellChecker::makeDisplayText(const QString &text)
-{
-    auto words = text.split(" ");
-    QString gPattern = "<u style=\"color: red;\">%1</u>";
-
-    m_displayText = ""; // todo optimize delta
-    for (const auto& word: qAsConst(words)) {
-        if (!spell(word)) {
-            m_displayText.append(" " + gPattern.arg(word));
-        } else {
-            m_displayText.append(" " + word);
-        }
-    }
-
-    emit displayTextChanged();
-}

sandbox/spellchecker.h

@@ -6,15 +6,17 @@
 #include <QQuickTextDocument>
 #include <QSyntaxHighlighter>
 
+#ifdef USE_HUNSPELL
 class Hunspell;
+#endif
 class QTextCodec;
 
-class SpellChecker : public QSyntaxHighlighter
+class SpellChecker : public QObject
 {
     Q_OBJECT
-    Q_PROPERTY(QString text READ text WRITE setText NOTIFY textChanged)
-    Q_PROPERTY(QString displayText READ displayText NOTIFY displayTextChanged)
-    Q_PROPERTY(QQuickTextDocument* document READ textDocument WRITE setTextDocument NOTIFY textDocumentChanged)
+    Q_PROPERTY(QString lang READ lang WRITE setLang NOTIFY langChanged)
+    Q_PROPERTY(QString userDict READ userDict WRITE setUserDict NOTIFY userDictChanged)
+
 public:
     explicit SpellChecker(QObject *parent = nullptr);
     ~SpellChecker();
@@ -23,34 +25,29 @@ public:
     Q_INVOKABLE QVariantList suggest(const QString &word);
     Q_INVOKABLE void ignoreWord(const QString &word);
     Q_INVOKABLE void addToUserWordlist(const QString &word);
+    Q_INVOKABLE bool isInit() const;
 
-    void setText(const QString& text);
-    const QString& text() const;
+    const QString& lang() const;
+    void setLang(const QString& lang);
 
-    const QString& displayText() const;
-
-    QQuickTextDocument* textDocument() const;
-    void setTextDocument(QQuickTextDocument* document);
+    const QString& userDict() const;
+    void setUserDict(const QString& userDict);
 
 signals:
-    void textChanged();
-    void displayTextChanged();
-    void textDocumentChanged();
-
-protected:
-    void highlightBlock(const QString &text) final;
+    void langChanged();
+    void userDictChanged();
 
 private:
-    void makeDisplayText(const QString& text);
+    void initHunspell();
 
 private:
-    QString m_text;
-    QString m_displayText;
-    QString m_dictionaryPath;
+    QString m_lang;
+    QString m_userDict;
 
     QQuickTextDocument *m_document;
-
+#ifdef USE_HUNSPELL
     Hunspell *m_hunspell;
+#endif
     QTextCodec *m_codec;
 };
 

src/StatusQ/Components/StatusAddress.qml

@@ -0,0 +1,39 @@
+import QtQuick 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+StatusBaseText {
+    id: root 
+
+    property bool expandable: false
+    property bool expanded: false
+    readonly property real actualWidth: implicitWidth
+    property real maxWidth: width
+
+    font.family: Theme.palette.monoFont.name
+    font.pixelSize: 13
+    elide: Text.ElideMiddle
+    color: Theme.palette.baseColor1
+
+    Component.onCompleted: {
+        maxWidth = width
+        expanded = actualWidth <= maxWidth
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: root.expandable ? Qt.PointingHandCursor : Qt.arrowCursor
+        enabled: root.expandable
+
+        onClicked: {
+            if (root.expanded) {
+                width = root.width = root.maxWidth
+            } else {
+                width = root.width = root.actualWidth
+            }
+            root.expanded = !root.expanded
+        }
+    }
+}

src/StatusQ/Components/StatusChatInfoToolBar.qml

@@ -11,6 +11,7 @@ Item {
     implicitHeight: 56
 
     property alias chatInfoButton: statusChatInfoButton
+    property alias menuButton: statusMenuButton
     property Component popupMenu
 
     signal chatInfoButtonClicked()
@@ -27,18 +28,20 @@ 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: menuButton
+        id: statusMenuButton
         anchors.right: parent.right
         anchors.rightMargin: 8
         anchors.verticalCenter: parent.verticalCenter
 
         visible: popupMenuSlot.active
-        width: 32
+        width: visible ? 32 : 0
         height: 32
 
         type: StatusRoundButton.Type.Secondary
@@ -49,14 +52,14 @@ Item {
             State {
                 name: "default"
                 PropertyChanges {
-                    target: menuButton
+                    target: statusMenuButton
                     icon.rotation: 0
                 }
             },
             State {
                 name: "pressed"
                 PropertyChanges {
-                    target: menuButton
+                    target: statusMenuButton
                     icon.rotation: 45
                     highlighted: true
                 }
@@ -87,8 +90,8 @@ Item {
 
         onClicked: {
             statusChatInfoToolBar.addButtonClicked(mouse)
-            menuButton.state = "pressed"
-            popupMenuSlot.item.popup(menuButton.width-popupMenuSlot.item.width, menuButton.height + 4)
+            statusMenuButton.state = "pressed"
+            popupMenuSlot.item.popup(statusMenuButton.width-popupMenuSlot.item.width, statusMenuButton.height + 4)
         }
 
         Loader {
@@ -96,7 +99,7 @@ Item {
             active: !!statusChatInfoToolBar.popupMenu
             onLoaded: {
                 popupMenuSlot.item.closeHandler = function () {
-                    menuButton.state = "default"
+                    statusMenuButton.state = "default"
                 }
             }
         }

src/StatusQ/Components/StatusChatList.qml

@@ -1,7 +1,10 @@
 import QtQuick 2.13
+import QtQml.Models 2.14
+import QtQuick.Controls 2.13 as QC
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
+import StatusQ.Core.Utils 0.1
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
 
@@ -13,7 +16,10 @@ Column {
 
     property string categoryId: ""
     property string selectedChatId: ""
-    property alias chatListItems: statusChatListItems
+    property alias chatListItems: delegateModel
+    property bool draggableItems: false
+
+    property alias statusChatListItems: statusChatListItems
 
     property Component popupMenu
 
@@ -23,6 +29,7 @@ Column {
 
     signal chatItemSelected(string id)
     signal chatItemUnmuted(string id)
+    signal chatItemReordered(string id, int from, int to)
 
     onPopupMenuChanged: {
         if (!!popupMenu) {
@@ -30,71 +37,191 @@ Column {
         }
     }
 
-    Repeater {
-        id: statusChatListItems
-        delegate: StatusChatListItem {
+    DelegateModel {
+        id: delegateModel
 
-            id: statusChatListItem
+        delegate: Item {
+            id: draggable
+            width: statusChatListItem.width
+            height: statusChatListItem.height
 
-            property string profileImage: ""
+            property alias chatListItem: statusChatListItem
 
-            Component.onCompleted: {
-                if (typeof statusChatList.profileImageFn === "function") {
-                    profileImage = statusChatList.profileImageFn(model.chatId || model.id) || ""
-                }
-            }
-
-            chatId: model.chatId || model.id
-            name: !!statusChatList.chatNameFn ? statusChatList.chatNameFn(model) : model.name
-            type: model.chatType
-            muted: !!model.muted
-            hasUnreadMessages: !!model.hasUnreadMessages || model.unviewedMessagesCount > 0
-            hasMention: !!model.hasMention
-            badge.value: model.unviewedMessagesCount || 0
-            selected: (model.chatId || model.id) === statusChatList.selectedChatId
-
-            icon.color: model.color || ""
-            image.isIdenticon: !!!profileImage && !!!model.identityImage && !!model.identicon
-            image.source: profileImage || model.identityImage || model.identicon || ""
-
-            onClicked: {
-                if (mouse.button === Qt.RightButton && !!statusChatList.popupMenu) {
-                    statusChatListItem.highlighted = true
-
-                    let originalOpenHandler = popupMenuSlot.item.openHandler
-                    let originalCloseHandler = popupMenuSlot.item.closeHandler
-
-                    popupMenuSlot.item.openHandler = function () {
-                        if (!!originalOpenHandler) {
-                            originalOpenHandler((model.chatId || model.id))
-                        }
-                    }
-
-                    popupMenuSlot.item.closeHandler = function () {
-                        if (statusChatListItem) {
-                            statusChatListItem.highlighted = false
-                        }
-                        if (!!originalCloseHandler) {
-                            originalCloseHandler()
-                        }
-                    }
-
-                    popupMenuSlot.item.popup(mouse.x + 4, statusChatListItem.y + mouse.y + 6)
-                    popupMenuSlot.item.openHandler = originalOpenHandler
-                    return
-                }
-                statusChatList.chatItemSelected(model.chatId || model.id)
-            }
-            onUnmute: statusChatList.chatItemUnmuted(model.chatId || model.id)
             visible: {
                 if (!!statusChatList.filterFn) {
                     return statusChatList.filterFn(model, statusChatList.categoryId)
                 }
                 return 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
+
+                    property string profileImage: ""
+
+                    opacity: dragSensor.active ? 0.0 : 1.0
+                    Component.onCompleted: {
+                        if (typeof statusChatList.profileImageFn === "function") {
+                            profileImage = statusChatList.profileImageFn(model.chatId || model.id) || ""
+                        }
+                    }
+                    originalOrder: model.position
+                    chatId: model.chatId || model.id
+                    categoryId: model.categoryId || ""
+                    name: !!statusChatList.chatNameFn ? statusChatList.chatNameFn(model) : model.name
+                    type: model.chatType
+                    muted: !!model.muted
+                    hasUnreadMessages: !!model.hasUnreadMessages || model.unviewedMessagesCount > 0
+                    hasMention: model.mentionsCount > 0
+                    badge.value: model.chatType === StatusChatListItem.Type.OneToOneChat ?
+                        model.unviewedMessagesCount || 0 :
+                        model.mentionsCount || 0
+                    selected: (model.chatId || model.id) === statusChatList.selectedChatId
+
+                    icon.color: model.color || ""
+                    image.isIdenticon: !!!profileImage && !!!model.identityImage && !!model.identicon
+                    image.source: profileImage || model.identityImage || model.identicon || ""
+
+                    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.chatId || model.id))
+                                }
+                            }
+
+                            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.chatId || model.id)
+                        }
+                    }
+                    onUnmute: statusChatList.chatItemUnmuted(model.chatId || model.id)
+                }
+            }
+
+            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: draggable.chatListItem.hasUnreadMessages
+                    hasMention: draggable.chatListItem.hasMention
+                    badge.value: draggable.chatListItem.badge.value
+                    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

src/StatusQ/Components/StatusChatListAndCategories.qml

@@ -1,8 +1,11 @@
 import QtQuick 2.14
-import QtQuick.Controls 2.14
+import QtQml.Models 2.14
+import QtQuick.Controls 2.14 as QC
 
+import StatusQ.Core.Utils 0.1
 import StatusQ.Components 0.1
 import StatusQ.Popups 0.1
+import StatusQ.Core 0.1
 
 Item {
     id: statusChatListAndCategories
@@ -10,11 +13,24 @@ Item {
     implicitHeight: chatListsAndCategories.height
     implicitWidth: chatListsAndCategories.width
 
+    property StatusTooltipSettings categoryAddButtonToolTip: StatusTooltipSettings {
+        text: "Add channel inside category"
+    }
+    property StatusTooltipSettings categoryMenuButtonToolTip: StatusTooltipSettings {
+        text: "More"
+    }
+
     property string selectedChatId: ""
     property bool showCategoryActionButtons: false
+    property bool showPopupMenu: true
     property alias chatList: statusChatList.chatListItems
-    property alias categoryList: statusChatListCategories
+    property alias categoryList: delegateModel
     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
@@ -22,6 +38,8 @@ Item {
 
     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: {
@@ -37,7 +55,7 @@ Item {
         height: statusChatListAndCategories.height
         acceptedButtons: Qt.LeftButton | Qt.RightButton
         onClicked: {
-            if (mouse.button === Qt.RightButton && !!statusChatListAndCategories.popupMenu) {
+            if (mouse.button === Qt.RightButton && showPopupMenu && !!statusChatListAndCategories.popupMenu) {
                 popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6)
                 return
             }
@@ -53,34 +71,158 @@ Item {
             StatusChatList {
                 id: statusChatList
                 anchors.horizontalCenter: parent.horizontalCenter
-                visible: !!chatListItems.model && chatListItems.count > 0
+                visible: chatListItems.count > 0
                 selectedChatId: statusChatListAndCategories.selectedChatId
                 onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
                 onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
+                onChatItemReordered: statusChatListAndCategories.chatItemReordered(categoryId, id, from, to)
+                draggableItems: statusChatListAndCategories.draggableItems
                 filterFn: function (model) {
                     return !!!model.categoryId
                 }
                 popupMenu: statusChatListAndCategories.chatListPopupMenu
             }
 
+            DelegateModel {
+                id: delegateModel
+
+                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.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)
+                        chatList.onChatItemReordered: statusChatListAndCategories.chatItemReordered(model.categoryId, 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.categoryId]
+                            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.categoryId] = 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.chatListItems.model: draggable.chatListCategory.chatList.chatListItems.model
+                            chatList.selectedChatId: draggable.chatListCategory.chatList.selectedChatId
+                        }
+                    }
+                }
+            }
+
             Repeater {
                 id: statusChatListCategories
                 visible: !!model && model.count > 0
-
-                delegate: StatusChatListCategory {
-                    categoryId: model.categoryId
-                    name: model.name
-                    showActionButtons: statusChatListAndCategories.showCategoryActionButtons
-                    addButton.onClicked: statusChatListAndCategories.categoryAddButtonClicked(model.categoryId)
-
-                    chatList.chatListItems.model: statusChatListAndCategories.chatList.model
-                    chatList.selectedChatId: statusChatListAndCategories.selectedChatId
-                    chatList.onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
-                    chatList.onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
-
-                    popupMenu: statusChatListAndCategories.categoryPopupMenu
-                    chatListPopupMenu: statusChatListAndCategories.chatListPopupMenu
-                }
+                model: delegateModel
             }
         }
     }

src/StatusQ/Components/StatusChatListCategory.qml

@@ -7,16 +7,21 @@ Column {
     id: statusChatListCategory
 
     spacing: 0
+    opacity: dragged ? 0.5 : 1
 
+    objectName: "chatListCategory"
+    property int originalOrder: -1
     property string categoryId: ""
     property string name: ""
     property bool opened: true
+    property bool dragged: false
 
     property alias showActionButtons: statusChatListCategoryItem.showActionButtons
     property alias addButton: statusChatListCategoryItem.addButton
     property alias menuButton: statusChatListCategoryItem.menuButton
     property alias toggleButton: statusChatListCategoryItem.toggleButton
     property alias chatList: statusChatList
+    property alias dragSensor: statusChatListCategoryItem.sensor
 
     property Component chatListPopupMenu
     property Component popupMenu
@@ -31,17 +36,22 @@ Column {
         id: statusChatListCategoryItem
         title: statusChatListCategory.name
         opened: statusChatListCategory.opened
+        sensor.pressAndHoldInterval: 150
 
-        showMenuButton: !!statusChatListCategory.popupMenu
+        showMenuButton: showActionButtons && !!statusChatListCategory.popupMenu
 
-        onClicked: {
-            if (mouse.button === Qt.RightButton && !!statusChatListCategory.popupMenu) {
-                highlighted = true
-                popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6)
-                return
+        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;
             }
-            statusChatListCategory.opened = !opened
         }
+        onTitleClicked: statusChatListCategory.opened = !opened
         onToggleButtonClicked: statusChatListCategory.opened = !opened
         onMenuButtonClicked: {
             highlighted = true

src/StatusQ/Components/StatusChatListCategoryItem.qml

@@ -23,15 +23,12 @@ StatusListItem {
     property alias menuButton: menuButton
     property alias toggleButton: toggleButton
 
-    signal clicked(var mouse)
     signal addButtonClicked(var mouse)
     signal menuButtonClicked(var mouse)
     signal toggleButtonClicked(var mouse)
 
     color: sensor.containsMouse || highlighted ? Theme.palette.baseColor2 : "transparent"
 
-    sensor.onClicked: statusChatListCategoryItem.clicked(mouse)
-
     statusListItemTitle.color: Theme.palette.directColor4
     statusListItemTitle.font.weight: Font.Medium
 
@@ -63,7 +60,15 @@ StatusListItem {
             icon.name: "chevron-down"
             icon.width: 18
             icon.rotation: statusChatListCategoryItem.opened ? 0 : 270
-            onClicked: statusChatListCategoryItem.toggleButtonClicked(mouse)
+            onPressed: {
+                sensor.enabled = false;
+            }
+            onClicked: {
+                statusChatListCategoryItem.toggleButtonClicked(mouse);
+            }
+            onReleased: {
+                sensor.enabled = true;
+            }
         }
     ]
 }

src/StatusQ/Components/StatusChatListItem.qml

@@ -1,4 +1,8 @@
 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
@@ -7,19 +11,30 @@ 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 bool hasMention: false
     property bool muted: false
-    property StatusImageSettings image: StatusImageSettings {}
+    property StatusImageSettings image: StatusImageSettings {
+        width: 24
+        height: 24
+    }
     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()
@@ -43,63 +58,32 @@ Rectangle {
         if (selected) {
             return Theme.palette.statusChatListItem.selectedBackgroundColor
         }
-        return sensor.containsMouse || highlighted ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
+        return hoverHander.hovered || highlighted ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
     }
 
+    opacity: dragged ? 0.7 : 1
+
     MouseArea {
         id: sensor
 
+        HoverHandler {
+            id: hoverHander
+        }
+
         anchors.fill: parent
-        cursorShape: Qt.PointingHandCursor 
+        cursorShape: Qt.PointingHandCursor
         acceptedButtons: Qt.LeftButton | Qt.RightButton
-        hoverEnabled: true
 
         onClicked: statusChatListItem.clicked(mouse)
 
-        Loader {
+        StatusSmartIdenticon {
             id: identicon
             anchors.left: parent.left
             anchors.leftMargin: 8
             anchors.verticalCenter: parent.verticalCenter
-
-            sourceComponent: !!statusChatListItem.image.source.toString() ?
-                statusRoundedImageCmp : statusLetterIdenticonCmp
-        }
-
-        Component {
-            id: statusLetterIdenticonCmp
-            StatusLetterIdenticon {
-                height: 24
-                width: 24
-                name: statusChatListItem.name
-                letterSize: 15
-                color: statusChatListItem.icon.color
-            }
-        }
-
-        Component {
-            id: statusRoundedImageCmp
-            Item {
-                height: 24
-                width: 24
-                StatusRoundedImage {
-                    id: statusRoundedImage
-                    width: parent.width
-                    height: parent.height
-                    image.source: statusChatListItem.image.source
-                    showLoadingIndicator: true
-                    color: statusChatListItem.image.isIdenticon ?
-                        Theme.palette.statusRoundedImage.backgroundColor :
-                        "transparent"
-                    border.width: statusChatListItem.image.isIdenticon ? 1 : 0
-                    border.color: Theme.palette.directColor7
-                }
-
-                Loader {
-                    sourceComponent: statusLetterIdenticonCmp
-                    active: statusRoundedImage.image.status === Image.Error
-                }
-            }
+            image: statusChatListItem.image
+            icon: statusChatListItem.icon
+            name: statusChatListItem.name
         }
 
         StatusIcon {
@@ -111,30 +95,30 @@ Rectangle {
             width: 14
             visible: statusChatListItem.type !== StatusChatListItem.Type.OneToOneChat
             opacity: {
-                if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
+                if (statusChatListItem.muted && !hoverHander.hovered && !statusChatListItem.highlighted) {
                     return 0.4
                 }
-                return statusChatListItem.hasMention || 
-                  statusChatListItem.hasUnreadMessages || 
-                  statusChatListItem.selected ||
-                  statusChatListItem.highlighted ||
-                  statusBadge.visible ||
-                  sensor.containsMouse ? 1.0 : 0.7
+                return statusChatListItem.hasMention ||
+                        statusChatListItem.hasUnreadMessages ||
+                        statusChatListItem.selected ||
+                        statusChatListItem.highlighted ||
+                        statusBadge.visible ||
+                        hoverHander.hovered ? 1.0 : 0.7
             }
 
             icon: {
                 switch (statusChatListItem.type) {
-                    case StatusChatListItem.Type.PublicCat:
-                        return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
-                        break;
-                    case StatusChatListItem.Type.GroupChat:
-                        return Theme.palette.name == "light" ? "tiny/group" : "tiny/group-white"
-                        break;
-                    case StatusChatListItem.Type.CommunityChat:
-                        return Theme.palette.name == "light" ? "tiny/channel" : "tiny/channel-white"
-                        break;
-                    default:
-                        return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
+                case StatusChatListItem.Type.PublicCat:
+                    return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
+                    break;
+                case StatusChatListItem.Type.GroupChat:
+                    return Theme.palette.name == "light" ? "tiny/group" : "tiny/group-white"
+                    break;
+                case StatusChatListItem.Type.CommunityChat:
+                    return Theme.palette.name == "light" ? "tiny/channel" : "tiny/channel-white"
+                    break;
+                default:
+                    return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
                 }
             }
         }
@@ -143,48 +127,37 @@ Rectangle {
             id: chatName
             anchors.left: statusIcon.visible ? statusIcon.right : identicon.right
             anchors.leftMargin: statusIcon.visible ? 1 : 8
-            anchors.right: statusBadge.visible ? statusBadge.left :
-                mutedIcon.visible ? mutedIcon.left : parent.right
+            anchors.right: mutedIcon.visible ? mutedIcon.left :
+                                               statusBadge.visible ? statusBadge.left : parent.right
             anchors.rightMargin: 6
             anchors.verticalCenter: parent.verticalCenter
 
-            text: statusChatListItem.type === StatusChatListItem.Type.PublicChat &&
-                !statusChatListItem.name.startsWith("#") ?
-                "#" + statusChatListItem.name :
-                statusChatListItem.name
+            text: (statusChatListItem.type === StatusChatListItem.Type.PublicChat &&
+                  !statusChatListItem.name.startsWith("#") ?
+                      "#" + statusChatListItem.name :
+                      statusChatListItem.name)
             elide: Text.ElideRight
             color: {
-                if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
+                if (statusChatListItem.muted && !hoverHander.hovered && !statusChatListItem.highlighted) {
                     return Theme.palette.directColor5
                 }
-                return statusChatListItem.hasMention || 
-                  statusChatListItem.hasUnreadMessages ||
-                  statusChatListItem.selected ||
-                  statusChatListItem.highlighted ||
-                  sensor.containsMouse ||
-                  statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
+                return statusChatListItem.hasMention ||
+                        statusChatListItem.hasUnreadMessages ||
+                        statusChatListItem.selected ||
+                        statusChatListItem.highlighted ||
+                        hoverHander.hovered ||
+                        statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
             }
-            font.weight: statusChatListItem.hasMention || 
-              statusChatListItem.hasUnreadMessages ||
-              statusBadge.visible ? Font.Bold : Font.Medium
+            font.weight: !statusChatListItem.muted &&
+                         (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: parent.right
+            anchors.right: statusBadge.visible ? statusBadge.left : parent.right
             anchors.rightMargin: 8
             anchors.verticalCenter: parent.verticalCenter
             width: 14
@@ -195,7 +168,7 @@ Rectangle {
             MouseArea {
                 id: mutedIconSensor
                 hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor 
+                cursorShape: Qt.PointingHandCursor
                 anchors.fill: parent
                 onClicked: statusChatListItem.unmute()
             }
@@ -205,5 +178,18 @@ 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
+            visible: statusBadge.value > 0
+        }
     }
 }

src/StatusQ/Components/StatusChatToolBar.qml

@@ -14,6 +14,8 @@ Rectangle {
     property alias chatInfoButton: statusChatInfoButton
     property alias menuButton: menuButton
     property alias notificationButton: notificationButton
+    property alias membersButton: membersButton
+    property alias searchButton: searchButton
     property int notificationCount: 0
 
     property Component popupMenu
@@ -21,6 +23,8 @@ Rectangle {
     signal chatInfoButtonClicked()
     signal menuButtonClicked()
     signal notificationButtonClicked()
+    signal membersButtonClicked()
+    signal searchButtonClicked()
 
     onPopupMenuChanged: {
         if (!!popupMenu) {
@@ -33,6 +37,7 @@ Rectangle {
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: parent.left
         anchors.leftMargin: 12
+        width: Math.min(implicitWidth, parent.width - actionButtons.implicitWidth - anchors.leftMargin * 2)
         onClicked: statusChatToolBar.chatInfoButtonClicked()
     }
 
@@ -44,6 +49,34 @@ Rectangle {
 
         spacing: 8
 
+        StatusFlatRoundButton {
+            id: searchButton
+            width: 32
+            height: 32
+            icon.name: "search"
+            type: StatusFlatRoundButton.Type.Secondary
+            onClicked: statusChatToolBar.searchButtonClicked()
+
+            // initializing the tooltip
+            tooltip.text: "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
@@ -52,11 +85,30 @@ 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: {
+                popupMenuSlot.item.popup(-popupMenuSlot.item.width + menuButton.width, menuButton.height + 4)
                 statusChatToolBar.menuButtonClicked()
-                highlighted = true
-                let p = menuButton.mapToItem(statusChatToolBar, menuButton.x, menuButton.y)
-                popupMenuSlot.item.popup(p.x + menuButton.width - popupMenuSlot.item.width, p.y + 4 + menuButton.height)
+            }
+
+            Loader {
+                id: popupMenuSlot
+                active: !!statusChatToolBar.popupMenu
+                onLoaded: {
+                    popupMenuSlot.item.closeHandler = function () {
+                        menuButton.highlighted = false
+                    }
+
+                    popupMenuSlot.item.openHandler = function () {
+                        menuButton.highlighted = true
+                    }
+                }
             }
         }
 
@@ -65,7 +117,8 @@ Rectangle {
             width: 1
             color: Theme.palette.directColor7
             anchors.verticalCenter: parent.verticalCenter
-            visible: menuButton.visible && notificationButton.visible
+            visible: notificationButton.visible &&
+                     (menuButton.visible || membersButton.visible || searchButton.visible)
         }
 
         StatusFlatRoundButton {
@@ -77,6 +130,11 @@ 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 {
@@ -103,15 +161,5 @@ Rectangle {
         }
 
     }
-
-    Loader {
-        id: popupMenuSlot
-        active: !!statusChatToolBar.popupMenu
-        onLoaded: {
-            popupMenuSlot.item.closeHandler = function () {
-                menuButton.highlighted = false
-            }
-        }
-    }
 }
 

src/StatusQ/Components/StatusDescriptionListItem.qml

@@ -8,12 +8,15 @@ Rectangle {
 
     property string title: ""
     property string subTitle: ""
+    property alias subTitleComponent: statusDescriptionListItemSubTitle
+    property string value: ""
     property StatusIconSettings icon: StatusIconSettings {
         width: 23
         height: 23
     }
     property alias tooltip: statusToolTip
     property alias iconButton: statusFlatRoundButton
+    property alias sensor: sensor
 
     implicitWidth: 448
     implicitHeight: 56
@@ -21,48 +24,77 @@ Rectangle {
 
     color: Theme.palette.statusListItem.backgroundColor
 
-    StatusBaseText {
-        id: statusDescriptionListItemTitle
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.leftMargin: 16
-        anchors.topMargin: 5
+    MouseArea {
+        id: sensor
+        anchors.fill: parent
+        hoverEnabled: true
+        enabled: false
+        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
 
-        color: Theme.palette.baseColor1
-        text: statusDescriptionListItem.title
-        font.pixelSize: 13
-        font.weight: Font.Medium
-    }
+        StatusBaseText {
+            id: statusDescriptionListItemTitle
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.leftMargin: 16
+            anchors.topMargin: 5
 
-    StatusBaseText {
-        id: statusDescriptionListItemSubTitle
-        anchors.top: statusDescriptionListItemTitle.bottom
-        anchors.left: parent.left
-        anchors.leftMargin: 16
-        anchors.topMargin: 4
+            color: Theme.palette.baseColor1
+            text: statusDescriptionListItem.title
+            font.pixelSize: 13
+            font.weight: Font.Medium
+        }
 
-        text: statusDescriptionListItem.subTitle
-        color: Theme.palette.directColor1
-        font.pixelSize: 15
-        font.weight: Font.Normal
-    }
+        StatusBaseText {
+            id: statusDescriptionListItemSubTitle
+            anchors.top: statusDescriptionListItemTitle.bottom
+            anchors.left: parent.left
+            anchors.leftMargin: 16
+            anchors.topMargin: 4
 
-    StatusFlatRoundButton {
-        id: statusFlatRoundButton
-        visible: !!statusDescriptionListItem.icon.name
-        anchors.verticalCenter: statusDescriptionListItemSubTitle.verticalCenter
-        anchors.left: statusDescriptionListItemSubTitle.right
-        anchors.leftMargin: 4
+            text: statusDescriptionListItem.subTitle
+            color: Theme.palette.directColor1
+            font.pixelSize: 15
+            font.weight: Font.Normal
+        }
 
-        width: 32
-        height: 32
+        StatusFlatRoundButton {
+            id: statusFlatRoundButton
+            visible: !!statusDescriptionListItem.icon.name
+            anchors.verticalCenter: statusDescriptionListItemSubTitle.verticalCenter
+            anchors.left: statusDescriptionListItemSubTitle.right
+            anchors.leftMargin: 4
 
-        icon.name: statusDescriptionListItem.icon.name
-        icon.width: statusDescriptionListItem.icon.width
-        icon.height: statusDescriptionListItem.icon.height
+            width: 32
+            height: 32
 
-        StatusToolTip {
-            id: statusToolTip
+            icon.name: statusDescriptionListItem.icon.name
+            icon.width: statusDescriptionListItem.icon.width
+            icon.height: statusDescriptionListItem.icon.height
+
+            StatusToolTip {
+                id: statusToolTip
+            }
+        }
+
+        Row {
+            anchors.right: parent.right
+            anchors.rightMargin: 16
+            anchors.verticalCenter: parent.verticalCenter
+            visible: !!statusDescriptionListItem.value
+            spacing: 8
+
+            StatusBaseText {
+                text: statusDescriptionListItem.value
+                color: Theme.palette.baseColor1
+                font.pixelSize: 15
+                anchors.verticalCenter: parent.verticalCenter
+            }
+
+            StatusIcon {
+                icon: "chevron-down"
+                rotation: 270
+                color: Theme.palette.baseColor1
+            }
         }
     }
 }

src/StatusQ/Components/StatusExpandableItem.qml

@@ -0,0 +1,227 @@
+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 }
+        }
+    ]
+}

src/StatusQ/Components/StatusLetterIdenticon.qml

@@ -5,6 +5,7 @@ import StatusQ.Core.Theme 0.1
 Rectangle {
     id: statusLetterIdenticon
 
+    property alias identiconText: identiconText
     property string name
     property int letterSize: 21
 
@@ -14,7 +15,10 @@ Rectangle {
     radius: width / 2
 
     StatusBaseText {
-        text: (statusLetterIdenticon.name.charAt(0) == "#" ? statusLetterIdenticon.name.charAt(1) : statusLetterIdenticon.name.charAt(0)).toUpperCase()
+        id: identiconText
+        text: ((statusLetterIdenticon.name.charAt(0) === "#")
+              || (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)

src/StatusQ/Components/StatusListItem.qml

@@ -1,4 +1,6 @@
 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
@@ -7,55 +9,110 @@ import StatusQ.Controls 0.1
 Rectangle {
     id: statusListItem
 
-    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 itemId: ""
+    property string titleId: ""
     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: 20
-        width: 20
+        height: isLetterIdenticon ? 40 : 20
+        width: isLetterIdenticon ? 40 : 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: sensor.containsMouse && type === StatusListItem.Type.Secondary ?
-                      "transparent" :
-                      Theme.palette.primaryColor3
+            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
+            }
         }
     }
     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
 
-    property list<Item> components
+    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
 
     onComponentsChanged: {
         if (components.length) {
@@ -68,72 +125,154 @@ 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
 
-        Loader {
+        onClicked: {
+            statusListItem.clicked(statusListItem.itemId)
+        }
+
+        StatusSmartIdenticon {
             id: iconOrImage
             anchors.left: parent.left
             anchors.leftMargin: statusListItem.leftPadding
-            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
-            }
+            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
         }
 
         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: statusListItemTitle.height + (statusListItemSubTitle.visible ? statusListItemSubTitle.height : 0)
+            height: childrenRect.height
 
             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.type === StatusListItem.Type.Primary) {
-                      return Theme.palette.directColor1
+                  if (!statusListItem.enabled) {
+                    return Theme.palette.baseColor1
                   }
-                  return Theme.palette.primaryColor1
+                  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
+                    }
                 }
             }
 
+            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: Theme.palette.baseColor1
+                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
             }
         }
 
         StatusBaseText {
+            id: statusListItemLabel
             anchors.verticalCenter: parent.verticalCenter
             anchors.right: statusListItemComponentsSlot.left
             anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0

src/StatusQ/Components/StatusListItemBadge.qml

@@ -0,0 +1,80 @@
+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
+            }
+        }
+    }
+}

src/StatusQ/Components/StatusMemberListItem.qml

@@ -0,0 +1,76 @@
+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
+}

src/StatusQ/Components/StatusMessage.qml

@@ -0,0 +1,211 @@
+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
+    }
+}

src/StatusQ/Components/StatusMessageDetails.qml

@@ -0,0 +1,28 @@
+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: ""
+}
+
+

src/StatusQ/Components/StatusNavigationListItem.qml

@@ -6,7 +6,6 @@ import StatusQ.Components 0.1
 StatusListItem {
     id: statusNavigationListItem
 
-    signal clicked(var mouse)
     property bool selected: false
     property alias badge: statusBadge
 
@@ -17,6 +16,7 @@ StatusListItem {
     icon.background.height: 20
     icon.background.color: "transparent"
 
+    statusListItemIcon.anchors.topMargin: 14
 
     color: {
         if (selected) {

src/StatusQ/Components/StatusRoundIcon.qml

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

src/StatusQ/Components/StatusSmartIdenticon.qml

@@ -0,0 +1,93 @@
+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
+    }
+}

src/StatusQ/Components/private/statusMessage/StatusAudioMessage.qml

@@ -0,0 +1,143 @@
+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()
+                }
+            }
+        }
+    }
+}

src/StatusQ/Components/private/statusMessage/StatusEditMessage.qml

@@ -0,0 +1,51 @@
+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)
+            }
+        }
+    }
+}

src/StatusQ/Components/private/statusMessage/StatusImageMessage.qml

@@ -0,0 +1,114 @@
+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
+        }
+    }
+}

src/StatusQ/Components/private/statusMessage/StatusMessageHeader.qml

@@ -0,0 +1,158 @@
+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()
+            }
+        }
+    }
+}

src/StatusQ/Components/private/statusMessage/StatusMessageQuickActions.qml

@@ -0,0 +1,51 @@
+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
+        }
+    }
+}

src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml

@@ -0,0 +1,125 @@
+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
+                }
+            }
+        }
+    }
+}
+

src/StatusQ/Components/private/statusMessage/StatusPinMessageDetails.qml

@@ -0,0 +1,46 @@
+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
+            }
+        }
+    }
+}

src/StatusQ/Components/private/statusMessage/StatusSticker.qml

@@ -0,0 +1,125 @@
+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
+                }
+            }
+        ]
+    }
+}

src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml

@@ -0,0 +1,87 @@
+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
+            }
+        }
+    }
+}

src/StatusQ/Components/private/statusMessage/StatusTimeStampLabel.qml

@@ -0,0 +1,24 @@
+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
+    }
+}

src/StatusQ/Components/qmldir

@@ -1,5 +1,6 @@
 module StatusQ.Components
 
+StatusAddress 0.1 StatusAddress.qml
 StatusBadge 0.1 StatusBadge.qml
 StatusChatInfoToolBar 0.1 StatusChatInfoToolBar.qml
 StatusChatList 0.1 StatusChatList.qml
@@ -14,8 +15,14 @@ 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

src/StatusQ/Controls/StatusAccountSelector.qml

@@ -0,0 +1,277 @@
+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()
+                }
+            }
+        }
+    }
+}
+

src/StatusQ/Controls/StatusAssetSelector.qml

@@ -0,0 +1,146 @@
+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()
+                }
+            }
+        }
+    }
+}

src/StatusQ/Controls/StatusBanner.qml

@@ -0,0 +1,89 @@
+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}
+        }
+    ]
+}

src/StatusQ/Controls/StatusBaseButton.qml

@@ -7,6 +7,7 @@ Rectangle {
     id: statusBaseButton
 
     enum Size {
+        Tiny,
         Small,
         Large
     }
@@ -33,8 +34,32 @@ Rectangle {
 
     property real defaultLeftPadding: size === StatusBaseButton.Size.Large ? 24 : 12
     property real defaultRightPadding: size === StatusBaseButton.Size.Large ? 24 : 12
-    property real defaultTopPadding: size === StatusBaseButton.Size.Large ? 11 : 10
-    property real defaultBottomPadding: size === StatusBaseButton.Size.Large ? 11 : 10
+    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 leftPadding: defaultLeftPadding
@@ -54,6 +79,7 @@ Rectangle {
     signal clicked(var mouse)
     signal pressAndHold(var mouse)
 
+    property bool highlighted: false
 
 
     /// Implementation
@@ -61,11 +87,11 @@ Rectangle {
     implicitWidth: sensor.width
     implicitHeight: sensor.height
 
-    radius: 8
+    radius: size !== StatusBaseButton.Size.Tiny ? 8 : 6
 
     color: {
         if (statusBaseButton.enabled) {
-            return sensor.containsMouse ? hoverColor
+            return sensor.containsMouse || highlighted ? hoverColor
                                         : normalColor
         } else {
             return disaledColor

src/StatusQ/Controls/StatusBaseInput.qml

@@ -20,9 +20,14 @@ 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
 
@@ -32,115 +37,228 @@ Item {
 
     property real leftPadding: 16
     property real rightPadding: 16
-    property real topPadding: 11
-    property real bottomPadding: 11
+    property real topPadding: 12
+    property real bottomPadding: 12
 
     property real minimumHeight: 0
     property real maximumHeight: 0
+    property int maximumLength: 0
 
-    implicitWidth: 200
-    implicitHeight: multiline ? Math.max(edit.implicitHeight + topPadding + bottomPadding, 40) : 40
+    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
 
     Rectangle {
         width: parent.width
         height: maximumHeight != 0 ? Math.min(
-                                        minimumHeight != 0 ? Math.max(statusBaseInput.implicitHeight, minimumHeight)
-                                                          : implicitHeight,
-                                         maximumHeight)
-                                  : parent.height
+                                         minimumHeight != 0 ? Math.max(statusBaseInput.implicitHeight, minimumHeight)
+                                         : statusBaseInput.implicitHeight, maximumHeight) : parent.height
         color: Theme.palette.baseColor2
         radius: 8
 
         clip: true
 
-        Flickable {
-            id: flick
+        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"
+        }
 
+
+        MouseArea {
+            id: sensor
+            enabled: !edit.activeFocus
+            hoverEnabled: true
             anchors.fill: parent
-            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;
+            cursorShape: Qt.IBeamCursor
+            onClicked: {
+                edit.forceActiveFocus()
             }
 
-
-
-            TextEdit {
-                id: edit
-                width: flick.width
-                selectByMouse: true
+            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
                 anchors.verticalCenter: parent.verticalCenter
-                focus: true
-
-                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
-                    }
-                }
-
-                Keys.onEnterPressed: {
-                    if (multiline) {
-                        event.accepted = false
-                    } else {
-                        event.accepted = 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.baseColor1
-                }
+                icon: statusBaseInput.icon.name
+                width: statusBaseInput.icon.width
+                height: statusBaseInput.icon.height
+                color: statusBaseInput.icon.color
+                visible: !!statusBaseInput.icon.name
             }
-        } // Flickable
+
+            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
+                    }
+                    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
+                }
+                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
+                    font.pixelSize: 15
+                    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
+                    }
+                }
+
+            } // Flickable
+
+            Item {
+                id: statusBaseInputComponentSlot
+                anchors.right: parent.right
+                anchors.rightMargin: 12
+                width: childrenRect.width
+                height: childrenRect.height
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
     } // Rectangle
 
-    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()
+    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()
+            }
         }
     }
 
+
 }

src/StatusQ/Controls/StatusChatCommandButton.qml

@@ -0,0 +1,71 @@
+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
+        }
+    }
+}
+
+

src/StatusQ/Controls/StatusChatInfoButton.qml

@@ -7,19 +7,26 @@ import StatusQ.Components 0.1
 Rectangle {
     id: statusChatInfoButton
 
-    implicitWidth: identicon.width + 
-        Math.max(
-          statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonTitle.width,
-          statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonSubTitle.width
-        ) + 8
+    implicitWidth: identicon.width +
+                   Math.max(
+                       statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonTitle.implicitWidth,
+                       statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonSubTitle.implicitWidth
+                       ) + 8
     implicitHeight: 48
 
     property string title: ""
     property string subTitle: ""
     property bool muted: false
     property int pinnedMessagesCount: 0
-    property StatusImageSettings image: StatusImageSettings {}
-    property StatusIconSettings icon: StatusIconSettings {}
+    property StatusImageSettings image: StatusImageSettings {
+        width: 36
+        height: 36
+    }
+    property StatusIconSettings icon: StatusIconSettings {
+        width: 36
+        height: 36
+        letterSize: 20
+    }
     property int type: StatusChatInfoButton.Type.PublicChat
     property alias tooltip: statusToolTip
     property alias sensor: sensor
@@ -27,6 +34,7 @@ Rectangle {
     signal clicked(var mouse)
     signal pinnedMessagesCountClicked(var mouse)
     signal unmute()
+    signal linkActivated(string link)
 
     enum Type {
         Unknown0, // 0
@@ -49,51 +57,14 @@ Rectangle {
 
         onClicked: statusChatInfoButton.clicked(mouse)
 
-        Loader {
+        StatusSmartIdenticon {
             id: identicon
-
             anchors.left: parent.left
             anchors.leftMargin: 4
             anchors.verticalCenter: parent.verticalCenter
-
-            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
-            }
+            image: statusChatInfoButton.image
+            icon: statusChatInfoButton.icon
+            name: statusChatInfoButton.title
         }
 
         Item {
@@ -103,9 +74,16 @@ Rectangle {
             anchors.left: identicon.right
             anchors.leftMargin: 8
 
-            width: statusIcon.width + chatName.anchors.leftMargin + chatName.width + (mutedIcon.visible ? mutedIcon.width + mutedIcon.anchors.leftMargin : 0)
+            width: Math.min(parent.width - anchors.leftMargin
+                            - identicon.width - identicon.anchors.leftMargin,
+                            implicitWidth)
             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
@@ -117,17 +95,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"
                     }
                 }
             }
@@ -139,16 +117,22 @@ 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
@@ -162,7 +146,7 @@ Rectangle {
                 MouseArea {
                     id: mutedIconSensor
                     hoverEnabled: true
-                    cursorShape: Qt.PointingHandCursor 
+                    cursorShape: Qt.PointingHandCursor
                     anchors.fill: parent
                     onClicked: statusChatInfoButton.unmute()
                 }
@@ -181,15 +165,27 @@ Rectangle {
             id: statusChatInfoButtonSubTitle
             anchors.left: statusChatInfoButtonTitle.left
             anchors.top: statusChatInfoButtonTitle.bottom
-            visible: !!statusChatInfoButton.subTitle
+            visible: !!statusChatInfoButton.subTitle || statusChatInfoButton.pinnedMessagesCount > 0
             height: visible ? chatType.height : 0
-            width: childrenRect.width
+            width: Math.min(parent.width - statusChatInfoButtonTitle.anchors.leftMargin
+                            - identicon.width - identicon.anchors.leftMargin - 8,
+                            implicitWidth)
 
-            StatusBaseText {
+            implicitWidth: chatType.implicitWidth + pinIconDelta + 8
+
+
+            property real pinIconDelta: pinIcon.visible ? pinIcon.width + pinIcon.anchors.leftMargin
+                                                          + divider.width + divider.anchors.leftMargin
+                                                        : 0
+
+            StatusSelectableText {
                 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 {
@@ -200,13 +196,13 @@ Rectangle {
                 anchors.left: chatType.right
                 anchors.leftMargin: 4
                 anchors.verticalCenter: chatType.verticalCenter
-                visible: pinIcon.visible
+                visible: !!chatType.text && pinIcon.visible
             }
 
             StatusIcon {
                 id: pinIcon
 
-                anchors.left: divider.right
+                anchors.left: divider.visible ? divider.right : parent.left
                 anchors.leftMargin: -2
                 anchors.verticalCenter: chatType.verticalCenter
                 height: 14
@@ -228,10 +224,11 @@ 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)
                 }
             }

src/StatusQ/Controls/StatusChatListCategoryItemButton.qml

@@ -1,5 +1,6 @@
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
+import StatusQ.Core 0.1
 
 StatusFlatRoundButton {
     id: statusChatListCategoryItemButton
@@ -9,7 +10,7 @@ StatusFlatRoundButton {
     radius: 4
 
     property bool highlighted: false
-    property alias tooltip: statusToolTip
+    property StatusTooltipSettings tooltip: StatusTooltipSettings {}
 
     type: StatusFlatRoundButton.Type.Secondary
     icon.width: 20
@@ -22,6 +23,9 @@ StatusFlatRoundButton {
     StatusToolTip {
         id: statusToolTip
         visible: !!text && parent.hovered
+        text: tooltip.text
+        orientation: tooltip.orientation
+        offset: tooltip.offset
     }
 }
 

src/StatusQ/Controls/StatusCheckBox.qml

@@ -36,6 +36,7 @@ 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
     }

src/StatusQ/Controls/StatusColorSelector.qml

@@ -0,0 +1,37 @@
+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"
+              }
+          }
+      }
+  }
+}
+

src/StatusQ/Controls/StatusFlatRoundButton.qml

@@ -18,14 +18,19 @@ 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;
             }
         }
 
-        property color disabledColor: {
+        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;
             }
         }
@@ -34,6 +39,8 @@ Rectangle {
     property bool loading: false
 
     property alias hovered: sensor.containsMouse
+    property alias tooltip: statusToolTip
+    property alias backgroundHoverColor: backgroundSettings.hoverColor
 
     property bool highlighted: false
 
@@ -46,7 +53,9 @@ Rectangle {
 
     enum Type {
         Primary,
-        Secondary
+        Secondary,
+        Tertiary,
+        Quaternary
     }
 
     /// Implementation
@@ -58,6 +67,8 @@ Rectangle {
             switch(statusFlatRoundButton.type) {
             case StatusFlatRoundButton.Type.Primary:
             case StatusFlatRoundButton.Type.Secondary:
+            case StatusFlatRoundButton.Type.Tertiary:
+            case StatusFlatRoundButton.Type.Quaternary:
                 return "transparent";
             }
         }
@@ -67,6 +78,8 @@ 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;
             }
         }
@@ -75,9 +88,22 @@ 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
@@ -86,8 +112,10 @@ Rectangle {
 
     color: {
         if (statusFlatRoundButton.enabled) {
-            return sensor.containsMouse || highlighted ? backgroundSettings.hoverColor
-                                        : backgroundSettings.color
+            if (sensor.containsMouse) {
+                return backgroundSettings.hoverColor
+            }
+            return highlighted ? backgroundSettings.highlightedColor : backgroundSettings.color
         } else {
             return backgroundSettings.disabledColor
         }
@@ -108,6 +136,7 @@ Rectangle {
             visible: !loading
 
             icon: statusFlatRoundButton.icon.name
+            source: statusFlatRoundButton.icon.source
             rotation: statusFlatRoundButton.icon.rotation
 
             width: statusFlatRoundButton.icon.width
@@ -140,4 +169,9 @@ Rectangle {
         onReleased: statusFlatRoundButton.released(mouse)
         onPressAndHold: statusFlatRoundButton.pressAndHold(mouse)
     } // Sensor
+
+    StatusToolTip {
+        id: statusToolTip
+        visible: !!text && parent.hovered
+    } // Tooltip
 } // Rectangle

src/StatusQ/Controls/StatusIconTabButton.qml

@@ -20,56 +20,20 @@ TabButton {
 
     contentItem: Item {
         anchors.fill: parent
-
-        Loader {
-            active: true
+        StatusSmartIdenticon {
+            id: identicon
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.verticalCenter: parent.verticalCenter
-            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
-            }
+            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
         }
     }
 

src/StatusQ/Controls/StatusInput.qml

@@ -0,0 +1,214 @@
+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
+    }
+}

src/StatusQ/Controls/StatusPasswordStrengthIndicator.qml

@@ -0,0 +1,54 @@
+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}
+        }
+    ]
+}

src/StatusQ/Controls/StatusPickerButton.qml

@@ -0,0 +1,59 @@
+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();
+        }
+    }
+}

src/StatusQ/Controls/StatusProgressBar.qml

@@ -0,0 +1,42 @@
+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
+            }
+        }
+    }
+}

src/StatusQ/Controls/StatusRoundButton.qml

@@ -21,7 +21,7 @@ Rectangle {
             }
         }
 
-        property color disabledColor: {
+        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.indirectColor1;
+                return Theme.palette.baseColor2;
             case StatusRoundButton.Type.Secondary:
                 return Theme.palette.baseColor1;
             }

src/StatusQ/Controls/StatusSelect.qml

@@ -0,0 +1,175 @@
+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)
+            }
+        }
+    }
+}
+

src/StatusQ/Controls/StatusSelectableText.qml

@@ -0,0 +1,105 @@
+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
+            }
+
+        }
+    }
+}

src/StatusQ/Controls/StatusSlider.qml

@@ -15,8 +15,10 @@ Slider {
     leftPadding: 0
 
     background: Rectangle {
-        implicitHeight: 4
+        id: bgRect
         implicitWidth: 100
+        implicitHeight: 4
+        height: implicitHeight
         color: {
             if (statusSlider.value === statusSlider.to) {
                 return Theme.palette.primaryColor1
@@ -40,7 +42,7 @@ Slider {
 
     handle: Rectangle {
         x: statusSlider.leftPadding + statusSlider.visualPosition * (statusSlider.availableWidth - width / 2)
-        anchors.verticalCenter: parent.verticalCenter
+        anchors.verticalCenter: bgRect.verticalCenter
         color: Theme.palette.white
         implicitWidth: 28
         implicitHeight: 28

src/StatusQ/Controls/StatusSwitchTabBar.qml

@@ -0,0 +1,14 @@
+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
+    }
+}

src/StatusQ/Controls/StatusSwitchTabButton.qml

@@ -0,0 +1,52 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtGraphicalEffects 1.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+TabButton {
+    id: statusSwitchTabButton
+
+    contentItem: Item {
+        height: 36
+        MouseArea {
+            id: sensor
+            hoverEnabled: true
+            anchors.fill: parent
+
+            cursorShape: Qt.PointingHandCursor
+            onPressed: mouse.accepted = false
+            onReleased: mouse.accepted = false
+
+            StatusBaseText {
+                id: label
+                text: statusSwitchTabButton.text
+                color: Theme.palette.primaryColor1
+                font.weight: Font.Medium
+                font.pixelSize: 15
+                horizontalAlignment: Text.AlignHCenter
+                anchors.centerIn: parent
+            }
+        }
+    }
+
+    background: Rectangle {
+        id: controlBackground
+        implicitHeight: 36
+        implicitWidth: 148
+        color: statusSwitchTabButton.checked ?
+            Theme.palette.statusSwitchTab.backgroundColor :
+            "transparent"
+        radius: 8
+        layer.enabled: true
+        layer.effect: DropShadow {
+            horizontalOffset: 0
+            verticalOffset: 0
+            radius: 10
+            samples: 25
+            spread: 0
+            color: Theme.palette.dropShadow
+        }
+    }
+}

src/StatusQ/Controls/StatusTabBarIconButton.qml

@@ -0,0 +1,53 @@
+import QtQuick 2.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+Item {
+    id: root
+
+    property StatusIconSettings icon: StatusIconSettings {
+        width: 24
+        height: 24
+        name: ""
+    }
+
+    property bool highlighted: false
+    property bool enabled: true
+
+    signal clicked(var mouse)
+
+    implicitWidth: 40
+    implicitHeight: 40
+
+    MouseArea {
+        id: sensor
+        enabled: root.enabled
+        cursorShape: root.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+        anchors.fill: parent
+        hoverEnabled: true
+        onClicked: function (mouse) {
+            root.clicked(mouse)
+        }
+
+        StatusIcon {
+            id: statusIcon
+            width: root.icon.width
+            height: root.icon.height
+            icon: root.icon.name
+            color: root.highlighted || sensor.containsMouse ? Theme.palette.primaryColor1 : Theme.palette.baseColor1
+            anchors.centerIn: parent
+        }
+
+        Rectangle {
+            visible: root.highlighted || sensor.containsMouse
+            width: statusIcon.width
+            anchors.horizontalCenter: parent.horizontalCenter
+            height: 2
+            radius: 1
+            color: Theme.palette.primaryColor1
+            anchors.bottom: parent.bottom
+        }
+    }
+}
+

src/StatusQ/Controls/StatusToolTip.qml

@@ -15,6 +15,8 @@ ToolTip {
 
     property int maxWidth: 800
     property int orientation: StatusToolTip.Orientation.Top
+    property int offset: 0
+    property alias arrow: arrow
 
     implicitWidth: Math.min(maxWidth, textContent.implicitWidth + 16)
     leftPadding: 8
@@ -32,6 +34,7 @@ ToolTip {
             anchors.bottomMargin: 8
         }
         Rectangle {
+            id: arrow
             color: statusToolTipContentBackground.color
             height: 20
             width: 20
@@ -39,13 +42,13 @@ ToolTip {
             radius: 1
             x: {
                 if (orientation === StatusToolTip.Orientation.Top || orientation === StatusToolTip.Orientation.Bottom) {
-                    return statusToolTipBackground.width / 2 - width / 2
+                    return statusToolTipBackground.width / 2 - width / 2 + offset
                 }
                 if (orientation === StatusToolTip.Orientation.Left) {
-                    return statusToolTipContentBackground.width - (width / 2) - 8
+                    return statusToolTipContentBackground.width - (width / 2) - 8 + offset
                 }
                 if (orientation === StatusToolTip.Orientation.Right) {
-                    return -width/2 + 8
+                    return -width/2 + 8 + offset
                 }
             }
             y: {

src/StatusQ/Controls/StatusWalletColorButton.qml

@@ -0,0 +1,41 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+StatusFlatRoundButton {
+    id: control
+    property bool selected: false
+    icon.name: "filled-account"
+    icon.width: 36
+    icon.height: 36
+    Rectangle {
+        anchors.fill: parent
+        color: control.hovered ? control.icon.color : "transparent"
+        opacity: 0.1
+        radius: 8
+    }
+
+    Rectangle {
+        width: 16
+        height: 16
+        anchors.top: parent.top
+        anchors.topMargin: 2
+        anchors.right: parent.right
+        anchors.rightMargin: 2
+        visible: control.selected
+        radius: width / 2
+        color: Theme.palette.successColor1
+        StatusIcon {
+            icon: "tiny/checkmark"
+            height: 12
+            color: Theme.palette.white
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+}
+
+

src/StatusQ/Controls/StatusWalletColorSelect.qml

@@ -0,0 +1,61 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Utils 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+Item {
+    id: control
+    property string selectedColor
+    property string label: "Account color"
+    property var model
+    property bool enabled: true
+
+    height: childrenRect.height
+    implicitWidth: 480
+
+    StatusBaseText {
+        id: label
+        text: control.label
+        anchors.left: parent.left
+        anchors.top: parent.top
+        font.pixelSize: 15
+        color: control.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
+    }
+
+    RowLayout {
+        id: colors
+        spacing: 6
+        anchors.top: label.bottom
+        anchors.topMargin: 8
+        anchors.left: parent.left
+        anchors.right: parent.right
+        Repeater {
+            model: control.model
+            StatusWalletColorButton {
+                id: colorBtn
+                icon.color: modelData
+                selected: {
+                    const upperCaseColor = control.selectedColor.toUpperCase()
+                    const upperCaseModelDataColor = modelData.toString().toUpperCase()
+                    if (upperCaseColor === upperCaseModelDataColor) {
+                        return true
+                    }
+                    // Check the colors in the other theme
+                    const currentColor = Utils.getThemeAccountColor(upperCaseColor, Theme.palette.accountColors)
+                    if (!currentColor) {
+                        return false
+                    }
+
+                    return currentColor === upperCaseModelDataColor
+                }
+                onClicked: {
+                    control.selectedColor = modelData.toUpperCase()
+                }
+            }
+        }
+    }
+}

src/StatusQ/Controls/Validators/StatusAddressOrEnsValidator.qml

@@ -0,0 +1,15 @@
+import StatusQ.Controls 0.1
+import StatusQ.Core.Utils 0.1
+
+StatusValidator {
+    name: "addressOrEns"
+
+    errorMessage: "Please enter a valid address or ENS name."
+
+    validate: function (t) {
+        return Utils.isValidAddress(t) || Utils.isValidEns(t) ?
+            true :
+            { actual: t }
+    }
+}
+