fix(@desktop/chat) Acitvity tooltip arrow should be in center when members list is shown

fixes #3102

.gitignore

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

CHANGELOG.md

@@ -0,0 +1,222 @@
+<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
 
@@ -12,6 +12,7 @@ These modules are:
 - [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 +44,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
 

sandbox/DemoApp.qml

@@ -11,7 +11,7 @@ import StatusQ.Popups 0.1
 Rectangle {
     id: demoApp
     height: 602
-    width: 902
+    width: 1002
     border.width: 1
     border.color: Theme.palette.baseColor2
 
@@ -44,7 +44,6 @@ Rectangle {
         }
     }
 
-
     StatusAppLayout {
         id: statusAppLayout
         anchors.top: demoApp.top
@@ -141,6 +140,11 @@ Rectangle {
                     badge.border.width: 2
 
                     tooltip.text: "Profile"
+
+                    checked: appView.sourceComponent == statusAppProfileSettingsView
+                    onClicked: {
+                        appView.sourceComponent = statusAppProfileSettingsView
+                    }
                 }
             ]
         }
@@ -160,19 +164,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: demoChatListItems
+                        selectedChatId: "0"
+                        onChatItemSelected: selectedChatId = id
+                        onChatItemUnmuted: {
+                            for (var i = 0; i < demoChatListItems.count; i++) {
+                                let item = demoChatListItems.get(i);
+                                if (item.chatId === id) {
+                                    demoChatListItems.setProperty(i, "muted", false)
+                                }
+                            }
+                        }
+
+                        popupMenu: StatusPopupMenu {
+
+                            property string chatId
+
+                            openHandler: function (id) {
+                                chatId = id
+                            }
+
+                            StatusMenuItem {
+                                text: "View Profile"
+                                icon.name: "group-chat"
+                            }
+
+                            StatusMenuSeparator {}
+
+                            StatusMenuItem {
+                                text: "Mute chat"
+                                icon.name: "notification"
+                            }
+
+                            StatusMenuItem {
+                                text: "Mark as Read"
+                                icon.name: "checkmark-circle"
+                            }
+
+                            StatusMenuItem {
+                                text: "Clear history"
+                                icon.name: "close-circle"
+                            }
+
+                            StatusMenuSeparator {}
+
+                            StatusMenuItem {
+                                text: "Delete chat"
+                                icon.name: "delete"
+                                type: StatusMenuItem.Type.Danger
                             }
                         }
                     }
@@ -186,12 +360,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 +399,6 @@ Rectangle {
                         }
                     }
                 }
-
             }
         }
     }
@@ -231,83 +406,430 @@ 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
+
+                        chatList.model: demoCommunityChatListItems
+                        categoryList.model: demoCommunityCategoryItems
+
+                        showCategoryActionButtons: true
+                        onChatItemSelected: selectedChatId = id
+
+                        categoryPopupMenu: StatusPopupMenu {
+
+                            property string categoryId
+
+                            openHandler: function (id) {
+                                categoryId = id
+                            }
+
+                            StatusMenuItem {
+                                text: "Mute Category"
+                                icon.name: "notification"
+                            }
+
+                            StatusMenuItem {
+                                text: "Mark as Read"
+                                icon.name: "checkmark-circle"
+                            }
+
+                            StatusMenuItem {
+                                text: "Edit Category"
+                                icon.name: "edit"
+                            }
+
+                            StatusMenuSeparator {}
+
+                            StatusMenuItem {
+                                text: "Delete Category"
+                                icon.name: "delete"
+                                type: StatusMenuItem.Type.Danger
+                            }
+                        }
+
+                        chatListPopupMenu: StatusPopupMenu {
+
+                            property string chatId
+
+                            StatusMenuItem {
+                                text: "Mute chat"
+                                icon.name: "notification"
+                            }
+
+                            StatusMenuItem {
+                                text: "Mark as Read"
+                                icon.name: "checkmark-circle"
+                            }
+
+                            StatusMenuItem {
+                                text: "Clear history"
+                                icon.name: "close-circle"
+                            }
+
+                            StatusMenuSeparator {}
+
+                            StatusMenuItem {
+                                text: "Delete chat"
+                                icon.name: "delete"
+                                type: StatusMenuItem.Type.Danger
+                            }
+                        }
+
+                        popupMenu: StatusPopupMenu {
+                            StatusMenuItem {
+                                text: "Create channel"
+                                icon.name: "channel"
+                            }
+
+                            StatusMenuItem {
+                                text: "Create category"
+                                icon.name: "channel-category"
+                            }
+
+                            StatusMenuSeparator {}
+
+                            StatusMenuItem {
+                                text: "Invite people"
+                                icon.name: "share-ios"
+                            }
                         }
                     }
                 }
             }
-            rightPanel: Item {
-                anchors.fill: parent
 
+            centerPanel: Item {
                 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
+                    searchButton.onClicked: searchButton.highlighted = !searchButton.highlighted
+                    membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
+                    onMembersButtonClicked: {
+                        root.showRightPanel = !root.showRightPanel;
+                    }
                 }
             }
+
+            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
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    Component {
+        id: statusAppProfileSettingsView
+
+        StatusAppTwoPanelLayout {
+
+            leftPanel: Item {
+                anchors.fill: parent
+
+                StatusNavigationPanelHeadline {
+                    id: profileHeadline
+                    anchors.top: parent.top
+                    anchors.topMargin: 16
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    text: "Profile"
+                }
+
+                ScrollView {
+                    anchors.top: profileHeadline.bottom
+                    anchors.topMargin: 16
+                    anchors.bottom: parent.bottom
+                    width: parent.width
+
+                    contentHeight: profileMenuItems.height + 8
+                    contentWidth: parent.width
+                    clip: true
+
+                    Column {
+                        id: profileMenuItems
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        spacing: 4
+
+                        Repeater {
+                            model: demoProfileGeneralMenuItems
+                            delegate: StatusNavigationListItem {
+                                title: model.title
+                                icon.name: model.icon
+                            }
+                        }
+
+                        StatusListSectionHeadline { text: "Settings" }
+
+                        Repeater {
+                            model: demoProfileSettingsMenuItems
+                            delegate: StatusNavigationListItem {
+                                title: model.title
+                                icon.name: model.icon
+                            }
+                        }
+
+                        Item {
+                            id: invisibleSeparator
+                            height: 16
+                            width: parent.width
+                        }
+
+                        Repeater {
+                            model: demoProfileOtherMenuItems
+                            delegate: StatusNavigationListItem {
+                                title: model.title
+                                icon.name: model.icon
+                            }
+                        }
+                    }
+                }
+            }
+
+            rightPanel: Item {
+                anchors.fill: parent
+            }
+        }
+    }
+
+    StatusModal {
+        id: demoContactRequestsModal
+        anchors.centerIn: parent
+
+        header.title: "Contact Requests"
+        headerActionButton: StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Secondary
+            width: 32
+            height: 32
+
+            icon.width: 20
+            icon.height: 20
+            icon.name: "notification"
+        }
+
+        content: StatusBaseText {
+            anchors.centerIn: parent
+            text: "Contact request will be shown here"
+            font.pixelSize: 15
+            color: Theme.palette.directColor1
+        }
+
+        rightButtons: [
+            StatusButton {
+                text: "Decline all"
+                type: StatusBaseButton.Type.Danger
+                onClicked: demoContactRequestsModal.close()
+            },
+            StatusButton {
+                text: "Accept all"
+                onClicked: demoContactRequestsModal.close()
+            }
+        ]
+    }
+
+    StatusModal {
+        id: demoCommunityDetailModal
+
+        anchors.centerIn: parent
+
+        header.title: "Cryptokitties"
+        header.subTitle: "Public Community"
+        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+
+        content: Column {
+            width: demoCommunityDetailModal.width
+
+            StatusModalDivider {
+                bottomPadding: 8
+            }
+
+            StatusBaseText {
+                text: "A community of cat lovers, meow!"
+                verticalAlignment: Text.AlignVCenter
+                font.pixelSize: 15
+                height: 46
+                color: Theme.palette.directColor1
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.leftMargin: 16
+                anchors.rightMargin: 16
+            }
+
+            StatusModalDivider {
+                topPadding: 8
+                bottomPadding: 8
+            }
+
+            StatusDescriptionListItem {
+                title: "Share community"
+                subTitle: "https://join.status.im/u/0x04...45f19"
+                tooltip.text: "Copy to clipboard"
+                icon.name: "copy"
+                iconButton.onClicked: tooltip.visible = !tooltip.visible
+                width: parent.width
+            }
+
+            StatusModalDivider {
+                topPadding: 8
+                bottomPadding: 8
+            }
+
+            StatusListItem {
+                anchors.horizontalCenter: parent.horizontalCenter
+                statusListItemTitle.font.pixelSize: 17
+                title: "Members"
+                icon.name: "group-chat"
+                label: "184"
+                components: [
+                    StatusIcon {
+                        icon: "chevron-down"
+                        rotation: 270
+                        color: Theme.palette.baseColor1
+                    }
+                ]
+            }
+
+            StatusListItem {
+                anchors.horizontalCenter: parent.horizontalCenter
+                statusListItemTitle.font.pixelSize: 17
+                title: "Notifications"
+                icon.name: "notification"
+                components: [
+                    StatusSwitch {}
+                ]
+            }
+
+            StatusModalDivider {
+                topPadding: 8
+                bottomPadding: 8
+            }
+
+            StatusListItem {
+                anchors.horizontalCenter: parent.horizontalCenter
+                statusListItemTitle.font.pixelSize: 17
+                title: "Edit community"
+                icon.name: "edit"
+                type: StatusListItem.Type.Secondary
+            }
+
+            StatusListItem {
+                anchors.horizontalCenter: parent.horizontalCenter
+                statusListItemTitle.font.pixelSize: 17
+                title: "Transfer ownership"
+                icon.name: "exchange"
+                type: StatusListItem.Type.Secondary
+            }
+
+            StatusListItem {
+                anchors.horizontalCenter: parent.horizontalCenter
+                statusListItemTitle.font.pixelSize: 17
+                title: "Leave community"
+                icon.name: "arrow-right"
+                icon.rotation: 180
+                type: StatusListItem.Type.Secondary
+            }
         }
     }
 
