feat(StatusInput) exposed edit component

We need to be able to call forceActiveFocus, so
TextEdit component should be somehow accessible

Relates to desktop #3310

.gitignore

@@ -10,3 +10,5 @@ bin
 *.autosave
 Makefile
 .qmake.stash
+*_qml.cpp
+*_qmlcache.qrc

CHANGELOG.md

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

@@ -1,6 +1,6 @@
-# Status QML
+# StatusQ
 
-> An emerging reusable UI component library for Status applications.
+> An emerging reusable QML UI component library for Status applications.
 
 ## Usage
 
@@ -9,9 +9,11 @@ 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)
+- [StatusQ.Platform](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Platform/qmldir)
 - [StatusQ.Popups](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Popups/qmldir)
 
 Provided components can be viewed and tested in the [sandbox application](#viewing-and-testing-components) that comes with this repository.
@@ -43,12 +45,13 @@ To run the sandbox from within a command line interface, run the following comma
 ```
 $ git clone https://github.com/status-im/StatusQ
 $ cd StatusQ/sandbox
-$ qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
-$ make
+$ ./scripts/build
 ```
 
 Once that is done, the sandbox can be started with the generated executable:
 
 ```
-$ ./bin
+$ ./bin/sandbox
 ```
+
+More Documentation available on the [wiki](https://hackmd.io/@status-desktop/B1naRjxh_/%2FwFtiXvOiQqCdw2lk6gbOLA)

sandbox/Buttons.qml

@@ -1,239 +1,261 @@
 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
 
-Grid {
 
-    columns: 3
-    columnSpacing: 38
-    rowSpacing: 10
+Column {
+    spacing: 10
+    Grid {
+        id: buttonGridWidth
+        columns: 3
+        columnSpacing: 38
+        rowSpacing: 10
 
-    horizontalItemAlignment: Grid.AlignHCenter
+        horizontalItemAlignment: Grid.AlignHCenter
 
-    // Large
-    StatusButton {
-        text: "Button"
+        // 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
+        }
     }
 
-    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
+    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.qml

@@ -5,8 +5,10 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 
+import Sandbox 0.1
+
 GridLayout {
-    columns: 6
+    columns: 1
     columnSpacing: 5
     rowSpacing: 5
 
@@ -113,6 +115,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"

sandbox/DemoApp.qml

@@ -7,47 +7,36 @@ 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
 
 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
-
-        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
-        }
+        visible: titleStyle === "osx"
     }
 
+    StatusWindowsTitleBar {
+        id: windowsTitle
+        anchors.top: parent.top
+        width: parent.width
+        z: statusAppLayout.z + 1
+        visible: titleStyle === "windows"
+    }
 
     StatusAppLayout {
         id: statusAppLayout
-        anchors.top: demoApp.top
+        anchors.top: windowsTitle.visible ? windowsTitle.bottom : demoApp.top
         anchors.left: demoApp.left
         anchors.topMargin: demoApp.border.width
         anchors.leftMargin: demoApp.border.width
@@ -124,16 +113,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
@@ -141,6 +130,11 @@ Rectangle {
                     badge.border.width: 2
 
                     tooltip.text: "Profile"
+
+                    checked: appView.sourceComponent == statusAppProfileSettingsView
+                    onClicked: {
+                        appView.sourceComponent = statusAppProfileSettingsView
+                    }
                 }
             ]
         }
@@ -160,19 +154,189 @@ Rectangle {
             leftPanel: Item {
                 anchors.fill: parent
 
-                StatusChatList {
+                StatusNavigationPanelHeadline {
+                    id: headline
                     anchors.top: parent.top
-                    anchors.topMargin: 64
+                    anchors.topMargin: 16
                     anchors.horizontalCenter: parent.horizontalCenter
+                    text: "Chat"
+                }
 
-                    selectedChatId: "0"
-                    chatListItems.model: demoChatListItems
-                    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)
+                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
                             }
                         }
                     }
@@ -186,12 +350,14 @@ Rectangle {
                     anchors.top: parent.top
                     width: parent.width
 
-                    chatInfoButton.title: "Amazing Funny Squirrel"        
+                    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
@@ -223,7 +389,6 @@ Rectangle {
                         }
                     }
                 }
-
             }
         }
     }
