WIP

Brought back opacity condition deleted by mistake

CHANGELOG.md

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

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

@@ -249,12 +249,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
@@ -293,11 +295,10 @@ Rectangle {
     Component {
         id: statusAppCommunityView
 
-        StatusAppTwoPanelLayout {
-
+        StatusAppThreePanelLayout {
+            id: root
             leftPanel: Item {
                 id: leftPanel
-                anchors.fill: parent
 
                 StatusChatInfoToolBar {
                     id: statusChatInfoToolBar
@@ -346,8 +347,8 @@ Rectangle {
 
                     StatusChatListAndCategories {
                         id: communityCategories
-                        height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
                         width: leftPanel.width
+                        height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
 
                         chatList.model: demoCommunityChatListItems
                         categoryList.model: demoCommunityCategoryItems
@@ -368,12 +369,12 @@ Rectangle {
                                 icon.name: "notification"
                             }
 
-                            StatusMenuItem { 
+                            StatusMenuItem {
                                 text: "Mark as Read"
                                 icon.name: "checkmark-circle"
                             }
 
-                            StatusMenuItem { 
+                            StatusMenuItem {
                                 text: "Edit Category"
                                 icon.name: "edit"
                             }
@@ -437,17 +438,62 @@ Rectangle {
                 }
             }
 
-            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 {
+                StatusBaseText {
+                    id: titleText
+                    anchors.top: parent.top
+                    anchors.topMargin:16
+                    anchors.left: parent.left
+                    anchors.leftMargin: 16
+                    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
+                            font.pixelSize: 15
+                            text: modelData
+                        }
+                    }
                 }
             }
         }
@@ -502,7 +548,7 @@ Rectangle {
                             }
                         }
 
-                        Item { 
+                        Item {
                             id: invisibleSeparator
                             height: 16
                             width: parent.width
@@ -565,15 +611,15 @@ Rectangle {
 
         anchors.centerIn: parent
 
-        header.title: "Cryptokitties"        
+        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 
+            StatusModalDivider {
+                bottomPadding: 8
             }
 
             StatusBaseText {
@@ -671,9 +717,8 @@ Rectangle {
             name: "#status"
             chatType: StatusChatListItem.Type.PublicChat
             muted: false
-            hasUnreadMessages: false
-            hasMention: false
             unreadMessagesCount: 0
+            mentionsCount: 0
             color: "blue"
         }
         ListElement {
@@ -681,16 +726,15 @@ Rectangle {
             name: "status-desktop"
             chatType: StatusChatListItem.Type.PublicChat
             muted: false
-            hasUnreadMessages: true
             color: "red"
             unreadMessagesCount: 1
+            mentionsCount: 1
         }
         ListElement {
             chatId: "2"
             name: "Amazing Funny Squirrel"
             chatType: StatusChatListItem.Type.OneToOneChat
             muted: false
-            hasUnreadMessages: false
             color: "green"
             identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
 CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
@@ -701,7 +745,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Black Ops"
             chatType: StatusChatListItem.Type.GroupChat
             muted: false
-            hasUnreadMessages: false
             color: "purple"
             unreadMessagesCount: 0
         }
@@ -710,7 +753,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Spectacular Growing Otter"
             chatType: StatusChatListItem.Type.OneToOneChat
             muted: true
-            hasUnreadMessages: false
             color: "Orange"
             unreadMessagesCount: 0
         }
@@ -719,7 +761,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "channel-with-a-super-duper-long-name"
             chatType: StatusChatListItem.Type.PublicChat
             muted: false
-            hasUnreadMessages: false
             color: "green"
             unreadMessagesCount: 0
         }
@@ -732,8 +773,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "general"
             chatType: StatusChatListItem.Type.CommunityChat
             muted: false
-            hasUnreadMessages: false
-            hasMention: false
             unreadMessagesCount: 0
             color: "orange"
         }
@@ -742,8 +781,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "random"
             chatType: StatusChatListItem.Type.CommunityChat
             muted: false
-            hasUnreadMessages: false
-            hasMention: false
             unreadMessagesCount: 0
             color: "orange"
             categoryId: "public"
@@ -753,8 +790,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "watercooler"
             chatType: StatusChatListItem.Type.CommunityChat
             muted: false
-            hasUnreadMessages: false
-            hasMention: false
             unreadMessagesCount: 0
             color: "orange"
             categoryId: "public"
@@ -764,8 +799,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "language-design"
             chatType: StatusChatListItem.Type.CommunityChat
             muted: false
-            hasUnreadMessages: false
-            hasMention: false
             unreadMessagesCount: 0
             color: "orange"
             categoryId: "dev"

sandbox/ListItems.qml

@@ -95,11 +95,20 @@ GridLayout {
         onUnmute: muted = false
     }
 
+    StatusChatListItem {
+        name: "muted-with-mentions"
+        type: StatusChatListItem.Type.PublicChat
+        muted: true
+        hasUnreadMessages: true
+        badge.value: 1
+    }
+
     StatusChatListItem {
         name: "selected-channel"
         type: StatusChatListItem.Type.PublicChat
         selected: true
     }
+
     StatusChatListItem {
         name: "selected-muted-channel"
         type: StatusChatListItem.Type.PublicChat
@@ -107,6 +116,24 @@ GridLayout {
         muted: true
     }
 
+    StatusChatListItem {
+        name: "selected-muted-channel-with-unread-messages"
+        type: StatusChatListItem.Type.PublicChat
+        selected: true
+        muted: true
+        hasUnreadMessages: true
+    }
+
+    StatusChatListItem {
+        name: "selected-muted-with-mentions"
+        type: StatusChatListItem.Type.PublicChat
+        selected: true
+        muted: true
+        hasUnreadMessages: true
+        badge.value: 1
+    }
+
+
     StatusListItem {
         title: "Title"
     }
@@ -116,19 +143,45 @@ GridLayout {
         subTitle: "Subtitle"
     }
 
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        tertiaryTitle: "Tertiary title"
+
+        statusListItemTitle.font.pixelSize: 17
+        statusListItemTitle.font.weight: Font.Bold
+    }
+
+    StatusListItem {
+        title: "Title"
+        subTitle: "Super long description that causes a multiline paragraph and makes the size of the component grow. Let's see how it behaves."
+        tertiaryTitle: "Tertiary title"
+        icon.name: "info"
+
+        statusListItemTitle.font.pixelSize: 17
+        statusListItemTitle.font.weight: Font.Bold
+    }
+
     StatusListItem {
         title: "Title"
         subTitle: "Subtitle"
         icon.name: "info"
     }
 
-
     StatusListItem {
         title: "Title"
         subTitle: "Subtitle"
         image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
     }
 
+    StatusListItem {
+        title: "Title"
+        subTitle: "Subtitle"
+        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        image.isIdenticon: true
+    }
+
     StatusListItem {
         title: "Title"
         subTitle: "Subtitle"
@@ -230,6 +283,18 @@ GridLayout {
         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"

sandbox/Popups.qml

@@ -38,6 +38,16 @@ Column {
         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
@@ -171,4 +181,57 @@ Column {
             }
         ]
     }
+
+    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/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/main.qml

@@ -178,12 +178,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 {

sandbox/sandbox.pro

@@ -53,15 +53,8 @@ HEADERS += \
     sandboxapp.h \
     statuswindow.h
 
-DISTFILES += \
-    ../src/StatusQ/Components/StatusMacWindowButtons.qml \
-    ../src/StatusQ/Controls/StatusBaseButton.qml \
-    ../src/StatusQ/Controls/StatusButton.qml \
-    ../src/StatusQ/Controls/StatusCheckBox.qml \
-    ../src/StatusQ/Controls/StatusFlatRoundButton.qml \
-    ../src/StatusQ/Controls/StatusRadioButton.qml \
-    ../src/StatusQ/Controls/StatusSlider.qml \
-    ../src/StatusQ/Controls/StatusSwitch.qml
+OTHER_FILES += $$files($$PWD/../*.qml, true)
+OTHER_FILES += $$files($$PWD/*.qml, true)
 
 android {
 

src/StatusQ/Components/StatusChatInfoToolBar.qml

@@ -11,6 +11,7 @@ Item {
     implicitHeight: 56
 
     property alias chatInfoButton: statusChatInfoButton
+    property alias menuButton: statusMenuButton
     property Component popupMenu
 
     signal chatInfoButtonClicked()
@@ -32,7 +33,7 @@ Item {
     }
 
     StatusRoundButton {
-        id: menuButton
+        id: statusMenuButton
         anchors.right: parent.right
         anchors.rightMargin: 8
         anchors.verticalCenter: parent.verticalCenter
@@ -49,14 +50,14 @@ Item {
             State {
                 name: "default"
                 PropertyChanges {
-                    target: menuButton
+                    target: statusMenuButton
                     icon.rotation: 0
                 }
             },
             State {
                 name: "pressed"
                 PropertyChanges {
-                    target: menuButton
+                    target: statusMenuButton
                     icon.rotation: 45
                     highlighted: true
                 }
@@ -87,8 +88,8 @@ Item {
 
         onClicked: {
             statusChatInfoToolBar.addButtonClicked(mouse)
-            menuButton.state = "pressed"
-            popupMenuSlot.item.popup(menuButton.width-popupMenuSlot.item.width, menuButton.height + 4)
+            statusMenuButton.state = "pressed"
+            popupMenuSlot.item.popup(statusMenuButton.width-popupMenuSlot.item.width, statusMenuButton.height + 4)
         }
 
         Loader {
@@ -96,7 +97,7 @@ Item {
             active: !!statusChatInfoToolBar.popupMenu
             onLoaded: {
                 popupMenuSlot.item.closeHandler = function () {
-                    menuButton.state = "default"
+                    statusMenuButton.state = "default"
                 }
             }
         }

src/StatusQ/Components/StatusChatList.qml

@@ -1,4 +1,5 @@
 import QtQuick 2.13
+import QtQml.Models 2.14
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
@@ -13,7 +14,7 @@ Column {
 
     property string categoryId: ""
     property string selectedChatId: ""
-    property alias chatListItems: statusChatListItems
+    property alias chatListItems: delegateModel
 
     property Component popupMenu
 
@@ -24,14 +25,17 @@ Column {
     signal chatItemSelected(string id)
     signal chatItemUnmuted(string id)
 
+    signal reorder(string cid, int from, int to)
+
     onPopupMenuChanged: {
         if (!!popupMenu) {
             popupMenuSlot.sourceComponent = popupMenu
         }
     }
 
-    Repeater {
-        id: statusChatListItems
+    DelegateModel {
+        id: delegateModel
+
         delegate: StatusChatListItem {
 
             id: statusChatListItem
@@ -43,19 +47,28 @@ Column {
                     profileImage = statusChatList.profileImageFn(model.chatId || model.id) || ""
                 }
             }
-
+            originalOrder: model.position
             chatId: model.chatId || model.id
             name: !!statusChatList.chatNameFn ? statusChatList.chatNameFn(model) : model.name
             type: model.chatType
             muted: !!model.muted
             hasUnreadMessages: !!model.hasUnreadMessages || model.unviewedMessagesCount > 0
-            hasMention: !!model.hasMention
-            badge.value: model.unviewedMessagesCount || 0
+            hasMention: model.mentionsCount > 0
+            badge.value: model.chatType === StatusChatListItem.Type.OneToOneChat ?
+                model.unviewedMessagesCount || 0 :
+                model.mentionsCount || 0
             selected: (model.chatId || model.id) === statusChatList.selectedChatId
 
             icon.color: model.color || ""
             image.isIdenticon: !!!profileImage && !!!model.identityImage && !!model.identicon
             image.source: profileImage || model.identityImage || model.identicon || ""
+            onVisualReorder: {
+                delegateModel.items.move(from, to)
+            }
+
+            onReorder: {
+                statusChatList.reorder(chatId, from, to)
+            }
 
             onClicked: {
                 if (mouse.button === Qt.RightButton && !!statusChatList.popupMenu) {
@@ -93,6 +106,11 @@ Column {
                 return true
             }
         }
+
+    }
+    Repeater {
+        id: statusChatListItems
+        model: delegateModel
     }
 
     Loader {

src/StatusQ/Components/StatusChatListAndCategories.qml

@@ -12,6 +12,7 @@ Item {
 
     property string selectedChatId: ""
     property bool showCategoryActionButtons: false
+    property bool showPopupMenu: true
     property alias chatList: statusChatList.chatListItems
     property alias categoryList: statusChatListCategories
     property alias sensor: sensor
@@ -23,6 +24,7 @@ Item {
     signal chatItemSelected(string id)
     signal chatItemUnmuted(string id)
     signal categoryAddButtonClicked(string id)
+    signal reorderChat(string categoryId, string chatId, int from, int to)
 
     onPopupMenuChanged: {
         if (!!popupMenu) {
@@ -37,7 +39,7 @@ Item {
         height: statusChatListAndCategories.height
         acceptedButtons: Qt.LeftButton | Qt.RightButton
         onClicked: {
-            if (mouse.button === Qt.RightButton && !!statusChatListAndCategories.popupMenu) {
+            if (mouse.button === Qt.RightButton && showPopupMenu && !!statusChatListAndCategories.popupMenu) {
                 popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6)
                 return
             }
@@ -53,7 +55,7 @@ Item {
             StatusChatList {
                 id: statusChatList
                 anchors.horizontalCenter: parent.horizontalCenter
-                visible: !!chatListItems.model && chatListItems.count > 0
+                visible: chatListItems.count > 0
                 selectedChatId: statusChatListAndCategories.selectedChatId
                 onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
                 onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
@@ -61,6 +63,10 @@ Item {
                     return !!!model.categoryId
                 }
                 popupMenu: statusChatListAndCategories.chatListPopupMenu
+
+                onReorder: function (cid, from, to) {
+                    statusChatListAndCategories.reorderChat(categoryId, cid, from, to)
+                }
             }
 
             Repeater {
@@ -80,6 +86,9 @@ Item {
 
                     popupMenu: statusChatListAndCategories.categoryPopupMenu
                     chatListPopupMenu: statusChatListAndCategories.chatListPopupMenu
+                    onReorderChat: function (categoryId, chatId, from, to) {
+                        statusChatListAndCategories.reorderChat(categoryId, chatId, from, to)
+                    }
                 }
             }
         }

src/StatusQ/Components/StatusChatListCategory.qml

@@ -21,6 +21,8 @@ Column {
     property Component chatListPopupMenu
     property Component popupMenu
 
+    signal reorderChat(string categoryId, string chatId, int from, int to)
+
     onPopupMenuChanged: {
         if (!!popupMenu) {
             popupMenuSlot.sourceComponent = popupMenu
@@ -32,10 +34,10 @@ Column {
         title: statusChatListCategory.name
         opened: statusChatListCategory.opened
 
-        showMenuButton: !!statusChatListCategory.popupMenu
+        showMenuButton: showActionButtons && !!statusChatListCategory.popupMenu
 
         onClicked: {
-            if (mouse.button === Qt.RightButton && !!statusChatListCategory.popupMenu) {
+            if (mouse.button === Qt.RightButton && showActionButtons && !!statusChatListCategory.popupMenu) {
                 highlighted = true
                 popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6)
                 return
@@ -62,6 +64,10 @@ Column {
         }
 
         popupMenu: statusChatListCategory.chatListPopupMenu
+
+        onReorder: function (cid, from, to){
+            statusChatListCategory.reorderChat(categoryId, cid, from, to)
+        }
     }
 
     Loader {

src/StatusQ/Components/StatusChatListItem.qml

@@ -1,4 +1,8 @@
 import QtQuick 2.13
+import QtQml.Models 2.13
+import QtQuick.Controls 2.13 as QC
+import QtGraphicalEffects 1.13
+
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
@@ -7,6 +11,8 @@ import StatusQ.Controls 0.1
 Rectangle {
     id: statusChatListItem
 
+    objectName: "chatItem"
+    property int originalOrder: -1
     property string chatId: ""
     property string name: ""
     property alias badge: statusBadge
@@ -24,6 +30,9 @@ Rectangle {
     signal clicked(var mouse)
     signal unmute()
 
+    signal visualReorder(int from, int to, int order)
+    signal reorder(int from, int to)
+
     enum Type {
         Unknown0, // 0
         OneToOneChat, // 1
@@ -46,14 +55,40 @@ Rectangle {
         return sensor.containsMouse || highlighted ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
     }
 
+    opacity: sensor.held ? 0.0 : 1.0
+
+    Behavior on y { NumberAnimation { duration: 350 }}
+
     MouseArea {
         id: sensor
 
         anchors.fill: parent
-        cursorShape: Qt.PointingHandCursor 
+        cursorShape: Qt.PointingHandCursor
         acceptedButtons: Qt.LeftButton | Qt.RightButton
         hoverEnabled: true
 
+        property bool held: false
+
+        drag.target: content.item
+
+        property real startY: 0
+        onMouseYChanged: {
+            if ( (Math.abs(startY - mouseY) > 5 ) && pressed) {
+                held = true
+            }
+        }
+        onPressed: startY = mouseY
+        onPressAndHold: {
+            held = true
+        }
+
+        onReleased: {
+            if (held) {
+                reorder(statusChatListItem.originalOrder, statusChatListItem.originalOrder)
+            }
+            held = false
+        }
+
         onClicked: statusChatListItem.clicked(mouse)
 
         Loader {
@@ -63,7 +98,7 @@ Rectangle {
             anchors.verticalCenter: parent.verticalCenter
 
             sourceComponent: !!statusChatListItem.image.source.toString() ?
-                statusRoundedImageCmp : statusLetterIdenticonCmp
+                                 statusRoundedImageCmp : statusLetterIdenticonCmp
         }
 
         Component {
@@ -89,8 +124,8 @@ Rectangle {
                     image.source: statusChatListItem.image.source
                     showLoadingIndicator: true
                     color: statusChatListItem.image.isIdenticon ?
-                        Theme.palette.statusRoundedImage.backgroundColor :
-                        "transparent"
+                               Theme.palette.statusRoundedImage.backgroundColor :
+                               "transparent"
                     border.width: statusChatListItem.image.isIdenticon ? 1 : 0
                     border.color: Theme.palette.directColor7
                 }
@@ -114,27 +149,27 @@ Rectangle {
                 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
+                return statusChatListItem.hasMention ||
+                        statusChatListItem.hasUnreadMessages ||
+                        statusChatListItem.selected ||
+                        statusChatListItem.highlighted ||
+                        statusBadge.visible ||
+                        sensor.containsMouse ? 1.0 : 0.7
             }
 
             icon: {
                 switch (statusChatListItem.type) {
-                    case StatusChatListItem.Type.PublicCat:
-                        return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
-                        break;
-                    case StatusChatListItem.Type.GroupChat:
-                        return Theme.palette.name == "light" ? "tiny/group" : "tiny/group-white"
-                        break;
-                    case StatusChatListItem.Type.CommunityChat:
-                        return Theme.palette.name == "light" ? "tiny/channel" : "tiny/channel-white"
-                        break;
-                    default:
-                        return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
+                case StatusChatListItem.Type.PublicCat:
+                    return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
+                    break;
+                case StatusChatListItem.Type.GroupChat:
+                    return Theme.palette.name == "light" ? "tiny/group" : "tiny/group-white"
+                    break;
+                case StatusChatListItem.Type.CommunityChat:
+                    return Theme.palette.name == "light" ? "tiny/channel" : "tiny/channel-white"
+                    break;
+                default:
+                    return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
                 }
             }
         }
@@ -143,48 +178,37 @@ Rectangle {
             id: chatName
             anchors.left: statusIcon.visible ? statusIcon.right : identicon.right
             anchors.leftMargin: statusIcon.visible ? 1 : 8
-            anchors.right: statusBadge.visible ? statusBadge.left :
-                mutedIcon.visible ? mutedIcon.left : parent.right
+            anchors.right: mutedIcon.visible ? mutedIcon.left :
+                                               statusBadge.visible ? statusBadge.left : parent.right
             anchors.rightMargin: 6
             anchors.verticalCenter: parent.verticalCenter
 
-            text: statusChatListItem.type === StatusChatListItem.Type.PublicChat &&
-                !statusChatListItem.name.startsWith("#") ?
-                "#" + statusChatListItem.name :
-                statusChatListItem.name
+            text: originalOrder + (statusChatListItem.type === StatusChatListItem.Type.PublicChat &&
+                  !statusChatListItem.name.startsWith("#") ?
+                      "#" + statusChatListItem.name :
+                      statusChatListItem.name)
             elide: Text.ElideRight
             color: {
                 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
+                return statusChatListItem.hasMention ||
+                        statusChatListItem.hasUnreadMessages ||
+                        statusChatListItem.selected ||
+                        statusChatListItem.highlighted ||
+                        sensor.containsMouse ||
+                        statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
             }
-            font.weight: statusChatListItem.hasMention || 
-              statusChatListItem.hasUnreadMessages ||
-              statusBadge.visible ? Font.Bold : Font.Medium
+            font.weight: !statusChatListItem.muted &&
+                         (statusChatListItem.hasMention ||
+                          statusChatListItem.hasUnreadMessages ||
+                          statusBadge.visible) ? Font.Bold : Font.Medium
             font.pixelSize: 15
         }
 
-        StatusBadge {
-            id: statusBadge
-
-            anchors.right: mutedIcon.visible ? mutedIcon.left : parent.right
-            anchors.rightMargin: 8
-            anchors.verticalCenter: parent.verticalCenter
-
-            border.width: 4
-            border.color: color
-            visible: statusBadge.value > 0
-        }
-
         StatusIcon {
             id: mutedIcon
-            anchors.right: parent.right
+            anchors.right: statusBadge.visible ? statusBadge.left : parent.right
             anchors.rightMargin: 8
             anchors.verticalCenter: parent.verticalCenter
             width: 14
@@ -195,7 +219,7 @@ Rectangle {
             MouseArea {
                 id: mutedIconSensor
                 hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor 
+                cursorShape: Qt.PointingHandCursor
                 anchors.fill: parent
                 onClicked: statusChatListItem.unmute()
             }
@@ -205,5 +229,111 @@ 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
+        }
     }
+
+    DropArea {
+        id: dropArea
+        width: sensor.held ? 0 : parent.width
+        height: sensor.held ? 0 : parent.height
+        keys: ["chat"]
+        onEntered: {
+            reorderDelay.start()
+        }
+
+        onDropped: {
+            reorder(drag.source.originalOrder, statusChatListItem.DelegateModel.itemsIndex)
+        }
+
+        Timer {
+            id: reorderDelay
+            interval: 100
+            repeat: false
+            onTriggered: {
+                if (dropArea.containsDrag) {
+                    dropArea.drag.source.originalOrder = statusChatListItem.originalOrder
+                    visualReorder(dropArea.drag.source.DelegateModel.itemsIndex, statusChatListItem.DelegateModel.itemsIndex, statusChatListItem.originalOrder)
+                }
+            }
+        }
+    }
+
+    Loader {
+        id:content
+        active: sensor.held
+        sourceComponent: Item {
+            property var globalPosition: getAbsolutePosition(statusChatListItem)
+            parent: QC.Overlay.overlay
+            width: statusChatListItem.width
+            height: statusChatListItem.height
+            Drag.active: sensor.held
+            Drag.hotSpot.x: width / 2
+            Drag.hotSpot.y: height / 2
+            Drag.keys: ["chat"]
+            Drag.source: statusChatListItem
+            Component.onCompleted: {
+                x = globalPosition.x
+                y = globalPosition.y
+            }
+
+            RectangularGlow {
+                anchors.fill: cover
+                color: "#22000000"
+                glowRadius: 8
+                cornerRadius: 8
+            }
+            Rectangle {
+                id: cover
+                anchors.fill: parent
+                color: Theme.palette.baseColor4
+                radius: 8
+
+                Row {
+                    spacing: 6
+                    anchors.left: parent.left
+                    anchors.leftMargin: 8
+                    anchors.verticalCenter: parent.verticalCenter
+                    Loader {
+                        id: iconLoader
+                        anchors.verticalCenter: parent.verticalCenter
+                        sourceComponent: !!statusChatListItem.image.source.toString() ?
+                                             statusRoundedImageCmp : statusLetterIdenticonCmp
+                    }
+
+                    StatusBaseText {
+                        anchors.verticalCenter: parent.verticalCenter
+                        width: cover.width - iconLoader.item.width - 22
+                        text: chatName.text
+                        elide: Text.ElideRight
+                        color: Theme.palette.directColor5
+                    }
+                }
+            }
+
+            function getAbsolutePosition(node) {
+                var returnPos = {};
+                returnPos.x = 0;
+                returnPos.y = 0;
+                if (node !== undefined && node !== null) {
+                    var parentValue = getAbsolutePosition(node.parent);
+                    returnPos.x = parentValue.x + node.x;
+                    returnPos.y = parentValue.y + node.y;
+                }
+                return returnPos;
+            }
+        }
+    }
+
 }

src/StatusQ/Components/StatusChatToolBar.qml

@@ -14,6 +14,8 @@ Rectangle {
     property alias chatInfoButton: statusChatInfoButton
     property alias menuButton: menuButton
     property alias notificationButton: notificationButton
+    property alias membersButton: membersButton
+    property alias searchButton: searchButton
     property int notificationCount: 0
 
     property Component popupMenu
@@ -21,6 +23,8 @@ Rectangle {
     signal chatInfoButtonClicked()
     signal menuButtonClicked()
     signal notificationButtonClicked()
+    signal membersButtonClicked()
+    signal searchButtonClicked()
 
     onPopupMenuChanged: {
         if (!!popupMenu) {
@@ -44,6 +48,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
@@ -55,8 +91,24 @@ Rectangle {
             onClicked: {
                 statusChatToolBar.menuButtonClicked()
                 highlighted = true
-                let p = menuButton.mapToItem(statusChatToolBar, menuButton.x, menuButton.y)
-                popupMenuSlot.item.popup(p.x + menuButton.width - popupMenuSlot.item.width, p.y + 4 + menuButton.height)
+                popupMenuSlot.item.popup(-popupMenuSlot.item.width + menuButton.width, menuButton.height + 4)
+            }
+
+            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 +117,8 @@ Rectangle {
             width: 1
             color: Theme.palette.directColor7
             anchors.verticalCenter: parent.verticalCenter
-            visible: menuButton.visible && notificationButton.visible
+            visible: notificationButton.visible &&
+                (menuButton.visible || membersButton.visible || searchButton.visible)
         }
 
         StatusFlatRoundButton {
@@ -100,18 +153,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
+                arrow.x: width - (parent.width-4)
             }
         }
+
     }
 }
 

src/StatusQ/Components/StatusListItem.qml

@@ -8,18 +8,24 @@ Rectangle {
     id: statusListItem
 
     implicitWidth: 448
-    implicitHeight: 64
+    implicitHeight: Math.max(64, statusListItemTitleArea.height + 16)
 
     enum Type {
         Primary,
-        Secondary
+        Secondary,
+        Danger
     }
 
     color: {
         if (sensor.containsMouse) {
-            return type === StatusListItem.Type.Primary ?
-                Theme.palette.baseColor2 :
-                Theme.palette.statusListItem.secondaryHoverBackgroundColor
+            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
     }
@@ -28,31 +34,45 @@ Rectangle {
 
     property string title: ""
     property string subTitle: ""
+    property string tertiaryTitle: ""
     property real leftPadding: 16
     property real rightPadding: 16
     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: sensor.containsMouse && type === StatusListItem.Type.Secondary ?
-                      "transparent" :
-                      Theme.palette.primaryColor3
+            color: {
+                if (sensor.containsMouse) {
+                    return type === StatusListItem.Type.Secondary ||
+                           type === StatusListItem.Type.Danger ? "transparent" :
+                           Theme.palette.primaryColor3     
+                }
+                return type === StatusListItem.Type.Danger ? 
+                    Theme.palette.dangerColor3 : Theme.palette.primaryColor3
+            }        
         }
     }
     property StatusImageSettings image: StatusImageSettings {
         width: 40
         height: 40
+        isIdenticon: false
     }
     property 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
@@ -77,9 +97,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 {
@@ -89,6 +117,7 @@ Rectangle {
                 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
@@ -101,39 +130,79 @@ Rectangle {
                 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
+                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                 color: {
-                  if (statusListItem.type === StatusListItem.Type.Primary) {
-                      return Theme.palette.directColor1
+                  switch (statusListItem.type) {
+                      case StatusListItem.Type.Primary:
+                          return Theme.palette.directColor1
+                      case StatusListItem.Type.Secondary:
+                          return Theme.palette.primaryColor1
+                      case StatusListItem.Type.Danger:
+                          return Theme.palette.dangerColor1
                   }
-                  return Theme.palette.primaryColor1
                 }
             }
 
             StatusBaseText {
                 id: statusListItemSubTitle
                 anchors.top: statusListItemTitle.bottom
-
+                width: parent.width
                 text: statusListItem.subTitle
                 font.pixelSize: 15
-                color: Theme.palette.baseColor1
+                color: !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/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/StatusRoundIcon.qml

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

src/StatusQ/Controls/StatusBaseInput.qml

@@ -53,6 +53,9 @@ Item {
 
         clip: true
 
+        border.width: 1
+        border.color: edit.activeFocus ? Theme.palette.primaryColor1 : "transparent"
+
         Flickable {
             id: flick
 
@@ -124,6 +127,13 @@ Item {
                 }
             }
         } // Flickable
+
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.IBeamCursor
+            enabled: !edit.activeFocus
+            onClicked: edit.forceActiveFocus()
+        }
     } // Rectangle
 
     StatusFlatRoundButton {

src/StatusQ/Controls/StatusChatInfoButton.qml

@@ -181,7 +181,7 @@ Rectangle {
             id: statusChatInfoButtonSubTitle
             anchors.left: statusChatInfoButtonTitle.left
             anchors.top: statusChatInfoButtonTitle.bottom
-            visible: !!statusChatInfoButton.subTitle
+            visible: !!statusChatInfoButton.subTitle || statusChatInfoButton.pinnedMessagesCount > 0
             height: visible ? chatType.height : 0
             width: childrenRect.width
 
@@ -200,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/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/StatusToolTip.qml

@@ -15,6 +15,7 @@ ToolTip {
 
     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 +33,7 @@ ToolTip {
             anchors.bottomMargin: 8
         }
         Rectangle {
+            id: arrow
             color: statusToolTipContentBackground.color
             height: 20
             width: 20

src/StatusQ/Controls/qmldir

@@ -15,3 +15,4 @@ StatusRadioButton 0.1 StatusRadioButton.qml
 StatusCheckBox 0.1 StatusCheckBox.qml
 StatusSlider 0.1 StatusSlider.qml
 StatusBaseInput 0.1 StatusBaseInput.qml
+StatusPickerButton 0.1 StatusPickerButton.qml

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

@@ -7,5 +7,12 @@ QtObject {
     property StatusImageSettings image: StatusImageSettings {
         width: 40
         height: 40
+        isIdenticon: false
+    }
+
+    property StatusIconSettings icon: StatusIconSettings {
+        width: 40
+        height: 40
+        isLetterIdenticon: false
     }
 }

src/StatusQ/Layout/StatusAppThreePanelLayout.qml

@@ -0,0 +1,52 @@
+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.preferredWidth: 300
+        SplitView.fillHeight: true
+        contentItem: (!!leftPanel) ? leftPanel : null
+        background: Rectangle {
+            anchors.fill: parent
+            color: Theme.palette.baseColor4
+        }
+    }
+
+    Control {
+        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/StatusModal.qml

@@ -51,6 +51,7 @@ QC.Popup {
             title: header.title
             subTitle: header.subTitle
             image: header.image
+            icon: header.icon
 
             onEditButtonClicked: statusModal.editButtonClicked()
             onClose: statusModal.close()

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
 
 
@@ -54,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
@@ -73,18 +88,73 @@ 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.source.toString()) {
+                    return statusRoundImageCmp
+                }
+
+                return (parent.subMenu && subMenuItemIcon && subMenuItemIcon.isLetterIdenticon) || 
+                    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.icon.name ||
+                !!statusPopupMenuItem.action.iconSettings.name) ||
+                !!statusPopupMenuItem.action.iconSettings.isLetterIdenticon ||
+                !!statusPopupMenuItem.action.image.source.toString()) &&
                 statusPopupMenuItem.action.enabled
         }
 
         contentItem: StatusBaseText {
             anchors.left: statusPopupMenuItem.indicator.right
+            anchors.right: arrowIcon.visible ? arrowIcon.left : arrowIcon.right
+            anchors.rightMargin: 8
             anchors.leftMargin: 4
 
             horizontalAlignment: Text.AlignLeft
@@ -106,6 +176,7 @@ Menu {
         }
 
         arrow: StatusIcon {
+            id: arrowIcon
             anchors.verticalCenter: parent.verticalCenter
             anchors.right: parent.right
             anchors.rightMargin: 8
@@ -160,5 +231,4 @@ Menu {
             }
         }
     }
-
 }

src/StatusQ/Popups/qmldir

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

@@ -16,18 +16,63 @@ Row {
     property StatusImageSettings image: StatusImageSettings {
         width: 40
         height: 40
+        isIdenticon: false
+    }
+
+    property StatusIconSettings icon: StatusIconSettings {
+        width: 40
+        height: 40
+        isLetterIdenticon: false
     }
 
     spacing: 8
 
-    StatusRoundedImage {
-        id: headerImage
+    Loader {
+        id: iconOrImage
         anchors.verticalCenter: parent.verticalCenter
-        width: statusImageWithTitle.image.width
-        height: statusImageWithTitle.image.height
-        image.source:  statusImageWithTitle.image.source
-        showLoadingIndicator: true
-        visible: !!statusImageWithTitle.image.source.toString()
+        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 {

src/StatusQ/Popups/statusModal/StatusModalFooter.qml

@@ -5,6 +5,7 @@ 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 {
@@ -65,5 +66,11 @@ Rectangle {
         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

@@ -4,6 +4,7 @@ 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
@@ -13,6 +14,7 @@ Rectangle {
     property alias actionButton: actionButtonLoader.sourceComponent
 
     property alias image: imageWithTitle.image
+    property alias icon: imageWithTitle.icon
     property bool editable: false
 
     signal editButtonClicked
@@ -25,7 +27,6 @@ Rectangle {
 
     color: Theme.palette.statusModal.backgroundColor
 
-
     StatusImageWithTitle {
         id: imageWithTitle
         anchors.verticalCenter: parent.verticalCenter
@@ -66,5 +67,10 @@ Rectangle {
         width: parent.width
         height: parent.radius
         color: parent.color
+
+        StatusModalDivider {
+            anchors.bottom: parent.bottom
+            width: parent.width
+        }
     }
 }

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

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