@@ -318,28 +840,27 @@ Rectangle {
             name: "#status"
             chatType: StatusChatListItem.Type.PublicChat
             muted: false
-            hasUnreadMessages: false
-            hasMention: false
             unreadMessagesCount: 0
-            iconColor: "blue"
+            mentionsCount: 0
+            color: "blue"
         }
         ListElement {
             chatId: "1"
-            name: "#status-desktop"
+            name: "status-desktop"
             chatType: StatusChatListItem.Type.PublicChat
             muted: false
-            hasUnreadMessages: true
-            iconColor: "red"
+            color: "red"
             unreadMessagesCount: 1
+            mentionsCount: 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"
+            color: "green"
+            identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
             unreadMessagesCount: 0
         }
         ListElement {
@@ -347,8 +868,7 @@ Rectangle {
             name: "Black Ops"
             chatType: StatusChatListItem.Type.GroupChat
             muted: false
-            hasUnreadMessages: false
-            iconColor: "purple"
+            color: "purple"
             unreadMessagesCount: 0
         }
         ListElement {
@@ -356,8 +876,15 @@ Rectangle {
             name: "Spectacular Growing Otter"
             chatType: StatusChatListItem.Type.OneToOneChat
             muted: true
-            hasUnreadMessages: false
-            iconColor: "Orange"
+            color: "Orange"
+            unreadMessagesCount: 0
+        }
+        ListElement {
+            chatId: "5"
+            name: "channel-with-a-super-duper-long-name"
+            chatType: StatusChatListItem.Type.PublicChat
+            muted: false
+            color: "green"
             unreadMessagesCount: 0
         }
     }
@@ -369,30 +896,131 @@ Rectangle {
             name: "general"
             chatType: StatusChatListItem.Type.CommunityChat
             muted: false
-            hasUnreadMessages: false
-            hasMention: false
             unreadMessagesCount: 0
-            iconColor: "orange"
+            color: "orange"
         }
         ListElement {
             chatId: "1"
             name: "random"
             chatType: StatusChatListItem.Type.CommunityChat
             muted: false
-            hasUnreadMessages: false
-            hasMention: false
             unreadMessagesCount: 0
-            iconColor: "orange"
+            color: "orange"
+            categoryId: "public"
         }
         ListElement {
             chatId: "2"
             name: "watercooler"
             chatType: StatusChatListItem.Type.CommunityChat
             muted: false
-            hasUnreadMessages: false
-            hasMention: false
             unreadMessagesCount: 0
-            iconColor: "orange"
+            color: "orange"
+            categoryId: "public"
+        }
+        ListElement {
+            chatId: "3"
+            name: "language-design"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            unreadMessagesCount: 0
+            color: "orange"
+            categoryId: "dev"
+        }
+    }
+
+    ListModel {
+        id: demoCommunityCategoryItems
+        ListElement {
+            categoryId: "public"
+            name: "Public"
+        }
+        ListElement {
+            categoryId: "dev"
+            name: "Development"
+        }
+    }
+
+    ListModel {
+        id: demoProfileGeneralMenuItems
+
+        ListElement {
+            title: "My Profile"
+            icon: "profile"
+        }
+
+        ListElement {
+            title: "Contacts"
+            icon: "contact"
+        }
+
+        ListElement {
+            title: "ENS Usernames"
+            icon: "username"
+        }
+
+    }
+
+    ListModel {
+        id: demoProfileSettingsMenuItems
+
+        ListElement {
+            title: "Privacy & Security"
+            icon: "security"
+        }
+
+        ListElement {
+            title: "Appearance"
+            icon: "appearance"
+        }
+
+        ListElement {
+            title: "Browser"
+            icon: "browser"
+        }
+
+        ListElement {
+            title: "Sounds"
+            icon: "sound"
+        }
+
+        ListElement {
+            title: "Language"
+            icon: "language"
+        }
+
+        ListElement {
+            title: "Notifications"
+            icon: "notification"
+        }
+
+        ListElement {
+            title: "Sync settings"
+            icon: "mobile"
+        }
+
+        ListElement {
+            title: "Advanced"
+            icon: "settings"
+        }
+
+    }
+
+    ListModel {
+        id: demoProfileOtherMenuItems
+
+        ListElement {
+            title: "Need help?"
+            icon: "help"
+        }
+
+        ListElement {
+            title: "About"
+            icon: "info"
+        }
+
+        ListElement {
+            title: "Sign out & Quit"
+            icon: "logout"
         }
     }
 }

sandbox/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,6 +277,24 @@ GridLayout {
         ]
     }
 
+    StatusListItem {
+        title: "Title"
+        icon.name: "info"
+        type: StatusListItem.Type.Secondary
+    }
+
+    StatusListItem {
+        title: "Title"
+        icon.isLetterIdenticon: true
+        icon.background.color: "orange"
+    }
+
+    StatusListItem {
+        title: "Title"
+        icon.name: "delete"
+        type: StatusListItem.Type.Danger
+    }
+
     StatusDescriptionListItem {
         title: "Title"
         subTitle: "Subtitle"
@@ -230,4 +308,8 @@ GridLayout {
         iconButton.onClicked: tooltip.visible = !tooltip.visible
     }
 
+    StatusContactRequestsIndicatorListItem {
+        title: "Contact requests"
+        requestsCount: 3
+    }
 }

sandbox/Popups.qml

@@ -0,0 +1,237 @@
+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()
+    }
+
+    StatusModal {
+        id: simpleModal
+        anchors.centerIn: parent
+        header.title: "Some Title"
+        header.subTitle: "Subtitle"
+    }
+
+    StatusModal {
+        id: headerImageModal
+        anchors.centerIn: parent
+        header.title: "Some Title"
+        header.subTitle: "Subtitle"
+        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+    }
+
+    StatusModal {
+        id: footerButtonsModal
+        anchors.centerIn: parent
+        header.title: "Some Title"
+        header.subTitle: "Subtitle"
+        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        leftButtons: [
+            StatusRoundButton {
+                icon.name: "arrow-right"
+                rotation: 180
+            }
+        ]
+        rightButtons: [
+            StatusButton {
+                text: "Button"
+            },
+            StatusButton {
+                text: "Button"
+            }
+        ]
+    }
+
+    StatusModal {
+        id: headerActionButtonModal
+        anchors.centerIn: parent
+        header.title: "Some Title"
+        header.subTitle: "Subtitle"
+        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+
+        headerActionButton: StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Secondary
+            width: 32
+            height: 32
+
+            icon.width: 20
+            icon.height: 20
+            icon.name: "info"
+        }
+
+        leftButtons: [
+            StatusRoundButton {
+                icon.name: "arrow-right"
+                rotation: 180
+            }
+        ]
+        rightButtons: [
+            StatusButton {
+                text: "Button"
+            },
+            StatusButton {
+                text: "Button"
+            }
+        ]
+    }
+
+    StatusModal {
+        id: modalExample
+        anchors.centerIn: parent
+        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        header.title: "Header"
+        header.subTitle: "SubTitle"
+        rightButtons: [
+            StatusButton {
+                text: "Button"
+            },
+            StatusButton {
+                text: "Button"
+            }
+        ]
+
+        leftButtons: [
+            StatusRoundButton {
+                icon.name: "arrow-right"
+                rotation: 180
+            }
+        ]
+
+        content: StatusBaseText {
+            anchors.centerIn: parent
+            text: "Some text content"
+            font.pixelSize: 15
+            color: Theme.palette.directColor1
+        }
+
+        headerActionButton: StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Secondary
+            width: 32
+            height: 32
+
+            icon.width: 20
+            icon.height: 20
+            icon.name: "info"
+        }
+    }
+
+    StatusModal {
+        id: modalWithContentAccess
+        anchors.centerIn: parent
+        header.title: "Header"
+        header.subTitle: "SubTitle"
+
+        content: StatusBaseText {
+            id: text
+            anchors.centerIn: parent
+            text: "Some text content"
+            font.pixelSize: 15
+            color: Theme.palette.directColor1
+        }
+
+        rightButtons: [
+            StatusButton {
+                text: "Change text"
+                onClicked: {
+                    modalWithContentAccess.contentComponent.text = "Changed!"
+                }
+            }
+        ]
+    }
+
+    StatusModal {
+        id: modalWithLetterIdenticon
+        anchors.centerIn: parent
+        header.title: "Header"
+        header.subTitle: "SubTitle"
+        header.icon.isLetterIdenticon: true
+        header.icon.background.color: "red"
+
+        content: StatusBaseText {
+            id: text
+            anchors.centerIn: parent
+            text: "Some text content"
+            font.pixelSize: 15
+            color: Theme.palette.directColor1
+        }
+
+        rightButtons: [
+            StatusButton {
+                text: "Change text"
+                onClicked: {
+                    modalWithContentAccess.contentComponent.text = "Changed!"
+                }
+            }
+        ]
+    }
+
+    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
+
+        content: StatusBaseText {
+            id: text
+            anchors.centerIn: parent
+            text: "Some text content"
+            font.pixelSize: 15
+            color: Theme.palette.directColor1
+        }
+
+        rightButtons: [
+            StatusButton {
+                text: "Change text"
+                onClicked: {
+                    modalWithContentAccess.contentComponent.text = "Changed!"
+                }
+            }
+        ]
+    }
+}