@@ -231,168 +396,487 @@ Rectangle {
     Component {
         id: statusAppCommunityView
 
-        StatusAppTwoPanelLayout {
+        StatusAppThreePanelLayout {
+            id: root
 
+            handle: Rectangle {
+                implicitWidth: 5
+                color: SplitHandle.pressed ? Theme.palette.baseColor2
+                                           : (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
+            }
             leftPanel: Item {
-                anchors.fill: parent
+                id: leftPanel
+
+                StatusChatInfoToolBar {
+                    id: statusChatInfoToolBar
 
-                Column {
                     anchors.top: parent.top
-                    anchors.topMargin: 64
                     anchors.horizontalCenter: parent.horizontalCenter
-                    spacing: 4
 
-                    StatusChatList {
-                        id: statusChatList
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        chatListItems.model: demoCommunityChatListItems
-                    }
+                    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()
 
-                    StatusChatListCategory {
-                        name: "Public"
+                    popupMenu: StatusPopupMenu {
 
-                        chatList.chatListItems.model: demoCommunityChatListItems
-                        chatList.selectedChatId: "0"
-                        chatList.onChatItemSelected: chatList.selectedChatId = id
-                        popupMenu: categoryPopupCmp
-                    }
-
-                    StatusChatListCategory {
-                        name: "Development"
-
-                        chatList.chatListItems.model: demoCommunityChatListItems
-                        chatList.onChatItemSelected: chatList.selectedChatId = id
-                        popupMenu: categoryPopupCmp
-                    }
-                }
-
-                Component {
-                    id: categoryPopupCmp
-
-                    StatusPopupMenu {
                         StatusMenuItem {
-                            text: "Mute Category"
-                            icon.name: "notification"
+                            text: "Create channel"
+                            icon.name: "channel"
                         }
 
-                        StatusMenuItem { 
-                            text: "Mark as Read"
-                            icon.name: "checkmark-circle"
-                        }
-
-                        StatusMenuItem { 
-                            text: "Edit Category"
-                            icon.name: "edit"
+                        StatusMenuItem {
+                            text: "Create category"
+                            icon.name: "channel-category"
                         }
 
                         StatusMenuSeparator {}
 
                         StatusMenuItem {
-                            text: "Delete Category"
-                            icon.name: "delete"
-                            type: StatusMenuItem.Type.Danger
+                            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"
+                            }
                         }
                     }
                 }
             }
-            rightPanel: Item {
-                anchors.fill: parent
 
+            centerPanel: Item {
                 StatusChatToolBar {
+                    id: statusChatToolBar
                     anchors.top: parent.top
                     width: parent.width
 
-                    chatInfoButton.title: "general"        
+                    chatInfoButton.title: "general"
                     chatInfoButton.subTitle: "Community Chat"
                     chatInfoButton.icon.color: Theme.palette.miscColor6
                     chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
+                    onSearchButtonClicked: {
+                        searchButton.highlighted = !searchButton.highlighted;
+                        searchPopup.setSearchSelection(demoCommunityDetailModal.header.title,
+                                                       "",
+                                                       demoCommunityDetailModal.header.image.source);
+                        searchPopup.open();
+                    }
+                    membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
+                    onMembersButtonClicked: {
+                        root.showRightPanel = !root.showRightPanel;
+                    }
+                }
+
+                StatusSearchPopup {
+                    id: searchPopup
+                    searchOptionsPopupMenu: searchPopupMenu
+                    onAboutToHide: {
+                        if (searchPopupMenu.visible) {
+                            searchPopupMenu.close();
+                        }
+                        //clear menu
+                        for (var i = 2; i < searchPopupMenu.count; i++) {
+                            searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
+                        }
+                    }
+                    onClosed: {
+                        statusChatToolBar.searchButton.highlighted = false
+                        searchPopupMenu.dismiss();
+                    }
+                    onSearchTextChanged: {
+                        if (searchPopup.searchText !== "") {
+                            searchPopup.loading = true;
+                            searchModelSimTimer.start();
+                        } else {
+                            searchPopup.searchResults = [];
+                            searchModelSimTimer.stop();
+                        }
+                    }
+                    Timer {
+                        id: searchModelSimTimer
+                        interval: 500
+                        onTriggered: {
+                            if (searchPopup.searchText.startsWith("c")) {
+                                searchPopup.searchResults = models.searchResultsA;
+                            } else {
+                                searchPopup.searchResults = models.searchResultsB;
+                            }
+                            searchPopup.loading = false;
+                        }
+                    }
+                }
+                StatusSearchLocationMenu {
+                    id: searchPopupMenu
+                    searchPopup: searchPopup
+                    locationModel: models.optionsModel
+                }
+            }
+
+            rightPanel: Item {
+                id: rightPanel
+                StatusBaseText {
+                    id: titleText
+                    anchors.top: parent.top
+                    anchors.topMargin:16
+                    anchors.left: parent.left
+                    anchors.leftMargin: 16
+                    opacity: (rightPanel.width > 50) ? 1.0 : 0.0
+                    visible: (opacity > 0.1)
+                    font.pixelSize: 15
+                    text: qsTr("Members")
+                }
+
+                ListView {
+                    anchors.top: titleText.bottom
+                    anchors.topMargin: 16
+                    anchors.left: parent.left
+                    anchors.leftMargin: 8
+                    anchors.right: parent.right
+                    anchors.rightMargin: 8
+                    anchors.bottom: parent.bottom
+                    anchors.bottomMargin: 16
+                    boundsBehavior: Flickable.StopAtBounds
+                    model: ["John", "Nick", "Maria", "Mike"]
+                    delegate: Row {
+                        width: parent.width
+                        height: 30
+                        spacing: 8
+                        Rectangle {
+                            width: 24
+                            height: 24
+                            radius: width/2
+                            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 255)
+                        }
+                        StatusBaseText {
+                            height: parent.height
+                            horizontalAlignment: Text.AlignHCenter
+                            opacity: (rightPanel.width > 50) ? 1.0 : 0.0
+                            visible: (opacity > 0.1)
+                            font.pixelSize: 15
+                            color: Theme.palette.directColor1
+                            text: modelData
+                        }
+                    }
                 }
             }
         }
     }
 
-    ListModel {
-        id: demoChatListItems
-        ListElement {
-            chatId: "0"
-            name: "#status"
-            chatType: StatusChatListItem.Type.PublicChat
-            muted: false
-            hasUnreadMessages: false
-            hasMention: false
-            unreadMessagesCount: 0
-            iconColor: "blue"
-        }
-        ListElement {
-            chatId: "1"
-            name: "#status-desktop"
-            chatType: StatusChatListItem.Type.PublicChat
-            muted: false
-            hasUnreadMessages: true
-            iconColor: "red"
-            unreadMessagesCount: 1
-        }
-        ListElement {
-            chatId: "2"
-            name: "Amazing Funny Squirrel"
-            chatType: StatusChatListItem.Type.OneToOneChat
-            muted: false
-            hasUnreadMessages: false
-            iconColor: "green"
-            identicon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-            unreadMessagesCount: 0
-        }
-        ListElement {
-            chatId: "3"
-            name: "Black Ops"
-            chatType: StatusChatListItem.Type.GroupChat
-            muted: false
-            hasUnreadMessages: false
-            iconColor: "purple"
-            unreadMessagesCount: 0
-        }
-        ListElement {
-            chatId: "4"
-            name: "Spectacular Growing Otter"
-            chatType: StatusChatListItem.Type.OneToOneChat
-            muted: true
-            hasUnreadMessages: false
-            iconColor: "Orange"
-            unreadMessagesCount: 0
+    Component {
+        id: statusAppProfileSettingsView
+
+        StatusAppTwoPanelLayout {
+
+            leftPanel: Item {
+                anchors.fill: parent
+
+                StatusNavigationPanelHeadline {
+                    id: profileHeadline
+                    anchors.top: parent.top
+                    anchors.topMargin: 16
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    text: "Profile"
+                }
+
+                ScrollView {
+                    anchors.top: profileHeadline.bottom
+                    anchors.topMargin: 16
+                    anchors.bottom: parent.bottom
+                    width: parent.width
+
+                    contentHeight: profileMenuItems.height + 8
+                    contentWidth: parent.width
+                    clip: true
+
+                    Column {
+                        id: profileMenuItems
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        spacing: 4
+
+                        Repeater {
+                            model: models.demoProfileGeneralMenuItems
+                            delegate: StatusNavigationListItem {
+                                title: model.title
+                                icon.name: model.icon
+                            }
+                        }
+
+                        StatusListSectionHeadline { text: "Settings" }
+
+                        Repeater {
+                            model: models.demoProfileSettingsMenuItems
+                            delegate: StatusNavigationListItem {
+                                title: model.title
+                                icon.name: model.icon
+                            }
+                        }
+
+                        Item {
+                            id: invisibleSeparator
+                            height: 16
+                            width: parent.width
+                        }
+
+                        Repeater {
+                            model: models.demoProfileOtherMenuItems
+                            delegate: StatusNavigationListItem {
+                                title: model.title
+                                icon.name: model.icon
+                            }
+                        }
+                    }
+                }
+            }
+
+            rightPanel: Item {
+                anchors.fill: parent
+            }
         }
     }
 
-    ListModel {
-        id: demoCommunityChatListItems
-        ListElement {
-            chatId: "0"
-            name: "general"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            hasUnreadMessages: false
-            hasMention: false
-            unreadMessagesCount: 0
-            iconColor: "orange"
+    StatusModal {
+        id: demoContactRequestsModal
+        anchors.centerIn: parent
+
+        header.title: "Contact Requests"
+        headerActionButton: StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Secondary
+            width: 32
+            height: 32
+
+            icon.width: 20
+            icon.height: 20
+            icon.name: "notification"
         }
-        ListElement {
-            chatId: "1"
-            name: "random"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            hasUnreadMessages: false
-            hasMention: false
-            unreadMessagesCount: 0
-            iconColor: "orange"
+
+        contentItem: StatusBaseText {
+            anchors.centerIn: parent
+            text: "Contact request will be shown here"
+            font.pixelSize: 15
+            color: Theme.palette.directColor1
         }
-        ListElement {
-            chatId: "2"
-            name: "watercooler"
-            chatType: StatusChatListItem.Type.CommunityChat
-            muted: false
-            hasUnreadMessages: false
-            hasMention: false
-            unreadMessagesCount: 0
-            iconColor: "orange"
+
+        rightButtons: [
+            StatusButton {
+                text: "Decline all"
+                type: StatusBaseButton.Type.Danger
+                onClicked: demoContactRequestsModal.close()
+            },
+            StatusButton {
+                text: "Accept all"
+                onClicked: demoContactRequestsModal.close()
+            }
+        ]
+    }
+
+    StatusModal {
+        id: demoCommunityDetailModal
+
+        anchors.centerIn: parent
+
+        header.title: "Cryptokitties"
+        header.subTitle: "Public Community"
+        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+
+        contentItem: Column {
+            width: demoCommunityDetailModal.width
+
+            StatusModalDivider {
+                bottomPadding: 8
+            }
+
+            StatusBaseText {
+                text: "A community of cat lovers, meow!"
+                verticalAlignment: Text.AlignVCenter
+                font.pixelSize: 15
+                height: 46
+                color: Theme.palette.directColor1
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.leftMargin: 16
+                anchors.rightMargin: 16
+            }
+
+            StatusModalDivider {
+                topPadding: 8
+                bottomPadding: 8
+            }
+
+            StatusDescriptionListItem {
+                title: "Share community"
+                subTitle: "https://join.status.im/u/0x04...45f19"
+                tooltip.text: "Copy to clipboard"
+                icon.name: "copy"
+                iconButton.onClicked: tooltip.visible = !tooltip.visible
+                width: parent.width
+            }
+
+            StatusModalDivider {
+                topPadding: 8
+                bottomPadding: 8
+            }
+
+            StatusListItem {
+                anchors.horizontalCenter: parent.horizontalCenter
+                statusListItemTitle.font.pixelSize: 17
+                title: "Members"
+                icon.name: "group-chat"
+                label: "184"
+                components: [
+                    StatusIcon {
+                        icon: "chevron-down"
+                        rotation: 270
+                        color: Theme.palette.baseColor1
+                    }
+                ]
+            }
+
+            StatusListItem {
+                anchors.horizontalCenter: parent.horizontalCenter
+                statusListItemTitle.font.pixelSize: 17
+                title: "Notifications"
+                icon.name: "notification"
+                components: [
+                    StatusSwitch {}
+                ]
+            }
+
+            StatusModalDivider {
+                topPadding: 8
+                bottomPadding: 8
+            }
+
+            StatusListItem {
+                anchors.horizontalCenter: parent.horizontalCenter
+                statusListItemTitle.font.pixelSize: 17
+                title: "Edit community"
+                icon.name: "edit"
+                type: StatusListItem.Type.Secondary
+            }
+
+            StatusListItem {
+                anchors.horizontalCenter: parent.horizontalCenter
+                statusListItemTitle.font.pixelSize: 17
+                title: "Transfer ownership"
+                icon.name: "exchange"
+                type: StatusListItem.Type.Secondary
+            }
+
+            StatusListItem {
+                anchors.horizontalCenter: parent.horizontalCenter
+                statusListItemTitle.font.pixelSize: 17
+                title: "Leave community"
+                icon.name: "arrow-right"
+                icon.rotation: 180
+                type: StatusListItem.Type.Secondary
+            }
         }
     }
+
+    Models {
+        id: models
+    }
 }

sandbox/ListItems.qml

@@ -40,11 +40,18 @@ GridLayout {
     StatusChatListCategoryItem {
         title: "Chat list category"
         opened: false
+        showActionButtons: true
     }
 
     StatusChatListCategoryItem {
         title: "Chat list category (opened)"
         opened: true
+        showActionButtons: true
+    }
+
+    StatusChatListCategoryItem {
+        title: "Chat list category (no buttons)"
+        opened: true
     }
 
     StatusChatListItem {
@@ -88,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
@@ -100,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"
     }
@@ -109,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"
@@ -217,11 +277,62 @@ GridLayout {
         ]
     }
 
+    StatusListItem {
+        title: "Title"
+        icon.name: "info"
+        type: StatusListItem.Type.Secondary
+    }
+
+    StatusListItem {
+        title: "Title"
+        icon.isLetterIdenticon: true
+        icon.background.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"
@@ -230,4 +341,8 @@ GridLayout {
         iconButton.onClicked: tooltip.visible = !tooltip.visible
     }
 
+    StatusContactRequestsIndicatorListItem {
+        title: "Contact requests"
+        requestsCount: 3
+    }
 }

sandbox/Models.qml

@@ -0,0 +1,336 @@
+import QtQuick 2.14
+import StatusQ.Components 0.1
+
+QtObject {
+
+    property var demoChatListItems: ListModel {
+        id: demoChatListItems
+        ListElement {
+            chatId: "0"
+            name: "#status"
+            chatType: StatusChatListItem.Type.PublicChat
+            muted: false
+            unreadMessagesCount: 0
+            mentionsCount: 0
+            color: "blue"
+            position: 0
+        }
+        ListElement {
+            chatId: "1"
+            name: "status-desktop"
+            chatType: StatusChatListItem.Type.PublicChat
+            muted: false
+            color: "red"
+            unreadMessagesCount: 1
+            mentionsCount: 1
+            position: 1
+        }
+        ListElement {
+            chatId: "2"
+            name: "Amazing Funny Squirrel"
+            chatType: StatusChatListItem.Type.OneToOneChat
+            muted: false
+            color: "green"
+            identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+            unreadMessagesCount: 0
+            position: 2
+        }
+        ListElement {
+            chatId: "3"
+            name: "Black Ops"
+            chatType: StatusChatListItem.Type.GroupChat
+            muted: false
+            color: "purple"
+            unreadMessagesCount: 0
+            position: 3
+        }
+        ListElement {
+            chatId: "4"
+            name: "Spectacular Growing Otter"
+            chatType: StatusChatListItem.Type.OneToOneChat
+            muted: true
+            color: "Orange"
+            unreadMessagesCount: 0
+            position: 4
+        }
+        ListElement {
+            chatId: "5"
+            name: "channel-with-a-super-duper-long-name"
+            chatType: StatusChatListItem.Type.PublicChat
+            muted: false
+            color: "green"
+            unreadMessagesCount: 0
+            position: 5
+        }
+    }
+
+    property var demoCommunityChatListItems: ListModel {
+        id: demoCommunityChatListItems
+        ListElement {
+            chatId: "0"
+            name: "general"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            unreadMessagesCount: 0
+            color: "orange"
+            position: 0
+        }
+        ListElement {
+            chatId: "1"
+            name: "random"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            unreadMessagesCount: 0
+            color: "orange"
+            categoryId: "public"
+            position: 0
+        }
+        ListElement {
+            chatId: "2"
+            name: "watercooler"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            unreadMessagesCount: 0
+            color: "orange"
+            categoryId: "public"
+            position: 1
+        }
+        ListElement {
+            chatId: "3"
+            name: "language-design"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            unreadMessagesCount: 0
+            color: "orange"
+            categoryId: "dev"
+            position: 0
+        }
+    }
+
+    property var demoCommunityCategoryItems: ListModel {
+        id: demoCommunityCategoryItems
+        ListElement {
+            categoryId: "public"
+            name: "Public"
+            position: 0
+        }
+        ListElement {
+            categoryId: "dev"
+            name: "Development"
+            position: 1
+        }
+    }
+
+    property var demoProfileGeneralMenuItems: ListModel {
+        id: demoProfileGeneralMenuItems
+
+        ListElement {
+            title: "My Profile"
+            icon: "profile"
+        }
+
+        ListElement {
+            title: "Contacts"
+            icon: "contact"
+        }
+
+        ListElement {
+            title: "ENS Usernames"
+            icon: "username"
+        }
+
+    }
+
+    property var demoProfileSettingsMenuItems: ListModel {
+        id: demoProfileSettingsMenuItems
+
+        ListElement {
+            title: "Privacy & Security"
+            icon: "security"
+        }
+
+        ListElement {
+            title: "Appearance"
+            icon: "appearance"
+        }
+
+        ListElement {
+            title: "Browser"
+            icon: "browser"
+        }
+
+        ListElement {
+            title: "Sounds"
+            icon: "sound"
+        }
+
+        ListElement {
+            title: "Language"
+            icon: "language"
+        }
+
+        ListElement {
+            title: "Notifications"
+            icon: "notification"
+        }
+
+        ListElement {
+            title: "Sync settings"
+            icon: "mobile"
+        }
+
+        ListElement {
+            title: "Advanced"
+            icon: "settings"
+        }
+
+    }
+
+    property var demoProfileOtherMenuItems: ListModel {
+        id: demoProfileOtherMenuItems
+
+        ListElement {
+            title: "Need help?"
+            icon: "help"
+        }
+
+        ListElement {
+            title: "About"
+            icon: "info"
+        }
+
+        ListElement {
+            title: "Sign out & Quit"
+            icon: "logout"
+        }
+    }
+
+    //dummy search popup models
+    property var searchResultsA: ListModel {
+        ListElement { itemId: "i1"; titleId: "t1"; title: "@Flea"; sectionName: "Messages"; time: "18:55 AM"; content: "lorem ipsum <font color='#4360DF'>@Nick</font> dolor sit amet";
+            image: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg";
+            color: "orange";
+            badgeImage: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg";
+            badgePrimaryText: "CryptoKities";
+            badgeSecondaryText: "";
+            badgeIconColor: "";
+            badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i2"; titleId: "t2"; image: ""; color: "blue"; title: "core"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i3"; titleId: "t3"; image: ""; color: "yellow"; title: "communities-phase3"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i4"; titleId: "t4"; image: ""; color: "black"; title: "core-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i5"; titleId: "t5"; image: ""; color: "green"; title: "desktop"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i6"; titleId: "t6"; image: ""; color: "red"; title: "Crocodile Vanilla Bird"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i7"; titleId: "t7"; image: ""; color: "purple"; title: "carmen eth"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i8"; titleId: "t8"; image: ""; color: "red"; title: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i9"; titleId: "t9"; image: ""; color: "blue"; title: "MyCommunity"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i10"; titleId: "t10"; image: ""; color: "green"; title: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+    }
+    property var searchResultsB: ListModel {
+        ListElement { itemId: "i1"; titleId: "t1"; title: "@Ant"; sectionName: "Messages"; time: "11:43 AM"; content: "<font color='#4360DF'>@John</font>, lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ";
+            image: "";
+            color: "orange";
+            badgeImage: "";
+            badgePrimaryText: "CryptoKities";
+            badgeSecondaryText: "#design";
+            badgeIconColor: "pink"; badgeIsLetterIdenticon: true }
+        ListElement { itemId: "i2"; titleId: "t2"; image: ""; color: "blue"; title: "support"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i3"; titleId: "t3"; image: ""; color: "red"; title: "desktop-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i4"; titleId: "t4"; image: ""; color: "orange"; title: "climate-change"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i5"; titleId: "t5"; image: ""; color: "black"; title: "food"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: "pink"; badgeIsLetterIdenticon: true }
+        ListElement { itemId: "i6"; titleId: "t6"; image: ""; color: "green"; title: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i7"; titleId: "t7"; image: ""; color: "purple"; title: "CryptoRangers"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
+        ListElement { itemId: "i8"; titleId: "t8"; image: ""; color: "yellow"; title: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: "orange"; badgeIsLetterIdenticon: true }
+    }
+
+    property ListModel optionsModel: ListModel {
+        ListElement {
+            value: "item_1"
+            title: "Item with icon"
+            imageSource: ""
+            iconName: "chat"
+            iconColor: ""
+            isIdenticon: false
+            subItems: [
+                ListElement {
+                    value: "sub_item_1_1"
+                    text: "Profile image item"
+                    imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+                    iconName: ""
+                    iconColor: ""
+                    isIdenticon: false
+                },
+                ListElement {
+                    value: "sub_item_1_2"
+                    text: "identicon item"
+                    imageSource: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+                    iconName: ""
+                    iconColor: ""
+                    isIdenticon: true
+                }]}
+        ListElement {
+            value: "item_2"
+            title: "Community item";
+            imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            iconName: ""
+            iconColor: ""
+            isIdenticon: false
+            subItems: [
+                ListElement {
+                    value: "sub_item_2_1"
+                    text: "welcome"
+                    imageSource: ""
+                    iconName: "channel"
+                    iconColor: ""
+                    isIdenticon: false
+                },
+                ListElement {
+                    value: "sub_item_2_2"
+                    text: "support"
+                    imageSource: ""
+                    iconName: "channel"
+                    iconColor: ""
+                    isIdenticon: false
+                },
+                ListElement {
+                    value: "sub_item_2_3"
+                    text: "news"
+                    imageSource: ""
+                    iconName: "channel"
+                    iconColor: ""
+                    isIdenticon: false
+                }]}
+        ListElement {
+            value: "item_3"
+            title: "Other";
+            imageSource: "";
+            iconName: "info"
+            iconColor: ""
+            isIdenticon: false
+            subItems: [
+                ListElement {
+                    value: "sub_item_3_1"
+                    text: "news"
+                    imageSource: ""
+                    iconName: "channel"
+                    iconColor: ""
+                    isIdenticon: false
+                }]}
+        ListElement {
+            value: "item_4"
+            title: "Letter identicon";
+            imageSource: "";
+            iconName: ""
+            iconColor: "red"
+            isIdenticon: false
+            subItems: [
+                ListElement {
+                    value: "sub_item_4_1"
+                    text: "news"
+                    imageSource: ""
+                    iconName: "channel"
+                    iconColor: ""
+                    isIdenticon: false
+                }]}
+    }
+}

sandbox/Popups.qml

@@ -0,0 +1,301 @@
+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()
+    }
+
+    StatusButton {
+        text: "Modal with letter identicon"
+        onClicked: modalWithLetterIdenticon.open()
+    }
+
+    StatusButton {
+        text: "Modal with identicon"
+        onClicked: modalWithIdenticon.open()
+    }
+
+    StatusButton {
+        text: "Modal with long titles"
+        onClicked: modalWithLongTitles.open()
+    }
+
+    StatusButton {
+        text: "Modal with Header Popup Menu"
+        onClicked: modalWithHeaderPopupMenu.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
+            }
+        ]
+
+        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: 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()
+            }
+        }
+    }
+
+    ListModel {
+        id: dummyAccountsModel
+        ListElement{name: "Account 1"; iconName: "filled-account"}
+        ListElement{name: "Account 2"; iconName: "filled-account"}
+    }
+}

sandbox/StatusChatInfoToolBarPage.qml

@@ -0,0 +1,40 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import QtQuick.Controls 2.13
+
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+
+GridLayout {
+    columns: 1
+    columnSpacing: 5
+    rowSpacing: 5
+
+    StatusChatInfoToolBar {
+        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
+
+        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"
+            }
+        }
+    }
+}

sandbox/StatusExpandableSettingsItemPage.qml

@@ -0,0 +1,69 @@
+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
+
+    StatusExpandableSettingsItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        expandable: false
+        icon.name: "seed-phrase"
+        primaryText: qsTr("Back up seed phrase")
+        secondaryText: qsTr("Back up your seed phrase now to secure this account ajhaDH SDHSAHDLSADBSA,DLISAHDLASD ADASDHASLDHALSDHAS DAS,DASJDGLIASGD")
+        button.text: qsTr("Back up seed phrase")
+    }
+
+    StatusExpandableSettingsItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        expandable: true
+        icon.name: "secret"
+        primaryText: qsTr("Account signing phrase")
+        secondaryText: qsTr("View your signing phrase and ensure that you never get scammed")
+        expandableComponent: notImplemented
+    }
+
+    StatusExpandableSettingsItem {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        expandable: true
+        icon.name: "seed-phrase"
+        primaryText: qsTr("View private key")
+        secondaryText: qsTr("Back up your seed phrase now to secure this account")
+        expandableComponent: notImplemented
+        button.text: qsTr("View private key")
+        button.icon.name: "tiny/public-chat"
+        button.onClicked: {
+            // To-do open  enter password Modal
+            expanded = !expanded
+        }
+    }
+
+    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/StatusInputPage.qml

@@ -0,0 +1,119 @@
+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 {
+        label: "Label"
+        charLimit: 30
+        input.placeholderText: "Input with validator"
+
+        validators: [
+            StatusMinLengthValidator { minLength: 10 }
+        ]
+
+        onTextChanged: {
+            if (errors && errors.minLength) {
+                errorMessage = `Value can't be shorter than ${errors.minLength.min} but got ${errors.minLength.actual}`
+            }
+        }
+    }
+
+    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/StatusPopupMenuPage.qml

@@ -22,6 +22,13 @@ GridLayout {
         onClicked: complexMenu.popup()
     }
 
+
+    StatusButton {
+        text: "Menu with custom images and icons"
+        onClicked: customMenu.popup()
+    }
+
+
     StatusPopupMenu {
         id: simpleMenu
         StatusMenuItem { 
@@ -39,33 +46,104 @@ GridLayout {
 
     StatusPopupMenu {
         id: complexMenu
-        subMenuItemIcons: ['info']
+        subMenuItemIcons: [{ icon: 'info' }]
+
         StatusMenuItem { 
             text: "One" 
-            icon.name: "info"
+            iconSettings.name: "info"
         }
 
         StatusMenuSeparator {}
 
         StatusMenuItem { 
             text: "Two"
-            icon.name: "info"
+            iconSettings.name: "info"
         }
 
         StatusMenuItem { 
             text: "Three"
-            icon.name: "info"
+            iconSettings.name: "info"
         }
 
         StatusPopupMenu {
             title: "Four"
             StatusMenuItem { 
                 text: "One"
-                icon.name: "info"
+                iconSettings.name: "info"
             }
             StatusMenuItem { 
                 text: "Three"
-                icon.name: "info"
+                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/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/android/AndroidManifest.xml

@@ -0,0 +1,80 @@
+<?xml version="1.0"?>
+<manifest package="im.statusq" xmlns:android="http://schemas.android.com/apk/res/android" android:versionName="0.1" android:versionCode="0100" android:installLocation="auto">
+    <uses-sdk android:minSdkVersion="21" android:targetSdkVersion="29"/>
+
+    <!-- The following comment will be replaced upon deployment with default permissions based on the dependencies of the application.
+         Remove the comment if you do not require these default permissions. -->
+    <!-- %%INSERT_PERMISSIONS -->
+
+    <!-- The following comment will be replaced upon deployment with default features based on the dependencies of the application.
+         Remove the comment if you do not require these default features. -->
+    <!-- %%INSERT_FEATURES -->
+
+    <supports-screens android:largeScreens="true" android:normalScreens="true" android:anyDensity="true" android:smallScreens="true"/>
+
+    <application android:hardwareAccelerated="true" android:name="org.qtproject.qt5.android.bindings.QtApplication" android:label="-- %%INSERT_APP_NAME%% --">
+        <activity android:configChanges="orientation|uiMode|screenLayout|screenSize|smallestScreenSize|layoutDirection|locale|fontScale|keyboard|keyboardHidden|navigation|mcc|mnc|density" android:name="org.qtproject.qt5.android.bindings.QtActivity" android:label="-- %%INSERT_APP_NAME%% --" android:screenOrientation="unspecified" android:launchMode="singleTop">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN"/>
+                <category android:name="android.intent.category.LAUNCHER"/>
+            </intent-filter>
+            <!-- Application arguments -->
+            <!-- meta-data android:name="android.app.arguments" android:value="arg1 arg2 arg3"/ -->
+            <!-- Application arguments -->
+            <meta-data android:name="android.app.lib_name" android:value="-- %%INSERT_APP_LIB_NAME%% --"/>
+            <meta-data android:name="android.app.qt_sources_resource_id" android:resource="@array/qt_sources"/>
+            <meta-data android:name="android.app.repository" android:value="default"/>
+            <meta-data android:name="android.app.qt_libs_resource_id" android:resource="@array/qt_libs"/>
+            <meta-data android:name="android.app.bundled_libs_resource_id" android:resource="@array/bundled_libs"/>
+            <!-- Deploy Qt libs as part of package -->
+            <meta-data android:name="android.app.bundle_local_qt_libs" android:value="-- %%BUNDLE_LOCAL_QT_LIBS%% --"/>
+            <meta-data android:name="android.app.bundled_in_lib_resource_id" android:resource="@array/bundled_in_lib"/>
+            <meta-data android:name="android.app.bundled_in_assets_resource_id" android:resource="@array/bundled_in_assets"/>
+            <!-- Run with local libs -->
+            <meta-data android:name="android.app.use_local_qt_libs" android:value="-- %%USE_LOCAL_QT_LIBS%% --"/>
+            <meta-data android:name="android.app.libs_prefix" android:value="/data/local/tmp/qt/"/>
+            <meta-data android:name="android.app.load_local_libs" android:value="-- %%INSERT_LOCAL_LIBS%% --"/>
+            <meta-data android:name="android.app.load_local_jars" android:value="-- %%INSERT_LOCAL_JARS%% --"/>
+            <meta-data android:name="android.app.static_init_classes" android:value="-- %%INSERT_INIT_CLASSES%% --"/>
+            <!-- Used to specify custom system library path to run with local system libs -->
+            <!-- <meta-data android:name="android.app.system_libs_prefix" android:value="/system/lib/"/> -->
+            <!--  Messages maps -->
+            <meta-data android:value="@string/ministro_not_found_msg" android:name="android.app.ministro_not_found_msg"/>
+            <meta-data android:value="@string/ministro_needed_msg" android:name="android.app.ministro_needed_msg"/>
+            <meta-data android:value="@string/fatal_error_msg" android:name="android.app.fatal_error_msg"/>
+            <meta-data android:value="@string/unsupported_android_version" android:name="android.app.unsupported_android_version"/>
+            <!--  Messages maps -->
+            <!-- Splash screen -->
+            <!-- Orientation-specific (portrait/landscape) data is checked first. If not available for current orientation,
+                 then android.app.splash_screen_drawable. For best results, use together with splash_screen_sticky and
+                 use hideSplashScreen() with a fade-out animation from Qt Android Extras to hide the splash screen when you
+                 are done populating your window with content. -->
+            <!-- meta-data android:name="android.app.splash_screen_drawable_portrait" android:resource="@drawable/logo_portrait" / -->
+            <!-- meta-data android:name="android.app.splash_screen_drawable_landscape" android:resource="@drawable/logo_landscape" / -->
+            <!-- meta-data android:name="android.app.splash_screen_drawable" android:resource="@drawable/logo"/ -->
+            <!-- meta-data android:name="android.app.splash_screen_sticky" android:value="true"/ -->
+            <!-- Splash screen -->
+            <!-- Background running -->
+            <!-- Warning: changing this value to true may cause unexpected crashes if the
+                          application still try to draw after
+                          "applicationStateChanged(Qt::ApplicationSuspended)"
+                          signal is sent! -->
+            <meta-data android:name="android.app.background_running" android:value="false"/>
+            <!-- Background running -->
+            <!-- auto screen scale factor -->
+            <meta-data android:name="android.app.auto_screen_scale_factor" android:value="false"/>
+            <!-- auto screen scale factor -->
+            <!-- extract android style -->
+            <!-- available android:values :
+                * default - In most cases this will be the same as "full", but it can also be something else if needed, e.g., for compatibility reasons
+                * full - useful QWidget & Quick Controls 1 apps
+                * minimal - useful for Quick Controls 2 apps, it is much faster than "full"
+                * none - useful for apps that don't use any of the above Qt modules
+                -->
+            <meta-data android:name="android.app.extract_android_style" android:value="default"/>
+            <!-- extract android style -->
+        </activity>
+        <!-- For adding service(s) please check: https://wiki.qt.io/AndroidServices -->
+    </application>
+
+</manifest>

sandbox/android/build.gradle

@@ -0,0 +1,57 @@
+buildscript {
+    repositories {
+        google()
+        jcenter()
+    }
+
+    dependencies {
+        classpath 'com.android.tools.build:gradle:4.0.2'
+    }
+}
+
+repositories {
+    google()
+    jcenter()
+}
+
+apply plugin: 'com.android.application'
+
+dependencies {
+    implementation fileTree(dir: 'libs', include: ['*.jar', '*.aar'])
+}
+
+android {
+    /*******************************************************
+     * The following variables:
+     * - androidBuildToolsVersion,
+     * - androidCompileSdkVersion
+     * - qt5AndroidDir - holds the path to qt android files
+     *                   needed to build any Qt application
+     *                   on Android.
+     *
+     * are defined in gradle.properties file. This file is
+     * updated by QtCreator and androiddeployqt tools.
+     * Changing them manually might break the compilation!
+     *******************************************************/
+
+    compileSdkVersion androidCompileSdkVersion.toInteger()
+
+    buildToolsVersion androidBuildToolsVersion
+
+    sourceSets {
+        main {
+            manifest.srcFile 'AndroidManifest.xml'
+            java.srcDirs = [qt5AndroidDir + '/src', 'src', 'java']
+            aidl.srcDirs = [qt5AndroidDir + '/src', 'src', 'aidl']
+            res.srcDirs = [qt5AndroidDir + '/res', 'res']
+            resources.srcDirs = ['src']
+            renderscript.srcDirs = ['src']
+            assets.srcDirs = ['assets']
+            jniLibs.srcDirs = ['libs']
+       }
+    }
+
+    lintOptions {
+        abortOnError false
+    }
+}

sandbox/android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,5 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.1.1-bin.zip
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

sandbox/android/gradlew

@@ -0,0 +1,172 @@
+#!/usr/bin/env sh
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS=""
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin, switch paths to Windows format before running java
+if $cygwin ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+    JAVACMD=`cygpath --unix "$JAVACMD"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=$((i+1))
+    done
+    case $i in
+        (0) set -- ;;
+        (1) set -- "$args0" ;;
+        (2) set -- "$args0" "$args1" ;;
+        (3) set -- "$args0" "$args1" "$args2" ;;
+        (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=$(save "$@")
+
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong
+if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
+  cd "$(dirname "$0")"
+fi
+
+exec "$JAVACMD" "$@"

sandbox/android/gradlew.bat

@@ -0,0 +1,84 @@
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS=
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto init
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto init
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:init
+@rem Get command-line arguments, handling Windows variants
+
+if not "%OS%" == "Windows_NT" goto win9xME_args
+
+:win9xME_args
+@rem Slurp the command line arguments.
+set CMD_LINE_ARGS=
+set _SKIP=2
+
+:win9xME_args_slurp
+if "x%~1" == "x" goto execute
+
+set CMD_LINE_ARGS=%*
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

sandbox/android/res/values/libs.xml

@@ -0,0 +1,25 @@
+<?xml version='1.0' encoding='utf-8'?>
+<resources>
+    <array name="qt_sources">
+        <item>https://download.qt.io/ministro/android/qt5/qt-5.9</item>
+    </array>
+
+    <!-- The following is handled automatically by the deployment tool. It should
+         not be edited manually. -->
+
+    <array name="bundled_libs">
+        <!-- %%INSERT_EXTRA_LIBS%% -->
+    </array>
+
+     <array name="qt_libs">
+         <!-- %%INSERT_QT_LIBS%% -->
+     </array>
+
+    <array name="bundled_in_lib">
+        <!-- %%INSERT_BUNDLED_IN_LIB%% -->
+    </array>
+    <array name="bundled_in_assets">
+        <!-- %%INSERT_BUNDLED_IN_ASSETS%% -->
+    </array>
+
+</resources>

sandbox/main.qml

@@ -14,8 +14,10 @@ import StatusQ.Platform 0.1
 
 StatusWindow {
     id: rootWindow
-    width: 1024
-    height: 840
+    width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
+                                                                  :  1224
+    height: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.height
+                                                                   :840
     visible: true
     title: qsTr("StatusQ Documentation App")
 
@@ -116,48 +118,74 @@ StatusWindow {
                         anchors.horizontalCenter: parent.horizontalCenter
                         spacing: 0
 
-                        NavigationHeader { text: "StatusQ.Core" }
+                        StatusListSectionHeadline { text: "StatusQ.Core" }
                         StatusNavigationListItem { 
                             title: "Icons" 
                             selected: page.sourceComponent == iconsComponent
                             onClicked: page.sourceComponent = iconsComponent
                         }
 
-                        NavigationHeader { text: "StatusQ.Layout" }
+                        StatusListSectionHeadline { text: "StatusQ.Layout" }
                         StatusNavigationListItem { 
                             title: "Layouts" 
                             selected: page.sourceComponent == layoutComponent
                             onClicked: page.sourceComponent = layoutComponent
                         }
 
-                        NavigationHeader { text: "StatusQ.Controls" }
+                        StatusListSectionHeadline { text: "StatusQ.Controls" }
                         StatusNavigationListItem { 
                             title: "Buttons" 
                             selected: page.sourceComponent == buttonsComponent
                             onClicked: page.sourceComponent = buttonsComponent
                         }
+                        StatusNavigationListItem { 
+                            title: "StatusSwitchTab" 
+                            selected: page.sourceComponent == statusTabSwitchesComponent
+                            onClicked: page.sourceComponent = statusTabSwitchesComponent
+                        }
                         StatusNavigationListItem { 
                             title: "Controls" 
                             selected: page.sourceComponent == controlsComponent
                             onClicked: page.sourceComponent = controlsComponent
                         }
-                        NavigationHeader { text: "StatusQ.Components" }
+                        StatusNavigationListItem { 
+                            title: "StatusInput" 
+                            selected: page.sourceComponent == statusInputPageComponent
+                            onClicked: page.sourceComponent = statusInputPageComponent
+                        }
+                        StatusListSectionHeadline { text: "StatusQ.Components" }
                         StatusNavigationListItem { 
                             title: "List Items"
                             selected: page.sourceComponent == listItemsComponent
                             onClicked: page.sourceComponent = listItemsComponent
                         }
+                        StatusNavigationListItem { 
+                            title: "StatusChatInfoToolBar"
+                            selected: page.sourceComponent == chatInfoToolBarComponent
+                            onClicked: page.sourceComponent = chatInfoToolBarComponent
+                        }
                         StatusNavigationListItem { 
                             title: "Others"
                             selected: page.sourceComponent == othersComponent
                             onClicked: page.sourceComponent = othersComponent
                         }
-                        NavigationHeader { text: "StatusQ.Popup" }
+                        StatusNavigationListItem {
+                            title: "StatusExpandableSettingsItem"
+                            selected: page.sourceComponent == settingsComponent
+                            onClicked: page.sourceComponent = settingsComponent
+                        }
+                        StatusListSectionHeadline { text: "StatusQ.Popup" }
                         StatusNavigationListItem { 
                             title: "StatusPopupMenu"
                             selected: page.sourceComponent == popupMenuComponent
                             onClicked: page.sourceComponent = popupMenuComponent
                         }
+
+                        StatusNavigationListItem {
+                            title: "StatusModal"
+                            selected: page.sourceComponent == statusModalComponent
+                            onClicked: page.sourceComponent = statusModalComponent
+                        }
                     }
                 }
             }
@@ -165,12 +193,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 {
@@ -225,6 +251,11 @@ StatusWindow {
         Controls {}
     }
 
+    Component {
+        id: statusInputPageComponent
+        StatusInputPage {}
+    }
+
     Component {
         id: listItemsComponent
         ListItems {}
@@ -250,12 +281,62 @@ StatusWindow {
         StatusPopupMenuPage {}
     }
 
+    Component {
+        id: chatInfoToolBarComponent
+        StatusChatInfoToolBarPage {}
+    }
+
+    Component {
+        id: statusModalComponent
+        Popups {}
+    }
+
+    Component {
+        id: statusTabSwitchesComponent
+        StatusTabSwitchPage {}
+    }
+
+    Component {
+        id: settingsComponent
+        StatusExpandableSettingsItemPage{}
+    }
+
     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
@@ -278,6 +359,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/qml.qrc

@@ -5,5 +5,14 @@
         <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>StatusInputPage.qml</file>
+        <file>ThemeSwitch.qml</file>
+        <file>Layout.qml</file>
+        <file>Popups.qml</file>
+        <file>StatusExpandableSettingsItemPage.qml</file>
     </qresource>
 </RCC>

sandbox/sandbox.pro

@@ -1,6 +1,9 @@
-QT += quick
+QT += quick svg
+
+CONFIG += c++11 warn_on
+
+DEFINES += QT_DEPRECATED_WARNINGS
 
-CONFIG += c++11
 
 # You can make your code fail to compile if it uses deprecated APIs.
 # In order to do so, uncomment the following line.
@@ -11,32 +14,61 @@ SOURCES += \
         main.cpp \
         sandboxapp.cpp
 
-OBJECTIVE_SOURCES += \
-    statuswindow_mac.mm
+!macx {
+    SOURCES += statuswindow.cpp
+}
 
-RESOURCES += qml.qrc
+TARGET = sandboxapp
+
+macx {
+    CONFIG -= app_bundle
+    OBJECTIVE_SOURCES += \
+        statuswindow_mac.mm
+}
+
+ios {
+   LIBS += -framework UIKit
+
+   QMAKE_TARGET_BUNDLE_PREFIX = "im.status"
+   #QMAKE_XCODE_CODE_SIGN_IDENTITY = "iPhone Developer"
+   MY_DEVELOPMENT_TEAM.name = "STATUS HOLDINGS PTE.LTD"
+   MY_DEVELOPMENT_TEAM.value = "DTX7Z4U3YA"
+   QMAKE_MAC_XCODE_SETTINGS += MY_DEVELOPMENT_TEAM
+
+}
+
+RESOURCES += qml.qrc \
+            $$PWD/../statusq.qrc
 
 DESTDIR = $$PWD/bin
-CONFIG -= app_bundle
 
 # Default rules for deployment.
 qnx: target.path = /tmp/$${TARGET}/bin
 else: unix:!android: target.path = /opt/$${TARGET}/bin
 !isEmpty(target.path): INSTALLS += target
-
-OTHER_FILES += $$files($$PWD/../src/*, true)
+#OTHER_FILES += $$files($$PWD/../src/*, true)
 
 HEADERS += \
     handler.h \
     sandboxapp.h \
     statuswindow.h
 
+OTHER_FILES += $$files($$PWD/../*.qml, true)
+OTHER_FILES += $$files($$PWD/*.qml, true)
+
+android {
+
 DISTFILES += \
-    ../src/StatusQ/Components/StatusMacWindowButtons.qml \
-    ../src/StatusQ/Controls/StatusBaseButton.qml \
-    ../src/StatusQ/Controls/StatusButton.qml \
-    ../src/StatusQ/Controls/StatusCheckBox.qml \
-    ../src/StatusQ/Controls/StatusFlatRoundButton.qml \
-    ../src/StatusQ/Controls/StatusRadioButton.qml \
-    ../src/StatusQ/Controls/StatusSlider.qml \
-    ../src/StatusQ/Controls/StatusSwitch.qml
+    android/AndroidManifest.xml \
+    android/build.gradle \
+    android/gradle/wrapper/gradle-wrapper.jar \
+    android/gradle/wrapper/gradle-wrapper.properties \
+    android/gradlew \
+    android/gradlew.bat \
+    android/res/values/libs.xml
+
+    contains(ANDROID_TARGET_ARCH,armeabi-v7a) {
+        ANDROID_PACKAGE_SOURCE_DIR = \
+            $$PWD/android
+    }
+}

sandbox/sandboxapp.cpp

@@ -17,11 +17,20 @@ void SandboxApp::startEngine()
 {
     qmlRegisterType<StatusWindow>("Sandbox", 0, 1, "StatusWindow");
 
+#ifdef QT_DEBUG
     const QUrl url(applicationDirPath() + "/../main.qml");
+#else
+    const QUrl url(QStringLiteral("qrc:/main.qml"));
+#endif
 
     m_engine.rootContext()->setContextProperty("app", m_handler);
 
+
+#ifdef QT_DEBUG
     m_engine.addImportPath(applicationDirPath() + "/../../src");
+#else
+    m_engine.addImportPath(QStringLiteral("qrc:/src"));
+#endif
     qDebug() << m_engine.importPathList();
     QObject::connect(&m_engine, &QQmlApplicationEngine::objectCreated,
         this, [url](QObject *obj, const QUrl &objUrl) {

sandbox/scripts/build

@@ -0,0 +1,4 @@
+make clean
+qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
+make
+

sandbox/statuswindow.cpp

@@ -0,0 +1,25 @@
+#include "statuswindow.h"
+
+void StatusWindow::toggleFullScreen()
+{
+    if (m_isFullScreen) {
+        showNormal();
+    } else {
+        showFullScreen();
+    }
+}
+
+bool StatusWindow::isFullScreen() const
+{
+    return m_isFullScreen;
+}
+
+void StatusWindow::removeTitleBar()
+{
+
+}
+
+void StatusWindow::showTitleBar()
+{
+
+}

src/StatusQ/Components/StatusChatInfoToolBar.qml

@@ -0,0 +1,106 @@
+import QtQuick 2.13
+import QtGraphicalEffects 1.13
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+Item {
+    id: statusChatInfoToolBar
+
+    implicitWidth: 288
+    implicitHeight: 56
+
+    property alias chatInfoButton: statusChatInfoButton
+    property alias menuButton: statusMenuButton
+    property Component popupMenu
+
+    signal chatInfoButtonClicked()
+    signal addButtonClicked(var mouse)
+
+    onPopupMenuChanged: {
+        if (!!popupMenu) {
+            popupMenuSlot.sourceComponent = popupMenu
+        }
+    }
+
+    StatusChatInfoButton {
+        id: statusChatInfoButton
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: 5
+        type: StatusChatInfoButton.Type.OneToOneChat
+        onClicked: statusChatInfoToolBar.chatInfoButtonClicked()
+    }
+
+    StatusRoundButton {
+        id: statusMenuButton
+        anchors.right: parent.right
+        anchors.rightMargin: 8
+        anchors.verticalCenter: parent.verticalCenter
+
+        visible: popupMenuSlot.active
+        width: 32
+        height: 32
+
+        type: StatusRoundButton.Type.Secondary
+        icon.name: "add"
+        state: "default"
+
+        states: [
+            State {
+                name: "default"
+                PropertyChanges {
+                    target: statusMenuButton
+                    icon.rotation: 0
+                }
+            },
+            State {
+                name: "pressed"
+                PropertyChanges {
+                    target: statusMenuButton
+                    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
+								}
+        		}
+        ]
+
+        onClicked: {
+            statusChatInfoToolBar.addButtonClicked(mouse)
+            statusMenuButton.state = "pressed"
+            popupMenuSlot.item.popup(statusMenuButton.width-popupMenuSlot.item.width, statusMenuButton.height + 4)
+        }
+
+        Loader {
+            id: popupMenuSlot
+            active: !!statusChatInfoToolBar.popupMenu
+            onLoaded: {
+                popupMenuSlot.item.closeHandler = function () {
+                    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
 
@@ -9,30 +12,214 @@ Column {
     id: statusChatList
 
     spacing: 4
+    width: 288
 
+    property string categoryId: ""
     property string selectedChatId: ""
-    property alias chatListItems: statusChatListItems
+    property alias chatListItems: delegateModel
+    property bool draggableItems: false
+
+    property Component popupMenu
+
+    property var filterFn
+    property var profileImageFn
+    property var chatNameFn
 
     signal chatItemSelected(string id)
     signal chatItemUnmuted(string id)
+    signal chatItemReordered(string id, int from, int to)
+
+    onPopupMenuChanged: {
+        if (!!popupMenu) {
+            popupMenuSlot.sourceComponent = popupMenu
+        }
+    }
+
+    DelegateModel {
+        id: delegateModel
+
+        delegate: Item {
+            id: draggable
+            width: statusChatListItem.width
+            height: statusChatListItem.height
+
+            property alias chatListItem: statusChatListItem
+
+            visible: {
+                if (!!statusChatList.filterFn) {
+                    return statusChatList.filterFn(model, statusChatList.categoryId)
+                }
+                return 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()
+                                }
+                            }
+
+                            popupMenuSlot.item.popup(mouse.x + 4, statusChatListItem.y + mouse.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
-        delegate: StatusChatListItem {
-            chatId: model.chatId
-            name: model.name
-            type: model.chatType
-            muted: !!model.muted
-            hasUnreadMessages: !!model.hasUnreadMessages
-            hasMention: !!model.hasMention
-            badge.value: model.unreadMessagesCount || 0
-            selected: model.chatId === statusChatList.selectedChatId
+        model: delegateModel
+    }
 
-            icon.color: model.iconColor || ""
-            image.source: model.identicon || ""
-
-            onClicked: statusChatList.chatItemSelected(model.chatId)
-            onUnmute: statusChatList.chatItemUnmuted(model.chatId)
-        }
+    Loader {
+        id: popupMenuSlot
+        active: !!statusChatList.popupMenu
     }
 }

src/StatusQ/Components/StatusChatListAndCategories.qml

@@ -0,0 +1,216 @@
+import QtQuick 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
+
+    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: delegateModel
+    property alias sensor: sensor
+    property bool draggableItems: false
+    property bool draggableCategories: false
+
+    property Component categoryPopupMenu
+    property Component chatListPopupMenu
+    property Component popupMenu
+
+    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: {
+        if (!!popupMenu) {
+            popupMenuSlot.sourceComponent = popupMenu
+        }
+    }
+
+    MouseArea {
+        id: sensor
+        anchors.top: parent.top
+        width: statusChatListAndCategories.width
+        height: statusChatListAndCategories.height
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
+        onClicked: {
+            if (mouse.button === Qt.RightButton && showPopupMenu && !!statusChatListAndCategories.popupMenu) {
+                popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6)
+                return
+            }
+        }
+
+        Column {
+            id: chatListsAndCategories
+
+            anchors.top: parent.top
+            anchors.horizontalCenter: parent.horizontalCenter
+            spacing: 4
+
+            StatusChatList {
+                id: statusChatList
+                anchors.horizontalCenter: parent.horizontalCenter
+                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.addButtonToolTip
+                        menuButton.tooltip: statusChatListAndCategories.menuButtonToolTip
+
+                        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
+                    }
+
+                    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
+                model: delegateModel
+            }
+        }
+    }
+
+    Loader {
+        id: popupMenuSlot
+        active: !!statusChatListAndCategories.popupMenu
+    }
+}

src/StatusQ/Components/StatusChatListCategory.qml

@@ -7,16 +7,23 @@ 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
 
     onPopupMenuChanged: {
@@ -29,15 +36,21 @@ Column {
         id: statusChatListCategoryItem
         title: statusChatListCategory.name
         opened: statusChatListCategory.opened
+        sensor.pressAndHoldInterval: 150
 
-        onClicked: {
-            if (mouse.button === Qt.RightButton) {
+        showMenuButton: showActionButtons && !!statusChatListCategory.popupMenu
+
+        highlighted: statusChatListCategory.dragged
+        sensor.onClicked: {
+            if (mouse.button === Qt.RightButton && showActionButtons && !!statusChatListCategory.popupMenu) {
                 highlighted = true
                 popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6)
                 return
             }
             statusChatListCategory.opened = !opened
         }
+
+        onTitleClicked: statusChatListCategory.opened = !opened
         onToggleButtonClicked: statusChatListCategory.opened = !opened
         onMenuButtonClicked: {
             highlighted = true
@@ -50,18 +63,35 @@ Column {
 
     StatusChatList {
         id: statusChatList
-
         anchors.horizontalCenter: parent.horizontalCenter
         visible: statusChatListCategory.opened
+        categoryId: statusChatListCategory.categoryId
+        filterFn: function (model) {
+            return !!model.categoryId && model.categoryId == statusChatList.categoryId
+        }
+
+        popupMenu: statusChatListCategory.chatListPopupMenu
     }
 
     Loader {
         id: popupMenuSlot
         active: !!statusChatListCategory.popupMenu
         onLoaded: {
+            let originalOpenHandler = popupMenuSlot.item.openHandler
+            let originalCloseHandler = popupMenuSlot.item.closeHandler
+
+            popupMenuSlot.item.openHandler = function () {
+                if (!!originalOpenHandler) {
+                    originalOpenHandler(statusChatListCategory.categoryId)
+                }
+            }
+
             popupMenuSlot.item.closeHandler = function () {
                 statusChatListCategoryItem.highlighted = false
                 statusChatListCategoryItem.menuButton.highlighted = false
+                if (!!originalCloseHandler) {
+                    originalCloseHandler()
+                }
             }
         }
     }

src/StatusQ/Components/StatusChatListCategoryItem.qml

@@ -16,19 +16,19 @@ StatusListItem {
 
     property bool opened: true
     property bool highlighted: false
+    property bool showActionButtons: false
+    property bool showMenuButton: showActionButtons
+    property bool showAddButton: showActionButtons
     property alias addButton: addButton
     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
 
@@ -39,7 +39,9 @@ StatusListItem {
             id: addButton
             icon.name: "add"
             icon.width: 20
-            visible: statusChatListCategoryItem.sensor.containsMouse || statusChatListCategoryItem.highlighted
+            visible: statusChatListCategoryItem.showAddButton && 
+                (statusChatListCategoryItem.highlighted ||
+                statusChatListCategoryItem.sensor.containsMouse)
             onClicked: statusChatListCategoryItem.addButtonClicked(mouse)
             tooltip.text: "Add channel inside category"
         },
@@ -47,7 +49,9 @@ StatusListItem {
             id: menuButton
             icon.name: "more"
             icon.width: 21
-            visible: statusChatListCategoryItem.sensor.containsMouse || statusChatListCategoryItem.highlighted
+            visible: statusChatListCategoryItem.showMenuButton && 
+                (statusChatListCategoryItem.highlighted ||
+                statusChatListCategoryItem.sensor.containsMouse)
             onClicked: statusChatListCategoryItem.menuButtonClicked(mouse)
             tooltip.text: "More"
         },

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,7 +11,10 @@ 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
@@ -18,19 +25,25 @@ Rectangle {
         color: Theme.palette.miscColor5
     }
     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()
 
     enum Type {
-        PublicChat,
-        GroupChat,
-        CommunityChat,
-        OneToOneChat
+        Unknown0, // 0
+        OneToOneChat, // 1
+        PublicChat, // 2
+        GroupChat, // 3
+        Unknown1, // 4
+        Unknown2, // 5
+        CommunityChat // 6
     }
 
-    implicitWidth: 287
+    implicitWidth: 288
     implicitHeight: 40
 
     radius: 8
@@ -39,14 +52,17 @@ Rectangle {
         if (selected) {
             return Theme.palette.statusChatListItem.selectedBackgroundColor
         }
-        return sensor.containsMouse ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
+        return sensor.containsMouse || highlighted ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
     }
 
+    opacity: dragged ? 0.7 : 1
+
     MouseArea {
         id: sensor
 
         anchors.fill: parent
-        cursorShape: Qt.PointingHandCursor 
+        cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
         hoverEnabled: true
 
         onClicked: statusChatListItem.clicked(mouse)
@@ -58,7 +74,7 @@ Rectangle {
             anchors.verticalCenter: parent.verticalCenter
 
             sourceComponent: !!statusChatListItem.image.source.toString() ?
-                statusRoundedImageCmp : statusLetterIdenticonCmp
+                                 statusRoundedImageCmp : statusLetterIdenticonCmp
         }
 
         Component {
@@ -83,6 +99,11 @@ Rectangle {
                     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 {
@@ -101,29 +122,30 @@ Rectangle {
             width: 14
             visible: statusChatListItem.type !== StatusChatListItem.Type.OneToOneChat
             opacity: {
-                if (statusChatListItem.muted && !sensor.containsMouse) {
+                if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
                     return 0.4
                 }
-                return statusChatListItem.hasMention || 
-                  statusChatListItem.hasUnreadMessages || 
-                  statusChatListItem.selected ||
-                  statusBadge.visible ||
-                  sensor.containsMouse ? 1.0 : 0.7
+                return statusChatListItem.hasMention ||
+                        statusChatListItem.hasUnreadMessages ||
+                        statusChatListItem.selected ||
+                        statusChatListItem.highlighted ||
+                        statusBadge.visible ||
+                        sensor.containsMouse ? 1.0 : 0.7
             }
 
             icon: {
                 switch (statusChatListItem.type) {
-                    case StatusChatListItem.Type.PublicCat:
-                        return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
-                        break;
-                    case StatusChatListItem.Type.GroupChat:
-                        return Theme.palette.name == "light" ? "tiny/group" : "tiny/group-white"
-                        break;
-                    case StatusChatListItem.Type.CommunityChat:
-                        return Theme.palette.name == "light" ? "tiny/channel" : "tiny/channel-white"
-                        break;
-                    default:
-                        return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
+                case StatusChatListItem.Type.PublicCat:
+                    return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
+                    break;
+                case StatusChatListItem.Type.GroupChat:
+                    return Theme.palette.name == "light" ? "tiny/group" : "tiny/group-white"
+                    break;
+                case StatusChatListItem.Type.CommunityChat:
+                    return Theme.palette.name == "light" ? "tiny/channel" : "tiny/channel-white"
+                    break;
+                default:
+                    return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
                 }
             }
         }
@@ -132,40 +154,37 @@ Rectangle {
             id: chatName
             anchors.left: statusIcon.visible ? statusIcon.right : identicon.right
             anchors.leftMargin: statusIcon.visible ? 1 : 8
+            anchors.right: mutedIcon.visible ? mutedIcon.left :
+                                               statusBadge.visible ? statusBadge.left : parent.right
+            anchors.rightMargin: 6
             anchors.verticalCenter: parent.verticalCenter
 
-            text: statusChatListItem.name
+            text: (statusChatListItem.type === StatusChatListItem.Type.PublicChat &&
+                  !statusChatListItem.name.startsWith("#") ?
+                      "#" + statusChatListItem.name :
+                      statusChatListItem.name)
+            elide: Text.ElideRight
             color: {
-                if (statusChatListItem.muted && !sensor.containsMouse) {
+                if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
                     return Theme.palette.directColor5
                 }
-                return statusChatListItem.hasMention || 
-                  statusChatListItem.hasUnreadMessages ||
-                  statusChatListItem.selected ||
-                  sensor.containsMouse ||
-                  statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
+                return statusChatListItem.hasMention ||
+                        statusChatListItem.hasUnreadMessages ||
+                        statusChatListItem.selected ||
+                        statusChatListItem.highlighted ||
+                        sensor.containsMouse ||
+                        statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
             }
-            font.weight: statusChatListItem.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
@@ -176,7 +195,7 @@ Rectangle {
             MouseArea {
                 id: mutedIconSensor
                 hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor 
+                cursorShape: Qt.PointingHandCursor
                 anchors.fill: parent
                 onClicked: statusChatListItem.unmute()
             }
@@ -186,5 +205,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,12 +85,44 @@ 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: {
-                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)
+                if (!showMoreMenu) {
+                    popupMenuSlot.item.popup(-popupMenuSlot.item.width + menuButton.width, menuButton.height + 4)
+                    statusChatToolBar.menuButtonClicked()
+                }
             }
+
+            Timer {
+                id: menuClosedUpdater
+                interval: 100
+                repeat: false
+                onTriggered: {
+                    menuButton.showMoreMenu = false
+                }
+            }
+
+            Loader {
+                id: popupMenuSlot
+                active: !!statusChatToolBar.popupMenu
+                onLoaded: {
+                    popupMenuSlot.item.closeHandler = function () {
+                        menuButton.highlighted = false
+                        menuClosedUpdater.start()
+                    }
+
+                    popupMenuSlot.item.openHandler = function () {
+                        menuButton.highlighted = true
+                        menuButton.showMoreMenu = true
+                    }
+                }
+            }          
         }
 
         Rectangle {
@@ -65,7 +130,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 +143,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 +174,5 @@ Rectangle {
         }
 
     }
-
-    Loader {
-        id: popupMenuSlot
-        active: !!statusChatToolBar.popupMenu
-        onLoaded: {
-            popupMenuSlot.item.closeHandler = function () {
-                menuButton.highlighted = false
-            }
-        }
-    }
 }
 

src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml

@@ -0,0 +1,30 @@
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+StatusListItem {
+    id: statusContactRequestsListItem
+
+    implicitHeight: 64
+    implicitWidth: 288
+
+    color: sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
+
+    property int requestsCount: 0
+
+    components: [
+        StatusBadge {
+            value: statusContactRequestsListItem.requestsCount
+            anchors.verticalCenter: parent.verticalCenter
+            border.width: 4
+            border.color: color
+        },
+        StatusIcon {
+            icon: "chevron-down"
+            rotation: 270
+            color: Theme.palette.baseColor1
+        }
+    ]
+}
+
+

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

@@ -0,0 +1,155 @@
+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: statusExpandableSettingsItem
+
+    property alias primaryText: primaryText.text
+    property alias secondaryText: secondaryText.text
+    property alias button: button
+    property alias expandableComponent: expandableRegion.sourceComponent
+
+    property bool expandable: true
+    property  bool expanded: false
+    property StatusIconSettings icon: StatusIconSettings {
+        color: Theme.palette.directColor1
+        background: StatusIconBackgroundSettings {
+            width: 32
+            height: 32
+            color: Theme.palette.primaryColor2
+        }
+    }
+
+    implicitWidth: 718
+
+    radius: 8
+    color: "transparent"
+    border.color: Theme.palette.baseColor2
+    state: "COLLAPSED"
+    clip: true
+
+    StatusRoundIcon {
+        id: roundIcon
+        anchors.top: parent.top
+        anchors.topMargin: 25
+        anchors.left: parent.left
+        anchors.leftMargin: 11
+
+        icon.background.width: statusExpandableSettingsItem.icon.background.width
+        icon.background.height: statusExpandableSettingsItem.icon.background.height
+        icon.background.color: statusExpandableSettingsItem.icon.background.color
+        icon.color: statusExpandableSettingsItem.icon.color
+        icon.name: statusExpandableSettingsItem.icon.name
+    }
+
+    StatusBaseText {
+        id: primaryText
+        anchors.top: parent.top
+        anchors.topMargin: 17
+        anchors.left: roundIcon.right
+        anchors.leftMargin: 10
+
+        width: button.visible ? parent.width - icon.background.width - button.width - 70 :
+                                parent.width - icon.background.width - 70
+
+        font.weight: Font.Medium
+        font.pixelSize: 15
+        lineHeight: 22
+        lineHeightMode: Text.FixedHeight
+        elide: Text.ElideRight
+        color: 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
+    }
+
+    StatusButton {
+        id: button
+        anchors.top: parent.top
+        anchors.topMargin: 19
+        anchors.right: parent.right
+        anchors.rightMargin: 16
+        visible: !!text
+    }
+
+    StatusIcon {
+        id: expandImage
+        anchors.top: parent.top
+        anchors.topMargin: 36
+        anchors.right: parent.right
+        anchors.rightMargin: 23
+        visible: expandable && !button.visible
+        color: Theme.palette.directColor1
+    }
+
+    Loader {
+        id: expandableRegion
+        anchors.top: secondaryText.bottom
+        anchors.topMargin: 16
+        anchors.left: parent.left
+        anchors.leftMargin: 48
+        width: parent.width - 64
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            if(expandable) {
+                expanded = !expanded
+            }
+        }
+        cursorShape: Qt.PointingHandCursor
+        visible: !button.visible && expandable
+    }
+
+    onExpandedChanged: {
+        if(expanded) {
+            state = "EXPANDED"
+        }
+        else {
+            state = "COLLAPSED"
+        }
+    }
+
+    states: [
+        State {
+            name: "EXPANDED"
+            PropertyChanges {target: expandImage; icon: "chevron-up"}
+            PropertyChanges {target: statusExpandableSettingsItem; height: 82 + expandableRegion.height + 22}
+            PropertyChanges {target: expandableRegion; active: true}
+        },
+        State {
+            name: "COLLAPSED"
+            PropertyChanges {target: expandImage; icon: "chevron-down"}
+            PropertyChanges {target: statusExpandableSettingsItem; 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
@@ -8,33 +10,85 @@ Rectangle {
     id: statusListItem
 
     implicitWidth: 448
-    implicitHeight: 64
+    implicitHeight: Math.max(64, statusListItemTitleArea.height + 16)
+
+    enum Type {
+        Primary,
+        Secondary,
+        Danger
+    }
+
+    color: {
+        if (sensor.containsMouse) {
+            switch(type) {
+                case StatusListItem.Type.Primary:
+                    return Theme.palette.baseColor2
+                case StatusListItem.Type.Secondary:
+                    return Theme.palette.statusListItem.secondaryHoverBackgroundColor
+                case StatusListItem.Type.Danger:
+                    return Theme.palette.dangerColor3
+            }
+        }
+        return Theme.palette.statusListItem.backgroundColor
+    }
 
-    color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.statusListItem.backgroundColor
     radius: 8
 
+    property string itemId: ""
+    property string titleId: ""
+
     property string title: ""
+    property string titleAsideText: ""
     property string subTitle: ""
+    property string tertiaryTitle: ""
+    property alias badge: statusListItemBadge
+
     property real leftPadding: 16
     property real rightPadding: 16
+    property bool enabled: true
     property StatusIconSettings icon: StatusIconSettings {
         height: 20
         width: 20
+        rotation: 0
+        isLetterIdenticon: false
+        color: type === StatusListItem.Type.Danger ? 
+            Theme.palette.dangerColor1 : Theme.palette.primaryColor1
         background: StatusIconBackgroundSettings {
             width: 40
             height: 40
-            color: 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 {}
+    property StatusImageSettings image: StatusImageSettings {
+        width: 40
+        height: 40
+        isIdenticon: false
+    }
     property string label: ""
 
+    property int type: StatusListItem.Type.Primary
+
     property alias sensor: sensor
+
+    property alias statusListItemIcon: iconOrImage
     property alias statusListItemTitle: statusListItemTitle
+    property alias statusListItemSubTitle: statusListItemSubTitle
+    property alias statusListItemTertiaryTitle: statusListItemTertiaryTitle
     property alias statusListItemComponentsSlot: statusListItemComponentsSlot
 
     property list<Item> components
 
+    signal clicked(string itemId)
+    signal titleClicked(string titleId)
+
     onComponentsChanged: {
         if (components.length) {
             for (let idx in components) {
@@ -46,18 +100,32 @@ Rectangle {
     MouseArea {
         id: sensor
 
+        enabled: statusListItem.enabled
         anchors.fill: parent
-        cursorShape: Qt.PointingHandCursor 
+        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
         acceptedButtons: Qt.LeftButton | Qt.RightButton
         hoverEnabled: true
 
+        onClicked: {
+            statusListItem.clicked(statusListItem.itemId)
+        }
+
         Loader {
             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()
+            anchors.top: parent.top
+            anchors.topMargin: 12
+            sourceComponent: {
+                if (statusListItem.icon.isLetterIdenticon) {
+                    return statusLetterIdenticon
+                }
+                return !!statusListItem.icon.name ? statusRoundedIcon : statusRoundedImage
+            }
+
+            active: statusListItem.icon.isLetterIdenticon || 
+                    !!statusListItem.icon.name || 
+                    !!statusListItem.image.source.toString()
         }
 
         Component {
@@ -66,6 +134,8 @@ Rectangle {
                 icon.width: statusListItem.icon.width
                 icon.height: statusListItem.icon.height
                 icon.name: statusListItem.icon.name
+                icon.rotation: statusListItem.icon.rotation
+                icon.color: statusListItem.icon.color
                 color: statusListItem.icon.background.color
                 width: statusListItem.icon.background.width
                 height: statusListItem.icon.background.height
@@ -76,34 +146,113 @@ Rectangle {
             id: statusRoundedImage
             StatusRoundedImage {
                 image.source: statusListItem.image.source
+                image.height: statusListItem.image.height
+                image.width: statusListItem.image.width
+                color: statusListItem.image.isIdenticon ?
+                    Theme.palette.statusRoundedImage.backgroundColor :
+                    "transparent"
+                border.width: statusListItem.image.isIdenticon ? 1 : 0
+                border.color: Theme.palette.directColor7
+            }
+        }
+
+        Component {
+            id: statusLetterIdenticon
+            StatusLetterIdenticon {
+                width: statusListItem.icon.background.width
+                height: statusListItem.icon.background.height
+                color: statusListItem.icon.background.color
+                name: statusListItem.title
             }
         }
 
         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
-                color: Theme.palette.directColor1
+                height: visible ? contentHeight : 0
+                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                color: {
+                  if (!statusListItem.enabled) {
+                    return Theme.palette.baseColor1
+                  }
+                  switch (statusListItem.type) {
+                      case StatusListItem.Type.Primary:
+                          return Theme.palette.directColor1
+                      case StatusListItem.Type.Secondary:
+                          return Theme.palette.primaryColor1
+                      case StatusListItem.Type.Danger:
+                          return Theme.palette.dangerColor1
+                  }
+                }
+
+                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
             }
 
             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/StatusListSectionHeadline.qml

@@ -4,15 +4,18 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
 Item {
-    height: 34
-    width: 176
+    implicitHeight: 34
+    implicitWidth: 176
+
     property alias text: label.text
 
     StatusBaseText {
-        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 4
+        anchors.leftMargin: 16
         id: label
         font.pixelSize: 15
         color: Theme.palette.baseColor1
     }
 }
-

src/StatusQ/Components/StatusLoadingIndicator.qml

@@ -6,7 +6,7 @@ StatusIcon {
     icon: "loading"
     height: 17
     width: 17
-    RotationAnimator {
+    RotationAnimation {
         target: statusIcon;
         from: 0;
         to: 360;

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

@@ -0,0 +1,11 @@
+import QtQuick 2.13
+import StatusQ.Core.Theme 0.1
+
+import StatusQ.Core 0.1
+
+StatusBaseText {
+    font.pixelSize: 17
+    font.weight: Font.Bold
+    color: Theme.palette.directColor1
+}
+

src/StatusQ/Components/StatusRoundIcon.qml

@@ -8,6 +8,8 @@ Rectangle {
     property StatusIconSettings icon: StatusIconSettings {
         width: 24
         height: 24
+        rotation: 0
+        color: Theme.palette.primaryColor1
         background: StatusIconBackgroundSettings {
             width: 40
             height: 40
@@ -28,7 +30,8 @@ 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/StatusRoundedImage.qml

@@ -26,9 +26,12 @@ Rectangle {
 
     Image {
         id: image
-        sourceSize.width: parent.implicitWidth
-        sourceSize.height: parent.implicitHeight
+        width: statusRoundImage.width
+        height: statusRoundImage.height
+        sourceSize.width: parent.width * 2
+        sourceSize.height: parent.height * 2
         fillMode: Image.PreserveAspectFit
+        anchors.centerIn: parent
         cache: true
     }
 

src/StatusQ/Components/qmldir

@@ -1,16 +1,23 @@
 module StatusQ.Components
 
 StatusBadge 0.1 StatusBadge.qml
+StatusChatInfoToolBar 0.1 StatusChatInfoToolBar.qml
 StatusChatList 0.1 StatusChatList.qml
 StatusChatListItem 0.1 StatusChatListItem.qml
 StatusChatListCategory 0.1 StatusChatListCategory.qml
 StatusChatListCategoryItem 0.1 StatusChatListCategoryItem.qml
+StatusChatListAndCategories 0.1 StatusChatListAndCategories.qml
 StatusChatToolBar 0.1 StatusChatToolBar.qml
+StatusContactRequestsIndicatorListItem 0.1 StatusContactRequestsIndicatorListItem.qml
 StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml
 StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
 StatusListItem 0.1 StatusListItem.qml
+StatusListSectionHeadline 0.1 StatusListSectionHeadline.qml
 StatusLoadingIndicator 0.1 StatusLoadingIndicator.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
+StatusExpandableSettingsItem 0.1 StatusExpandableSettingsItem.qml

src/StatusQ/Controls/StatusBaseInput.qml

@@ -0,0 +1,228 @@
+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: statusBaseInput
+
+    property bool multiline: false
+
+    property bool clearable: false
+
+    property alias inputMethodHints: edit.inputMethodHints
+
+    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 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
+
+    property alias placeholderText: placeholder.text
+    property alias placeholderTextColor: placeholder.color
+    property alias placeholderFont: placeholder.font
+
+    property real leftPadding: 16
+    property real rightPadding: 16
+    property real topPadding: 12
+    property real bottomPadding: 12
+
+    property real minimumHeight: 0
+    property real maximumHeight: 0
+    property int maximumLength: 0
+
+    property bool valid: true
+    property bool pristine: true
+    property bool dirty: false
+    property bool leftIcon: true
+
+    property StatusIconSettings icon: StatusIconSettings {
+        width: 24
+        height: 24
+        name: ""
+        color: Theme.palette.baseColor1
+    }
+
+    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)
+                                         : statusBaseInput.implicitHeight, maximumHeight) : parent.height
+        color: Theme.palette.baseColor2
+        radius: 8
+
+        clip: true
+
+        border.width: 1
+        border.color: {
+            if (!statusBaseInput.valid && statusBaseInput.dirty) {
+                return Theme.palette.dangerColor1;
+            }
+            if (edit.activeFocus) {
+                return Theme.palette.primaryColor1;
+            }
+            return sensor.containsMouse ? Theme.palette.primaryColor2 : "transparent"
+        }
+
+        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
+            icon: statusBaseInput.icon.name
+            width: statusBaseInput.icon.width
+            height: statusBaseInput.icon.height
+            color: statusBaseInput.icon.color
+            visible: !!statusBaseInput.icon.name
+        }
+
+        Flickable {
+            id: flick
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            anchors.left: (statusIcon.visible && statusBaseInput.leftIcon) ?
+                          statusIcon.right : parent.left
+            anchors.right: (statusIcon.visible && !statusBaseInput.leftIcon) ?
+                            statusIcon.left : parent.right
+            anchors.leftMargin: statusIcon.visible && statusBaseInput.leftIcon ? 8
+                                : statusBaseInput.leftPadding
+            anchors.rightMargin: statusBaseInput.rightPadding + clearable ? clearButton.width
+                                 : statusIcon.visible && !leftIcon ? 8: 0
+            anchors.topMargin: statusBaseInput.topPadding
+            anchors.bottomMargin: statusBaseInput.bottomPadding
+            contentWidth: edit.paintedWidth
+            contentHeight: edit.paintedHeight
+            boundsBehavior: Flickable.StopAtBounds
+            QC.ScrollBar.vertical: QC.ScrollBar { interactive: multiline; enabled: 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;
+            }
+            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
+        MouseArea {
+            id: sensor
+            enabled: !edit.activeFocus
+            hoverEnabled: true
+            anchors.fill: parent
+            cursorShape: Qt.IBeamCursor
+            onClicked: edit.forceActiveFocus()
+        }
+
+    } // Rectangle
+
+    StatusFlatRoundButton {
+        id: clearButton
+        visible: edit.text.length != 0 &&
+                 statusBaseInput.clearable &&
+                 !statusBaseInput.multiline &&
+                 edit.activeFocus
+        anchors.right: parent.right
+        anchors.rightMargin: 8
+        anchors.verticalCenter: parent.verticalCenter
+        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/StatusChatInfoButton.qml

@@ -7,11 +7,11 @@ 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: ""
@@ -22,26 +22,30 @@ Rectangle {
     property StatusIconSettings icon: StatusIconSettings {}
     property int type: StatusChatInfoButton.Type.PublicChat
     property alias tooltip: statusToolTip
+    property alias sensor: sensor
 
     signal clicked(var mouse)
     signal pinnedMessagesCountClicked(var mouse)
     signal unmute()
 
     enum Type {
-        PublicChat,
-        GroupChat,
-        CommunityChat,
-        OneToOneChat
+        Unknown0, // 0
+        OneToOneChat, // 1
+        PublicChat, // 2
+        GroupChat, // 3
+        Unknown1, // 4
+        Unknown2, // 5
+        CommunityChat // 6
     }
 
     radius: 8
-    color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.statusChatInfoButton.backgroundColor
+    color: sensor.enabled && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
 
     MouseArea {
         id: sensor
         anchors.fill: parent
         hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
+        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
 
         onClicked: statusChatInfoButton.clicked(mouse)
 
@@ -53,8 +57,8 @@ Rectangle {
             anchors.verticalCenter: parent.verticalCenter
 
             sourceComponent: !!statusChatInfoButton.image.source.toString() ?
-                statusRoundImageComponent :
-                statusLetterIdenticonComponent
+                                 statusRoundImageComponent :
+                                 statusLetterIdenticonComponent
         }
 
         Component {
@@ -69,6 +73,8 @@ Rectangle {
                     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
@@ -93,12 +99,20 @@ Rectangle {
         Item {
             id: statusChatInfoButtonTitle
             anchors.top: identicon.top
+            anchors.topMargin: statusChatInfoButtonSubTitle.visible ? 0 : 8
             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
@@ -110,17 +124,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"
                     }
                 }
             }
@@ -132,7 +146,15 @@ Rectangle {
                 anchors.leftMargin: statusIcon.visible ? 1 : 0
                 anchors.top: parent.top
 
-                text: statusChatInfoButton.title
+                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
                 color: statusChatInfoButton.muted ? Theme.palette.directColor5 : Theme.palette.directColor1
                 font.pixelSize: 15
                 font.weight: Font.Medium
@@ -152,7 +174,7 @@ Rectangle {
                 MouseArea {
                     id: mutedIconSensor
                     hoverEnabled: true
-                    cursorShape: Qt.PointingHandCursor 
+                    cursorShape: Qt.PointingHandCursor
                     anchors.fill: parent
                     onClicked: statusChatInfoButton.unmute()
                 }
@@ -171,14 +193,28 @@ Rectangle {
             id: statusChatInfoButtonSubTitle
             anchors.left: statusChatInfoButtonTitle.left
             anchors.top: statusChatInfoButtonTitle.bottom
-            height: chatType.height
-            width: childrenRect.width
+            visible: !!statusChatInfoButton.subTitle || statusChatInfoButton.pinnedMessagesCount > 0
+            height: visible ? chatType.height : 0
+            width: Math.min(parent.width - statusChatInfoButtonTitle.anchors.leftMargin
+                            - identicon.width - identicon.anchors.leftMargin - 8,
+                            implicitWidth)
+
+            implicitWidth: chatType.implicitWidth + pinIconDelta + 8
+
+
+            property real pinIconDelta: pinIcon.visible ? pinIcon.width + pinIcon.anchors.leftMargin
+                                                          + divider.width + divider.anchors.leftMargin
+                                                        : 0
 
             StatusBaseText {
                 id: chatType
                 text: statusChatInfoButton.subTitle
                 color: Theme.palette.baseColor1
                 font.pixelSize: 12
+
+                elide: Text.ElideRight
+                width: Math.min(parent.width - (pinIcon.visible ? divider.width + divider.anchors.leftMargin + pinIcon.width + pinIcon.anchors.leftMargin : 0),
+                                implicitWidth)
             }
 
             Rectangle {
@@ -189,13 +225,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
@@ -220,7 +256,7 @@ Rectangle {
                     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/StatusFlatRoundButton.qml

@@ -34,6 +34,7 @@ Rectangle {
     property bool loading: false
 
     property alias hovered: sensor.containsMouse
+    property alias tooltip: statusToolTip
 
     property bool highlighted: false
 
@@ -78,6 +79,15 @@ Rectangle {
                 return "transparent";
             }
         }
+
+        property color highlightedColor: {
+            switch(statusFlatRoundButton.type) {
+            case StatusFlatRoundButton.Type.Primary:
+                return Theme.palette.primaryColor3;
+            case StatusFlatRoundButton.Type.Secondary:
+                return Theme.palette.baseColor4;
+            }
+        }
     }
 
     implicitWidth: 44
@@ -86,8 +96,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
         }
@@ -140,4 +152,9 @@ Rectangle {
         onReleased: statusFlatRoundButton.released(mouse)
         onPressAndHold: statusFlatRoundButton.pressAndHold(mouse)
     } // Sensor
+
+    StatusToolTip {
+        id: statusToolTip
+        visible: !!text && parent.hovered
+    } // Tooltip
 } // Rectangle

src/StatusQ/Controls/StatusInput.qml

@@ -0,0 +1,135 @@
+import QtQuick 2.14
+
+import StatusQ.Core 0.1
+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 text: statusBaseInput.text
+    property string label: ""
+    property string secondaryLabel: ""
+    property int charLimit: 0
+    property string errorMessage: ""
+    property list<StatusValidator> validators
+
+    property var errors: ({})
+
+    function validate() {
+        if (validators.length) {
+            for (let idx in validators) {
+                let result = validators[idx].validate(statusBaseInput.text)
+
+                if (typeof result === "boolean" && result) {
+                    statusBaseInput.valid = true
+                } else {
+                    if (!errors) {
+                        errors = {}
+                    }
+                    errors[validators[idx].name] = result
+                    statusBaseInput.valid = false
+                }
+            }
+        }
+    }
+
+    Component.onCompleted: validate()
+
+    Row {
+        id: labelRow
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.topMargin: visible ? 8 : 0
+        anchors.leftMargin: 16
+        anchors.right: (charLimitLabel.visible ? charLimitLabel.right : parent.right)
+        anchors.rightMargin: 16
+        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: 16
+        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: 16
+        anchors.rightMargin: 16
+        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: 16
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+
+        height: visible ? implicitHeight : 0
+        visible: !!root.errorMessage && !statusBaseInput.valid
+
+        font.pixelSize: 12
+        color: Theme.palette.dangerColor1
+        text: root.errorMessage
+
+        horizontalAlignment: Text.AlignRight
+        wrapMode: Text.WordWrap
+    }
+}

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

@@ -10,6 +10,7 @@ Rectangle {
     property StatusIconSettings icon: StatusIconSettings {
         width: 23
         height: 23
+        rotation: 0
 
         color: {
             switch(statusRoundButton.type) {
@@ -34,6 +35,8 @@ Rectangle {
 
     property alias hovered: sensor.containsMouse
 
+    property bool highlighted: false
+
     property int type: StatusRoundButton.Type.Primary
 
     signal pressed(var mouse)
@@ -87,7 +90,7 @@ Rectangle {
 
     color: {
         if (statusRoundButton.enabled) {
-            return sensor.containsMouse ? backgroundSettings.hoverColor
+            return sensor.containsMouse || highlighted ? backgroundSettings.hoverColor
                                         : backgroundSettings.color
         } else {
             return backgroundSettings.disabledColor
@@ -109,6 +112,7 @@ Rectangle {
             visible: !loading
 
             icon: statusRoundButton.icon.name
+            rotation: statusRoundButton.icon.rotation
 
             width: statusRoundButton.icon.width
             height: statusRoundButton.icon.height

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/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/Validators/StatusMinLengthValidator.qml

@@ -0,0 +1,16 @@
+import StatusQ.Controls 0.1
+
+StatusValidator {
+
+    property int minLength: 0
+
+    name: "minLength"
+
+    validate: function (value) {
+        return value.length >= minLength ? true : {
+            min: minLength,
+            actual: value.length
+        }
+    }
+}
+

src/StatusQ/Controls/Validators/StatusValidator.qml

@@ -0,0 +1,11 @@
+import QtQuick 2.13
+
+QtObject {
+    id: statusValidator
+
+    property string name: ""
+
+    property var validate: function (value) {
+        return true
+    }
+}

src/StatusQ/Controls/Validators/qmldir

@@ -0,0 +1,5 @@
+module StatusQ.Controls.Validators
+
+StatusValidator 0.1 StatusValidator.qml
+StatusMinLengthValidator 0.1 StatusMinLengthValidator.qml
+StatusMaxLengthValidator 0.1 StatusMaxLengthValidator.qml

src/StatusQ/Controls/qmldir

@@ -14,3 +14,8 @@ StatusSwitch 0.1 StatusSwitch.qml
 StatusRadioButton 0.1 StatusRadioButton.qml
 StatusCheckBox 0.1 StatusCheckBox.qml
 StatusSlider 0.1 StatusSlider.qml
+StatusBaseInput 0.1 StatusBaseInput.qml
+StatusInput 0.1 StatusInput.qml
+StatusPickerButton 0.1 StatusPickerButton.qml
+StatusSwitchTabButton 0.1 StatusSwitchTabButton.qml
+StatusSwitchTabBar 0.1 StatusSwitchTabBar.qml

src/StatusQ/Core/StatusIcon.qml

@@ -12,19 +12,20 @@ Image {
     sourceSize.height: height
     fillMode: Image.PreserveAspectFit
 
+    antialiasing: true
+    mipmap: true
+
     onIconChanged: {
         if (icon !== "") {
             source = "../../assets/img/icons/" + icon + ".svg";
         }
     }
 
-    ColorOverlay {
-        visible: !Qt.colorEqual(statusIcon.color, "transparent")
-        anchors.fill: statusIcon
-        source: statusIcon
+    layer.mipmap: true
+    layer.smooth: true
+    layer.format: ShaderEffectSource.RGBA
+    layer.enabled:!Qt.colorEqual(statusIcon.color, "transparent")
+    layer.effect: ColorOverlay {
         color: statusIcon.color
-        antialiasing: true
-        smooth: true
     }
 }
-

src/StatusQ/Core/StatusIconSettings.qml

@@ -10,5 +10,6 @@ QtObject {
     property color color
     property url source
     property int rotation
+    property bool isLetterIdenticon
     property StatusIconBackgroundSettings background: StatusIconBackgroundSettings {}
 }

src/StatusQ/Core/StatusImageSettings.qml

@@ -6,5 +6,6 @@ QtObject {
     property url source
     property real width
     property real height
+    property bool isIdenticon: false
 }
 

src/StatusQ/Core/StatusModalHeaderSettings.qml

@@ -0,0 +1,20 @@
+import QtQuick 2.14
+
+QtObject {
+    property string title
+    property string subTitle
+    property int titleElide: Text.ElideRight
+    property int subTitleElide: Text.ElideRight
+    property Component popupMenu
+    property StatusImageSettings image: StatusImageSettings {
+        width: 40
+        height: 40
+        isIdenticon: false
+    }
+
+    property StatusIconSettings icon: StatusIconSettings {
+        width: 40
+        height: 40
+        isLetterIdenticon: false
+    }
+}

src/StatusQ/Core/StatusTooltipSettings.qml

@@ -0,0 +1,9 @@
+import QtQuick 2.14
+
+import StatusQ.Controls 0.1
+
+QtObject {
+    property string text: ""
+    property int orientation: StatusToolTip.Orientation.Top
+    property int offset: 0
+}

src/StatusQ/Core/Theme/StatusColors.qml

@@ -13,6 +13,7 @@ QtObject {
         'blue3': '#88B0FF',
         'blue4': '#869EFF',
         'blue5': '#AAC6FF',
+        'blue6': '#ECEFFC',
 
         'brown': '#8B3131',
         'brown2': '#9B832F',

src/StatusQ/Core/Theme/StatusDarkTheme.qml

@@ -104,6 +104,7 @@ ThemePalette {
     directColor6: getColor('white', 0.2)
     directColor7: getColor('white', 0.1)
     directColor8: getColor('white', 0.05)
+    directColor9: getColor('white', 0.2)
 
     indirectColor1: getColor('black')
     indirectColor2: getColor('black', 0.7)
@@ -132,6 +133,7 @@ ThemePalette {
 
     property QtObject statusListItem: QtObject {
         property color backgroundColor: baseColor3
+        property color secondaryHoverBackgroundColor: primaryColor3
     }
 
     property QtObject statusChatListItem: QtObject {
@@ -163,5 +165,21 @@ ThemePalette {
         property color hoverBackgroundColor: directColor7
         property color separatorColor: directColor7
     }
+
+    property QtObject statusModal: QtObject {
+        property color backgroundColor: baseColor3
+    }
+
+    property QtObject statusRoundedImage: QtObject {
+        property color backgroundColor: baseColor3
+    }
+
+    property QtObject statusChatInput: QtObject {
+        property color secondaryBackgroundColor: "#414141"
+    }
+
+    property QtObject statusSwitchTab: QtObject {
+        property color backgroundColor: baseColor3
+    }
 }
 

src/StatusQ/Core/Theme/StatusLightTheme.qml

@@ -102,6 +102,7 @@ ThemePalette {
     directColor6: getColor('black', 0.3)
     directColor7: getColor('black', 0.1)
     directColor8: getColor('black', 0.05)
+    directColor9: getColor('black', 0.2)
 
     indirectColor1: getColor('white')
     indirectColor2: getColor('white', 0.7)
@@ -130,6 +131,7 @@ ThemePalette {
 
     property QtObject statusListItem: QtObject {
         property color backgroundColor: white
+        property color secondaryHoverBackgroundColor: getColor('blue6')
     }
 
     property QtObject statusChatListItem: QtObject {
@@ -161,5 +163,21 @@ ThemePalette {
         property color hoverBackgroundColor: baseColor2
         property color separatorColor: baseColor2
     }
+
+    property QtObject statusModal: QtObject {
+        property color backgroundColor: white
+    }
+
+    property QtObject statusRoundedImage: QtObject {
+        property color backgroundColor: white
+    }
+
+    property QtObject statusChatInput: QtObject {
+        property color secondaryBackgroundColor: "#E2E6E8"
+    }
+
+    property QtObject statusSwitchTab: QtObject {
+        property color backgroundColor: white
+    }
 }
 

src/StatusQ/Core/Theme/ThemePalette.qml

@@ -28,6 +28,7 @@ QtObject {
     property color white: getColor('white')
 
     property color dropShadow: getColor('black', 0.12)
+    property color backdropColor: getColor('black', 0.4)
 
     property color baseColor1
     property color baseColor2
@@ -63,6 +64,7 @@ QtObject {
     property color directColor6
     property color directColor7
     property color directColor8
+    property color directColor9
 
     property color indirectColor1
     property color indirectColor2
@@ -91,6 +93,7 @@ QtObject {
 
     property QtObject statusListItem: QtObject {
         property color backgroundColor
+        property color secondaryHoverBackgroundColor
     }
 
     property QtObject statusChatListItem: QtObject {
@@ -124,6 +127,22 @@ QtObject {
         property color separatorColor
     }
 
+    property QtObject statusModal: QtObject {
+        property color backgroundColor
+    }
+
+    property QtObject statusRoundedImage: QtObject {
+        property color backgroundColor
+    }
+
+    property QtObject statusChatInput: QtObject {
+        property color secondaryBackgroundColor
+    }
+
+    property QtObject statusSwitchTab: QtObject {
+        property color backgroundColor
+    }
+
     function alphaColor(color, alpha) {
         let actualColor = Qt.darker(color, 1)
         actualColor.a = alpha

src/StatusQ/Core/Utils/Utils.qml

@@ -0,0 +1,19 @@
+pragma Singleton
+
+import QtQuick 2.13
+
+QtObject {
+    function getAbsolutePosition(node) {
+        var returnPos = {};
+        returnPos.x = 0;
+        returnPos.y = 0;
+        if (node !== undefined && node !== null) {
+            var parentValue = getAbsolutePosition(node.parent);
+            returnPos.x = parentValue.x + node.x;
+            returnPos.y = parentValue.y + node.y;
+        }
+        return returnPos;
+    }
+}
+
+

src/StatusQ/Core/Utils/qmldir

@@ -0,0 +1,4 @@
+module StatusQ.Core.Utils
+
+singleton Utils 0.1 Utils.qml
+

src/StatusQ/Core/qmldir

@@ -5,4 +5,5 @@ StatusIcon 0.1 StatusIcon.qml
 StatusIconSettings 0.1 StatusIconSettings.qml
 StatusIconBackgroundSettings 0.1 StatusIconBackgroundSettings.qml
 StatusImageSettings 0.1 StatusImageSettings.qml
-
+StatusModalHeaderSettings 0.1 StatusModalHeaderSettings.qml
+StatusTooltipSettings 0.1 StatusTooltipSettings.qml

src/StatusQ/Layout/StatusAppNavBar.qml

@@ -10,6 +10,8 @@ Rectangle {
     id: statusAppNavBar
 
     property StatusNavBarTabButton navBarChatButton
+    property StatusNavBarTabButton navBarProfileButton
+
     property list<StatusNavBarTabButton> navBarTabButtons
     property alias navBarCommunityTabButtons: navBarCommunityTabButtons
 
@@ -34,6 +36,12 @@ Rectangle {
         }
     }
 
+    onNavBarProfileButtonChanged: {
+        if (!!navBarProfileButton) {
+            navBarProfileButton.parent = navBarProfileButtonSlot
+        }
+    }
+
     onNavBarTabButtonsChanged: {
         if (navBarTabButtons.length) {
             for (let idx in navBarTabButtons) {
@@ -75,7 +83,9 @@ Rectangle {
             if (navBarContentHeight > statusAppNavBar.height) {
                 height = statusAppNavBar.height - 
                          statusAppNavBar.navBarContentHeightWithoutCommunityButtons -
-                         (!!navBarTabButtonsSlot.anchors.bottom ? navBarTabButtonsSlot.anchors.bottomMargin : navBarTabButtonsSlot.anchors.topMargin)
+                         (!!navBarTabButtonsSlot.anchors.bottom ? navBarTabButtonsSlot.anchors.bottomMargin : navBarTabButtonsSlot.anchors.topMargin) -
+                         navBarProfileButtonSlot.height -
+                         navBarProfileButtonSlot.anchors.bottomMargin
                 bottomPadding = 16
                 topPadding = 16
             } else {
@@ -122,7 +132,7 @@ Rectangle {
             if (navBarContentHeight > statusAppNavBar.height) {
                 anchors.top = undefined
                 anchors.topMargin = 0
-                anchors.bottom = statusAppNavBar.bottom
+                anchors.bottom = navBarProfileButtonSlot.top
                 anchors.bottomMargin = 32
             } else {
                 anchors.bottom = undefined
@@ -132,5 +142,15 @@ Rectangle {
             }
         }
     }
+
+    Item {
+        id: navBarProfileButtonSlot
+        anchors.horizontalCenter: parent.horizontalCenter
+        height: visible ? statusAppNavBar.navBarProfileButton.height : 0
+        width: visible ? statusAppNavBar.navBarProfileButton.width : 0
+        visible: !!statusAppNavBar.navBarProfileButton
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: visible ? 32 : 0
+    }
 }
 

src/StatusQ/Layout/StatusAppThreePanelLayout.qml

@@ -0,0 +1,53 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import StatusQ.Core.Theme 0.1
+
+SplitView {
+    id: root
+    implicitWidth: 822
+    implicitHeight: 600
+
+    handle: Item { }
+
+    property Item leftPanel
+    property Item centerPanel
+    property Component rightPanel
+    property bool showRightPanel
+
+    Control {
+        SplitView.minimumWidth: 300
+        SplitView.preferredWidth: 300
+        SplitView.fillHeight: true
+        contentItem: (!!leftPanel) ? leftPanel : null
+        background: Rectangle {
+            anchors.fill: parent
+            color: Theme.palette.baseColor4
+        }
+    }
+
+    Control {
+        SplitView.minimumWidth: 300
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+        contentItem: (!!centerPanel) ? centerPanel : null
+        background: Rectangle {
+            anchors.fill: parent
+            color: Theme.palette.statusAppLayout.rightPanelBackgroundColor
+        }
+    }
+
+    Control {
+        SplitView.preferredWidth: root.showRightPanel ? 250 : 0
+        SplitView.minimumWidth: root.showRightPanel ? 58 : 0
+        opacity: root.showRightPanel ? 1.0 : 0.0
+        visible: (opacity > 0.1)
+        contentItem: Loader {
+            anchors.fill: parent
+            sourceComponent: (!!rightPanel) ? rightPanel : null
+        }
+        background: Rectangle {
+            anchors.fill: parent
+            color: Theme.palette.baseColor4
+        }
+    }
+}

src/StatusQ/Layout/qmldir

@@ -3,5 +3,4 @@ module StatusQ.Layout
 StatusAppLayout 0.1 StatusAppLayout.qml
 StatusAppNavBar 0.1 StatusAppNavBar.qml
 StatusAppTwoPanelLayout 0.1 StatusAppTwoPanelLayout.qml
-
-
+StatusAppThreePanelLayout 0.1 StatusAppThreePanelLayout.qml

src/StatusQ/Platform/StatusWindowsTitleBar.qml

@@ -0,0 +1,118 @@
+import QtQuick 2.14
+
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Core 0.1
+
+Rectangle {
+    id: windowsTitleBar
+
+    property string title: titleText.text
+
+    signal close();
+    signal minimised();
+    signal maximized();
+
+    implicitHeight: 32
+    color: Theme.palette.baseColor5
+
+    Row {
+        id: titleLayout
+        anchors.left: parent.left
+        anchors.leftMargin: 12
+        anchors.verticalCenter: parent.verticalCenter
+
+        spacing: 4
+
+        StatusIcon {
+            anchors.verticalCenter: parent.verticalCenter
+            width: 16
+            height: 16
+            icon: "windows_titlebar/status"
+        }
+
+        StatusBaseText {
+            id: titleText
+            anchors.verticalCenter: parent.verticalCenter
+            text: qsTr("Status")
+            color: Theme.palette.directColor1
+        }
+    }
+
+    Row {
+        id: buttonsLayout
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+
+        height: parent.height
+
+        Rectangle {
+            width: 48
+            height: parent.height
+
+            color: minimizeSensor.containsMouse ? (minimizeSensor.pressed ? Theme.palette.directColor9 : Theme.palette.directColor8)
+                                                : "transparent"
+
+            StatusIcon {
+                anchors.centerIn: parent
+                width: 10
+                height: 1
+                icon: "windows_titlebar/minimise"
+                color: Theme.palette.directColor1
+            }
+
+            MouseArea {
+                id: minimizeSensor
+                anchors.fill: parent
+                hoverEnabled: true
+                onClicked: windowsTitleBar.minimised()
+            }
+        }
+
+        Rectangle {
+            width: 48
+            height: parent.height
+
+            color: maximizeSensor.containsMouse ? (maximizeSensor.pressed ? Theme.palette.directColor9 : Theme.palette.directColor8)
+                                                : "transparent"
+
+            StatusIcon {
+                anchors.centerIn: parent
+                width: 10
+                height: 10
+                icon: "windows_titlebar/maximize"
+                color: Theme.palette.directColor1
+            }
+
+            MouseArea {
+                id: maximizeSensor
+                anchors.fill: parent
+                hoverEnabled: true
+                onClicked: windowsTitleBar.maximized()
+            }
+        }
+
+        Rectangle {
+            width: 48
+            height: parent.height
+
+            color: closeSensor.containsMouse ? (closeSensor.pressed ? "#DB1518" : "#ED4245")
+                                                : "transparent"
+
+            StatusIcon {
+                anchors.centerIn: parent
+                width: 10
+                height: 10
+                icon: "windows_titlebar/close"
+                color: closeSensor.containsMouse ? Theme.palette.white : Theme.palette.directColor1
+            }
+
+            MouseArea {
+                id: closeSensor
+                anchors.fill: parent
+                hoverEnabled: true
+                onClicked: windowsTitleBar.closed()
+            }
+        }
+    }
+}

src/StatusQ/Platform/qmldir

@@ -1,5 +1,5 @@
 module StatusQ.Platform
 
 StatusMacTrafficLights 0.1 StatusMacTrafficLights.qml
-
+StatusWindowsTitleBar 0.1 StatusWindowsTitleBar.qml
 

src/StatusQ/Popups/StatusMenuHeadline.qml

@@ -0,0 +1,24 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+MenuSeparator {
+    id: root
+    property string text
+    height: visible && enabled ? implicitHeight : 0
+    contentItem: Item {
+        implicitWidth: 176
+        implicitHeight: 16
+        StatusBaseText {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            anchors.leftMargin: 12
+            color: Theme.palette.baseColor1
+            font.pixelSize: 12
+            text: root.text
+        }
+    }
+}
+

src/StatusQ/Popups/StatusMenuItem.qml

@@ -9,7 +9,17 @@ Action {
         Normal,
         Danger
     }
-
+    icon.color: "transparent"
     property int type: StatusMenuItem.Type.Normal
     property real iconRotation: 0
+    property StatusImageSettings image: StatusImageSettings {
+        height: 16
+        width: 16
+        isIdenticon: false
+    }
+    property StatusIconSettings iconSettings: StatusIconSettings {
+        isLetterIdenticon: false
+        background: StatusIconBackgroundSettings {}
+        color: "transparent"
+    }
 }

src/StatusQ/Popups/StatusMenuSeparator.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls 2.13
 import StatusQ.Core.Theme 0.1
 
 MenuSeparator {
+    height: visible && enabled ? implicitHeight : 0
     contentItem: Rectangle {
         implicitWidth: 176
         implicitHeight: 1

src/StatusQ/Popups/StatusModal.qml

@@ -0,0 +1,69 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14 as QC
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+
+import "statusModal" as Spares
+
+QC.Popup {
+    id: statusModal
+
+    property alias headerActionButton: headerImpl.actionButton
+
+    property StatusModalHeaderSettings header: StatusModalHeaderSettings {}
+    property alias rightButtons: footerImpl.rightButtons
+    property alias leftButtons: footerImpl.leftButtons
+    property bool showHeader: true
+    property bool showFooter: true
+
+    signal editButtonClicked()
+
+    parent: QC.Overlay.overlay
+
+    width: 480
+
+    topPadding: headerImpl.implicitHeight
+    bottomPadding: footerImpl.implicitHeight
+    leftPadding: 0
+    rightPadding: 0
+
+    modal: true
+
+    QC.Overlay.modal: Rectangle {
+        color: Theme.palette.backdropColor
+    }
+
+
+    background: Rectangle {
+        color: Theme.palette.statusModal.backgroundColor
+        radius: 8
+
+        Spares.StatusModalHeader {
+            id: headerImpl
+            anchors.top: parent.top
+            width: visible ? parent.width : 0
+
+            visible: statusModal.showHeader
+            title: header.title
+            titleElide: header.titleElide
+            subTitle: header.subTitle
+            subTitleElide: header.subTitleElide
+            image: header.image
+            icon: header.icon
+            popupMenu: header.popupMenu
+
+            onEditButtonClicked: statusModal.editButtonClicked()
+            onClose: statusModal.close()
+        }
+
+        Spares.StatusModalFooter {
+            id: footerImpl
+            anchors.bottom: parent.bottom
+            width: visible ? parent.width : 0
+            visible: statusModal.showFooter
+        }
+    }
+}

src/StatusQ/Popups/StatusModalDivider.qml

@@ -0,0 +1,31 @@
+import QtQuick 2.14
+
+import StatusQ.Core.Theme 0.1
+
+Column {
+    spacing: 0
+
+    property real topPadding: 0
+    property real bottomPadding: 0
+
+    width: 480
+
+    Item {
+        id: topPaddingItem
+        height: parent.topPadding
+        width: parent.width
+    }
+
+    Rectangle {
+        id: divider
+        color: Theme.palette.baseColor2
+        height: 1
+        width: parent.width
+    }
+
+    Item {
+        id: bottomPaddingItem
+        height: parent.bottomPadding
+        width: parent.width
+    }
+}

src/StatusQ/Popups/StatusPopupMenu.qml

@@ -4,20 +4,30 @@ import QtGraphicalEffects 1.13
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
 import StatusQ.Popups 0.1
 
 
 Menu {
     id: statusPopupMenu
-
-    closePolicy: Popup.CloseOnReleaseOutside | Popup.CloseOnEscape 
+    closePolicy: Popup.CloseOnPressOutside | Popup.CloseOnEscape
     topPadding: 8
     bottomPadding: 8
 
     property int menuItemCount: 0
     property var subMenuItemIcons: []
+
+    property var openHandler
     property var closeHandler
 
+    signal menuItemClicked(int menuIndex)
+
+    onOpened: {
+        if (typeof openHandler === "function") {
+            openHandler()
+        }
+    }
+
     onClosed: {
         if (typeof closeHandler === "function") {
             closeHandler()
@@ -26,19 +36,21 @@ Menu {
 
     delegate: MenuItem {
         id: statusPopupMenuItem
-
+        implicitWidth: parent ? parent.width : 0
         implicitHeight: action.enabled ? 38 : 0
 
         property int subMenuIndex
 
         Component.onCompleted: {
-            if (subMenu) {
+            if (!!subMenu) {
                 subMenuIndex = statusPopupMenu.menuItemCount
                 statusPopupMenu.menuItemCount += 1
             }
         }
 
-        action: StatusMenuItem {}
+        action: StatusMenuItem {
+            onTriggered: { statusPopupMenu.menuItemClicked(statusPopupMenuItem.subMenuIndex); }
+        }
 
         Component {
             id: indicatorComponent
@@ -47,13 +59,32 @@ Menu {
                 implicitHeight: 24
                 StatusIcon {
                     anchors.centerIn: parent
-                    width: !!statusPopupMenuItem.action.icon.width ?
-                      statusPopupMenuItem.action.icon.width : 18
+                    width: {
+                        let width = statusPopupMenuItem.action.icon.width ||
+                            statusPopupMenuItem.action.iconSettings.width
+
+                        return !!width ? width : 18
+                    }
                     rotation: statusPopupMenuItem.action.iconRotation
-                    icon: statusPopupMenuItem.subMenu ?
-                        statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex] :
-                        statusPopupMenuItem.action.icon.name
+                    icon: {
+                        if (statusPopupMenuItem.subMenu && !!statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex] &&
+                            statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].icon.toString() !== "") {
+                            return statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].icon;
+                        } else if (!!statusPopupMenuItem.action && statusPopupMenuItem.action.icon.name !== "") {
+                            return statusPopupMenuItem.action.icon.name;
+                        } else if (statusPopupMenuItem.action.iconSettings.name !== "") {
+                            return statusPopupMenuItem.action.iconSettings.name;
+                        } else {
+                            return "";
+                        }
+                    }
                     color: {
+                        let c = statusPopupMenuItem.action.iconSettings.color ||
+                            statusPopupMenuItem.action.icon.color
+                          
+                        if (!Qt.colorEqual(c, "transparent")) {
+                            return c
+                        }
                         switch (statusPopupMenuItem.action.type) {
                             case StatusMenuItem.Type.Danger:
                               return Theme.palette.dangerColor1
@@ -66,18 +97,80 @@ Menu {
             }
         }
 
+        Component {
+            id: statusLetterIdenticonCmp
+            Item {
+                implicitWidth: 24
+                implicitHeight: 24
+
+                StatusLetterIdenticon {
+                    anchors.centerIn: parent
+                    width: 16
+                    height: 16
+                    color: {
+                        let subMenuItemIcon = statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex]
+                        return subMenuItemIcon && subMenuItemIcon.color ? subMenuItemIcon.color : statusPopupMenuItem.action.iconSettings.background.color
+                    }
+                    name: statusPopupMenuItem.text
+                    letterSize: 11
+                }
+            }
+        }
+
+        Component {
+            id: statusRoundImageCmp
+
+            Item {
+                implicitWidth: 24
+                implicitHeight: 24
+                StatusRoundedImage {
+                    anchors.centerIn: parent
+                    width: statusPopupMenuItem.action.image.width
+                    height: statusPopupMenuItem.action.image.height
+                    image.source: statusPopupMenuItem.subMenu ?
+                        statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].source :
+                        statusPopupMenuItem.action.image.source
+                    border.width: (statusPopupMenuItem.subMenu && statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].isIdenticon) || 
+                        statusPopupMenuItem.action.image.isIdenticon ? 1 : 0
+                    border.color: Theme.palette.directColor7
+                }
+            }
+        }
+
         indicator: Loader {
-            sourceComponent: indicatorComponent
+            sourceComponent: {
+                let subMenuItemIcon = statusPopupMenu.subMenuItemIcons[parent.subMenuIndex]
+                
+                if ((parent.subMenu && subMenuItemIcon && subMenuItemIcon.source) || 
+                    statusPopupMenuItem.action.image && !!statusPopupMenuItem.action.image.source.toString()) {
+                    return statusRoundImageCmp
+                }
+
+                return (parent.subMenu && subMenuItemIcon && subMenuItemIcon.isLetterIdenticon) || 
+                    (statusPopupMenuItem.action.iconsSettings && statusPopupMenuItem.action.iconSettings.isLetterIdenticon) ? 
+                    statusLetterIdenticonCmp : indicatorComponent
+            }
             anchors.verticalCenter: parent.verticalCenter
             anchors.left: parent.left
             anchors.leftMargin: 8
-            active: (parent.subMenu && !!statusPopupMenu.subMenuItemIcons[parent.subMenuIndex] ||
-                !!statusPopupMenuItem.action.icon.name) &&
-                statusPopupMenuItem.action.enabled
+            active: {
+                if (enabled) {
+                    let hasIconSettings = !!statusPopupMenuItem.action.icon.name ||
+                      (statusPopupMenuItem.action.iconSettings && 
+                        (!!statusPopupMenuItem.action.iconSettings.name || !!statusPopupMenuItem.action.iconSettings.isLetterIdenticon))
+
+                    let hasImageSettings = statusPopupMenuItem.action.image && !!statusPopupMenuItem.action.image.source.toString()
+
+                    return enabled && (parent.subMenu && !!statusPopupMenu.subMenuItemIcons[parent.subMenuIndex]) || hasIconSettings || hasImageSettings
+                }
+                return false
+            }      
         }
 
         contentItem: StatusBaseText {
             anchors.left: statusPopupMenuItem.indicator.right
+            anchors.right: arrowIcon.visible ? arrowIcon.left : arrowIcon.right
+            anchors.rightMargin: 8
             anchors.leftMargin: 4
 
             horizontalAlignment: Text.AlignLeft
@@ -99,6 +192,7 @@ Menu {
         }
 
         arrow: StatusIcon {
+            id: arrowIcon
             anchors.verticalCenter: parent.verticalCenter
             anchors.right: parent.right
             anchors.rightMargin: 8
@@ -110,7 +204,7 @@ Menu {
 
         background: Rectangle {
             color: {
-                if (hovered) {
+                if (statusPopupMenuItem.hovered) {
                     return statusPopupMenuItem.action.type === StatusMenuItem.Type.Danger ? Theme.palette.dangerColor3 : Theme.palette.statusPopupMenu.hoverBackgroundColor
                 }
                 return "transparent"
@@ -119,9 +213,8 @@ Menu {
 
         MouseArea {
             id: sensor
-
             anchors.fill: parent
-            cursorShape: Qt.PointingHandCursor 
+            cursorShape: Qt.PointingHandCursor
             hoverEnabled: statusPopupMenuItem.action.enabled
             onPressed: mouse.accepted = false
         }
@@ -153,5 +246,4 @@ Menu {
             }
         }
     }
-
 }

src/StatusQ/Popups/StatusSearchLocationMenu.qml

@@ -0,0 +1,144 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Popups 0.1
+
+StatusPopupMenu {
+    id: root
+
+    property var searchPopup
+    property var locationModel
+
+    signal itemClicked(string firstLevelItemValue, string secondLevelItemValue)
+
+    StatusMenuItem {
+        text: "Anywhere"
+        onTriggered: {
+            searchPopup.resetSearchSelection();
+            root.itemClicked("", "");
+        }
+    }
+    StatusMenuSeparator { }
+    //Dummy item to keep seperator in right position
+    MenuItem { implicitHeight: 0.00001 }
+    Instantiator {
+        model: root.locationModel
+        delegate: Loader {
+            sourceComponent: (!!model.subItems && model.subItems.count > 0) ? subMenus : subMenuItemComponent
+            onLoaded: {
+                if (!!model.subItems && model.subItems.count > 0)  {
+                    item.parentValue = model.value
+                    item.title = model.title;
+                    item.subItemsModel = model.subItems;
+                    item.parentIconName = model.iconName;
+                    item.parentImageSource = model.imageSource;
+                    item.parentIdenticonColor = !!model.iconColor ? model.iconColor : Theme.palette.primaryColor1;
+                    item.parentIsIdenticon = model.isIdenticon;
+                    root.subMenuItemIcons.push({
+                                    source: model.imageSource,
+                                    icon: model.iconName,
+                                    isIdenticon: model.isIdenticon,
+                                    color: model.iconColor,
+                                    isLetterIdenticon: !model.imageSource && !model.iconName
+                                   });
+                    root.insertMenu(index+2, item);
+                } else {
+                    item.value = model.value
+                    item.text = model.title;
+                    item.iconSettings.name = model.iconName;
+                    item.iconSettings.color = model.iconColor;
+                    item.iconSettings.isLetterIdenticon = !model.imageSource && !model.iconName
+                    item.image.source = model.imageSource;
+                    item.image.isIdenticon = model.isIdenticon;
+                    root.insertItem(index+2, item);
+                }
+            }
+        }
+        onObjectRemoved: { root.removeItem(root.takeItem(index+2)); }
+    }
+
+    Component {
+        id: subMenuItemComponent
+        StatusSearchPopupMenuItem {
+            onClicked: {
+                searchPopup.resetSearchSelection()
+                searchPopup.setSearchSelection(text,
+                                               "",
+                                               image.source,
+                                               image.isIdenticon,
+                                               iconSettings.name,
+                                               iconSettings.color)
+                root.itemClicked(value, "")
+            }
+        }
+    }
+
+    Component {
+        id: subMenus
+        StatusPopupMenu {
+            id: menu
+            property var subItemsModel
+            property string parentValue
+            property string parentIconName
+            property string parentImageSource
+            property string parentIdenticonColor
+            property string parentIsIdenticon
+            Repeater {
+                id: menuLoader
+                model: menu.subItemsModel
+                property string parentValue: menu.parentValue
+                property string parentTitleText: menu.title
+                property string parentIconName: menu.parentIconName
+                property string parentImageSource: menu.parentImageSource
+                property string parentIdenticonColor: menu.parentIdenticonColor
+                property string parentIsIdenticon: menu.parentIsIdenticon
+                Loader {
+                    id: subMenuLoader
+                    sourceComponent: StatusSearchPopupMenuItem {
+                        value: model.value
+                        text: model.text
+                        image.source: model.imageSource
+                        iconSettings.name: model.iconName
+                        iconSettings.color: model.iconColor
+                        image.isIdenticon: model.isIdenticon
+                        onTriggered: {
+                            searchPopup.resetSearchSelection()
+                            if (menuLoader.parentTitleText === "Chat") {
+                                searchPopup.setSearchSelection(model.text,
+                                                               "",
+                                                               model.imageSource,
+                                                               model.isIdenticon,
+                                                               model.iconName,
+                                                               model.iconColor)
+                            } else {
+                                searchPopup.setSearchSelection(menuLoader.parentTitleText,
+                                                   model.text,
+                                                   menuLoader.parentImageSource,
+                                                   menuLoader.parentIsIdenticon,
+                                                   menuLoader.parentIconName,
+                                                   menuLoader.parentIdenticonColor)
+                            }
+                            root.itemClicked(menuLoader.parentValue, value)
+                            root.dismiss()
+                        }
+                    }
+                }
+            }
+        }
+    }
+    onMenuItemClicked: {
+        searchPopup.resetSearchSelection()
+        let menuItem = root.menuAt(root.currentIndex)
+        searchPopup.setSearchSelection(menuItem.title,
+                           "",
+                           menuItem.parentImageSource,
+                           menuItem.parentIsIdenticon,
+                           menuItem.parentIconName,
+                           menuItem.parentIdenticonColor)
+        root.itemClicked(menuItem.parentValue, "")
+        //TODO fix error "QML StatusPopupMenu: cannot find any window to open popup in."
+        root.dismiss()
+    }
+}

src/StatusQ/Popups/StatusSearchPopup.qml

@@ -0,0 +1,353 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.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
+    width: 700
+    height: (!!searchResults && (searchResults.count >= 0) && (searchText !== "")) ? (((searchResults.count < 5)) ? 560 : 770) : 142 //970
+    anchors.centerIn: parent
+    showHeader: false
+    showFooter: false
+
+    property string searchText: contentItem.searchText
+    property string noResultsLabel: "No results"
+    property string defaultSearchLocationText: "Anywhere"
+    property bool loading
+    property Menu searchOptionsPopupMenu: Menu { }
+    property var searchResults: [ ]
+    property var searchSelectionButton
+
+    signal resultItemClicked(string itemId)
+    signal resultItemTitleClicked(string titleId)
+
+    property var formatTimestampFn: function (ts) {
+        return ts
+    }
+
+    function setSearchSelection(text = "",
+                                secondaryText = "",
+                                imageSource = "",
+                                isIdenticon = "",
+                                iconName = "",
+                                iconColor = "") {
+        searchSelectionButton.primaryText = text
+        searchSelectionButton.secondaryText = secondaryText
+        searchSelectionButton.image.source = imageSource
+        searchSelectionButton.image.isIdenticon = isIdenticon
+        searchSelectionButton.iconSettings.name = iconName
+        searchSelectionButton.iconSettings.color = iconColor !== ""? iconColor : Theme.palette.primaryColor1
+        searchSelectionButton.iconSettings.isLetterIdenticon = !iconName && !imageSource
+    }
+
+    function resetSearchSelection() {
+        setSearchSelection(defaultSearchLocationText, "", "", false, "", "transparent")
+    }
+
+    contentItem: Item {
+        width: parent.width
+        height: root.height
+        property alias searchText: inputText.text
+
+        ColumnLayout {
+            id: contentItemColumn
+            anchors.fill: parent
+            spacing: 0
+            Item {
+                Layout.fillWidth: true
+                Layout.preferredHeight: 63
+                StatusIcon {
+                    id: statusIcon
+                    width: 40
+                    height: 40
+                    anchors.left: parent.left
+                    anchors.leftMargin: 12
+                    anchors.verticalCenter: parent.verticalCenter
+                    icon: "search"
+                    color: Theme.palette.baseColor1
+                }
+                TextEdit {
+                    id: inputText
+                    anchors.left: statusIcon.right
+                    anchors.leftMargin: 15
+                    anchors.right: parent.right
+                    anchors.rightMargin: 8
+                    anchors.verticalCenter: parent.verticalCenter
+                    focus: true
+                    font.pixelSize: 28
+                    font.family: Theme.palette.baseFont.name
+                    color: Theme.palette.directColor1
+                }
+            }
+            StatusMenuSeparator { 
+                topPadding: 0
+                Layout.fillWidth: true 
+            }
+            Item {
+                Layout.preferredWidth: parent.width
+                Layout.preferredHeight: 58
+                Button {
+                    id: searchOptionsMenuButton
+
+                    Component.onCompleted: {
+                        root.searchSelectionButton = searchOptionsMenuButton
+                    }
+
+                    property string prefixText: "In"
+                    property string primaryText: ""
+                    property string secondaryText: ""
+                    property StatusIconSettings iconSettings: StatusIconSettings {
+                        name: ""
+                        isLetterIdenticon: false
+                    }
+
+                    property StatusImageSettings image: StatusImageSettings {
+                        source: ""
+                        isIdenticon: false
+                    }
+
+                    anchors.left: parent.left
+                    anchors.leftMargin: 16
+                    anchors.verticalCenter: parent.verticalCenter
+
+                    implicitWidth: (contentItemRowLayout.width + 24)
+                    implicitHeight: 32
+
+                    background: Rectangle {
+                        anchors.fill: parent
+                        color: Theme.palette.baseColor2
+                        radius: 8
+                    }
+
+                    contentItem: Item {
+                        anchors.fill: parent
+
+                        MouseArea {
+                            id: sensor
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor 
+                            onClicked: root.searchOptionsPopupMenu.popup();
+
+                            RowLayout {
+                                id: contentItemRowLayout
+                                anchors.centerIn: parent
+                                spacing: 2
+                                StatusBaseText {
+                                    color: Theme.palette.directColor1
+                                    text: searchOptionsMenuButton.prefixText + ": "
+                                    font.weight: Font.Medium
+                                }
+
+                                Loader {
+                                    Layout.preferredWidth: active ? 16 : 0
+                                    Layout.preferredHeight: 16
+                                    active: searchOptionsMenuButton.primaryText !== defaultSearchLocationText &&
+                                        (searchOptionsMenuButton.iconSettings.name ||
+                                        searchOptionsMenuButton.iconSettings.isLetterIdenticon ||
+                                        !!searchOptionsMenuButton.image.source.toString())
+
+                                    sourceComponent: {
+                                        if (!!searchOptionsMenuButton.image.source.toString()) {
+                                            return statusRoundedImageCmp
+                                        }
+                                        if (!!searchOptionsMenuButton.iconSettings.isLetterIdenticon || !searchOptionsMenuButton.iconSettings.name) {
+                                            return statusLetterIdenticonCmp
+                                        }
+                                        return statusIconCmp
+                                    }
+                                }
+
+                                Component {
+                                    id: statusIconCmp
+                                    StatusIcon {
+                                        width: 16
+                                        icon: searchOptionsMenuButton.iconSettings.name
+                                        color: searchOptionsMenuButton.iconSettings.color
+                                    }
+                                }
+
+                                Component {
+                                    id: statusRoundedImageCmp
+                                    Item {
+                                        width: 16
+                                        height: 16
+                                        StatusRoundedImage {
+                                            id: statusRoundedImage
+                                            implicitWidth: parent.width
+                                            implicitHeight: parent.height
+                                            image.source: searchOptionsMenuButton.image.source
+                                            color: searchOptionsMenuButton.image.isIdenticon ?
+                                                Theme.palette.statusRoundedImage.backgroundColor :
+                                                "transparent"
+                                            border.width: searchOptionsMenuButton.image.isIdenticon ? 1 : 0
+                                            border.color: Theme.palette.directColor7
+                                        }
+
+                                        Loader {
+                                            sourceComponent: statusLetterIdenticonCmp
+                                            active: statusRoundedImage.image.status === Image.Error
+                                        }
+                                    }
+                                }
+
+                                Component {
+                                    id: statusLetterIdenticonCmp
+                                    StatusLetterIdenticon {
+                                        implicitWidth: 16
+                                        implicitHeight: 16
+                                        letterSize: 11
+                                        color: searchOptionsMenuButton.iconSettings.color
+                                        name: searchOptionsMenuButton.primaryText
+                                    }
+                                }
+
+                                StatusBaseText {
+                                    color: Theme.palette.directColor1
+                                    text: searchOptionsMenuButton.primaryText
+                                    font.weight: Font.Medium
+                                }
+                                StatusIcon {
+                                    Layout.preferredWidth: 14.5
+                                    Layout.preferredHeight: 17.5
+                                    Layout.alignment: Qt.AlignVCenter
+                                    visible: !!searchOptionsMenuButton.secondaryText
+                                    color: Theme.palette.baseColor1
+                                    icon: "next"
+                                }
+                                StatusIcon {
+                                    Layout.preferredWidth: 17.5
+                                    Layout.preferredHeight: 17.5
+                                    Layout.alignment: Qt.AlignVCenter
+                                    visible: !!searchOptionsMenuButton.secondaryText
+                                    color: Theme.palette.directColor1
+                                    icon: "channel"
+                                }
+                                StatusBaseText {
+                                    color: Theme.palette.directColor1
+                                    visible: !!searchOptionsMenuButton.secondaryText
+                                    text: searchOptionsMenuButton.secondaryText
+                                    font.weight: Font.Medium
+                                }
+                                StatusIcon {
+                                    Layout.preferredWidth: 17.5
+                                    Layout.preferredHeight: 14.5
+                                    Layout.alignment: Qt.AlignVCenter
+                                    icon: "chevron-down"
+                                    color: Theme.palette.directColor1
+                                }
+                            }
+                        }
+                    }
+                }
+
+                StatusFlatRoundButton {
+                    id: closeButton
+                    width: 32
+                    height: 32
+                    anchors.left: searchOptionsMenuButton.right
+                    anchors.leftMargin: 4
+                    anchors.verticalCenter: parent.verticalCenter
+                    opacity: (searchOptionsMenuButton.primaryText === defaultSearchLocationText) ? 0.0 : 1.0
+                    visible: (opacity > 0.1)
+                    type: StatusFlatRoundButton.Type.Secondary
+                    icon.name: "close"
+                    icon.color: Theme.palette.directColor1
+                    icon.width: 20
+                    icon.height: 20
+                    onClicked: { root.resetSearchSelection(); }
+                }
+            }
+
+            StatusMenuSeparator { Layout.fillWidth: true; visible: (root.height > 142) }
+            Item {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                clip: true
+                ListView {
+                    id: view
+                    anchors.fill: parent
+                    anchors {
+                        leftMargin: 0
+                        rightMargin: 0
+                        bottomMargin: 67
+                    }
+                    visible: (!root.loading && (count > 0))
+                    model: root.searchResults
+                    ScrollBar.vertical: ScrollBar { }
+                    delegate: StatusListItem {
+                        width: view.width
+                        itemId: model.itemId
+                        titleId: model.titleId
+                        title: model.title
+                        statusListItemTitle.color: model.title.startsWith("@") ? Theme.palette.primaryColor1 : Theme.palette.directColor1
+                        subTitle: model.content
+                        radius: 0
+                        statusListItemSubTitle.height: model.content !== "" ? 20 : 0
+                        statusListItemSubTitle.elide: Text.ElideRight
+                        statusListItemSubTitle.color: Theme.palette.black
+                        icon.isLetterIdenticon: (model.image === "")
+                        icon.background.color: model.color
+                        titleAsideText: root.formatTimestampFn(model.time)
+                        image.source: model.image
+                        badge.primaryText: model.badgePrimaryText
+                        badge.secondaryText: model.badgeSecondaryText
+                        badge.image.source: model.badgeImage
+                        badge.icon.isLetterIdenticon: model.badgeIsLetterIdenticon
+                        badge.icon.color: model.badgeIconColor
+
+                        onClicked: {
+                            root.resultItemClicked(itemId)
+                        }
+
+                        onTitleClicked: {
+                            root.resultItemTitleClicked(titleId)
+                        }
+                    }
+                    section.property: "sectionName"
+                    section.criteria: ViewSection.FullString
+                    section.delegate: Item {
+                        height: 34
+                        width: view.width
+                        StatusBaseText {
+                            font.pixelSize: 15
+                            color: Theme.palette.baseColor1
+                            text: section
+                            anchors.left: parent.left
+                            anchors.leftMargin: 16
+                            anchors.bottom: parent.bottom
+                            anchors.bottomMargin: 4
+                        }
+                    }
+                }
+                StatusLoadingIndicator {
+                    anchors.centerIn: parent
+                    visible: root.loading
+                    color: Theme.palette.primaryColor1
+                    width: 24
+                    height: 24
+                }
+
+                StatusBaseText {
+                    anchors.centerIn: parent
+                    text: root.noResultsLabel
+                    color: Theme.palette.baseColor1
+                    font.pixelSize: 13
+                    visible: ((inputText.text !== "") && (view.count === 0) && !root.loading)
+                }
+            }
+        }
+    }
+    onClosed: {
+        root.resetSearchSelection();
+        root.loading = false;
+        contentItem.searchText = "";
+    }
+}

src/StatusQ/Popups/StatusSearchPopupMenuItem.qml

@@ -0,0 +1,79 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.12
+import StatusQ.Components 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+MenuItem {
+    id: root
+    implicitHeight: 38
+
+    property string value: ""
+
+    property StatusImageSettings image: StatusImageSettings {
+        height: 16
+        width: 16
+        isIdenticon: false
+    }
+    property StatusIconSettings iconSettings: StatusIconSettings {
+        height: 16
+        width: 16
+        isLetterIdenticon: (root.image.source.toString() === ""
+                            && root.iconSettings.name.toString() === "")
+        background: StatusIconBackgroundSettings {}
+        color: "transparent"
+    }
+
+    background: Rectangle {
+        color: root.hovered ? Theme.palette.statusPopupMenu.hoverBackgroundColor : "transparent"
+    }
+
+    contentItem: RowLayout {
+        anchors.left: parent.left
+        anchors.leftMargin: 12
+        StatusIcon {
+            Layout.preferredWidth: visible ? root.iconSettings.width : 0
+            Layout.preferredHeight: visible ? root.iconSettings.height : 0
+            Layout.alignment: Qt.AlignVCenter
+            visible: !!root.iconSettings.name && !root.image.source.toString()
+            icon:  root.iconSettings.name
+            color: (icon === "channel")? Theme.palette.directColor1 : root.iconSettings.color
+        }
+        StatusRoundedImage {
+            Layout.preferredWidth: visible ? root.image.width : 0
+            Layout.preferredHeight: visible ? root.image.height : 0
+            Layout.alignment: Qt.AlignVCenter
+            visible: root.image.source.toString() !== ""
+            image.source: root.image.source
+            border.width: root.image.isIdenticon ? 1 : 0
+            border.color: Theme.palette.directColor7
+        }
+        StatusLetterIdenticon {
+            Layout.preferredWidth: visible ? root.iconSettings.width : 0
+            Layout.preferredHeight: visible ? root.iconSettings.height : 0
+            visible: root.iconSettings.isLetterIdenticon && !root.iconSettings.name && !root.image.source.toString()
+            color: root.iconSettings.color
+            name: root.text
+            letterSize: 11
+        }
+        StatusBaseText {
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignVCenter
+            text: root.text
+            color: Theme.palette.directColor1
+            font.pixelSize: 13
+            elide: Text.ElideRight
+        }
+        Item {
+            Layout.fillWidth: true
+        }
+    }
+    MouseArea {
+        id: sensor
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: mouse.accepted = false
+    }
+}

src/StatusQ/Popups/qmldir

@@ -3,3 +3,9 @@ module StatusQ.Popups
 StatusMenuSeparator 0.1 StatusMenuSeparator.qml
 StatusPopupMenu 0.1 StatusPopupMenu.qml
 StatusMenuItem 0.1 StatusMenuItem.qml
+StatusMenuHeadline 0.1 StatusMenuHeadline.qml
+StatusModal 0.1 StatusModal.qml
+StatusSearchPopup 0.1 StatusSearchPopup.qml
+StatusModalDivider 0.1 StatusModalDivider.qml
+StatusSearchPopupMenuItem 0.1 StatusSearchPopupMenuItem.qml
+StatusSearchLocationMenu 0.1 StatusSearchLocationMenu.qml

src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml

@@ -0,0 +1,124 @@
+import QtQuick 2.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+
+Row {
+    id: statusImageWithTitle
+
+    property alias title: headerTitle.text
+    property alias subTitle: headerSubTitle.text
+    property int titleElide: Text.ElideRight
+    property int subTitleElide: Text.ElideRight
+    property bool editable: false
+
+    signal editButtonClicked
+
+    property StatusImageSettings image: StatusImageSettings {
+        width: 40
+        height: 40
+        isIdenticon: false
+    }
+
+    property StatusIconSettings icon: StatusIconSettings {
+        width: 40
+        height: 40
+        isLetterIdenticon: false
+    }
+
+    spacing: 8
+
+    Loader {
+        id: iconOrImage
+        anchors.verticalCenter: parent.verticalCenter
+        width: active ? 40 : 0
+        sourceComponent: {
+            if (statusImageWithTitle.icon.isLetterIdenticon) {
+                return statusLetterIdenticon
+            }
+            return statusRoundedImageCmp
+        }
+        active: statusImageWithTitle.icon.isLetterIdenticon || 
+                !!statusImageWithTitle.image.source.toString()
+    }
+
+    Component {
+        id: statusLetterIdenticon
+        StatusLetterIdenticon {
+            width: statusImageWithTitle.icon.width
+            height: statusImageWithTitle.icon.height
+            color: statusImageWithTitle.icon.background.color
+            name: statusImageWithTitle.title
+        }
+    }
+
+    Component {
+        id: statusRoundedImageCmp
+        Item {
+            width: statusImageWithTitle.image.width
+            height: statusImageWithTitle.image.height
+            StatusRoundedImage {
+                id: statusRoundedImage
+                image.source:  statusImageWithTitle.image.source
+                width: statusImageWithTitle.image.width
+                height: statusImageWithTitle.image.height
+                color: statusImageWithTitle.image.isIdenticon ?
+                    Theme.palette.statusRoundedImage.backgroundColor :
+                    "transparent"
+                border.width: statusImageWithTitle.image.isIdenticon ? 1 : 0
+                border.color: Theme.palette.directColor7
+                showLoadingIndicator: true
+            }
+            Loader {
+                sourceComponent: statusLetterIdenticon
+                active: statusRoundedImage.image.status === Image.Error
+            }
+        }
+    }
+
+    Column {
+        id: textLayout
+        width: !iconOrImage.active ? parent.width :
+              parent.width - iconOrImage.width - parent.spacing
+        Row {
+            id: headerTitleRow
+            width: parent.width
+            spacing: 4
+            StatusBaseText {
+                id: headerTitle
+                font.family: Theme.palette.baseFont.name
+                font.pixelSize: 17
+                font.bold: true
+                elide: statusImageWithTitle.titleElide
+                color: Theme.palette.directColor1
+                width: !editButton.visible ? parent.width : 
+                      parent.width - editButton.width - parent.spacing
+            }
+            StatusFlatRoundButton {
+                id: editButton
+                visible: statusImageWithTitle.editable
+                anchors.bottom: headerTitle.bottom
+                anchors.bottomMargin: -1
+                height: 24
+                width: 24
+                type: StatusFlatRoundButton.Type.Secondary
+                icon.name: "pencil"
+                icon.color: Theme.palette.directColor1
+                icon.width: 12.5
+                icon.height: 12.5
+
+                onClicked: statusImageWithTitle.editButtonClicked()
+            }
+        }
+
+        StatusBaseText {
+            id: headerSubTitle
+            font.family: Theme.palette.baseFont.name
+            font.pixelSize: 15
+            color:Theme.palette.baseColor1
+            width: parent.width
+            elide: statusImageWithTitle.subTitleElide
+        }
+    }
+}

src/StatusQ/Popups/statusModal/StatusModalFooter.qml

@@ -0,0 +1,76 @@
+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
+import StatusQ.Popups 0.1
+
+
+Rectangle {
+    id: statusModalFooter
+
+    property list<Item> leftButtons
+    property list<StatusBaseButton> rightButtons
+
+    radius: 8
+
+    color: Theme.palette.statusModal.backgroundColor
+
+    onLeftButtonsChanged: {
+        for (let idx in leftButtons) {
+            leftButtons[idx].parent = leftButtonsLayout
+        }
+    }
+
+    onRightButtonsChanged: {
+        for (let idx in rightButtons) {
+            rightButtons[idx].parent = rightButtonsLayout
+        }
+    }
+
+    implicitHeight: visible ? rootLayout.implicitHeight + 30 : 0
+
+    RowLayout {
+        id: rootLayout
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.leftMargin: 16
+        anchors.rightMargin: 18
+
+        Row {
+            id: leftButtonsLayout
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+
+            spacing: 16
+        }
+
+        Item {
+            Layout.fillWidth: true
+            implicitHeight: 1
+        }
+
+        Row {
+            id: rightButtonsLayout
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+
+            spacing: 16
+
+        }
+    }
+
+    Rectangle {
+        anchors.top: parent.top
+        width: parent.width
+        height: parent.radius
+        color: parent.color
+
+        StatusModalDivider {
+            visible: (statusModalFooter.leftButtons.length || statusModalFooter.rightButtons.length) && rootLayout.height > 1
+            anchors.top: parent.top
+            width: parent.width
+        }
+    }
+}

src/StatusQ/Popups/statusModal/StatusModalHeader.qml

@@ -0,0 +1,102 @@
+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
+import StatusQ.Popups 0.1
+
+Rectangle {
+    id: statusModalHeader
+
+    property alias title: imageWithTitle.title
+    property alias subTitle: imageWithTitle.subTitle
+    property int titleElide
+    property int subTitleElide
+    property alias actionButton: actionButtonLoader.sourceComponent
+
+    property alias image: imageWithTitle.image
+    property alias icon: imageWithTitle.icon
+    property bool editable: false
+    property Component popupMenu
+
+    signal editButtonClicked
+    signal close
+
+    implicitHeight: visible? Math.max(closeButton.height, imageWithTitle.implicitHeight) + 32 : 0
+    implicitWidth: 480
+
+    radius: 16
+
+    color: Theme.palette.statusModal.backgroundColor
+
+    onPopupMenuChanged: {
+        if (!!popupMenu) {
+            popupMenuSlot.sourceComponent = popupMenu
+        }
+    }
+
+    StatusImageWithTitle {
+        id: imageWithTitle
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.right: actionButtonLoader.left
+        anchors.leftMargin: 16
+
+        editable: statusModalHeader.editable
+        titleElide: statusModalHeader.titleElide
+        subTitleElide: statusModalHeader.subTitleElide
+        onEditButtonClicked: statusModalHeader.editButtonClicked()
+    }
+
+    MouseArea {
+        anchors.fill: imageWithTitle
+        visible: !!statusModalHeader.popupMenu
+        cursorShape: Qt.PointingHandCursor
+        onClicked: {
+            popupMenuSlot.item.popup(imageWithTitle.x, imageWithTitle.y + imageWithTitle.height + 8)
+        }
+    }
+
+    Loader {
+        id: actionButtonLoader
+        anchors.right: closeButton.left
+        anchors.rightMargin: 8
+        anchors.top: parent.top
+        anchors.topMargin: 16
+    }
+
+    StatusFlatRoundButton {
+        id: closeButton
+        anchors.right: parent.right
+        anchors.rightMargin: 20
+        anchors.top: parent.top
+        anchors.topMargin: 16
+        width: 32
+        height: 32
+        type: StatusFlatRoundButton.Type.Secondary
+        icon.name: "close"
+        icon.color: Theme.palette.directColor1
+        icon.width: 20
+        icon.height: 20
+
+        onClicked: statusModalHeader.close()
+    }
+
+    Rectangle {
+        anchors.bottom: parent.bottom
+        width: parent.width
+        height: parent.radius
+        color: parent.color
+
+        StatusModalDivider {
+            anchors.bottom: parent.bottom
+            width: parent.width
+        }
+    }
+
+    Loader {
+        id: popupMenuSlot
+        active: !!statusModalHeader.popupMenu
+    }
+}

src/assets/img/icons/bigger/browser.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.5C17.2467 21.5 21.5 17.2467 21.5 12C21.5 6.75329 17.2467 2.5 12 2.5C6.75329 2.5 2.5 6.75329 2.5 12C2.5 17.2467 6.75329 21.5 12 21.5ZM12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23Z" fill="#939BA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.24014 16.1491C7.1427 16.5194 7.48062 16.8573 7.85093 16.7599L14.6218 14.9781C14.7961 14.9322 14.9322 14.7961 14.9781 14.6218L16.7599 7.85093C16.8573 7.48062 16.5194 7.1427 16.1491 7.24014L9.37823 9.02194C9.20394 9.06781 9.06781 9.20394 9.02194 9.37823L7.24014 16.1491ZM9.25791 14.3756C9.19944 14.5978 9.4022 14.8006 9.62438 14.7421L13.3938 13.7501C13.5681 13.7043 13.7043 13.5681 13.7501 13.3938L14.7421 9.62438C14.8006 9.4022 14.5978 9.19944 14.3756 9.25791L10.6062 10.2499C10.4319 10.2957 10.2957 10.4319 10.2499 10.6062L9.25791 14.3756Z" fill="#939BA1"/>
+</svg>

src/assets/img/icons/bigger/network.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.26285 18.4743C7.26285 19.7317 6.24355 20.751 4.98618 20.751C3.7288 20.751 2.7095 19.7317 2.7095 18.4743C2.7095 17.2169 3.7288 16.1976 4.98618 16.1976C6.24355 16.1976 7.26285 17.2169 7.26285 18.4743ZM4.98618 22.251C6.81518 22.251 8.34052 20.9508 8.68838 19.2243H15.3116C15.6595 20.9508 17.1848 22.251 19.0138 22.251C21.0996 22.251 22.7905 20.5601 22.7905 18.4743C22.7905 16.3885 21.0996 14.6976 19.0138 14.6976C17.1848 14.6976 15.6595 15.9978 15.3116 17.7243H8.68838C8.34052 15.9978 6.81518 14.6976 4.98618 14.6976C2.90038 14.6976 1.2095 16.3885 1.2095 18.4743C1.2095 20.5601 2.90038 22.251 4.98618 22.251ZM21.2905 18.4743C21.2905 19.7317 20.2712 20.751 19.0138 20.751C17.7564 20.751 16.7371 19.7317 16.7371 18.4743C16.7371 17.2169 17.7564 16.1976 19.0138 16.1976C20.2712 16.1976 21.2905 17.2169 21.2905 18.4743ZM14.2767 5.5257C14.2767 6.78307 13.2574 7.80237 12 7.80237C10.7426 7.80237 9.72332 6.78307 9.72332 5.5257C9.72332 4.26832 10.7426 3.24902 12 3.24902C13.2574 3.24902 14.2767 4.26832 14.2767 5.5257ZM15.7767 5.5257C15.7767 6.68953 15.2502 7.73042 14.4225 8.4232L17.9099 14.8615C17.4208 15.0107 16.9739 15.2565 16.5914 15.5767L13.104 9.13846C12.7548 9.24503 12.3841 9.30237 12 9.30237C11.6159 9.30237 11.2452 9.24504 10.896 9.13846L7.40862 15.5767C7.02607 15.2565 6.57917 15.0107 6.09013 14.8615L9.57752 8.42321C8.74977 7.73042 8.22332 6.68954 8.22332 5.5257C8.22332 3.4399 9.91419 1.74902 12 1.74902C14.0858 1.74902 15.7767 3.4399 15.7767 5.5257Z" fill="#939BA1"/>
+</svg>

src/assets/img/icons/bigger/pause.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="8.125" y="6.5" width="2.5" height="11" rx="1.25" fill="black"/>
+<rect x="13.375" y="6.5" width="2.5" height="11" rx="1.25" fill="black"/>
+</svg>

src/assets/img/icons/bigger/play.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 7.5224C8 6.3159 9.30206 5.59038 10.2858 6.24874L17.5201 11.0902C18.16 11.5185 18.16 12.4815 17.5201 12.9098L10.2858 17.7513C9.30206 18.4096 8 17.6841 8 16.4776V7.5224Z" fill="black"/>
+</svg>

src/assets/img/icons/bigger/profile.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.75 9C15.75 11.0711 14.0711 12.75 12 12.75C9.92893 12.75 8.25 11.0711 8.25 9C8.25 6.92893 9.92893 5.25 12 5.25C14.0711 5.25 15.75 6.92893 15.75 9ZM14.25 9C14.25 10.2426 13.2426 11.25 12 11.25C10.7574 11.25 9.75 10.2426 9.75 9C9.75 7.75736 10.7574 6.75 12 6.75C13.2426 6.75 14.25 7.75736 14.25 9Z" fill="#939BA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12ZM21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5C17.2467 2.5 21.5 6.75329 21.5 12Z" fill="#939BA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.99199 16.3857L6.98744 16.39C6.68505 16.6731 6.6694 17.1477 6.95248 17.4501C7.23544 17.7523 7.70978 17.7681 8.01218 17.4854L8.01129 17.4862L8.02005 17.4783C8.02921 17.4702 8.04496 17.4563 8.06705 17.4376C8.11126 17.4002 8.18068 17.3436 8.27353 17.274C8.45962 17.1346 8.73733 16.9451 9.09253 16.7549C9.80556 16.3731 10.8085 16 12 16C13.1915 16 14.1944 16.3731 14.9075 16.7549C15.2627 16.9451 15.5404 17.1346 15.7265 17.274C15.8193 17.3436 15.8887 17.4002 15.933 17.4376C15.955 17.4563 15.9708 17.4702 15.98 17.4783L15.9887 17.4862C16.2911 17.7685 16.7647 17.7522 17.0475 17.4501C17.3306 17.1477 17.3149 16.6731 17.0126 16.39L17.0117 16.3892L17.0106 16.3882L17.008 16.3857L17.0008 16.3791L16.9782 16.3588C16.9597 16.3422 16.9341 16.3198 16.9016 16.2923C16.8367 16.2374 16.7442 16.1623 16.6259 16.0736C16.3897 15.8967 16.0482 15.6642 15.6156 15.4326C14.753 14.9707 13.5059 14.5 12 14.5C10.4941 14.5 9.24704 14.9707 8.38442 15.4326C7.95179 15.6642 7.61027 15.8967 7.37408 16.0736C7.25578 16.1623 7.1633 16.2374 7.0984 16.2923C7.06593 16.3198 7.04031 16.3422 7.02176 16.3588L6.99924 16.3791L6.99199 16.3857L6.98937 16.3882L6.98832 16.3892L6.99199 16.3857Z" fill="#939BA1"/>
+</svg>

src/assets/img/icons/bigger/send.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6192 18.1568L5.00164 20.8817C4.45399 21.1072 3.90948 20.553 4.14456 20.0094L11.3015 3.45893C11.422 3.18035 11.6965 3 12 3C12.3035 3 12.578 3.18035 12.6984 3.45893L19.8554 20.0094C20.0905 20.553 19.546 21.1072 18.9983 20.8817L12.3807 18.1568C12.1368 18.0563 11.8631 18.0564 11.6192 18.1568ZM11.25 16.4818C11.25 16.6096 11.1663 16.7211 11.0481 16.7698L7.47933 18.2393C7.06444 18.4101 6.65194 17.9903 6.83002 17.5785L10.7705 8.46607C10.8782 8.21695 11.25 8.29388 11.25 8.5653V16.4818ZM12.75 16.4818C12.75 16.6096 12.8337 16.7211 12.9519 16.7698L16.5206 18.2393C16.9355 18.4101 17.348 17.9903 17.1699 17.5785L13.2294 8.46607C13.1217 8.21695 12.75 8.29388 12.75 8.5653V16.4818Z" fill="#4360DF"/>
+</svg>

src/assets/img/icons/bigger/settings.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4083 12C15.4083 13.8823 13.8824 15.4082 12 15.4082C10.1177 15.4082 8.5918 13.8823 8.5918 12C8.5918 10.1177 10.1177 8.59174 12 8.59174C13.8824 8.59174 15.4083 10.1177 15.4083 12ZM13.9083 12C13.9083 13.0539 13.0539 13.9082 12 13.9082C10.9461 13.9082 10.0918 13.0539 10.0918 12C10.0918 10.9461 10.9461 10.0917 12 10.0917C13.0539 10.0917 13.9083 10.9461 13.9083 12Z" fill="#939BA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2772 23H11.7228C10.8413 23 10.0666 22.4156 9.82441 21.568L9.3263 19.8247C9.22927 19.485 8.84755 19.3171 8.53163 19.4751L6.9006 20.2906C6.14049 20.6707 5.22247 20.5217 4.62156 19.9208L4.07924 19.3784C3.47832 18.7775 3.32935 17.8595 3.7094 17.0994L4.52491 15.4684C4.68287 15.1525 4.51495 14.7707 4.17534 14.6737L2.43196 14.1756C1.58437 13.9334 1 13.1587 1 12.2772V11.7228C1 10.8413 1.58437 10.0666 2.43196 9.82441L4.17534 9.3263C4.51495 9.22927 4.68287 8.84755 4.52491 8.53163L3.7094 6.9006C3.32935 6.14049 3.47832 5.22247 4.07924 4.62156L4.62156 4.07924C5.22247 3.47832 6.14049 3.32935 6.9006 3.7094L8.53163 4.52491C8.84755 4.68287 9.22927 4.51495 9.3263 4.17534L9.82441 2.43196C10.0666 1.58436 10.8413 1 11.7228 1H12.2772C13.1587 1 13.9334 1.58436 14.1756 2.43196L14.6737 4.17534C14.7707 4.51495 15.1525 4.68287 15.4684 4.52491L17.0994 3.7094C17.8595 3.32935 18.7775 3.47832 19.3784 4.07924L19.9208 4.62156C20.5217 5.22247 20.6707 6.14049 20.2906 6.9006L19.4751 8.53163C19.3171 8.84755 19.485 9.22927 19.8247 9.3263L21.568 9.82441C22.4156 10.0666 23 10.8413 23 11.7228V12.2772C23 13.1587 22.4156 13.9334 21.568 14.1756L19.8247 14.6737C19.485 14.7707 19.3171 15.1525 19.4751 15.4684L20.2906 17.0994C20.6707 17.8595 20.5217 18.7775 19.9208 19.3784L19.3784 19.9208C18.7775 20.5217 17.8595 20.6707 17.0994 20.2906L15.4684 19.4751C15.1525 19.3171 14.7707 19.485 14.6737 19.8247L14.1756 21.568C13.9334 22.4156 13.1587 23 12.2772 23ZM11.7228 21.5C11.511 21.5 11.3249 21.3596 11.2667 21.156L10.7686 19.4126C10.4135 18.1699 9.01678 17.5555 7.86081 18.1334L6.22978 18.949C6.04716 19.0403 5.82659 19.0045 5.68222 18.8601L5.1399 18.3178C4.99552 18.1734 4.95973 17.9528 5.05104 17.7702L5.86655 16.1392C6.44454 14.9832 5.8301 13.5865 4.58742 13.2314L2.84404 12.7333C2.6404 12.6751 2.5 12.489 2.5 12.2772V11.7228C2.5 11.511 2.6404 11.3249 2.84404 11.2667L4.58742 10.7686C5.83011 10.4135 6.44454 9.01678 5.86656 7.86081L5.05104 6.22978C4.95973 6.04716 4.99552 5.82659 5.1399 5.68222L5.68222 5.1399C5.82659 4.99552 6.04716 4.95973 6.22978 5.05104L7.86081 5.86655C9.01677 6.44454 10.4135 5.83011 10.7686 4.58742L11.2667 2.84404C11.3249 2.6404 11.511 2.5 11.7228 2.5H12.2772C12.489 2.5 12.6751 2.6404 12.7333 2.84404L13.2314 4.58742C13.5865 5.83011 14.9832 6.44454 16.1392 5.86655L17.7702 5.05104C17.9528 4.95973 18.1734 4.99552 18.3178 5.1399L18.8601 5.68222C19.0045 5.82659 19.0403 6.04716 18.949 6.22978L18.1334 7.86081C17.5555 9.01678 18.1699 10.4135 19.4126 10.7686L21.156 11.2667C21.3596 11.3249 21.5 11.511 21.5 11.7228V12.2772C21.5 12.489 21.3596 12.6751 21.156 12.7333L19.4126 13.2314C18.1699 13.5865 17.5555 14.9832 18.1334 16.1392L18.949 17.7702C19.0403 17.9528 19.0045 18.1734 18.8601 18.3178L18.3178 18.8601C18.1734 19.0045 17.9528 19.0403 17.7702 18.949L16.1392 18.1334C14.9832 17.5555 13.5865 18.1699 13.2314 19.4126L12.7333 21.156C12.6751 21.3596 12.489 21.5 12.2772 21.5H11.7228Z" fill="#939BA1"/>
+</svg>

src/assets/img/icons/bigger/status-update.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23ZM12 21.5C10.3571 21.5 9.02523 20.1682 9.02523 18.5252C9.02523 16.8823 10.3571 15.5505 12 15.5505C13.6429 15.5505 14.9748 16.8823 14.9748 18.5252C14.9748 20.1682 13.6429 21.5 12 21.5ZM7.11258 18.6751C7.22604 18.8718 7.52523 18.7523 7.52523 18.5252C7.52523 16.0539 9.52865 14.0505 12 14.0505C14.4713 14.0505 16.4748 16.0539 16.4748 18.5252C16.4748 18.7523 16.774 18.8718 16.8874 18.6751C17.3651 17.847 17.6385 16.8862 17.6385 15.8615C17.6385 12.7475 15.114 10.2231 12 10.2231C8.88597 10.2231 6.36154 12.7475 6.36154 15.8615C6.36154 16.8862 6.63487 17.847 7.11258 18.6751ZM19.0483 16.9992C18.9783 17.4359 19.5498 17.784 19.8025 17.421C20.8726 15.8836 21.5 14.0151 21.5 12C21.5 6.75329 17.2467 2.5 12 2.5C6.75329 2.5 2.5 6.75329 2.5 12C2.5 14.0151 3.1274 15.8836 4.19751 17.421C4.45018 17.784 5.02165 17.4359 4.95171 16.9992C4.89237 16.6287 4.86154 16.2487 4.86154 15.8615C4.86154 11.9191 8.05754 8.72308 12 8.72308C15.9425 8.72308 19.1385 11.9191 19.1385 15.8615C19.1385 16.2487 19.1076 16.6287 19.0483 16.9992Z" fill="#939BA1"/>
+</svg>

src/assets/img/icons/pause-filled.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="8.125" y="6.5" width="2.5" height="11" rx="1.25" fill="black"/>
+<rect x="13.375" y="6.5" width="2.5" height="11" rx="1.25" fill="black"/>
+</svg>