sandbox/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/StatusInputPage.qml

@@ -0,0 +1,86 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+import Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    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 {
+        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 { 
@@ -40,32 +47,103 @@ GridLayout {
     StatusPopupMenu {
         id: complexMenu
         subMenuItemIcons: ['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: [
+            "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/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,21 +118,21 @@ 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
@@ -141,23 +143,39 @@ StatusWindow {
                             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" }
+                        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 +183,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 +241,11 @@ StatusWindow {
         Controls {}
     }
 
+    Component {
+        id: statusInputPageComponent
+        StatusInputPage {}
+    }
+
     Component {
         id: listItemsComponent
         ListItems {}
@@ -250,6 +271,16 @@ StatusWindow {
         StatusPopupMenuPage {}
     }
 
+    Component {
+        id: chatInfoToolBarComponent
+        StatusChatInfoToolBarPage {}
+    }
+
+    Component {
+        id: statusModalComponent
+        Popups {}
+    }
+
     Component {
         id: demoAppCmp
 

sandbox/qml.qrc

@@ -5,5 +5,13 @@
         <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>
     </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

@@ -9,30 +9,98 @@ Column {
     id: statusChatList
 
     spacing: 4
+    width: 288
 
+    property string categoryId: ""
     property string selectedChatId: ""
     property alias chatListItems: statusChatListItems
 
+    property Component popupMenu
+
+    property var filterFn
+    property var profileImageFn
+    property var chatNameFn
+
     signal chatItemSelected(string id)
     signal chatItemUnmuted(string id)
 
+    onPopupMenuChanged: {
+        if (!!popupMenu) {
+            popupMenuSlot.sourceComponent = popupMenu
+        }
+    }
+
     Repeater {
         id: statusChatListItems
         delegate: StatusChatListItem {
-            chatId: model.chatId
-            name: model.name
+
+            id: statusChatListItem
+
+            property string profileImage: ""
+
+            Component.onCompleted: {
+                if (typeof statusChatList.profileImageFn === "function") {
+                    profileImage = statusChatList.profileImageFn(model.chatId || model.id) || ""
+                }
+            }
+
+            chatId: model.chatId || model.id
+            name: !!statusChatList.chatNameFn ? statusChatList.chatNameFn(model) : model.name
             type: model.chatType
             muted: !!model.muted
-            hasUnreadMessages: !!model.hasUnreadMessages
-            hasMention: !!model.hasMention
-            badge.value: model.unreadMessagesCount || 0
-            selected: model.chatId === statusChatList.selectedChatId
+            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.iconColor || ""
-            image.source: model.identicon || ""
+            icon.color: model.color || ""
+            image.isIdenticon: !!!profileImage && !!!model.identityImage && !!model.identicon
+            image.source: profileImage || model.identityImage || model.identicon || ""
 
-            onClicked: statusChatList.chatItemSelected(model.chatId)
-            onUnmute: statusChatList.chatItemUnmuted(model.chatId)
+            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)
+            visible: {
+                if (!!statusChatList.filterFn) {
+                    return statusChatList.filterFn(model, statusChatList.categoryId)
+                }
+                return true
+            }
         }
     }
+
+    Loader {
+        id: popupMenuSlot
+        active: !!statusChatList.popupMenu
+    }
 }

src/StatusQ/Components/StatusChatListAndCategories.qml

@@ -0,0 +1,93 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+
+Item {
+    id: statusChatListAndCategories
+
+    implicitHeight: chatListsAndCategories.height
+    implicitWidth: chatListsAndCategories.width
+
+    property string selectedChatId: ""
+    property bool showCategoryActionButtons: false
+    property bool showPopupMenu: true
+    property alias chatList: statusChatList.chatListItems
+    property alias categoryList: statusChatListCategories
+    property alias sensor: sensor
+
+    property Component categoryPopupMenu
+    property Component chatListPopupMenu
+    property Component popupMenu
+
+    signal chatItemSelected(string id)
+    signal chatItemUnmuted(string id)
+    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.model && chatListItems.count > 0
+                selectedChatId: statusChatListAndCategories.selectedChatId
+                onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
+                onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
+                filterFn: function (model) {
+                    return !!!model.categoryId
+                }
+                popupMenu: statusChatListAndCategories.chatListPopupMenu
+            }
+
+            Repeater {
+                id: statusChatListCategories
+                visible: !!model && model.count > 0
+
+                delegate: StatusChatListCategory {
+                    categoryId: model.categoryId
+                    name: model.name
+                    showActionButtons: statusChatListAndCategories.showCategoryActionButtons
+                    addButton.onClicked: statusChatListAndCategories.categoryAddButtonClicked(model.categoryId)
+
+                    chatList.chatListItems.model: statusChatListAndCategories.chatList.model
+                    chatList.selectedChatId: statusChatListAndCategories.selectedChatId
+                    chatList.onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
+                    chatList.onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
+
+                    popupMenu: statusChatListAndCategories.categoryPopupMenu
+                    chatListPopupMenu: statusChatListAndCategories.chatListPopupMenu
+                }
+            }
+        }
+    }
+
+    Loader {
+        id: popupMenuSlot
+        active: !!statusChatListAndCategories.popupMenu
+    }
+}

src/StatusQ/Components/StatusChatListCategory.qml

@@ -12,11 +12,13 @@ Column {
     property string name: ""
     property bool opened: true
 
+    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 Component chatListPopupMenu
     property Component popupMenu
 
     onPopupMenuChanged: {
@@ -30,8 +32,10 @@ Column {
         title: statusChatListCategory.name
         opened: statusChatListCategory.opened
 
+        showMenuButton: showActionButtons && !!statusChatListCategory.popupMenu
+
         onClicked: {
-            if (mouse.button === Qt.RightButton) {
+            if (mouse.button === Qt.RightButton && showActionButtons && !!statusChatListCategory.popupMenu) {
                 highlighted = true
                 popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6)
                 return
@@ -50,18 +54,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,6 +16,9 @@ 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
@@ -39,7 +42,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 +52,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

@@ -18,19 +18,23 @@ Rectangle {
         color: Theme.palette.miscColor5
     }
     property int type: StatusChatListItem.Type.PublicChat
+    property bool highlighted: false
     property bool selected: false
 
     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,7 +43,7 @@ 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
     }
 
     MouseArea {
@@ -47,6 +51,7 @@ Rectangle {
 
         anchors.fill: parent
         cursorShape: Qt.PointingHandCursor 
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
         hoverEnabled: true
 
         onClicked: statusChatListItem.clicked(mouse)
@@ -83,6 +88,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,12 +111,13 @@ 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 ||
+                  statusChatListItem.highlighted ||
                   statusBadge.visible ||
                   sensor.containsMouse ? 1.0 : 0.7
             }
@@ -132,40 +143,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 ||
+                  statusChatListItem.highlighted ||
                   sensor.containsMouse ||
                   statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
             }
-            font.weight: statusChatListItem.hasMention || 
+            font.weight: !statusChatListItem.muted &&
+              (statusChatListItem.hasMention || 
               statusChatListItem.hasUnreadMessages ||
-              statusBadge.visible ? Font.Bold : Font.Medium
+              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
@@ -186,5 +194,19 @@ 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,13 +14,19 @@ 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
+    // Used to understand if the tooltip is in the corner of the screen
+    property bool isCorner: true
 
     property Component popupMenu
 
     signal chatInfoButtonClicked()
     signal menuButtonClicked()
     signal notificationButtonClicked()
+    signal membersButtonClicked()
+    signal searchButtonClicked()
 
     onPopupMenuChanged: {
         if (!!popupMenu) {
@@ -44,6 +50,38 @@ Rectangle {
 
         spacing: 8
 
+        StatusFlatRoundButton {
+            id: searchButton
+            width: 32
+            height: 32
+            icon.name: "search"
+            type: StatusFlatRoundButton.Type.Secondary
+            onClicked: statusChatToolBar.searchButtonClicked()
+
+            StatusToolTip {
+                visible: !!text && parent.hovered
+                text: "Search"
+                orientation: StatusToolTip.Orientation.Bottom
+                y: parent.height + 12
+            }
+        }
+
+        StatusFlatRoundButton {
+            id: membersButton
+            width: 32
+            height: 32
+            icon.name: "group-chat"
+            type: StatusFlatRoundButton.Type.Secondary
+            onClicked: statusChatToolBar.membersButtonClicked()
+
+            StatusToolTip {
+                visible: !!text && parent.hovered
+                text: "Members"
+                orientation: StatusToolTip.Orientation.Bottom
+                y: parent.height + 12
+            }
+        }
+
         StatusFlatRoundButton {
             id: menuButton
             width: 32
@@ -52,11 +90,34 @@ Rectangle {
             type: StatusFlatRoundButton.Type.Secondary
             visible: !!statusChatToolBar.popupMenu
 
+            property bool showMoreMenu: false
             onClicked: {
-                statusChatToolBar.menuButtonClicked()
+                if (showMoreMenu) {
+                    popupMenuSlot.item.popup(-popupMenuSlot.item.width + menuButton.width, menuButton.height + 4)
+                }
                 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)
+                statusChatToolBar.menuButtonClicked()
+            }
+
+            onPressed: {
+                showMoreMenu = !showMoreMenu;
+            }
+
+            StatusToolTip {
+                visible: !!text && parent.hovered && !popupMenuSlot.item.opened
+                text: "More"
+                orientation: StatusToolTip.Orientation.Bottom
+                y: parent.height + 12
+            }
+
+            Loader {
+                id: popupMenuSlot
+                active: !!statusChatToolBar.popupMenu
+                onLoaded: {
+                    popupMenuSlot.item.closeHandler = function () {
+                        menuButton.highlighted = false
+                    }
+                }
             }
         }
 
@@ -65,7 +126,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 {
@@ -100,18 +162,16 @@ Rectangle {
                 border.width: 2
                 border.color: parent.hovered ? Theme.palette.baseColor2 : Theme.palette.statusAppLayout.backgroundColor
             }
-        }
 
-    }
-
-    Loader {
-        id: popupMenuSlot
-        active: !!statusChatToolBar.popupMenu
-        onLoaded: {
-            popupMenuSlot.item.closeHandler = function () {
-                menuButton.highlighted = false
+            StatusToolTip {
+                visible: !!text && parent.hovered
+                text: "Activity"
+                orientation: StatusToolTip.Orientation.Bottom
+                y: parent.height + 12
+                cornerToolTip: isCorner
             }
         }
+
     }
 }
 

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

@@ -8,29 +8,72 @@ 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 title: ""
     property string subTitle: ""
+    property string tertiaryTitle: ""
     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
@@ -46,8 +89,9 @@ 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
 
@@ -55,9 +99,17 @@ Rectangle {
             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 +118,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 +130,84 @@ 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: statusListItemTitle.height + 
+              (statusListItemSubTitle.visible ? statusListItemSubTitle.height : 0) +
+              (statusListItemTertiaryTitle.visible ? statusListItemTertiaryTitle.height : 0)
 
             StatusBaseText {
                 id: statusListItemTitle
                 text: statusListItem.title
+                width: parent.width
                 font.pixelSize: 15
-                color: Theme.palette.directColor1
+                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
+                  }
+                }
             }
 
             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
                 visible: !!statusListItem.subTitle
+                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+            }
+
+            StatusBaseText {
+                id: statusListItemTertiaryTitle
+                anchors.top: statusListItemSubTitle.bottom
+                width: parent.width
+                text: statusListItem.tertiaryTitle
+                color: Theme.palette.baseColor1
+                font.pixelSize: 13
+                visible: !!statusListItem.tertiaryTitle
+                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
             }
         }
 
         StatusBaseText {
+            id: statusListItemLabel
             anchors.verticalCenter: parent.verticalCenter
             anchors.right: statusListItemComponentsSlot.left
             anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0

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

@@ -17,6 +17,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,21 @@
 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

src/StatusQ/Controls/StatusBaseInput.qml

@@ -0,0 +1,201 @@
+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 text: edit.text
+
+    property alias color: edit.color
+    property alias font: edit.font
+    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 bool valid: true
+
+    property StatusIconSettings icon: StatusIconSettings {
+        width: 24
+        height: 24
+        name: ""
+    }
+
+    implicitWidth: 448
+    implicitHeight: multiline ? Math.max(edit.implicitHeight + topPadding + bottomPadding, 44) : 44
+
+    Rectangle {
+        width: parent.width
+        height: maximumHeight != 0 ? Math.min(
+                                        minimumHeight != 0 ? Math.max(statusBaseInput.implicitHeight, minimumHeight)
+                                                          : implicitHeight,
+                                         maximumHeight)
+                                  : parent.height
+        color: Theme.palette.baseColor2
+        radius: 8
+
+        clip: true
+
+        border.width: 1
+        border.color: {
+            if (!statusBaseInput.valid) {
+                return Theme.palette.dangerColor1;
+            }
+            if (edit.activeFocus) {
+                return Theme.palette.primaryColor1;
+            }
+            return sensor.containsMouse ? Theme.palette.primaryColor2 : "transparent"
+        }
+
+        MouseArea {
+            id: sensor
+            hoverEnabled: true
+            anchors.fill: parent
+            cursorShape: Qt.IBeamCursor
+            onClicked: edit.forceActiveFocus()
+
+            StatusIcon {
+                id: statusIcon
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: parent.left
+                anchors.leftMargin: 10
+                anchors.topMargin: 10
+
+                icon: statusBaseInput.icon.name
+                width: statusBaseInput.icon.width
+                height: statusBaseInput.icon.height
+                color: Theme.palette.baseColor1
+                visible: !!statusBaseInput.icon.name
+            }
+
+            Flickable {
+                id: flick
+
+                anchors.top: parent.top
+                anchors.bottom: parent.bottom
+                anchors.left: statusIcon.visible ? statusIcon.right : parent.left
+                anchors.right: parent.right
+                anchors.leftMargin: statusIcon.visible ? 8 : statusBaseInput.leftPadding
+                anchors.rightMargin: statusBaseInput.rightPadding + clearable ? clearButtton.width : 0
+                anchors.topMargin: statusBaseInput.topPadding
+                anchors.bottomMargin: statusBaseInput.bottomPadding
+                contentWidth: edit.paintedWidth
+                contentHeight: edit.paintedHeight
+                clip: true
+
+                QC.ScrollBar.vertical: QC.ScrollBar { interactive: multiline }
+
+
+                function ensureVisible(r) {
+                    if (contentX >= r.x)
+                        contentX = r.x;
+                    else if (contentX+width <= r.x+r.width)
+                        contentX = r.x+r.width-width;
+                    if (contentY >= r.y)
+                        contentY = r.y;
+                    else if (contentY+height <= r.y+r.height)
+                        contentY = r.y+r.height-height;
+                }
+
+
+
+                TextEdit {
+                    id: edit
+                    width: flick.width
+                    selectByMouse: true
+                    selectionColor: Theme.palette.primaryColor2
+                    selectedTextColor: color
+                    anchors.verticalCenter: parent.verticalCenter
+                    focus: true
+
+                    font.pixelSize: 15
+                    font.family: Theme.palette.baseFont.name
+                    color: Theme.palette.directColor1
+
+                    onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
+                    wrapMode: TextEdit.NoWrap
+
+                    Keys.onReturnPressed: {
+                        if (multiline) {
+                            event.accepted = false
+                        } else {
+                            event.accepted = true
+                        }
+                    }
+
+                    Keys.onEnterPressed: {
+                        if (multiline) {
+                            event.accepted = false
+                        } else {
+                            event.accepted = true
+                        }
+                    }
+
+                    StatusBaseText {
+                        id: placeholder
+                        visible: edit.text.length === 0
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        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
+
+    } // Rectangle
+
+    StatusFlatRoundButton {
+        id: clearButtton
+        visible: edit.text.length != 0 && 
+            statusBaseInput.clearable && 
+            !statusBaseInput.multiline &&
+            edit.activeFocus
+        anchors.right: parent.right
+        anchors.rightMargin: 11
+        anchors.verticalCenter: parent.verticalCenter
+        type: StatusFlatRoundButton.Type.Secondary
+        width: 14
+        height: 14
+        icon.name: "clear"
+        icon.width: 14
+        icon.height: 14
+        icon.color: Theme.palette.baseColor1
+        onClicked: {
+            edit.clear()
+        }
+    }
+
+}

src/StatusQ/Controls/StatusChatInfoButton.qml

@@ -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)
 
@@ -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,6 +99,7 @@ Rectangle {
         Item {
             id: statusChatInfoButtonTitle
             anchors.top: identicon.top
+            anchors.topMargin: statusChatInfoButtonSubTitle.visible ? 0 : 8
             anchors.left: identicon.right
             anchors.leftMargin: 8
 
@@ -132,7 +139,10 @@ Rectangle {
                 anchors.leftMargin: statusIcon.visible ? 1 : 0
                 anchors.top: parent.top
 
-                text: statusChatInfoButton.title
+                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
@@ -171,7 +181,8 @@ Rectangle {
             id: statusChatInfoButtonSubTitle
             anchors.left: statusChatInfoButtonTitle.left
             anchors.top: statusChatInfoButtonTitle.bottom
-            height: chatType.height
+            visible: !!statusChatInfoButton.subTitle || statusChatInfoButton.pinnedMessagesCount > 0
+            height: visible ? chatType.height : 0
             width: childrenRect.width
 
             StatusBaseText {
@@ -189,13 +200,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

src/StatusQ/Controls/StatusFlatRoundButton.qml

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

src/StatusQ/Controls/StatusInput.qml

@@ -0,0 +1,92 @@
+import QtQuick 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+Rectangle {
+    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
+
+    color: "transparent"
+    property alias input: statusBaseInput
+    property string label: ""
+    property int charLimit: 0
+    property string errorMessage: ""
+
+    StatusBaseText {
+        id: label
+        height: visible ? implicitHeight : 0
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.topMargin: visible ? 8 : 0
+        anchors.leftMargin: 16
+        anchors.right: charLimitLabel.visible ? charLimitLabel.left : parent.right
+        anchors.rightMargin: 16
+        visible: !!root.label
+        elide: Text.ElideRight
+
+        text: root.label
+        font.pixelSize: 15
+        color: statusBaseInput.enabled ? Theme.palette.directColor1 : 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:  label.visible ? label.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
+    }
+
+    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/StatusToolTip.qml

@@ -13,8 +13,10 @@ ToolTip {
         Right
     }
 
+    property bool cornerToolTip: false
     property int maxWidth: 800
     property int orientation: StatusToolTip.Orientation.Top
+    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,7 +42,7 @@ ToolTip {
             radius: 1
             x: {
                 if (orientation === StatusToolTip.Orientation.Top || orientation === StatusToolTip.Orientation.Bottom) {
-                    return statusToolTipBackground.width / 2 - width / 2
+                    return cornerToolTip ? (statusToolTip.x + statusToolTip.width) : (statusToolTipBackground.width / 2 - arrow.width / 2)
                 }
                 if (orientation === StatusToolTip.Orientation.Left) {
                     return statusToolTipContentBackground.width - (width / 2) - 8

src/StatusQ/Controls/qmldir

@@ -14,3 +14,6 @@ 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

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,18 @@
+import QtQuick 2.14
+
+QtObject {
+    property string title
+    property string subTitle
+
+    property StatusImageSettings image: StatusImageSettings {
+        width: 40
+        height: 40
+        isIdenticon: false
+    }
+
+    property StatusIconSettings icon: StatusIconSettings {
+        width: 40
+        height: 40
+        isLetterIdenticon: false
+    }
+}

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

@@ -132,6 +132,7 @@ ThemePalette {
 
     property QtObject statusListItem: QtObject {
         property color backgroundColor: baseColor3
+        property color secondaryHoverBackgroundColor: primaryColor3
     }
 
     property QtObject statusChatListItem: QtObject {
@@ -163,5 +164,17 @@ 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"
+    }
 }
 

src/StatusQ/Core/Theme/StatusLightTheme.qml

@@ -130,6 +130,7 @@ ThemePalette {
 
     property QtObject statusListItem: QtObject {
         property color backgroundColor: white
+        property color secondaryHoverBackgroundColor: getColor('blue6')
     }
 
     property QtObject statusChatListItem: QtObject {
@@ -161,5 +162,17 @@ 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"
+    }
 }
 

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
@@ -91,6 +92,7 @@ QtObject {
 
     property QtObject statusListItem: QtObject {
         property color backgroundColor
+        property color secondaryHoverBackgroundColor
     }
 
     property QtObject statusChatListItem: QtObject {
@@ -124,6 +126,18 @@ 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
+    }
+
     function alphaColor(color, alpha) {
         let actualColor = Qt.darker(color, 1)
         actualColor.a = alpha

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
 

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,54 @@
+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 ? 50 : 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/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,72 @@
+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 Component content
+
+    property alias headerActionButton: headerImpl.actionButton
+
+    property StatusModalHeaderSettings header: StatusModalHeaderSettings {}
+    property alias contentComponent: contentLoader.item
+    property alias rightButtons: footerImpl.rightButtons
+    property alias leftButtons: footerImpl.leftButtons
+
+    signal editButtonClicked()
+
+    parent: QC.Overlay.overlay
+
+    width: 480
+    height: contentItem.implicitHeight
+
+    margins: 0
+    padding: 0
+
+    modal: true
+
+    QC.Overlay.modal: Rectangle {
+        color: Theme.palette.backdropColor
+    }
+
+
+    background: Rectangle {
+        color: Theme.palette.statusModal.backgroundColor
+        radius: 8
+    }
+
+    contentItem: Column {
+        width: parent.width
+        Spares.StatusModalHeader {
+            id: headerImpl
+            width: 480
+
+            title: header.title
+            subTitle: header.subTitle
+            image: header.image
+            icon: header.icon
+
+            onEditButtonClicked: statusModal.editButtonClicked()
+            onClose: statusModal.close()
+        }
+
+        Loader {
+            id: contentLoader
+            active: true
+            anchors.horizontalCenter: parent.horizontalCenter
+            sourceComponent: statusModal.content
+        }
+
+        Spares.StatusModalFooter {
+            id: footerImpl
+            width: 480
+        }
+    }
+}

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,6 +4,7 @@ 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
 
 
@@ -16,8 +17,15 @@ Menu {
 
     property int menuItemCount: 0
     property var subMenuItemIcons: []
+    property var openHandler
     property var closeHandler
 
+    onOpened: {
+        if (typeof openHandler === "function") {
+            openHandler()
+        }
+    }
+
     onClosed: {
         if (typeof closeHandler === "function") {
             closeHandler()
@@ -47,13 +55,27 @@ 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) {
+                            return statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex]
+                        }
+                        return statusPopupMenuItem.action.icon.name ||
+                          statusPopupMenuItem.action.iconSettings.name
+                    }   
                     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 +88,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 +183,7 @@ Menu {
         }
 
         arrow: StatusIcon {
+            id: arrowIcon
             anchors.verticalCenter: parent.verticalCenter
             anchors.right: parent.right
             anchors.rightMargin: 8
@@ -153,5 +238,4 @@ Menu {
             }
         }
     }
-
 }

src/StatusQ/Popups/qmldir

@@ -3,3 +3,6 @@ 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
+StatusModalDivider 0.1 StatusModalDivider.qml

src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml

@@ -0,0 +1,114 @@
+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 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
+
+        Row {
+            spacing: 4
+            StatusBaseText {
+                id: headerTitle
+                font.family: Theme.palette.baseFont.name
+                font.pixelSize: 17
+                font.bold: true
+                color: Theme.palette.directColor1
+            }
+            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
+        }
+    }
+}

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: rootLayout.implicitHeight + 30
+
+    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,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: statusModalHeader
+
+    property alias title: imageWithTitle.title
+    property alias subTitle: imageWithTitle.subTitle
+    property alias actionButton: actionButtonLoader.sourceComponent
+
+    property alias image: imageWithTitle.image
+    property alias icon: imageWithTitle.icon
+    property bool editable: false
+
+    signal editButtonClicked
+    signal close
+
+    implicitHeight: Math.max(closeButton.height, imageWithTitle.implicitHeight) + 32
+    implicitWidth: 480
+
+    radius: 16
+
+    color: Theme.palette.statusModal.backgroundColor
+
+    StatusImageWithTitle {
+        id: imageWithTitle
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+
+        editable: statusModalHeader.editable
+        onEditButtonClicked: statusModalHeader.editButtonClicked()
+    }
+
+    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
+        }
+    }
+}

src/assets/img/icons/pencil.svg

@@ -0,0 +1,4 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.100954 12.5959L0.798362 9.80623C0.830588 9.67733 0.871226 9.55116 0.919852 9.42847C0.981714 9.27239 1.18145 9.24231 1.30017 9.36102L3.63897 11.6998C3.75769 11.8185 3.7276 12.0183 3.57152 12.0801C3.44883 12.1288 3.32266 12.1694 3.19376 12.2016L0.404123 12.899C0.221028 12.9448 0.0551798 12.779 0.100954 12.5959Z" fill="black"/>
+<path d="M4.32312 10.2627C4.71364 10.6532 5.34681 10.6532 5.73733 10.2627L12.2928 3.7072C12.6833 3.31668 12.6833 2.68351 12.2928 2.29299L10.707 0.7072C10.3165 0.316676 9.68332 0.316675 9.29279 0.707199L2.73733 7.26266C2.34681 7.65318 2.34681 8.28635 2.73733 8.67687L4.32312 10.2627Z" fill="black"/>
+</svg>

src/assets/img/icons/profile.svg

@@ -1,5 +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 13C13.933 13 15.5 11.433 15.5 9.5C15.5 7.567 13.933 6 12 6C10.067 6 8.5 7.567 8.5 9.5C8.5 11.433 10.067 13 12 13ZM12 11.5C13.1046 11.5 14 10.6046 14 9.5C14 8.39543 13.1046 7.5 12 7.5C10.8954 7.5 10 8.39543 10 9.5C10 10.6046 10.8954 11.5 12 11.5Z" fill="black"/>
-<path d="M16.4465 16.2731C16.8119 16.5572 16.822 17.0954 16.4657 17.3909C16.1611 17.6435 15.723 17.6 15.4043 17.3655C14.4513 16.6643 13.2741 16.25 12.0002 16.25C10.7262 16.25 9.54901 16.6643 8.59597 17.3655C8.27728 17.6 7.83919 17.6435 7.53463 17.3909C7.17828 17.0954 7.18836 16.5572 7.55383 16.2731C8.78161 15.3185 10.3245 14.75 12.0002 14.75C13.6758 14.75 15.2187 15.3185 16.4465 16.2731Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5Z" fill="black"/>
+<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="black"/>
+<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="black"/>
 </svg>

src/assets/img/icons/public-chat.svg

@@ -1,4 +1,3 @@
-<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.82051 5.10748C10.148 4.98152 10.5 5.22326 10.5 5.57415V11.4259C10.5 11.7768 10.148 12.0185 9.8205 11.8925L8.20145 11.2698C8.01814 11.1993 7.8324 11.1356 7.6446 11.0788C7.38272 10.9996 7.11478 11.164 7.04842 11.4294L6.66417 12.9664C6.36119 14.1784 4.63882 14.1784 4.33583 12.9664L3.74837 10.6166C3.70074 10.4261 3.54598 10.2811 3.35275 10.2459L2.82112 10.1493C2.34563 10.0628 2 9.64869 2 9.16541V7.83456C2 7.35127 2.34562 6.93714 2.82111 6.85069L6.76064 6.13441C7.25246 6.04499 7.73482 5.90967 8.20139 5.73022L9.82051 5.10748Z" fill="black"/>
-<path d="M12.3205 12.8541C12.1274 12.7798 12 12.5943 12 12.3874V4.61261C12 4.40573 12.1274 4.22021 12.3205 4.14594L12.641 4.02267C13.296 3.77074 14 4.25423 14 4.95601V12.0441C14 12.7458 13.296 13.2293 12.641 12.9774L12.3205 12.8541Z" fill="black"/>
+<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="M2 10.7149C2 9.17362 3.16788 7.88312 4.70149 7.72976L8.33775 7.36613C10.7589 7.12402 13.1156 6.44212 15.292 5.35393L19.1056 3.44712C20.4354 2.78222 22 3.74921 22 5.23598V16.7638C22 18.2506 20.4354 19.2176 19.1056 18.5527L15.292 16.6459C14.6768 16.3383 14.0473 16.0632 13.406 15.8213C13.0859 15.7006 12.75 15.9414 12.75 16.2836V18.5C12.75 19.7426 11.7426 20.75 10.5 20.75H10C7.92893 20.75 6.25 19.0711 6.25 17V14.8774C6.25 14.6205 6.05535 14.4054 5.79975 14.3799L4.70149 14.2701C3.16789 14.1167 2 12.8262 2 11.2849V10.7149ZM20.5 5.23598V16.7638C20.5 17.1355 20.1088 17.3773 19.7764 17.2111L15.9628 15.3042C13.6232 14.1345 11.0898 13.4014 8.48701 13.1411L4.85075 12.7775C4.08394 12.7008 3.5 12.0556 3.5 11.2849V10.7149C3.5 9.94424 4.08394 9.299 4.85074 9.22232L8.48701 8.85869C11.0898 8.59841 13.6232 7.86537 15.9628 6.69558L19.7764 4.78877C20.1088 4.62254 20.5 4.86429 20.5 5.23598ZM8.29975 14.6299C8.00541 14.6005 7.75 14.8316 7.75 15.1274V17C7.75 18.2426 8.75736 19.25 10 19.25H10.5C10.9142 19.25 11.25 18.9142 11.25 18.5V15.5339C11.25 15.3049 11.0947 15.1046 10.8717 15.0528C10.0384 14.8593 9.19211 14.7191 8.33775 14.6337L8.29975 14.6299Z" fill="black"/>
 </svg>

src/assets/img/icons/thumbs-down.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 d="M19.9468 9.04834C19.9468 6.46289 18.2915 4.34619 16.1675 4.34619H13.7578C12.769 3.84082 11.5972 3.54785 10.3081 3.54785H9.28271C8.33057 3.54785 7.51758 3.60645 6.99023 3.73828C5.91357 4.00195 5.23242 4.771 5.23242 5.73047C5.23242 5.89893 5.26172 6.06006 5.30566 6.21387C4.80029 6.60938 4.51465 7.18066 4.51465 7.81055C4.51465 8.10352 4.57324 8.38916 4.67578 8.63086C4.33887 8.98975 4.14111 9.50977 4.14111 10.0444C4.14111 10.396 4.229 10.7549 4.37549 11.0332C4.17041 11.3408 4.05322 11.7583 4.05322 12.2197C4.05322 13.3916 4.94678 14.2925 6.104 14.2925H8.82861C8.98242 14.2925 9.08496 14.3657 9.07764 14.5049C9.04102 15.2593 7.85449 17.0757 7.85449 18.5625C7.85449 19.6538 8.62354 20.4521 9.68555 20.4521C10.4546 20.4521 10.9819 20.0493 11.4873 19.0898C12.4028 17.332 13.5015 15.7939 15.1348 13.7798H16.4458C18.438 13.7798 19.9468 11.6777 19.9468 9.04834ZM15.3838 9.10693C15.3838 10.6597 15.0396 11.6484 14.0435 12.9814C12.9375 14.4609 11.3994 16.248 10.2935 18.46C10.0591 18.9214 9.89795 19.0312 9.6709 19.0312C9.39258 19.0312 9.20947 18.8335 9.20947 18.4819C9.20947 17.3979 10.4473 15.5815 10.4473 14.3877C10.4473 13.5088 9.73682 12.9375 8.77002 12.9375H6.14062C5.71582 12.9375 5.40088 12.6226 5.40088 12.1978C5.40088 11.8975 5.50342 11.6997 5.75244 11.4507C5.94287 11.2529 5.97217 10.9746 5.80371 10.7842C5.59131 10.4839 5.50342 10.2935 5.50342 10.0444C5.50342 9.74414 5.64258 9.48779 5.93555 9.26807C6.18457 9.09229 6.27246 8.79199 6.12598 8.49902C5.97217 8.20605 5.8916 8.05225 5.8916 7.8252C5.8916 7.47363 6.11865 7.20264 6.57275 6.96094C6.81445 6.8291 6.88037 6.57275 6.77783 6.33838C6.62402 5.96484 6.60205 5.89893 6.60938 5.73779C6.60938 5.42285 6.83643 5.17383 7.32715 5.04932C7.75928 4.93945 8.44775 4.89551 9.35596 4.90283L10.3008 4.91016C13.333 4.93945 15.3838 6.63867 15.3838 9.10693ZM18.6211 9.04834C18.6211 10.9087 17.6616 12.3955 16.563 12.4395C16.3726 12.4468 16.1821 12.4468 15.9917 12.4468C16.5117 11.4287 16.7388 10.374 16.7388 9.10693C16.7388 7.75928 16.27 6.57275 15.4204 5.64258C15.6914 5.64258 15.9697 5.6499 16.248 5.6499C17.5298 5.70117 18.6211 7.20264 18.6211 9.04834Z" fill="black"/>
+</svg>

src/assets/img/icons/thumbs-up.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 d="M4.05322 14.9517C4.05322 17.5371 5.7085 19.6538 7.83252 19.6538H10.2422C11.231 20.1592 12.4028 20.4521 13.6919 20.4521H14.7173C15.6694 20.4521 16.4824 20.3936 17.0098 20.2617C18.0864 19.9907 18.7676 19.229 18.7676 18.2695C18.7676 18.0938 18.7456 17.9399 18.6943 17.7788C19.1997 17.3906 19.4854 16.812 19.4854 16.1821C19.4854 15.8892 19.4268 15.6035 19.3242 15.3618C19.6611 15.0029 19.8589 14.4902 19.8589 13.9556C19.8589 13.5967 19.771 13.2451 19.6245 12.9668C19.8296 12.6519 19.9468 12.2344 19.9468 11.7803C19.9468 10.6084 19.0532 9.70752 17.896 9.70752H15.1714C15.0176 9.70752 14.915 9.63428 14.9224 9.49512C14.959 8.7334 16.1455 6.92432 16.1455 5.4375C16.1455 4.34619 15.3765 3.54785 14.3145 3.54785C13.5454 3.54785 13.0181 3.95068 12.5127 4.91016C11.6045 6.66797 10.4985 8.20605 8.86523 10.2129H7.5542C5.56201 10.2129 4.05322 12.3223 4.05322 14.9517ZM8.61621 14.8931C8.61621 13.3403 8.96045 12.3442 9.95654 11.0186C11.0625 9.53174 12.6006 7.75195 13.7065 5.54004C13.9409 5.07861 14.1021 4.96143 14.3364 4.96143C14.6147 4.96143 14.7979 5.1665 14.7979 5.51807C14.7979 6.60205 13.5527 8.41846 13.5527 9.60498C13.5527 10.4912 14.2632 11.0552 15.23 11.0552H17.8594C18.2842 11.0552 18.5991 11.3774 18.5991 11.8022C18.5991 12.1025 18.5039 12.3003 18.2476 12.5493C18.0571 12.7397 18.0278 13.0181 18.1963 13.2158C18.4087 13.5088 18.4966 13.7065 18.4966 13.9556C18.4966 14.2559 18.3574 14.5122 18.0645 14.7246C17.8154 14.9077 17.7275 15.2007 17.874 15.4937C18.0278 15.7939 18.1084 15.9404 18.1084 16.1748C18.1084 16.5264 17.8813 16.79 17.4272 17.0317C17.1855 17.1636 17.1196 17.4272 17.2222 17.6543C17.376 18.0278 17.3979 18.1011 17.3906 18.2622C17.3906 18.5771 17.1636 18.8262 16.6729 18.9507C16.2407 19.0532 15.5522 19.1045 14.644 19.0972L13.6992 19.0898C10.667 19.0605 8.61621 17.354 8.61621 14.8931ZM5.38623 14.9517C5.38623 13.0913 6.33838 11.6045 7.43701 11.5532C7.62744 11.5532 7.81787 11.5532 8.0083 11.5532C7.48828 12.564 7.26123 13.626 7.26123 14.8931C7.26123 16.2407 7.72998 17.4272 8.58691 18.3501C8.31592 18.3501 8.03027 18.3501 7.75195 18.3501C6.47021 18.2988 5.38623 16.79 5.38623 14.9517Z" fill="black"/>
+</svg>

statusq.qrc

@@ -0,0 +1,254 @@
+<RCC>
+    <qresource prefix="/">
+        <file>src/StatusQ/Core/qmldir</file>
+        <file>src/StatusQ/Core/Theme/ThemePalette.qml</file>
+        <file>src/StatusQ/Core/Theme/StatusLightTheme.qml</file>
+        <file>src/StatusQ/Core/Theme/StatusDarkTheme.qml</file>
+        <file>src/StatusQ/Core/Theme/Theme.qml</file>
+        <file>src/StatusQ/Core/Theme/qmldir</file>
+        <file>src/StatusQ/Core/Theme/StatusColors.qml</file>
+        <file>src/StatusQ/Core/StatusIcon.qml</file>
+        <file>src/StatusQ/Core/StatusImageSettings.qml</file>
+        <file>src/StatusQ/Core/StatusIconSettings.qml</file>
+        <file>src/StatusQ/Core/StatusIconBackgroundSettings.qml</file>
+        <file>src/StatusQ/Core/StatusBaseText.qml</file>
+        <file>src/StatusQ/Popups/qmldir</file>
+        <file>src/StatusQ/Popups/StatusPopupMenu.qml</file>
+        <file>src/StatusQ/Popups/StatusMenuSeparator.qml</file>
+        <file>src/StatusQ/Popups/StatusMenuHeadline.qml</file>
+        <file>src/StatusQ/Popups/StatusMenuItem.qml</file>
+        <file>src/StatusQ/Popups/StatusModalDivider.qml</file>
+        <file>src/StatusQ/Components/qmldir</file>
+        <file>src/StatusQ/Components/StatusChatListItem.qml</file>
+        <file>src/StatusQ/Components/StatusChatListAndCategories.qml</file>
+        <file>src/StatusQ/Components/StatusChatInfoToolBar.qml</file>
+        <file>src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml</file>
+        <file>src/StatusQ/Components/StatusNavigationListItem.qml</file>
+        <file>src/StatusQ/Components/StatusNavigationPanelHeadline.qml</file>
+        <file>src/StatusQ/Components/StatusChatToolBar.qml</file>
+        <file>src/StatusQ/Components/StatusRoundedImage.qml</file>
+        <file>src/StatusQ/Components/StatusRoundIcon.qml</file>
+        <file>src/StatusQ/Components/StatusListItem.qml</file>
+        <file>src/StatusQ/Components/StatusListSectionHeadline.qml</file>
+        <file>src/StatusQ/Components/StatusDescriptionListItem.qml</file>
+        <file>src/StatusQ/Components/StatusBadge.qml</file>
+        <file>src/StatusQ/Components/StatusLetterIdenticon.qml</file>
+        <file>src/StatusQ/Components/StatusLoadingIndicator.qml</file>
+        <file>src/StatusQ/Platform/qmldir</file>
+        <file>src/StatusQ/Platform/StatusMacTrafficLights.qml</file>
+        <file>src/StatusQ/Controls/StatusIconTabButton.qml</file>
+        <file>src/StatusQ/Controls/StatusChatInfoButton.qml</file>
+        <file>src/StatusQ/Controls/qmldir</file>
+        <file>src/StatusQ/Controls/StatusSlider.qml</file>
+        <file>src/StatusQ/Controls/StatusRoundButton.qml</file>
+        <file>src/StatusQ/Controls/StatusNavBarTabButton.qml</file>
+        <file>src/StatusQ/Controls/StatusFlatRoundButton.qml</file>
+        <file>src/StatusQ/Controls/StatusRadioButton.qml</file>
+        <file>src/StatusQ/Controls/StatusFlatButton.qml</file>
+        <file>src/StatusQ/Controls/StatusBaseButton.qml</file>
+        <file>src/StatusQ/Controls/StatusSwitch.qml</file>
+        <file>src/StatusQ/Controls/StatusCheckBox.qml</file>
+        <file>src/StatusQ/Controls/StatusButton.qml</file>
+        <file>src/StatusQ/Controls/StatusToolTip.qml</file>
+        <file>src/StatusQ/Layout/StatusAppNavBar.qml</file>
+        <file>src/StatusQ/Layout/qmldir</file>
+        <file>src/StatusQ/Layout/StatusAppTwoPanelLayout.qml</file>
+        <file>src/StatusQ/Layout/StatusAppLayout.qml</file>
+        <file>src/StatusQ/qmldir</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-ThinItalic.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-Thin.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-SemiBoldItalic.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-SemiBold.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-Regular.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-MediumItalic.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-Medium.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-LightItalic.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-Light.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-Italic.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-ExtraLightItalic.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-ExtraLight.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-ExtraBoldItalic.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-ExtraBold.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-BoldItalic.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-Bold.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-BlackItalic.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-Black.otf</file>
+        <file>src/assets/fonts/Inter/Inter-V.otf</file>
+        <file>src/assets/fonts/Inter/Inter-ThinItalic.otf</file>
+        <file>src/assets/fonts/Inter/Inter-Thin.otf</file>
+        <file>src/assets/fonts/Inter/Inter-SemiBoldItalic.otf</file>
+        <file>src/assets/fonts/Inter/Inter-SemiBold.otf</file>
+        <file>src/assets/fonts/Inter/Inter-Regular.otf</file>
+        <file>src/assets/fonts/Inter/Inter-MediumItalic.otf</file>
+        <file>src/assets/fonts/Inter/Inter-Medium.otf</file>
+        <file>src/assets/fonts/Inter/Inter-LightItalic.otf</file>
+        <file>src/assets/fonts/Inter/Inter-Light.otf</file>
+        <file>src/assets/fonts/Inter/Inter-Italic.otf</file>
+        <file>src/assets/fonts/Inter/Inter-ExtraLightItalic.otf</file>
+        <file>src/assets/fonts/Inter/Inter-ExtraLight.otf</file>
+        <file>src/assets/fonts/Inter/Inter-ExtraBoldItalic.otf</file>
+        <file>src/assets/fonts/Inter/Inter-ExtraBold.otf</file>
+        <file>src/assets/fonts/Inter/Inter-BoldItalic.otf</file>
+        <file>src/assets/fonts/Inter/Inter-Bold.otf</file>
+        <file>src/assets/fonts/Inter/Inter-BlackItalic.otf</file>
+        <file>src/assets/fonts/Inter/Inter-Black.otf</file>
+        <file>src/assets/img/icons/traffic_lights/minimise_pressed.png</file>
+        <file>src/assets/img/icons/traffic_lights/minimise.png</file>
+        <file>src/assets/img/icons/traffic_lights/maximize_pressed.png</file>
+        <file>src/assets/img/icons/traffic_lights/maximize.png</file>
+        <file>src/assets/img/icons/traffic_lights/close_pressed.png</file>
+        <file>src/assets/img/icons/traffic_lights/close.png</file>
+        <file>src/assets/img/icons/public-chat.svg</file>
+        <file>src/assets/img/icons/muted.svg</file>
+        <file>src/assets/img/icons/channel-white.svg</file>
+        <file>src/assets/img/icons/checkbox.svg</file>
+        <file>src/assets/img/icons/warning.svg</file>
+        <file>src/assets/img/icons/wallet.svg</file>
+        <file>src/assets/img/icons/username.svg</file>
+        <file>src/assets/img/icons/up.svg</file>
+        <file>src/assets/img/icons/union.svg</file>
+        <file>src/assets/img/icons/tributeToTalk.svg</file>
+        <file>src/assets/img/icons/travel-and-places.svg</file>
+        <file>src/assets/img/icons/touch-id.svg</file>
+        <file>src/assets/img/icons/token.svg</file>
+        <file>src/assets/img/icons/token-sale.svg</file>
+        <file>src/assets/img/icons/time.svg</file>
+        <file>src/assets/img/icons/text.svg</file>
+        <file>src/assets/img/icons/teller.svg</file>
+        <file>src/assets/img/icons/tabs.svg</file>
+        <file>src/assets/img/icons/symbols.svg</file>
+        <file>src/assets/img/icons/swap.svg</file>
+        <file>src/assets/img/icons/subscription.svg</file>
+        <file>src/assets/img/icons/strikethrough.svg</file>
+        <file>src/assets/img/icons/stickers.svg</file>
+        <file>src/assets/img/icons/status.svg</file>
+        <file>src/assets/img/icons/status-update.svg</file>
+        <file>src/assets/img/icons/speech.svg</file>
+        <file>src/assets/img/icons/sound.svg</file>
+        <file>src/assets/img/icons/smileys-and-people.svg</file>
+        <file>src/assets/img/icons/show.svg</file>
+        <file>src/assets/img/icons/share-ios.svg</file>
+        <file>src/assets/img/icons/share-android.svg</file>
+        <file>src/assets/img/icons/settings.svg</file>
+        <file>src/assets/img/icons/settings-advanced.svg</file>
+        <file>src/assets/img/icons/send.svg</file>
+        <file>src/assets/img/icons/security.svg</file>
+        <file>src/assets/img/icons/secret.svg</file>
+        <file>src/assets/img/icons/search.svg</file>
+        <file>src/assets/img/icons/rotate.svg</file>
+        <file>src/assets/img/icons/right.svg</file>
+        <file>src/assets/img/icons/reply.svg</file>
+        <file>src/assets/img/icons/remove.svg</file>
+        <file>src/assets/img/icons/remove-contact.svg</file>
+        <file>src/assets/img/icons/remove-circle.svg</file>
+        <file>src/assets/img/icons/refresh.svg</file>
+        <file>src/assets/img/icons/receive.svg</file>
+        <file>src/assets/img/icons/reaction-b.svg</file>
+        <file>src/assets/img/icons/reaction-a.svg</file>
+        <file>src/assets/img/icons/qr.svg</file>
+        <file>src/assets/img/icons/profile.svg</file>
+        <file>src/assets/img/icons/private-chat.svg</file>
+        <file>src/assets/img/icons/previous.svg</file>
+        <file>src/assets/img/icons/play.svg</file>
+        <file>src/assets/img/icons/pin.svg</file>
+        <file>src/assets/img/icons/pause.svg</file>
+        <file>src/assets/img/icons/paste.svg</file>
+        <file>src/assets/img/icons/password.svg</file>
+        <file>src/assets/img/icons/offline.svg</file>
+        <file>src/assets/img/icons/objects.svg</file>
+        <file>src/assets/img/icons/notification.svg</file>
+        <file>src/assets/img/icons/node.svg</file>
+        <file>src/assets/img/icons/node-offline.svg</file>
+        <file>src/assets/img/icons/next.svg</file>
+        <file>src/assets/img/icons/network.svg</file>
+        <file>src/assets/img/icons/more.svg</file>
+        <file>src/assets/img/icons/mobile.svg</file>
+        <file>src/assets/img/icons/mobile-sync.svg</file>
+        <file>src/assets/img/icons/mobile-sync-off.svg</file>
+        <file>src/assets/img/icons/max.svg</file>
+        <file>src/assets/img/icons/logout.svg</file>
+        <file>src/assets/img/icons/location.svg</file>
+        <file>src/assets/img/icons/loading.svg</file>
+        <file>src/assets/img/icons/link.svg</file>
+        <file>src/assets/img/icons/left.svg</file>
+        <file>src/assets/img/icons/ledger.svg</file>
+        <file>src/assets/img/icons/language.svg</file>
+        <file>src/assets/img/icons/keycard.svg</file>
+        <file>src/assets/img/icons/keycard-logo.svg</file>
+        <file>src/assets/img/icons/keyboard.svg</file>
+        <file>src/assets/img/icons/italic.svg</file>
+        <file>src/assets/img/icons/info.svg</file>
+        <file>src/assets/img/icons/in-contacts.svg</file>
+        <file>src/assets/img/icons/image.svg</file>
+        <file>src/assets/img/icons/history.svg</file>
+        <file>src/assets/img/icons/hide.svg</file>
+        <file>src/assets/img/icons/help.svg</file>
+        <file>src/assets/img/icons/group.svg</file>
+        <file>src/assets/img/icons/group-chat.svg</file>
+        <file>src/assets/img/icons/gallery.svg</file>
+        <file>src/assets/img/icons/food-and-drinks.svg</file>
+        <file>src/assets/img/icons/flash.svg</file>
+        <file>src/assets/img/icons/flash-disable.svg</file>
+        <file>src/assets/img/icons/flags.svg</file>
+        <file>src/assets/img/icons/filter.svg</file>
+        <file>src/assets/img/icons/filled-account.svg</file>
+        <file>src/assets/img/icons/file.svg</file>
+        <file>src/assets/img/icons/favourite.svg</file>
+        <file>src/assets/img/icons/face-sad.svg</file>
+        <file>src/assets/img/icons/face-id.svg</file>
+        <file>src/assets/img/icons/external.svg</file>
+        <file>src/assets/img/icons/exchange.svg</file>
+        <file>src/assets/img/icons/emojis.svg</file>
+        <file>src/assets/img/icons/edit.svg</file>
+        <file>src/assets/img/icons/download.svg</file>
+        <file>src/assets/img/icons/down.svg</file>
+        <file>src/assets/img/icons/double-checkmark.svg</file>
+        <file>src/assets/img/icons/desktop.svg</file>
+        <file>src/assets/img/icons/delete.svg</file>
+        <file>src/assets/img/icons/dapp.svg</file>
+        <file>src/assets/img/icons/copy.svg</file>
+        <file>src/assets/img/icons/contact.svg</file>
+        <file>src/assets/img/icons/condition-or.svg</file>
+        <file>src/assets/img/icons/communities.svg</file>
+        <file>src/assets/img/icons/code.svg</file>
+        <file>src/assets/img/icons/close.svg</file>
+        <file>src/assets/img/icons/close-circle.svg</file>
+        <file>src/assets/img/icons/clear.svg</file>
+        <file>src/assets/img/icons/chevron-up.svg</file>
+        <file>src/assets/img/icons/chevron-down.svg</file>
+        <file>src/assets/img/icons/checkmark.svg</file>
+        <file>src/assets/img/icons/checkmark-circle.svg</file>
+        <file>src/assets/img/icons/chatbot.svg</file>
+        <file>src/assets/img/icons/chat.svg</file>
+        <file>src/assets/img/icons/chat-commands.svg</file>
+        <file>src/assets/img/icons/channel.svg</file>
+        <file>src/assets/img/icons/channel-category.svg</file>
+        <file>src/assets/img/icons/cancel.svg</file>
+        <file>src/assets/img/icons/camera.svg</file>
+        <file>src/assets/img/icons/browser.svg</file>
+        <file>src/assets/img/icons/bold.svg</file>
+        <file>src/assets/img/icons/backspace.svg</file>
+        <file>src/assets/img/icons/arrow-right.svg</file>
+        <file>src/assets/img/icons/arrow-down.svg</file>
+        <file>src/assets/img/icons/arbitrator.svg</file>
+        <file>src/assets/img/icons/appearance.svg</file>
+        <file>src/assets/img/icons/animals-and-nature.svg</file>
+        <file>src/assets/img/icons/airdrop.svg</file>
+        <file>src/assets/img/icons/admin.svg</file>
+        <file>src/assets/img/icons/address.svg</file>
+        <file>src/assets/img/icons/add.svg</file>
+        <file>src/assets/img/icons/add-contact.svg</file>
+        <file>src/assets/img/icons/add-circle.svg</file>
+        <file>src/assets/img/icons/activity.svg</file>
+        <file>src/StatusQ/Components/StatusChatListCategoryItem.qml</file>
+        <file>src/StatusQ/Components/StatusChatListCategory.qml</file>
+        <file>src/StatusQ/Controls/StatusBaseInput.qml</file>
+        <file>src/StatusQ/Controls/StatusChatListCategoryItemButton.qml</file>
+        <file>src/StatusQ/Components/StatusChatList.qml</file>
+        <file>src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml</file>
+        <file>src/StatusQ/Popups/statusModal/StatusModalFooter.qml</file>
+        <file>src/StatusQ/Popups/statusModal/StatusModalHeader.qml</file>
+        <file>src/StatusQ/Popups/StatusModal.qml</file>
+        <file>src/StatusQ/Core/StatusModalHeaderSettings.qml</file>
+    </qresource>
+</RCC>