chore(general): set info in readme before setting repo read-only (#917)

Further development will take place in the status-desktop repository.

README.md

@@ -2,6 +2,9 @@
 
 > An emerging reusable QML UI component library for Status applications.
 
+:bangbang: | This repository is set to read-only. `StatusQ` library is further developed in the [status-desktop](https://github.com/status-im/status-desktop) repository.
+:---: | :---
+
 ## Usage
 
 StatusQ introduces a module namespace that semantically groups components so they can be easily imported.

sandbox/controls/Buttons.qml

@@ -21,18 +21,37 @@ Column {
         StatusButton {
             text: "Button"
             type: StatusBaseButton.Type.Primary
+
+            StatusToolTip {
+                visible: parent.hovered
+                text: "Look I'm a tooltip on a button!"
+            }
+            onClicked: console.warn("Primary button clicked")
+            onPressed: console.warn("Primary button pressed")
         }
 
         StatusButton {
             text: "Button"
             enabled: false
             type: StatusBaseButton.Type.Primary
+
+            StatusToolTip {
+                visible: parent.hovered
+                text: "Tooltip on a disabled button, should not be visible!"
+            }
+            onClicked: console.warn("Primary disabled button clicked, this should not happen !!!")
         }
 
         StatusButton {
             text: "Button"
             loading: true
             type: StatusBaseButton.Type.Primary
+
+            StatusToolTip {
+                visible: parent.hovered
+                text: "Look I'm a tooltip on a loading button!"
+            }
+            onClicked: console.warn("Primary loading button clicked, this should not happen !!!")
         }
 
         // Large
@@ -50,6 +69,25 @@ Column {
             loading: true
         }
 
+        // Large + Icon
+        StatusButton {
+            text: "Button"
+            icon.name: "info"
+        }
+
+        StatusButton {
+            text: "Button"
+            enabled: false
+            icon.name: "info"
+        }
+
+        StatusButton {
+            text: "Button"
+            loading: true
+            icon.name: "info"
+        }
+
+        // Danger
         StatusButton {
             text: "Button"
             type: StatusBaseButton.Type.Danger
@@ -67,6 +105,7 @@ Column {
             type: StatusBaseButton.Type.Danger
         }
 
+        // Flat
         StatusFlatButton {
             text: "Button"
         }
@@ -74,7 +113,6 @@ Column {
         StatusFlatButton {
             text: "Button"
             enabled: false
-
         }
 
         StatusFlatButton {
@@ -82,6 +120,7 @@ Column {
             loading: true
         }
 
+        // Flat + Danger
         StatusFlatButton {
             text: "Button"
             type: StatusBaseButton.Type.Danger
@@ -117,6 +156,7 @@ Column {
             loading: true
         }
 
+        // Small + danger
         StatusButton {
             text: "Button"
             type: StatusBaseButton.Type.Danger
@@ -137,6 +177,7 @@ Column {
             loading: true
         }
 
+        // Flat + small
         StatusFlatButton {
             text: "Button"
             size: StatusBaseButton.Size.Small
@@ -359,7 +400,12 @@ Column {
     // Button with emoji
     StatusButton {
         text: "Button with Emoji"
-        icon.emoji: "🖼️️"
+        asset.emoji: "🖼️️"
+    }
+
+    StatusButton {
+        width: parent.width
+        text: "wide"
     }
 
     RowLayout {

sandbox/controls/Controls.qml

@@ -150,13 +150,13 @@ GridLayout {
         implicitHeight: 48
         StatusChatInfoButton {
             title: "Iuri Matias elided"
-            subTitle: "Contact"
+            subTitle: "Very long subtitle should elide as well"
             asset.color: Theme.palette.miscColor7
             asset.isImage: true
             asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
             type: StatusChatInfoButton.Type.OneToOneChat
             muted: true
-            pinnedMessagesCount: 1
+            pinnedMessagesCount: 10
             width: 100
         }
     }
@@ -199,6 +199,14 @@ GridLayout {
         type: StatusChatInfoButton.Type.CommunityChat
     }
 
+    StatusChatInfoButton {
+        title: "community-channel"
+        subTitle: "Some very long description text to see how the whole item wraps or elides"
+        asset.color: Theme.palette.miscColor7
+        type: StatusChatInfoButton.Type.CommunityChat
+        pinnedMessagesCount: 3
+    }
+
     StatusSlider {
         width: 360
         from: 0

sandbox/controls/Layout.qml

@@ -28,8 +28,8 @@ Column {
 
         headerContent: StatusChatInfoButton {
             width: Math.min(implicitWidth, parent.width)
-            title: "Some contact"
-            subTitle: "Contact"
+            title: "Muted public chat"
+            subTitle: "Some subtitle"
             asset.color: Theme.palette.miscColor7
             type: StatusChatInfoButton.Type.PublicChat
             pinnedMessagesCount: 1
@@ -44,14 +44,35 @@ Column {
 
         headerContent: StatusChatInfoButton {
             width: Math.min(implicitWidth, parent.width)
-            title: "Some contact"
-            subTitle: "Contact"
+            title: "Group chat"
+            subTitle: "Group chat subtitle"
             asset.color: Theme.palette.miscColor7
-            type: StatusChatInfoButton.Type.OneToOneChat
+            type: StatusChatInfoButton.Type.GroupChat
             pinnedMessagesCount: 1
         }
     }
 
+    StatusToolBar {
+        width: 518
+
+        headerContent: StatusChatInfoButton {
+            title: "Community chat"
+            subTitle: "Some very long description text to see how the whole item wraps or ellides"
+            asset.color: Theme.palette.miscColor7
+            type: StatusChatInfoButton.Type.CommunityChat
+            pinnedMessagesCount: 3
+        }
+    }
+
+    StatusToolBar {
+        headerContent: StatusChatInfoButton {
+            title: "Very long chat name"
+            asset.color: Theme.palette.miscColor7
+            type: StatusChatInfoButton.Type.CommunityChat
+            pinnedMessagesCount: 1234567891
+        }
+    }
+
     StatusToolBar {
         notificationCount: 1
         width: 518
@@ -473,8 +494,5 @@ Column {
                 }
             }
         }
-
-
     }
 }
-

sandbox/controls/ListItems.qml

@@ -576,4 +576,42 @@ ColumnLayout {
         asset.isLetterIdenticon: true
         loadingFailed: true
     }
+
+    StatusListItem {
+        implicitWidth: 600
+        title: "List Item with Tags"
+        subTitle: "03:32"
+        asset.isLetterIdenticon: true
+        inlineTagModel: 6
+        inlineTagDelegate: StatusListItemTag {
+            height: 24
+            title: "tag"
+            asset.isLetterIdenticon: true
+        }
+        components: [
+            ColumnLayout {
+                Row {
+                    Layout.alignment: Qt.AlignRight
+                    spacing: 4
+                    StatusIcon {
+                        color:  Theme.palette.successColor1
+                        icon: "arrow-up"
+                        rotation: 135
+                        height: 18
+                    }
+                    StatusBaseText {
+                        text: "0.0000015 ETH"
+                        font.pixelSize: 15
+                        color: Theme.palette.directColor1
+                    }
+                }
+                StatusBaseText {
+                    Layout.alignment: Qt.AlignRight
+                    text: "1201.10 USD"
+                    font.pixelSize: 15
+                    color: Theme.palette.baseColor1
+                }
+            }
+        ]
+    }
 }

sandbox/controls/Popups.qml

@@ -419,11 +419,11 @@ Column {
                     topPadding: 8
                     bottomPadding: 0
                     implicitHeight: 32
-                    defaultLeftPadding: 4
+                    leftPadding: 4
                     text: name
-                    icon.emoji: !!emoji ? emoji: ""
-                    icon.emojiSize: Emoji.size.middle
-                    icon.name: !emoji ? "filled-account": ""
+                    asset.emoji: !!emoji ? emoji: ""
+                    asset.emojiSize: Emoji.size.middle
+                    asset.name: !emoji ? "filled-account": ""
                     normalColor: "transparent"
                     highlighted: index === floatingHeader.currentIndex
                     onClicked: {

sandbox/demoapp/ChatChannelView.qml

@@ -40,9 +40,8 @@ ListView {
             messageContent: model.messageContent
             amISender: model.amIsender
             sender.id: model.senderId
-            sender.userName: model.userName
-            sender.localName: model.localName
-            sender.ensName: model.ensName
+            sender.displayName: model.senderDisplayName
+            sender.secondaryName: model.senderOptionalName
             sender.isContact: model.isContact
             sender.trustIndicator: model.trustIndicator
             sender.profileImage: StatusProfileImageSettings {
@@ -68,8 +67,8 @@ ListView {
         replyDetails: StatusMessageDetails {
             amISender:  model.isReply && model.replyAmISender
             sender.id: model.replySenderId || ""
-            sender.userName:  model.isReply ? model.replySenderName: ""
-            sender.ensName: model.isReply ? model.replySenderEnsName : ""
+            sender.displayName:  model.isReply ? model.replySenderName: ""
+            sender.secondaryName: model.isReply ? model.replySenderEnsName : ""
             sender.profileImage: StatusProfileImageSettings {
                 width: 20
                 height: 20

sandbox/demoapp/StatusAppCommunitiesPortalView.qml

@@ -44,8 +44,6 @@ StatusSectionLayout {
                 spacing: 18
 
                 StatusBaseText {
-                    Layout.topMargin: d.layoutVMargin
-                    Layout.leftMargin: d.layoutHMargin
                     text: qsTr("Find community")
                     font.weight: Font.Bold
                     font.pixelSize: d.titlePixelSize

sandbox/demoapp/data/Models.qml

@@ -437,9 +437,8 @@ QtObject {
             timestamp: "1656937930"
             amIsender: false
             senderId: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-            userName: "Ferocious Herringbone Sinewave"
-            ensName: ""
-            localName: ""
+            senderDisplayName: "Ferocious Herringbone Sinewave"
+            senderOptionalName: ""
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                           nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
             contentType: StatusMessage.ContentType.Text
@@ -465,9 +464,8 @@ QtObject {
             timestamp: "1657937930"
             amIsender: false
             senderId: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-            userName: "Teenage Mutant Turtle"
-            ensName: ""
-            localName: ""
+            senderDisplayName: "Teenage Mutant Turtle"
+            senderOptionalName: ""
             profileImage: ""
             contentType: StatusMessage.ContentType.Text
             message: 'Simple text message'
@@ -492,9 +490,8 @@ QtObject {
             timestamp: "1657937930"
             amIsender: false
             senderId: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-            userName: "Teenage Mutant Turtle"
-            ensName: ""
-            localName: "Bro from work"
+            senderDisplayName: "Bro from work"
+            senderOptionalName: "Teenage Mutant Turtle"
             profileImage: ""
             contentType: StatusMessage.ContentType.Text
             message: '<code>Renamed, contact</code>'
@@ -519,9 +516,8 @@ QtObject {
             timestamp: "1657937930"
             amIsender: false
             senderId: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-            userName: "Teenage Mutant Turtle"
-            ensName: "@turtle.statusofus.eth"
-            localName: "Bro from work"
+            senderOptionalName: "@turtle.statusofus.eth"
+            senderDisplayName: "Bro from work"
             profileImage: ""
             contentType: StatusMessage.ContentType.Text
             message: '<code>ENS, Renamed, Contact, Untrustworthy</code>'
@@ -546,9 +542,8 @@ QtObject {
             timestamp: "1658937930"
             senderId: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
             amIsender: false
-            userName: "Teenage Mutant Turtle"
-            ensName: "@turtle.statusofus.eth"
-            localName: "Bro from work"
+            senderOptionalName: "@turtle.statusofus.eth"
+            senderDisplayName: "Bro from work"
             profileImage: ""
             message: '<code>ENS, renamed, contact, verified</code>'
             contentType: StatusMessage.ContentType.Text
@@ -573,9 +568,8 @@ QtObject {
             timestamp: "1658937930"
             senderId: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
             amIsender: false
-            userName: "Teenage Mutant Turtle"
-            ensName: ""
-            localName: "Bro from work"
+            senderOptionalName: "Teenage Mutant Turtle"
+            senderDisplayName: "Bro from work"
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg="
             message: 'With profile image, no ENS'
             contentType: StatusMessage.ContentType.Text
@@ -600,9 +594,8 @@ QtObject {
             timestamp: "1658937930"
             senderId: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
             amIsender: false
-            userName: "Teenage Mutant Turtle"
-            ensName: "@turtle.statusofus.eth"
-            localName: "Bro from work"
+            senderOptionalName: "@turtle.statusofus.eth"
+            senderDisplayName: "Bro from work"
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg="
             message: 'With profile image and ENS'
             contentType: StatusMessage.ContentType.Text
@@ -627,9 +620,8 @@ QtObject {
             timestamp: "1658937930"
             senderId: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
             amIsender: true
-            userName: "You"
-            ensName: "@ghd.statusofus.eth"
-            localName: ""
+            senderDisplayName: "You"
+            senderOptionalName: "@ghd.statusofus.eth"
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg="
             message: 'Message with image'
             contentType: StatusMessage.ContentType.Image
@@ -654,9 +646,8 @@ QtObject {
             timestamp: "1658937930"
             senderId: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
             amIsender: true
-            userName: "You"
-            ensName: "@ghd.statusofus.eth"
-            localName: ""
+            senderDisplayName: "You"
+            senderOptionalName: "@ghd.statusofus.eth"
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg="
             message: '👍'
             contentType: StatusMessage.ContentType.Emoji
@@ -681,9 +672,8 @@ QtObject {
             timestamp: "1658937930"
             senderId: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
             amIsender: true
-            userName: "You"
-            ensName: "@ghd.statusofus.eth"
-            localName: ""
+            senderDisplayName: "You"
+            senderOptionalName: "@ghd.statusofus.eth"
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg="
             message: 'Message with sticker'
             contentType: StatusMessage.ContentType.Sticker
@@ -708,9 +698,8 @@ QtObject {
             timestamp: "1660937930"
             senderId: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
             amIsender: true
-            userName: "You"
-            ensName: "@ghd.statusofus.eth"
-            localName: ""
+            senderDisplayName: "You"
+            senderOptionalName: "@ghd.statusofus.eth"
             message: ""
             isCurrentUser: true
             contentType: StatusMessage.ContentType.Audio
@@ -737,9 +726,8 @@ QtObject {
             timestamp: "1660937930"
             senderId: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
             amIsender: true
-            userName: "You"
-            ensName: "@ghd.statusofus.eth"
-            localName: ""
+            senderDisplayName: "You"
+            senderOptionalName: "@ghd.statusofus.eth"
             message: "Hi Johnny"
             isCurrentUser: true
             contentType: StatusMessage.ContentType.Text
@@ -766,9 +754,8 @@ QtObject {
             timestamp: "1660937930"
             senderId: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
             amIsender: false
-            userName: "Pompie"
-            ensName: "@ghd.statusofus.eth"
-            localName: ""
+            senderDisplayName: "Pompie"
+            senderOptionalName: "@ghd.statusofus.eth"
             message: '<p>Do you have a Bitcoin wallet or Coinbase wallet?<br />You can earn up to 0.06021BTC every 3 hours with your phone or PC...<br />Without referrals nor registration fee...<br />If you are interested ask me “HOW”<br /><a href="https://t.me/Markstones455">https://t.me/Markstones455</a></p>'
             isCurrentUser: true
             contentType: StatusMessage.ContentType.Text
@@ -795,9 +782,8 @@ QtObject {
             timestamp: "1660937930"
             senderId: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
             amIsender: false
-            userName: "Pompie"
-            ensName: "@ghd.statusofus.eth"
-            localName: ""
+            senderDisplayName: "Pompie"
+            senderOptionalName: "@ghd.statusofus.eth"
             message: '<p><a href="//0x0431859bd00be79baef9617f4719ce73d2d261a2496f9a861f447a2f8ba34bf7ba03e572bb39fcf2df43564d39f6364bfe9be0a1fca3bf741e8f4b9492f86db427" class="mention">Uniform Dark Pike</a></p>'
             isCurrentUser: true
             contentType: StatusMessage.ContentType.Text
@@ -824,9 +810,8 @@ QtObject {
             timestamp: "1660937930"
             senderId: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
             amIsender: false
-            userName: "Pompie"
-            ensName: "@ghd.statusofus.eth"
-            localName: ""
+            senderDisplayName: "Pompie"
+            senderOptionalName: "@ghd.statusofus.eth"
             message: "Replying to text message"
             isCurrentUser: true
             contentType: StatusMessage.ContentType.Text
@@ -854,9 +839,8 @@ QtObject {
             timestamp: "1660937930"
             senderId: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
             amIsender: false
-            userName: "Pompie"
-            ensName: "@ghd.statusofus.eth"
-            localName: ""
+            senderDisplayName: "Pompie"
+            senderOptionalName: "@ghd.statusofus.eth"
             message: "Replying to a Image Message"
             isCurrentUser: true
             contentType: StatusMessage.ContentType.Text
@@ -884,9 +868,8 @@ QtObject {
             timestamp: "1660937930"
             senderId: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
             amIsender: false
-            userName: "Pompie"
-            ensName: "@ghd.statusofus.eth"
-            localName: ""
+            senderDisplayName: "Pompie"
+            senderOptionalName: "@ghd.statusofus.eth"
             message: "Replying to a sticker message"
             isCurrentUser: true
             contentType: StatusMessage.ContentType.Text
@@ -914,9 +897,8 @@ QtObject {
             timestamp: "1660937930"
             senderId: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
             amIsender: false
-            userName: "Pompie"
-            ensName: "@ghd.statusofus.eth"
-            localName: ""
+            senderDisplayName: "Pompie"
+            senderOptionalName: "@ghd.statusofus.eth"
             message: "Replying to a Audio message"
             isCurrentUser: true
             contentType: StatusMessage.ContentType.Text
@@ -944,9 +926,8 @@ QtObject {
             timestamp: "1660937930"
             senderId: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
             amIsender: false
-            userName: "Pumba"
-            ensName: "@quite.statusofus.eth"
-            localName: ""
+            senderDisplayName: "Pumba"
+            senderOptionalName: "@quite.statusofus.eth"
             message: "This is me"
             isCurrentUser: true
             contentType: StatusMessage.ContentType.Sticker
@@ -973,9 +954,8 @@ QtObject {
             timestamp: "1660937930"
             senderId: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
             amIsender: true
-            userName: "You"
-            ensName: "@ghd.statusofus.eth"
-            localName: ""
+            senderDisplayName: "You"
+            senderOptionalName: "@ghd.statusofus.eth"
             message: ""
             isCurrentUser: true
             contentType: StatusMessage.ContentType.Image
@@ -1002,12 +982,58 @@ QtObject {
             timestamp: "1657937930"
             amIsender: false
             senderId: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-            userName: "Teenage Mutant Turtle"
-            ensName: ""
-            localName: ""
+            senderDisplayName: "Teenage Mutant Turtle"
+            senderOptionalName: ""
             profileImage: ""
             contentType: StatusMessage.ContentType.Text
-            message: 'Simple text message with reactions'
+            message: 'Simple text message from another user with reactions'
+            messageContent: ""
+            isContact: false
+            trustIndicator: StatusContactVerificationIcons.TrustedType.None
+            hasMention: false
+            editMode: false
+            isReply: false
+            replySenderId: ""
+            replySenderName: ""
+            replyProfileImage: ""
+            replyMessageText: ""
+            replyAmISender: false
+            replyContentType: StatusMessage.ContentType.Text
+            replyMessageContent: ""
+            isPinned: false
+            pinnedBy: ""
+            hasExpired: false
+            reactions: [
+                ListElement {
+                    numberOfReactions: 2
+                    didIReactWithThisEmoji: false
+                    jsonArrayOfUsersReactedWithThisEmoji: '["User 1", "User 3"]'
+                    emojiId: 1
+                },
+                ListElement {
+                    numberOfReactions: 3
+                    didIReactWithThisEmoji: true
+                    jsonArrayOfUsersReactedWithThisEmoji: '["Teenage Mutant Turtle", "User 1", "User 3"]'
+                    emojiId: 3
+                },
+                ListElement {
+                    numberOfReactions: 1
+                    didIReactWithThisEmoji: false
+                    jsonArrayOfUsersReactedWithThisEmoji: '["User 3"]'
+                    emojiId: 4
+                }
+            ]
+        }
+        ListElement {
+            timestamp: "1657937930"
+            amIsender: true
+            senderId: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+            userName: "You"
+            ensName: ""
+            localName: ""
+            profileImage: ""
+            contentType: StatusMessage.ContentType.Text
+            message: 'Simple text message from current user with reactions'
             messageContent: ""
             isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.None
@@ -1029,10 +1055,6 @@ QtObject {
                     numberOfReactions: 2
                     didIReactWithThisEmoji: false
                     jsonArrayOfUsersReactedWithThisEmoji: '["User 1", "User 3"]'
-//                    jsonArrayOfUsersReactedWithThisEmoji: [
-//                        ListElement { text: "User 1" },
-//                        ListElement { text: "User 3" }
-//                    ]
                     emojiId: 1
                 },
                 ListElement {
@@ -1060,6 +1082,7 @@ QtObject {
             isVerified: true
             isUntrustworthy: false
             isContact: true
+            isImage: true
             onlineStatus: 1
             icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                           nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
@@ -1072,6 +1095,7 @@ QtObject {
             isVerified: false
             isUntrustworthy: true
             isContact: false
+            isImage: false
             onlineStatus: 0
             icon: ""
             isAdmin: false
@@ -1083,6 +1107,7 @@ QtObject {
             isVerified: false
             isUntrustworthy: false
             isContact: false
+            isImage: true
             onlineStatus: 1
             isAdmin: false
             icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDK
@@ -1095,6 +1120,7 @@ QtObject {
             isVerified: false
             isUntrustworthy: true
             isContact: true
+            isImage: false
             onlineStatus: 0
             icon: ""
             isAdmin: false

sandbox/main.qml

@@ -307,6 +307,11 @@ StatusWindow {
                         selected: viewLoader.source.toString().includes(title)
                         onClicked: mainPageView.page(title, true);
                     }
+                    StatusNavigationListItem {
+                        title: "StatusChartPanel"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title, true);
+                    }
                     StatusListSectionHeadline { text: "StatusQ.Popup" }
                     StatusNavigationListItem {
                         title: "StatusPopupMenu"

sandbox/pages/StatusChartPanelPage.qml

@@ -0,0 +1,193 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+import Sandbox 0.1
+
+Item {
+
+    QtObject {
+        id: d
+        //dummy data
+        property real stepSize: 1000
+        property real minStep: 12000
+        property real maxStep: 22000
+
+        property var graphTabsModel: [{text: "Price", enabled: true}, {text: "Balance", enabled: false}]
+        property var timeRangeTabsModel: [{text: "1H", enabled: true},
+                {text: "1D", enabled: true},{text: "7D", enabled: true},
+                {text: "1M", enabled: true}, {text: "6M", enabled: true},
+                {text: "1Y", enabled: true}, {text: "ALL", enabled: true}]
+
+        property var simTimer: Timer {
+            running: true
+            interval: 3000
+            repeat: true
+            onTriggered: {
+                d.generateData();
+            }
+        }
+
+        function minutes(minutes = 0) {
+            var newMinute = new Date(new Date().getTime() - (minutes * 60 * 1000)).toString();
+            if (newMinute.slice(10,12) === "00") {
+                var dateToday = new Date(Date.now()).toString();
+                return dateToday.slice(4,7) + " " + dateToday.slice(8,10);
+            }
+            return newMinute.slice(10,16);
+        }
+
+        function hour(hours = 0) {
+            var newHour = new Date(new Date().getTime() - (hours * 60 * 60 * 1000)).toString();
+            if (newHour.slice(10,12) === "00") {
+                var dateToday = new Date(Date.now()).toString();
+                return dateToday.slice(4,7) + " " + dateToday.slice(8,10);
+            }
+            return newHour.slice(10,16);
+        }
+
+        function day(before = 0) {
+            var newDay = new Date(Date.now() - before * 24 * 60 * 60 * 1000).toString();
+            return newDay.slice(4,7) + " " + newDay.slice(8,10);
+        }
+
+        function month(before = 0) {
+            var newMonth = new Date(Date.now() - before * 24 * 60 * 60 * 1000).toString();
+            return newMonth.slice(4,7) + " '" + newMonth.slice(newMonth.indexOf("G")-3, newMonth.indexOf("G")-1);
+        }
+
+        property var timeRange: [
+            {'1H': [minutes(60), minutes(55), minutes(50), minutes(45), minutes(40), minutes(35), minutes(30), minutes(25), minutes(20), minutes(15), minutes(10), minutes(5), minutes()]},
+            {'1D': [hour(24), hour(23), hour(22), hour(21), hour(20), hour(19), hour(18), hour(17), hour(16), hour(15), hour(14), hour(13),
+                    hour(12), hour(11), hour(10), hour(9), hour(8), hour(7), hour(6), hour(5), hour(4), hour(3), hour(2), hour(1), hour()]},
+            {'7D': [day(6), day(5), day(4), day(3), day(2), day(1), day()]},
+            {'1M': [day(30), day(28), day(26), day(24), day(22), day(20), day(18), day(16), day(14), day(12), day(10), day(8), day(6), day(4), day()]},
+            {'6M': [month(150), month(120), month(90), month(60), month(30), month()]},
+            {'1Y': [month(330), month(300), month(270), month(240), month(210), month(180), month(150), month(120), month(90), month(60), month(30), month()]},
+            {'ALL': ['2016', '2017', '2018', '2019', '2020', '2021', '2022']}
+        ]
+
+        function generateData() {
+            var result = [];
+            for (var i = 0; i < timeRange[graphDetail.timeRangeTabBarIndex][graphDetail.selectedTimeRange].length; ++i) {
+                result[i] = Math.random() * (maxStep - minStep) + minStep;
+            }
+            graphDetail.chart.chartData.datasets[0].data = result;
+            graphDetail.chart.animateToNewData();
+        }
+    }
+
+    StatusChartPanel {
+        id: graphDetail
+        height: 290
+        anchors.left: parent.left
+        anchors.leftMargin: 24
+        anchors.right: parent.right
+        anchors.rightMargin: 24
+        anchors.verticalCenter: parent.verticalCenter
+        graphsModel: d.graphTabsModel
+        timeRangeModel: d.timeRangeTabsModel
+        onHeaderTabClicked: {
+            //TODO
+            //if time range tab
+            d.generateData();
+            //if graph bar
+            //switch graph
+        }
+        chart.chartType: 'line'
+        chart.chartData: {
+            return {
+                labels: d.timeRange[graphDetail.timeRangeTabBarIndex][graphDetail.selectedTimeRange],
+                datasets: [{
+                    label: 'Price',
+                    xAxisId: 'x-axis-1',
+                    yAxisId: 'y-axis-1',
+                    backgroundColor: (Theme.palette.name === "dark") ? 'rgba(136, 176, 255, 0.2)' : 'rgba(67, 96, 223, 0.2)',
+                    borderColor: (Theme.palette.name === "dark") ? 'rgba(136, 176, 255, 1)' : 'rgba(67, 96, 223, 1)',
+                    borderWidth: 3,
+                    pointRadius: 0,
+                    //data: d.generateData()
+                }]
+            }
+        }
+
+        chart.chartOptions: {
+            return {
+                maintainAspectRatio: false,
+                responsive: true,
+                legend: {
+                    display: false
+                },
+                //TODO enable zoom
+//                zoom: {
+//                    enabled: true,
+//                    drag: true,
+//                    speed: 0.1,
+//                    threshold: 2
+//                },
+//                pan:{enabled:true,mode:'x'},
+                tooltips: {
+                    intersect: false,
+                    displayColors: false,
+                    callbacks: {
+                        footer: function(tooltipItem, data) { return 'Vol: $43,042,678,876'; },
+                        label: function(tooltipItem, data) {
+                          let label = data.datasets[tooltipItem.datasetIndex].label || '';
+                            if (label) {
+                                label += ': ';
+                            }
+                            label += tooltipItem.yLabel.toFixed(2);
+                            return label.slice(0,label.indexOf(":")+1)+ " $"+label.slice(label.indexOf(":")+2, label.length);
+                       }
+                    }
+                },
+                scales: {
+                    xAxes: [{
+                       id: 'x-axis-1',
+                       position: 'bottom',
+                       gridLines: {
+                           drawOnChartArea: false,
+                           drawBorder: false,
+                           drawTicks: false,
+                       },
+                       ticks: {
+                           fontSize: 10,
+                           fontColor: (Theme.palette.name === "dark") ? '#909090' : '#939BA1',
+                           padding: 16
+                       }
+                    }],
+                    yAxes: [{
+                       position: 'left',
+                       id: 'y-axis-1',
+                       gridLines: {
+                          borderDash: [8, 4],
+                          drawBorder: false,
+                          drawTicks: false,
+                          color: (Theme.palette.name === "dark") ? '#909090' : '#939BA1'
+                       },
+                       beforeDataLimits: (axis) => {
+                          axis.paddingTop = 25;
+                          axis.paddingBottom = 0;
+                        },
+                       ticks: {
+                          fontSize: 10,
+                          fontColor: (Theme.palette.name === "dark") ? '#909090' : '#939BA1',
+                          padding: 8,
+                          min: d.minStep,
+                          max: d.maxStep,
+                          stepSize: d.stepSize,
+                          callback: function(value, index, ticks) {
+                                return '$' + value;
+                          },
+                       }
+                    }]
+                }
+            }
+        }
+    }
+}

sandbox/pages/StatusPinInputPage.qml

@@ -72,4 +72,73 @@ Column {
         text: "Introduced PIN: " + regexPinInput.pinInput
         font.pixelSize: 12
     }
+
+    // PUK input that accepts only numbers
+    StatusBaseText {
+        topPadding: 100
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: Theme.palette.directColor1
+        text: "Enter Keycard PUK"
+        font.pixelSize: 30
+        font.bold: true
+    }
+
+    StatusPinInput {
+        id: numbersPukInput
+        anchors.horizontalCenter: parent.horizontalCenter
+        validator: StatusRegularExpressionValidator { regularExpression: /[0-9]+/ }
+        pinLen: 12
+    }
+
+    StatusBaseText {
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: Theme.palette.dangerColor1
+        text: "Only numbers allowed"
+        font.pixelSize: 16
+    }
+
+    StatusBaseText {
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: Theme.palette.directColor1
+        text: "Introduced PUK: " + numbersPukInput.pinInput
+        font.pixelSize: 12
+    }
+
+    // PUK input that accepts only numbers
+    StatusBaseText {
+        topPadding: 100
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: Theme.palette.directColor1
+        text: "Enter Keycard PUK"
+        font.pixelSize: 30
+        font.bold: true
+    }
+
+    StatusPinInput {
+        id: numbersPukInputWithSpacing
+        anchors.horizontalCenter: parent.horizontalCenter
+        validator: StatusRegularExpressionValidator { regularExpression: /[0-9]+/ }
+        pinLen: 12
+        additionalSpacing: 32
+        additionalSpacingOnEveryNItems: 4
+
+        Component.onCompleted: {
+            numbersPukInputWithSpacing.statesInitialization()
+            numbersPukInputWithSpacing.forceFocus()
+        }
+    }
+
+    StatusBaseText {
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: Theme.palette.dangerColor1
+        text: "Only numbers allowed"
+        font.pixelSize: 16
+    }
+
+    StatusBaseText {
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: Theme.palette.directColor1
+        text: "Introduced PUK: " + numbersPukInputWithSpacing.pinInput
+        font.pixelSize: 12
+    }
 }

src/StatusQ/Components/StatusChartPanel.qml

@@ -0,0 +1,144 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+import StatusQ.Controls 0.1
+
+import "private/chart"
+
+/*!
+     \qmltype StatusChartPanel
+     \inherits Page
+     \inqmlmodule StatusQ.Components
+     \since StatusQ.Components 0.1
+     \brief Displays a chart component together with an optional header in order to add a list of options.
+     Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-controls2-page.html}{Page}.
+
+     The \c StatusChartPanel displays a customizable chart component. Additionally, options
+     can be added in the header in both right and left sides given graphTabsModel and timeRangeTabsModel
+     property are set respectively.
+
+     For example:
+
+     \qml
+     StatusChartPanel {
+        id: graphDetail
+        width: parent.width
+        height: 290
+        anchors.verticalCenter: parent.verticalCenter
+        graphsModel: d.graphTabsModel
+        timeRangeModel: d.timeRangeTabsModel
+        chart.chartType: 'line'
+        chart.chartData: {
+            return {
+                datasets: [{
+                    data: d.data
+                }],
+                ...
+            }
+        }
+        chart.chartOptions: {
+            return {
+                legend: {
+                    display: false
+                },
+                ...
+            }
+        }
+    }
+    \endqml
+
+    \image status_chart_panel.png
+
+    For a list of components available see StatusQ.
+*/
+
+Page {
+    id: root
+
+    /*!
+        \qmlproperty var StatusChartPanel::graphsModel
+        This property holds the graphs model options to be set on the left side tab bar of the header.
+    */
+    property var graphsModel
+    /*!
+        \qmlproperty var StatusChartPanel::timeRangeModel
+        This property holds the time range options to be set on the right side tab bar of the header.
+    */
+    property var timeRangeModel
+
+    /*!
+        \qmlproperty alias StatusChartPanel::graphComponent
+        This property holds holds a reference to the graph component.
+    */
+    property alias chart: graphComponent
+
+    /*!
+        \qmlproperty alias StatusChartPanel::timeRangeTabBarIndex
+        This property holds holds a reference to the time range tab bar current index.
+    */
+    property alias timeRangeTabBarIndex: timeRangeTabBar.currentIndex
+
+    /*!
+        \qmlproperty string StatusChartPanel::selectedTimeRange
+        This property holds holds the text of the current time range tab bar selected tab.
+    */
+    property string selectedTimeRange: timeRangeTabBar.currentItem.text
+
+    /*!
+        \qmlsignal
+        This signal is emitted when a header tab bar is clicked.
+    */
+    signal headerTabClicked(string text)
+
+    Component {
+        id: tabButton
+        StatusTabButton {
+            leftPadding: 0
+            width: implicitWidth
+            onClicked: {
+                root.headerTabClicked(text);
+            }
+        }
+    }
+
+    Component.onCompleted: {
+        if (!!timeRangeModel) {
+            for (var i = 0; i < timeRangeModel.length; i++) {
+                var timeTab = tabButton.createObject(root, { text: timeRangeModel[i].text,
+                                                             enabled: timeRangeModel[i].enabled });
+                timeRangeTabBar.addItem(timeTab);
+            }
+        }
+        if (!!graphsModel) {
+            for (var j = 0; j < graphsModel.length; j++) {
+                var graphTab = tabButton.createObject(root, { text: graphsModel[j].text,
+                                                              enabled: graphsModel[j].enabled });
+                graphsTabBar.addItem(graphTab);
+            }
+        }
+    }
+
+    background: null
+    header: Item {
+        height: childrenRect.height
+        RowLayout {
+            anchors.left: parent.left
+            anchors.leftMargin: 46
+            anchors.right: parent.right
+            StatusTabBar {
+                id: graphsTabBar
+            }
+            StatusTabBar {
+                id: timeRangeTabBar
+                Layout.alignment: Qt.AlignRight
+            }
+        }
+    }
+
+    contentItem: Item {
+        Chart {
+            id: graphComponent
+            anchors.fill: parent
+        }
+    }
+}

src/StatusQ/Components/StatusChatList.qml

@@ -123,6 +123,7 @@ Column {
                     asset.isImage: model.icon.includes("data")
                     asset.name: model.icon
                     ringSettings.ringSpecModel: model.colorHash
+                    onlineStatus: model.onlineStatus
 
                     sensor.cursorShape: dragSensor.cursorShape
 

src/StatusQ/Components/StatusChatListItem.qml

@@ -21,6 +21,7 @@ Rectangle {
     property bool hasUnreadMessages: false
     property int notificationsCount: 0
     property bool muted: false
+    property int onlineStatus: StatusChatListItem.OnlineStatus.Inactive
 
     property StatusAssetSettings asset: StatusAssetSettings {
         width: 24
@@ -50,6 +51,11 @@ Rectangle {
         CommunityChat // 6
     }
 
+    enum OnlineStatus {
+        Inactive,
+        Online
+    }
+
     implicitWidth: 288
     implicitHeight: 40
 
@@ -84,6 +90,15 @@ Rectangle {
             anchors.verticalCenter: parent.verticalCenter
             asset: root.asset
             name: root.name
+
+            badge {
+                visible: type === StatusChatListItem.Type.OneToOneChat
+                color: onlineStatus === StatusChatListItem.OnlineStatus.Online ? Theme.palette.successColor1 : Theme.palette.baseColor1
+                border.width: 1
+                border.color: root.color
+                implicitHeight: 9
+                implicitWidth: 9
+            }
         }
 
         StatusIcon {

src/StatusQ/Components/StatusExpandableItem.qml

@@ -13,6 +13,7 @@ Rectangle {
     property alias button: button
     property alias expandableComponent: expandableRegion.sourceComponent
     property alias expandableItem: expandableRegion.item
+    property bool separatorVisible: true
 
     property int type: StatusExpandableItem.Type.Primary
     property bool expandable: true
@@ -49,7 +50,7 @@ Rectangle {
         height: 1
 
         color: Theme.palette.baseColor2
-        visible: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary)
+        visible: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) && separatorVisible
     }
 
 
@@ -57,7 +58,7 @@ Rectangle {
         id: header
         anchors.top: parent.top
         width: parent.width
-        height: 64
+        height: statusExpandableItem.type === StatusExpandableItem.Type.Tertiary ? 40 : 64
         radius: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 8 : 0
         color: statusExpandableItem.type === StatusExpandableItem.Type.Secondary && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
 
@@ -78,7 +79,7 @@ Rectangle {
                         (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? parent.top : undefined
             anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? 29 : 17
             anchors.left: identicon.active ? identicon.right : parent.left
-            anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ?  10 : 16
+            anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ?  10 : !identicon.active ? 0 : 16
 
             anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? identicon.verticalCenter : undefined
 
@@ -174,7 +175,7 @@ Rectangle {
     Loader {
         id: expandableRegion
         anchors.top: header.bottom
-        anchors.topMargin: 16
+        anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? 24 : 16
         anchors.left: parent.left
         anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 48 : 0
         anchors.right: parent.right
@@ -195,7 +196,7 @@ Rectangle {
         State {
             name: "EXPANDED"
             PropertyChanges {target: expandImage; icon: "chevron-up"}
-            PropertyChanges {target: statusExpandableItem; height: 82 + expandableRegion.height + 22}
+            PropertyChanges {target: statusExpandableItem; height: 82 + expandableRegion.height}
             PropertyChanges {target: expandableRegion; visible: true}
         },
         State {

src/StatusQ/Components/StatusItemSelector.qml

@@ -94,6 +94,12 @@ Rectangle {
        \endqml
     */
     property var itemsModel: ListModel { }
+    /*!
+       \qmlproperty bool StatusItemSelector::useIcons
+       This property determines if the imageSource role from the model will be handled as
+       an image or an icon.
+    */
+    property bool useIcons: false
     /*!
        \qmlproperty string StatusItemSelector::andOperatorText
        This property holds the string text representation for an `AND` logical operator.
@@ -168,7 +174,7 @@ Rectangle {
             Layout.fillWidth: true
             spacing: 6
             StatusListItemTag {
-                visible: itemsModel.count === 0
+                visible: !itemsModel || itemsModel.count === 0
                 title: root.defaultItemText
                 asset.name: root.defaultItemImageSource
                 asset.isImage: true
@@ -204,7 +210,8 @@ Rectangle {
                     StatusListItemTag {
                         title: model.text
                         asset.name: model.imageSource
-                        asset.isImage: true
+                        asset.isImage: !root.useIcons
+                        asset.bgColor: "transparent"
                         color: Theme.palette.primaryColor3
                         closeButtonVisible: false
                         titleText.color: Theme.palette.primaryColor1

src/StatusQ/Components/StatusListItem.qml

@@ -31,6 +31,8 @@ Rectangle {
     property Component bottomDelegate
     property alias tagsModel: tagsRepeater.model
     property Component tagsDelegate
+    property var inlineTagModel: []
+    property Component inlineTagDelegate
     property bool loading: false
     property bool loadingFailed: false
 
@@ -278,25 +280,68 @@ Rectangle {
                 anchors.leftMargin: 4
             }
 
-            StatusBaseText {
-                id: statusListItemSubTitle
-                objectName: "statusListItemSubTitle"
+            RowLayout {
+                id: statusListItemSubtitleTagsRow
                 anchors.top: statusListItemTitle.bottom
                 width: parent.width
-                text: statusListItem.subTitle
-                font.pixelSize: 15
-                color: statusListItem.loadingFailed ? Theme.palette.dangerColor1
-                                                    : !statusListItem.enabled || !statusListItem.tertiaryTitle
-                                                      ? Theme.palette.baseColor1
-                                                      : Theme.palette.directColor1
-                height: visible ? contentHeight : 0
-                visible: !!statusListItem.subTitle
-                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                spacing: 4
+
+                StatusBaseText {
+                    id: statusListItemSubTitle
+                    objectName: "statusListItemSubTitle"
+
+                    Layout.alignment: Qt.AlignVCenter
+                    Layout.preferredWidth: inlineTagModelRepeater.count > 0 ? contentWidth : parent.width
+
+                    text: statusListItem.subTitle
+                    font.pixelSize: 15
+                    color: statusListItem.loadingFailed ? Theme.palette.dangerColor1
+                                                        : !statusListItem.enabled || !statusListItem.tertiaryTitle
+                                                          ? Theme.palette.baseColor1
+                                                          : Theme.palette.directColor1
+                    visible: !!statusListItem.subTitle
+                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                }
+
+                StatusBaseText {
+                    id: dot
+                    Layout.alignment: Qt.AlignVCenter
+                    Layout.topMargin: -48
+
+                    text: "."
+                    font.pixelSize: 40
+                    color: Theme.palette.baseColor1
+                    lineHeightMode: Text.FixedHeight
+                    lineHeight: 24
+
+                    visible: inlineTagModelRepeater.count > 0
+                }
+
+                StatusScrollView {
+                    id: inlineTagModelRepeaterRow
+                    Layout.fillWidth: true
+                    Layout.alignment: Qt.AlignVCenter
+                    Layout.preferredHeight: row.height
+                    contentHeight: row.height
+                    contentWidth: row.width
+                    padding: 0
+                    clip: true
+                    interactive: false
+                    Row {
+                        id: row
+                        spacing: 4
+                        Repeater {
+                            id: inlineTagModelRepeater
+                            model: inlineTagModel
+                            delegate: inlineTagDelegate
+                        }
+                    }
+                }
             }
 
             StatusBaseText {
                 id: statusListItemTertiaryTitle
-                anchors.top: statusListItemSubTitle.bottom
+                anchors.top: statusListItemSubtitleTagsRow.bottom
                 width: parent.width
                 height: visible ? contentHeight : 0
                 text: statusListItem.tertiaryTitle

src/StatusQ/Components/StatusMessage.qml

@@ -37,6 +37,7 @@ Rectangle {
     property string errorLoadingImageText: ""
     property string audioMessageInfoText: ""
     property string pinnedMsgInfoText: ""
+    property string messageAttachments: ""
     property var reactionIcons: [
         Emoji.iconSource("❤"),
         Emoji.iconSource("👍"),
@@ -68,6 +69,7 @@ Rectangle {
     property color overrideBackgroundColor: "transparent"
     property bool overrideBackground: false
     property bool profileClickable: true
+    property bool hideMessage: false
 
     property alias previousMessageIndex: dateGroupLabel.previousMessageIndex
     property alias previousMessageTimestamp: dateGroupLabel.previousMessageTimestamp
@@ -101,6 +103,20 @@ Rectangle {
         messageFoundAnimation.start();
     }
 
+    onMessageAttachmentsChanged: {
+        root.prepareAttachmentsModel()
+    }
+
+    function prepareAttachmentsModel() {
+        attachmentsModel.clear()
+        if (!root.messageAttachments) {
+            return
+        }
+        root.messageAttachments.split(" ").forEach(source => {
+            attachmentsModel.append({source})
+        })
+    }
+
     implicitWidth: messageLayout.implicitWidth
                    + messageLayout.anchors.leftMargin
                    + messageLayout.anchors.rightMargin
@@ -227,14 +243,14 @@ Rectangle {
             spacing: 8
 
             Item {
-                implicitWidth: profileImage.width
+                implicitWidth: root.messageDetails.sender.profileImage.assetSettings.width
                 implicitHeight: profileImage.visible ? profileImage.height : 0
                 Layout.alignment: Qt.AlignTop
                 StatusSmartIdenticon {
                     id: profileImage
                     active: root.showHeader
                     visible: active
-                    name: root.messageDetails.sender.userName
+                    name: root.messageDetails.sender.displayName
                     asset: root.messageDetails.sender.profileImage.assetSettings
                     ringSettings: root.messageDetails.sender.profileImage.ringSettings
 
@@ -249,6 +265,7 @@ Rectangle {
             }
 
             ColumnLayout {
+
                 spacing: 4
                 Layout.alignment: Qt.AlignTop
                 Layout.fillWidth: true
@@ -277,7 +294,7 @@ Rectangle {
                 }
                 Loader {
                     Layout.fillWidth: true
-                    active: !editMode && !!root.messageDetails.messageText
+                    active: !root.editMode && !!root.messageDetails.messageText && !root.hideMessage
                     visible: active
                     sourceComponent: StatusTextMessage {
                         objectName: "StatusMessage_textMessage"
@@ -316,6 +333,24 @@ Rectangle {
                         shapeType: root.messageDetails.amISender ? StatusImageMessage.ShapeType.RIGHT_ROUNDED : StatusImageMessage.ShapeType.LEFT_ROUNDED
                     }
                 }
+
+                Loader {
+                    active: !!root.messageAttachments && !editMode
+                    visible: active
+                    sourceComponent: Column {
+                        spacing: 4
+                        Layout.fillWidth: true
+                        Repeater {
+                            model: attachmentsModel
+                            delegate: StatusImageMessage {
+                                source: model.source
+                                onClicked: root.imageClicked(image, mouse, imageSource)
+                                shapeType: root.messageDetails.amISender ? StatusImageMessage.ShapeType.RIGHT_ROUNDED : StatusImageMessage.ShapeType.LEFT_ROUNDED
+                            }
+                        }
+                    }
+                }
+
                 Loader {
                     active: root.messageDetails.contentType === StatusMessage.ContentType.Sticker && !editMode
                     visible: active
@@ -406,4 +441,11 @@ Rectangle {
         anchors.topMargin: -8
         visible: hoverHandler.hovered && !root.hideQuickActions
     }
+
+    ListModel {
+        id: attachmentsModel
+        Component.onCompleted: {
+            root.prepareAttachmentsModel()
+        }
+    }
 }

src/StatusQ/Components/StatusMessageSenderDetails.qml

@@ -5,29 +5,17 @@ QtObject {
     id: root
 
     property string id: ""
-    property string userName: ""
-    property string ensName: ""
-    property string localName: ""
+    property string displayName: ""
+    property string secondaryName: ""
 
+    property bool isEnsVerified: false
     property bool isContact: false
     property int trustIndicator: StatusContactVerificationIcons.TrustedType.None
 
     property StatusProfileImageSettings profileImage: StatusProfileImageSettings {
         pubkey: root.id
-        showRing: !root.ensName
+        showRing: !root.isEnsVerified
         width: 40
         height: 40
     }
-
-    readonly property string displayName: root.localName !== ""
-                                          ? root.localName
-                                          : root.ensName !== ""
-                                            ? root.ensName
-                                            : root.userName
-
-    readonly property string secondaryName: root.localName === ""
-                                            ? ""
-                                            : root.ensName !== ""
-                                              ? root.ensName
-                                              : root.userName
 }

src/StatusQ/Components/StatusSmartIdenticon.qml

@@ -99,6 +99,8 @@ Loader {
         visible: false
         anchors.bottom: root.bottom
         anchors.right: root.right
+        anchors.rightMargin: -border.width
+        anchors.bottomMargin: -border.width
         border.width: 3
         implicitHeight: 15
         implicitWidth: 15

src/StatusQ/Components/StatusToolBar.qml

@@ -9,10 +9,12 @@ import StatusQ.Controls 0.1
 ToolBar {
     id: root
 
+    property string backButtonName: ""
     property int notificationCount: 0
     property Item headerContent
     property alias notificationButton: notificationButton
 
+    signal backButtonClicked()
     signal notificationButtonClicked()
 
     implicitWidth: visible ? 518 : 0
@@ -23,6 +25,18 @@ ToolBar {
     RowLayout {
         anchors.fill: parent
         spacing: 0
+        StatusFlatButton {
+            icon.name: "arrow-left"
+            icon.width: 20
+            icon.height: 20
+            Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+            Layout.leftMargin: 12
+            visible: !!root.backButtonName
+            text: root.backButtonName
+            size: StatusBaseButton.Size.Large
+            onClicked: { root.backButtonClicked(); }
+        }
+
         Control {
             id: headerContentItem
             Layout.fillWidth: !!headerContent

src/StatusQ/Components/private/chart/Chart.qml

@@ -0,0 +1,139 @@
+/*!
+ * Elypson's Chart.qml adaptor to Chart.js
+ * (c) 2020 ChartJs2QML contributors (starting with Elypson, Michael A. Voelkel, https://github.com/Elypson)
+ * Released under the MIT License
+ */
+
+import QtQuick 2.13
+import "Chart.js" as Chart
+
+Canvas {
+    id: root
+
+    property var jsChart: undefined
+    property string chartType
+    property var chartData
+    property var chartOptions
+    property double chartAnimationProgress: 0.1
+    property var animationEasingType: Easing.InOutExpo
+    property double animationDuration: 500
+    property var memorizedContext
+    property var memorizedData
+    property var memorizedOptions
+    property alias animationRunning: chartAnimator.running
+
+    signal animationFinished()
+
+    function animateToNewData()
+    {
+        chartAnimationProgress = 0.1;
+        jsChart.update();
+        chartAnimator.restart();
+    }
+
+    MouseArea {
+        id: event
+        anchors.fill: root
+        hoverEnabled: true
+        enabled: true
+        property var handler: undefined
+
+        property QtObject mouseEvent: QtObject {
+            property int left: 0
+            property int top: 0
+            property int x: 0
+            property int y: 0
+            property int clientX: 0
+            property int clientY: 0
+            property string type: ""
+            property var target
+        }
+
+        function submitEvent(mouse, type) {
+            mouseEvent.type = type
+            mouseEvent.clientX = mouse ? mouse.x : 0;
+            mouseEvent.clientY = mouse ? mouse.y : 0;
+            mouseEvent.x = mouse ? mouse.x : 0;
+            mouseEvent.y = mouse ? mouse.y : 0;
+            mouseEvent.left = 0;
+            mouseEvent.top = 0;
+            mouseEvent.target = root;
+
+            if(handler) {
+                handler(mouseEvent);
+            }
+
+            root.requestPaint();
+        }
+
+        onClicked: {
+            submitEvent(mouse, "click");
+        }
+        onPositionChanged: {
+            submitEvent(mouse, "mousemove");
+        }
+        onExited: {
+            submitEvent(undefined, "mouseout");
+        }
+        onEntered: {
+            submitEvent(undefined, "mouseenter");
+        }
+        onPressed: {
+            submitEvent(mouse, "mousedown");
+        }
+        onReleased: {
+            submitEvent(mouse, "mouseup");
+        }
+    }
+
+    PropertyAnimation {
+        id: chartAnimator
+        target: root
+        property: "chartAnimationProgress"
+        alwaysRunToEnd: true
+        to: 1
+        duration: root.animationDuration
+        easing.type: root.animationEasingType
+        onFinished: {
+            root.animationFinished();
+        }
+    }
+
+    onChartAnimationProgressChanged: {
+        root.requestPaint();
+    }
+
+    onPaint: {
+        if(root.getContext('2d') != null && memorizedContext != root.getContext('2d') || memorizedData != root.chartData || memorizedOptions != root.chartOptions) {
+            var ctx = root.getContext('2d');
+
+            jsChart = new Chart.build(ctx, {
+                type: root.chartType,
+                data: root.chartData,
+                options: root.chartOptions
+                });
+
+            memorizedData = root.chartData ;
+            memorizedContext = root.getContext('2d');
+            memorizedOptions = root.chartOptions;
+
+            root.jsChart.bindEvents(function(newHandler) {event.handler = newHandler;});
+
+            chartAnimator.start();
+        }
+
+        jsChart.draw(chartAnimationProgress);
+    }
+
+    onWidthChanged: {
+        if(jsChart) {
+            jsChart.resize();
+        }
+    }
+
+    onHeightChanged: {
+        if(jsChart) {
+            jsChart.resize();
+        }
+    }
+}

src/StatusQ/Components/private/chart/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 ChartJs2QML contributors (starting with Elypson, Michael A. Voelkel, https://github.com/Elypson)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -1,5 +1,6 @@
 import QtQuick 2.3
 import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.14
 import QtGraphicalEffects 1.13
 
 import StatusQ.Core 0.1
@@ -73,100 +74,65 @@ Item {
 
         Repeater {
             id: reactionRepeater
+
             width: childrenRect.width
             model: root.emojiReactionsModel
 
-            Rectangle {
-                id: emojiContainer
+            Control {
+                id: reactionDelegate
 
-                readonly property bool isHovered: mouseArea.containsMouse
+                topPadding: 2
+                bottomPadding: 2
+                leftPadding: 2
+                rightPadding: 6
 
-                width: emojiImage.width + emojiCount.width + (root.imageMargin * 2) +  + 8
-                height: 20
-                radius: 10
-                color: model.didIReactWithThisEmoji ?
-                           (isHovered ? Theme.palette.statusMessage.emojiReactionActiveBackgroundHovered : Theme.palette.statusMessage.emojiReactionActiveBackground) :
-                           (isHovered ? Theme.palette.statusMessage.emojiReactionBackgroundHovered : Theme.palette.statusMessage.emojiReactionBackground)
+                background: Rectangle {
+                    radius: 10
+                    color: model.didIReactWithThisEmoji
+                               ? (reactionDelegate.hovered ? Theme.palette.statusMessage.emojiReactionActiveBackgroundHovered
+                                                         : Theme.palette.statusMessage.emojiReactionActiveBackground)
+                               : (reactionDelegate.hovered ? Theme.palette.statusMessage.emojiReactionBackgroundHovered
+                                                         : Theme.palette.statusMessage.emojiReactionBackground)
 
-                StatusToolTip {
-                    visible: mouseArea.containsMouse
-                    maxWidth: 400
-                    text: d.showReactionAuthors(model.jsonArrayOfUsersReactedWithThisEmoji, model.emojiId)
+                    // Rounded corner to cover one corner
+                    Rectangle {
+                        anchors.top: parent.top
+                        anchors.left: parent.left
+                        width: 10
+                        height: 10
+                        radius: 2
+                        color: parent.color
+                    }
                 }
 
-                // Rounded corner to cover one corner
-                Rectangle {
-                    color: parent.color
-                    width: 10
-                    height: 10
-                    anchors.top: parent.top
-                    anchors.left: !root.isCurrentUser ? parent.left : undefined
-                    anchors.leftMargin: 0
-                    anchors.right: !root.isCurrentUser ? undefined : parent.right
-                    anchors.rightMargin: 0
-                    radius: 2
-                    z: -1
-                }
+                contentItem: Row {
+                    spacing: 4
 
-                // This is a workaround to get a "border" around the rectangle including the weird rectangle
-                Loader {
-                    active: model.didIReactWithThisEmoji
-                    anchors.top: parent.top
-                    anchors.topMargin: -1
-                    anchors.left: parent.left
-                    anchors.leftMargin: -1
-                    z: -2
+                    StatusEmoji {
+                        anchors.verticalCenter: parent.verticalCenter
+                        width: 15
+                        height: 15
 
-                    sourceComponent: Component {
-                        Rectangle {
-                            width: emojiContainer.width + 2
-                            height: emojiContainer.height + 2
-                            radius: emojiContainer.radius
-                            color: Theme.palette.primaryColor1
-
-                            Rectangle {
-                                color: parent.color
-                                width: 10
-                                height: 10
-                                anchors.top: parent.top
-                                anchors.left: !root.isCurrentUser ? parent.left : undefined
-                                anchors.leftMargin: 0
-                                anchors.right: !root.isCurrentUser ? undefined : parent.right
-                                anchors.rightMargin: 0
-                                radius: 2
-                                z: -1
-                            }
+                        source: {
+                            if (model.emojiId >= 1 && model.emojiId <= root.icons.length)
+                                return root.icons[model.emojiId - 1];
+                            return "";
                         }
                     }
-                }
 
-                // TODO: Use Row
-
-                StatusEmoji {
-                    id: emojiImage
-
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.left: parent.left
-                    anchors.leftMargin: root.imageMargin
-
-                    width: 15
-                    height: 15
-
-                    source: {
-                        if (model.emojiId >= 1 && model.emojiId <= root.icons.length)
-                            return root.icons[model.emojiId - 1];
-                        return "";
+                    StatusBaseText {
+                        anchors.verticalCenter: parent.verticalCenter
+                        text: model.numberOfReactions
+                        font.pixelSize: 12
+                        color: model.didIReactWithThisEmoji ? Theme.palette.indirectColor1 : Theme.palette.directColor1
                     }
+
                 }
 
-                StatusBaseText {
-                    id: emojiCount
-                    text: model.numberOfReactions
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.left: emojiImage.right
-                    anchors.leftMargin: root.imageMargin
-                    font.pixelSize: 12
-                    color: model.didIReactWithThisEmoji ? Theme.palette.primaryColor1 : Theme.palette.directColor1
+                StatusToolTip {
+                    visible: reactionDelegate.hovered
+                    maxWidth: 400
+                    text: d.showReactionAuthors(model.jsonArrayOfUsersReactedWithThisEmoji, model.emojiId)
                 }
 
                 MouseArea {
@@ -194,7 +160,7 @@ Item {
             StatusIcon {
                 id: addEmojiButton
 
-                property bool isHovered: false // TODO: Replace with mouseArea.containsMouse
+                readonly property bool isHovered: addEmojiButtonMouseArea.containsMouse
 
                 anchors.left: parent.left
                 anchors.leftMargin: 2.5
@@ -211,8 +177,6 @@ Item {
                 anchors.fill: addEmojiButton
                 cursorShape: Qt.PointingHandCursor
                 hoverEnabled: true
-                onEntered: addEmojiButton.isHovered = true
-                onExited: addEmojiButton.isHovered = false
                 onClicked: {
                     root.addEmojiClicked(this, mouse);
                 }

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

@@ -89,7 +89,7 @@ Item {
         }
         StatusBaseText {
             id: tertiaryDetailText
-            visible: !root.amISender && messageOriginInfo == ""
+            visible: !root.amISender && root.messageOriginInfo === ""
             Layout.alignment: Qt.AlignVCenter
             font.pixelSize: 10
             elide: Text.ElideMiddle

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

@@ -58,7 +58,7 @@ Item {
                 StatusSmartIdenticon {
                     id: profileImage
                     Layout.alignment: Qt.AlignTop
-                    name: replyDetails.sender.userName
+                    name: replyDetails.sender.displayName
                     asset: replyDetails.sender.profileImage.assetSettings
                     ringSettings: replyDetails.sender.profileImage.ringSettings
                     MouseArea {

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

@@ -40,6 +40,7 @@ Loader {
         }
 
         contentItem: RowLayout {
+            spacing: 4
             StatusIcon {
                 Layout.alignment: Qt.AlignVCenter
                 Layout.preferredWidth: 16
@@ -56,7 +57,6 @@ Loader {
             }
             StatusBaseText {
                 Layout.alignment: Qt.AlignVCenter
-                Layout.leftMargin: -4
                 color: Theme.palette.directColor1
                 font.pixelSize: 13
                 font.weight: Font.Medium

src/StatusQ/Components/qmldir

@@ -43,3 +43,5 @@ StatusCommunityTags 0.1 StatusCommunityTags.qml
 StatusItemSelector 0.1 StatusItemSelector.qml
 StatusCard 0.1 StatusCard.qml
 StatusDatePicker 0.1 StatusDatePicker.qml
+StatusChart 0.1 StatusChart.qml
+StatusChartPanel 0.1 StatusChartPanel.qml

src/StatusQ/Controls/StatusBaseButton.qml

@@ -1,11 +1,14 @@
 import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import QtQuick.Controls 2.14
+
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 import StatusQ.Core.Utils 0.1
 
-Rectangle {
-    id: statusBaseButton
+Button {
+    id: root
 
     enum Size {
         Tiny,
@@ -19,158 +22,106 @@ Rectangle {
         Primary
     }
 
-    property StatusAssetSettings icon: StatusAssetSettings {
-        width: 24
-        height: 24
-    }
+    property StatusAssetSettings asset: StatusAssetSettings { }
 
-    property bool loading: false
+    property bool loading
 
-    property alias hovered: sensor.containsMouse
+    property color normalColor
+    property color hoverColor
+    property color disabledColor
+
+    property color textColor
+    property color disabledTextColor
+    property color borderColor: "transparent"
 
     property int size: StatusBaseButton.Size.Large
     property int type: StatusBaseButton.Type.Normal
 
-    property alias text: label.text
-    property alias font: label.font
-
-    property real defaultLeftPadding: size === StatusBaseButton.Size.Large ? 24 : 12
-    property real defaultRightPadding: size === StatusBaseButton.Size.Large ? 24 : 12
-    property real defaultTopPadding: {
-        switch (size) {
-            case StatusBaseButton.Size.Tiny:
-              return 5
-            case StatusBaseButton.Size.Small:
-              return 10
-            case StatusBaseButton.Size.Large:
-            default:
-              return 11
-        }
-    }
-    property real defaultBottomPadding: {
-        switch (size) {
-            case StatusBaseButton.Size.Tiny:
-              return 5
-            case StatusBaseButton.Size.Small:
-              return 10
-            case StatusBaseButton.Size.Large:
-            default:
-              return 11
-        }
-    }
-
-
-    property real leftPadding: defaultLeftPadding
-    property real rightPadding: defaultRightPadding
-    property real topPadding: defaultTopPadding
-    property real bottomPadding: defaultBottomPadding
-
-    property color normalColor
-    property color hoverColor
-    property color disaledColor
-
-    property color textColor
-    property color disabledTextColor
-
-    signal pressed(var mouse)
-    signal released(var mouse)
-    signal clicked(var mouse)
-    signal pressAndHold(var mouse)
-
-    property bool highlighted: false
-
-
-    /// Implementation
-    implicitWidth: layout.width + statusBaseButton.leftPadding + statusBaseButton.rightPadding
-    implicitHeight: layout.height + statusBaseButton.topPadding + statusBaseButton.bottomPadding
-
-
-    radius: size !== StatusBaseButton.Size.Tiny ? 8 : 6
-
-    color: {
-        if (statusBaseButton.enabled)
-            return !statusBaseButton.loading && (sensor.containsMouse || highlighted) ? hoverColor
-                                                       : normalColor;
-        return disaledColor
-    }
-
     QtObject {
         id: d
-        readonly property color textColor: statusBaseButton.enabled ? statusBaseButton.textColor : statusBaseButton.disabledTextColor
+        readonly property color textColor: root.enabled || root.loading ? root.textColor : root.disabledTextColor
     }
 
+    font.family: Theme.palette.baseFont.name
+    font.weight: Font.Medium
+    font.pixelSize: size === StatusBaseButton.Size.Large ? 15 : 13
+
+    horizontalPadding: {
+        if (root.icon.name) {
+            return size === StatusBaseButton.Size.Large ? 18 : 16
+        }
+        return size === StatusBaseButton.Size.Large ? 24 : 12
+    }
+    verticalPadding: {
+        switch (size) {
+        case StatusBaseButton.Size.Tiny:
+            return 5
+        case StatusBaseButton.Size.Small:
+            return 10
+        case StatusBaseButton.Size.Large:
+        default:
+            return 11
+        }
+    }
+
+    spacing: root.size === StatusBaseButton.Size.Large ? 6 : 4
+
+    icon.height: 24
+    icon.width: 24
+
+    background: Rectangle {
+        radius: root.size === StatusBaseButton.Size.Tiny ? 6 : 8
+        border.color: root.borderColor
+        color: {
+            if (root.enabled)
+                return !root.loading && (root.hovered || root.highlighted) ? hoverColor : normalColor;
+            return disabledColor;
+        }
+    }
+
+    contentItem: RowLayout {
+        spacing: root.spacing
+        StatusIcon {
+            Layout.preferredWidth: visible ? root.icon.width : 0
+            Layout.preferredHeight: visible ? root.icon.height : 0
+            icon: root.icon.name
+            rotation: root.asset.rotation
+            opacity: !loading && root.icon.name !== ""
+            visible: root.icon.name !== ""
+            color: d.textColor
+        }
+        StatusEmoji {
+            Layout.preferredWidth: visible ? root.icon.width : 0
+            Layout.preferredHeight: visible ? root.icon.height : 0
+            visible: root.asset.emoji
+            emojiId: Emoji.iconId(root.asset.emoji, root.asset.emojiSize) || ""
+        }
+        StatusBaseText {
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+            opacity: !loading
+            font: root.font
+            text: root.text
+            color: d.textColor
+            verticalAlignment: Text.AlignVCenter
+        }
+    }
+
+    Loader {
+        anchors.centerIn: parent
+        active: root.loading
+        sourceComponent: StatusLoadingIndicator {
+            color: d.textColor
+        }
+    }
+
+    // stop the mouse clicks in the "loading" state w/o disabling the whole button
+    // as this would make it impossible to have hover events or a tooltip
     MouseArea {
-        id: sensor
         anchors.fill: parent
-        cursorShape: loading ? Qt.ArrowCursor
-                             : Qt.PointingHandCursor
-
-        hoverEnabled: true
-        enabled: statusBaseButton.enabled
-
-        Loader {
-            anchors.centerIn: parent
-            active: loading
-            sourceComponent: StatusLoadingIndicator {
-                color: d.textColor
-            } // Indicator
-        } // Loader
-
-        Row {
-            id: layout
-            anchors.centerIn: parent
-            spacing: 4
-            StatusIcon {
-                id: statusIcon
-                width: statusBaseButton.icon.width
-                height: statusBaseButton.icon.height
-                icon: statusBaseButton.icon.name
-                rotation: statusBaseButton.icon.rotation
-                anchors.verticalCenter: parent.verticalCenter
-                opacity: !loading && statusBaseButton.icon.name !== ""
-                visible: statusBaseButton.icon.name !== ""
-                color: d.textColor
-            } // Icon
-            StatusEmoji {
-                width: statusBaseButton.icon.width
-                height: statusBaseButton.icon.height
-                anchors.verticalCenter: parent.verticalCenter
-                visible: statusBaseButton.icon.emoji
-                emojiId: Emoji.iconId(statusBaseButton.icon.emoji, statusBaseButton.icon.emojiSize) || ""
-            } // Emoji
-            StatusBaseText {
-                id: label
-                opacity: !loading
-                anchors.verticalCenter: parent.verticalCenter
-                font.pixelSize: size === StatusBaseButton.Size.Large ? 15 : 13 // by design
-
-                color: d.textColor
-            } // Text
-        } // Row
-
-
-        onPressed: {
-            if (!loading) {
-                statusBaseButton.pressed(mouse)
-            }
-        }
-
-        onReleased: {
-            if (!loading) {
-                statusBaseButton.released(mouse)
-            }
-        }
-
-        onClicked: {
-            if (!loading) {
-                statusBaseButton.clicked(mouse)
-            }
-        }
-
-        onPressAndHold: {
-            if (!loading) {
-                statusBaseButton.pressAndHold(mouse)
-            }
-        }
-    } // Sensor
+        acceptedButtons: Qt.AllButtons
+        enabled: root.loading
+        onPressed: mouse.accepted = true
+        onWheel: wheel.accepted = true
+        cursorShape: !root.loading ? Qt.PointingHandCursor: undefined // always works; 'undefined' resets to default cursor
+    }
 }

src/StatusQ/Controls/StatusButton.qml

@@ -11,12 +11,10 @@ StatusBaseButton {
     hoverColor: type === StatusBaseButton.Type.Primary ? Theme.palette.hoverColor(normalColor) :
                                                          type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor2
                                                                                                : Theme.palette.dangerColor2
-    disaledColor: Theme.palette.baseColor2
+    disabledColor: Theme.palette.baseColor2
 
     textColor: type === StatusBaseButton.Type.Primary ? Theme.palette.white :
                                                         type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor1
                                                                                               : Theme.palette.dangerColor1
     disabledTextColor: Theme.palette.baseColor1
-
-    font.weight: type === StatusBaseButton.Type.Primary ? Font.Medium : Font.Normal
 }

src/StatusQ/Controls/StatusChatInfoButton.qml

@@ -1,24 +1,20 @@
 import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
 
-Rectangle {
-    id: statusChatInfoButton
+Button {
+    id: root
     objectName: "chatInfoButton"
 
-    implicitWidth: identicon.width +
-                   Math.max(
-                       statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonTitle.implicitWidth,
-                       statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonSubTitle.implicitWidth
-                       ) + 8
-    implicitHeight: 48
-
-    property string title: ""
-    property string subTitle: ""
-    property bool muted: false
-    property int pinnedMessagesCount: 0
+    property string title: text
+    property string subTitle
+    property bool muted
+    property int pinnedMessagesCount
 
     property StatusAssetSettings asset: StatusAssetSettings {
         width: 36
@@ -29,9 +25,7 @@ Rectangle {
 
     property int type: StatusChatInfoButton.Type.PublicChat
     property alias tooltip: statusToolTip
-    property alias sensor: sensor
 
-    signal clicked(var mouse)
     signal pinnedMessagesCountClicked(var mouse)
     signal unmute()
     signal linkActivated(string link)
@@ -46,192 +40,163 @@ Rectangle {
         CommunityChat // 6
     }
 
-    radius: 8
-    color: sensor.enabled && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
+    horizontalPadding: 4
+    verticalPadding: 2
+    spacing: 4
 
-    MouseArea {
-        id: sensor
-        anchors.fill: parent
-        hoverEnabled: true
-        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+    background: Rectangle {
+        radius: 8
+        color: root.enabled && root.hovered ? Theme.palette.baseColor2 : "transparent"
 
-        onClicked: statusChatInfoButton.clicked(mouse)
+        MouseArea {
+            anchors.fill: parent
+            acceptedButtons: Qt.NoButton
+            cursorShape: root.hovered ? Qt.PointingHandCursor : undefined
+        }
+    }
 
+    contentItem: RowLayout {
+        spacing: root.spacing
+
+        // identicon
         StatusSmartIdenticon {
             id: identicon
-            anchors.left: parent.left
-            anchors.leftMargin: 4
-            anchors.verticalCenter: parent.verticalCenter
-            asset: statusChatInfoButton.asset
-            name: statusChatInfoButton.title
+            asset: root.asset
+            name: root.title
         }
 
-        Item {
-            id: statusChatInfoButtonTitle
-            anchors.top: identicon.top
-            anchors.topMargin: statusChatInfoButtonSubTitle.visible ? 0 : 8
-            anchors.left: identicon.right
-            anchors.leftMargin: 8
+        // text
+        ColumnLayout {
+            Layout.fillWidth: true
+            spacing: 2
 
-            width: Math.min(parent.width - anchors.leftMargin
-                            - identicon.width - identicon.anchors.leftMargin,
-                            implicitWidth)
-            height: chatName.height
+            // title
+            RowLayout {
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignLeading | Qt.AlignBottom
+                spacing: root.spacing
 
-            implicitWidth: statusIcon.width + chatName.anchors.leftMargin + chatName.implicitWidth
-                           + mutedDelta
+                StatusIcon {
+                    visible: root.type !== StatusChatInfoButton.Type.OneToOneChat
+                    Layout.preferredWidth: 14
+                    Layout.preferredHeight: 14
+                    color: root.muted ? Theme.palette.baseColor1 : Theme.palette.directColor1
+                    icon: {
+                        switch (root.type) {
+                        case StatusChatInfoButton.Type.PublicCat:
+                            return "tiny/public-chat"
+                        case StatusChatInfoButton.Type.GroupChat:
+                            return "tiny/group"
+                        case StatusChatInfoButton.Type.CommunityChat:
+                            return "tiny/channel"
+                        default:
+                            return "tiny/public-chat"
+                        }
+                    }
+                }
 
-            property real mutedDelta: mutedIcon.visible ? mutedIcon.width + 8 : 0
+                StatusBaseText {
+                    objectName: "statusChatInfoButtonNameText"
+                    Layout.fillWidth: true
+                    elide: Text.ElideRight
+                    text: root.type === StatusChatInfoButton.Type.PublicChat && !root.title.startsWith("#") ?
+                              "#" + root.title
+                            : root.title
+                    color: root.muted ? Theme.palette.directColor5 : Theme.palette.directColor1
+                    font.weight: Font.Medium
+                }
 
-            StatusIcon {
-                id: statusIcon
-                anchors.top: parent.top
-                anchors.topMargin: -2
-                anchors.left: parent.left
+                StatusIcon {
+                    objectName: "mutedIcon"
+                    Layout.preferredWidth: 13
+                    Layout.preferredHeight: 13
+                    icon: "tiny/muted"
+                    color: mutedIconSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1
+                    visible: root.muted
 
-                visible: statusChatInfoButton.type !== StatusChatInfoButton.Type.OneToOneChat
-                width: visible ? 14 : 0
-                color: statusChatInfoButton.muted ? Theme.palette.baseColor1 : Theme.palette.directColor1
-                icon: {
-                    switch (statusChatInfoButton.type) {
-                    case StatusChatInfoButton.Type.PublicCat:
-                        return "tiny/public-chat"
-                        break;
-                    case StatusChatInfoButton.Type.GroupChat:
-                        return "tiny/group"
-                        break;
-                    case StatusChatInfoButton.Type.CommunityChat:
-                        return "tiny/channel"
-                        break;
-                    default:
-                        return "tiny/public-chat"
+                    MouseArea {
+                        id: mutedIconSensor
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        anchors.fill: parent
+                        onClicked: root.unmute()
+                    }
+
+                    StatusToolTip {
+                        id: statusToolTip
+                        text: qsTr("Unmute")
+                        visible: mutedIconSensor.containsMouse
+                        orientation: StatusToolTip.Orientation.Bottom
+                        y: parent.height + 12
                     }
                 }
             }
 
-            StatusBaseText {
-                id: chatName
-                objectName: "statusChatInfoButtonNameText"
+            // subtitle
+            RowLayout {
+                id: subtitleRow
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignLeading | Qt.AlignTop
+                Layout.rightMargin: 4
+                spacing: 0
 
-                anchors.left: statusIcon.visible ? statusIcon.right : parent.left
-                anchors.leftMargin: statusIcon.visible ? 1 : 0
-                anchors.top: parent.top
-
-                elide: Text.ElideRight
-                width: Math.min(implicitWidth, parent.width
-                                - statusIcon.width
-                                - statusChatInfoButtonTitle.mutedDelta)
-
-                text: statusChatInfoButton.type === StatusChatInfoButton.Type.PublicChat &&
-                      !statusChatInfoButton.title.startsWith("#") ?
-                          "#" + statusChatInfoButton.title :
-                          statusChatInfoButton.title
-                color: statusChatInfoButton.muted ? Theme.palette.directColor5 : Theme.palette.directColor1
-                font.pixelSize: 15
-                font.weight: Font.Medium
-            }
-
-            StatusIcon {
-                objectName: "mutedIcon"
-                id: mutedIcon
-                anchors.left: chatName.right
-                anchors.leftMargin: 4
-                anchors.top: chatName.top
-                anchors.topMargin: -2
-                width: 13
-                icon: "tiny/muted"
-                color: mutedIconSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1
-                visible: statusChatInfoButton.muted
-
-                MouseArea {
-                    id: mutedIconSensor
-                    hoverEnabled: true
-                    cursorShape: Qt.PointingHandCursor
-                    anchors.fill: parent
-                    onClicked: statusChatInfoButton.unmute()
+                StatusSelectableText {
+                    Layout.fillWidth: implicitWidth + separator.width + pinIcon.width + pinText.width > subtitleRow.width
+                    text: root.subTitle
+                    visible: root.subTitle
+                    color: Theme.palette.baseColor1
+                    font.pixelSize: 12
+                    onLinkActivated: root.linkActivated(link)
                 }
 
-                StatusToolTip {
-                    id: statusToolTip
-                    text: "Unmute"
-                    visible: mutedIconSensor.containsMouse
-                    orientation: StatusToolTip.Orientation.Bottom
-                    y: parent.height + 12
+                Rectangle {
+                    id: separator
+                    Layout.preferredHeight: 12
+                    Layout.preferredWidth: 1
+                    Layout.leftMargin: 4
+                    Layout.rightMargin: 2
+                    color: Theme.palette.directColor7
+                    visible: root.subTitle && root.pinnedMessagesCount
                 }
-            }
-        }
 
-        Item {
-            id: statusChatInfoButtonSubTitle
-            anchors.left: statusChatInfoButtonTitle.left
-            anchors.top: statusChatInfoButtonTitle.bottom
-            visible: !!statusChatInfoButton.subTitle || statusChatInfoButton.pinnedMessagesCount > 0
-            height: visible ? chatType.height : 0
-            width: Math.min(parent.width - statusChatInfoButtonTitle.anchors.leftMargin
-                            - identicon.width - identicon.anchors.leftMargin - 8,
-                            implicitWidth)
-
-            implicitWidth: chatType.implicitWidth + pinIconDelta + 8
-
-
-            property real pinIconDelta: pinIcon.visible ? pinIcon.width + pinIcon.anchors.leftMargin
-                                                          + divider.width + divider.anchors.leftMargin
-                                                        : 0
-
-            StatusSelectableText {
-                id: chatType
-                text: statusChatInfoButton.subTitle
-                color: Theme.palette.baseColor1
-                font.pixelSize: 12
-                width: Math.min(parent.width - (pinIcon.visible ? divider.width + divider.anchors.leftMargin + pinIcon.width + pinIcon.anchors.leftMargin : 0),
-                                implicitWidth)
-                onLinkActivated: statusChatInfoButton.linkActivated(link)
-            }
-
-            Rectangle {
-                id: divider
-                height: 12
-                width: 1
-                color: Theme.palette.directColor7
-                anchors.left: chatType.right
-                anchors.leftMargin: 4
-                anchors.verticalCenter: chatType.verticalCenter
-                visible: !!chatType.text && pinIcon.visible
-            }
-
-            StatusIcon {
-                id: pinIcon
-
-                anchors.left: divider.visible ? divider.right : parent.left
-                anchors.leftMargin: -2
-                anchors.verticalCenter: chatType.verticalCenter
-                height: 14
-                visible: statusChatInfoButton.pinnedMessagesCount > 0
-                icon: "pin"
-                color: Theme.palette.baseColor1
-            }
-
-            StatusBaseText {
-                objectName: "StatusChatInfo_pinText"
-                anchors.left: pinIcon.right
-                anchors.leftMargin: -6
-                anchors.verticalCenter: pinIcon.verticalCenter
-
-                width: 14
-                text: statusChatInfoButton.pinnedMessagesCount
-                font.pixelSize: 12
-                font.underline: pinCountSensor.containsMouse
-                visible: pinIcon.visible
-                color: pinCountSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1
-
-                MouseArea {
-                    objectName: "pinMessagesCounterSensor"
-                    id: pinCountSensor
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    cursorShape: Qt.PointingHandCursor
-                    onClicked: statusChatInfoButton.pinnedMessagesCountClicked(mouse)
+                StatusIcon {
+                    id: pinIcon
+                    Layout.preferredHeight: 14
+                    Layout.preferredWidth: 14
+                    visible: root.pinnedMessagesCount > 0
+                    icon: "pin"
+                    color: Theme.palette.baseColor1
                 }
+
+                StatusBaseText {
+                    id: pinText
+                    TextMetrics {
+                         id: tm
+                         font: pinText.font
+                         elide: Text.ElideRight
+                         elideWidth: pinText.width
+                         text: qsTr("%Ln pinned message(s)", "", root.pinnedMessagesCount)
+                     }
+
+                    objectName: "StatusChatInfo_pinText"
+                    Layout.fillWidth: true
+                    text: tm.elidedText !== tm.text ? root.pinnedMessagesCount : tm.text
+                    font.pixelSize: 12
+                    font.underline: pinCountSensor.containsMouse
+                    visible: root.pinnedMessagesCount
+                    color: pinCountSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1
+
+                    MouseArea {
+                        objectName: "pinMessagesCounterSensor"
+                        id: pinCountSensor
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: root.pinnedMessagesCountClicked(mouse)
+                    }
+                }
+
+                Item { Layout.fillWidth: true }
             }
         }
     }

src/StatusQ/Controls/StatusColorRadioButton.qml

@@ -8,11 +8,13 @@ RadioButton {
 
     property string radioButtonColor: ""
     property string selectionColor: StatusColors.colors['white']
-    property int diameter: 48
-    property int selectorDiameter: 20
+    property int diameter: 44
+    property int selectorDiameter: 16
 
-    implicitWidth: 48
-    implicitHeight: 48
+    spacing: 0
+
+    implicitWidth: 44
+    implicitHeight: 44
 
     indicator: Rectangle {
         implicitWidth: control.diameter
@@ -21,13 +23,13 @@ RadioButton {
         color: radioButtonColor
 
         Rectangle {
+            anchors.centerIn: parent
             width: control.selectorDiameter
             height: control.selectorDiameter
+            visible: control.checked
             radius: width/2
             color: selectionColor
             border.color: StatusColors.colors['grey3']
-            visible: control.checked
-            anchors.centerIn: parent
         }
     }
 }

src/StatusQ/Controls/StatusColorSelectorGrid.qml

@@ -36,6 +36,7 @@ Column {
 
     StatusBaseText {
         id: title
+        width: parent.width
         verticalAlignment: Text.AlignVCenter
         font.pixelSize: 13
         color: Theme.palette.baseColor1
@@ -46,6 +47,7 @@ Column {
         columns: 6
         rowSpacing: 16
         columnSpacing: 32
+
         Repeater {
             objectName: "statusColorRepeater"
             model: root.model

src/StatusQ/Controls/StatusFlatButton.qml

@@ -3,19 +3,15 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
 StatusBaseButton {
-    id: statusFlatButton
-
     normalColor: "transparent"
-    hoverColor:  type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor3
-                                                       : Theme.palette.dangerColor3
-    disaledColor: "transparent"
+    hoverColor: type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor3
+                                                      : Theme.palette.dangerColor3
+    disabledColor: "transparent"
 
     textColor: type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor1
                                                      : Theme.palette.dangerColor1
     disabledTextColor: Theme.palette.baseColor1
 
-    border.color: type === StatusBaseButton.Type.Normal || hovered ? "transparent"
-                                                          : Theme.palette.baseColor2
-    rightPadding: icon.name !== "" ? 18 : defaultRightPadding
-    leftPadding: icon.name !== "" ? 14 : defaultLeftPadding
+    borderColor: (type === StatusBaseButton.Type.Normal || hovered) && !loading ? "transparent"
+                                                                                : Theme.palette.baseColor2
 }

src/StatusQ/Controls/StatusFloatingButtonsSelector.qml

@@ -113,12 +113,11 @@ Row {
             implicitHeight: 32
             topPadding: 8
             bottomPadding: 0
-            defaultLeftPadding: 4
-            defaultRightPadding: 4
+            horizontalPadding: 4
             hoverColor: Theme.palette.statusFloatingButtonHighlight
             normalColor: Theme.palette.baseColor3
-            icon.name: "more"
-            icon.bgColor: "transparent"
+            asset.name: "more"
+            asset.bgColor: "transparent"
             onClicked: popupMenu.popup(parent.x, y + height + 8)
         }
     }

src/StatusQ/Controls/StatusPinInput.qml

@@ -77,6 +77,20 @@ Item {
     */
     property int circleDiameter: 16
 
+    /*!
+       \qmlproperty int StatusPinInput::additionalSpacingOnEveryNItems
+       This property allows you to customize spacing among every N-th pin. By default the value is 0, which
+       means only regular `circleSpacing` will be applied, meaning that spacing among all pins will be the same.
+    */
+    property int additionalSpacingOnEveryNItems: 0
+
+    /*!
+       \qmlproperty int StatusPinInput::additionalSpacing
+       This property allows you to customize spacing between pin circles on every `additionalSpacingOnEveryNItems` items.
+       This additionalSpacing won't be applied if `additionalSpacingOnEveryNItems` is set to `0`.
+    */
+    property int additionalSpacing: 0
+
     QtObject {
         id: d
         property int currentPinIndex: 0
@@ -151,8 +165,8 @@ Item {
         }
     }
 
-    width: (root.circleDiameter + root.circleSpacing) * root.pinLen - root.circleSpacing
-    height: root.circleDiameter
+    implicitWidth: childrenRect.width
+    implicitHeight: childrenRect.height
 
     // Pin input data management object:
     TextInput {
@@ -196,56 +210,66 @@ Item {
             id: repeater
             model: root.pinLen
 
-            Rectangle {
-                id: background
+            Item {
+                id: container
                 property string innerState: "EMPTY"
                 property alias blinkingAnimation: blinkingAnimation
                 property alias innerOpacity: inner.opacity
 
-                 width: root.circleDiameter
-                 height: width
-                 color: Theme.palette.primaryColor2
-                 radius: 0.5 * width
+                height: root.circleDiameter
+                width: {
+                    if (index > 0 && index < root.pinLen-1 && (index+1) % root.additionalSpacingOnEveryNItems == 0) {
+                        return root.circleDiameter + root.additionalSpacing
+                    }
+                    return root.circleDiameter
+                }
 
-                 Rectangle {
-                     id: inner
-                     state: background.innerState
-                     anchors.centerIn: parent
-                     height: width
-                     color: Theme.palette.primaryColor1
-                     radius: 0.5 * width
-                     states: [
-                         State {
-                             name: "NEXT"
-                             StateChangeScript { script: { if(inputText.focus) blinkingAnimation.start() } }
-                             PropertyChanges {target: inner; width: root.circleDiameter / 2}                             
-                         },
-                         State {
-                             name: "FILLED"                             
-                             StateChangeScript { script: if(blinkingAnimation.running) blinkingAnimation.stop() }
-                             PropertyChanges {target: inner; width: root.circleDiameter}
-                             PropertyChanges {target: inner; opacity: 1}
-                         },
-                         State {
-                             name: "EMPTY"
-                             StateChangeScript { script: if(blinkingAnimation.running) blinkingAnimation.stop() }
-                             PropertyChanges {target: inner; width: 0}
-                             PropertyChanges {target: inner; opacity: 1}
-                         }
-                     ]
+                Rectangle {
+                    width: root.circleDiameter
+                    height: width
+                    color: Theme.palette.primaryColor2
+                    radius: 0.5 * width
 
-                     // Animation on transitions
-                     Behavior on width { NumberAnimation { duration: 200 } }
+                    Rectangle {
+                        id: inner
+                        state: container.innerState
+                        anchors.centerIn: parent
+                        height: width
+                        color: Theme.palette.primaryColor1
+                        radius: 0.5 * width
+                        states: [
+                            State {
+                                name: "NEXT"
+                                StateChangeScript { script: { if(inputText.focus) blinkingAnimation.start() } }
+                                PropertyChanges {target: inner; width: root.circleDiameter / 2}
+                            },
+                            State {
+                                name: "FILLED"
+                                StateChangeScript { script: if(blinkingAnimation.running) blinkingAnimation.stop() }
+                                PropertyChanges {target: inner; width: root.circleDiameter}
+                                PropertyChanges {target: inner; opacity: 1}
+                            },
+                            State {
+                                name: "EMPTY"
+                                StateChangeScript { script: if(blinkingAnimation.running) blinkingAnimation.stop() }
+                                PropertyChanges {target: inner; width: 0}
+                                PropertyChanges {target: inner; opacity: 1}
+                            }
+                        ]
 
-                     // Animation on "cursor" blinking
-                     SequentialAnimation {
-                         id: blinkingAnimation
-                         loops: Animation.Infinite
-                         running: visible
-                         NumberAnimation { target: inner; property: "opacity"; to: 0; duration: 800;}
-                         NumberAnimation { target: inner; property: "opacity"; to: 1; duration: 800;}
-                     }
-                 }
+                        // Animation on transitions
+                        Behavior on width { NumberAnimation { duration: 200 } }
+
+                        // Animation on "cursor" blinking
+                        SequentialAnimation {
+                            id: blinkingAnimation
+                            loops: Animation.Infinite
+                            running: visible
+                            NumberAnimation { target: inner; property: "opacity"; to: 0; duration: 800;}
+                            NumberAnimation { target: inner; property: "opacity"; to: 1; duration: 800;}
+                        }
+                    }
+                }
             }
         }
     }

src/StatusQ/Core/Theme/StatusDarkTheme.qml

@@ -159,8 +159,8 @@ ThemePalette {
     property QtObject statusMessage: QtObject {
         property color emojiReactionBackground: "#2d2823"
         property color emojiReactionBackgroundHovered: "#3a3632"
-        property color emojiReactionActiveBackground: "#353a4d"
-        property color emojiReactionActiveBackgroundHovered: "#cbd5f1"
+        property color emojiReactionActiveBackground: getColor('blue')
+        property color emojiReactionActiveBackgroundHovered: Qt.darker(emojiReactionActiveBackground, 1.1)
     }
 }
 

src/StatusQ/Core/Theme/StatusLightTheme.qml

@@ -157,8 +157,8 @@ ThemePalette {
     property QtObject statusMessage: QtObject {
         property color emojiReactionBackground: "#e2e6e9"
         property color emojiReactionBackgroundHovered: "#d7dadd"
-        property color emojiReactionActiveBackground: getColor('blue6')
-        property color emojiReactionActiveBackgroundHovered: "#cbd5f1"
+        property color emojiReactionActiveBackground: getColor('blue')
+        property color emojiReactionActiveBackgroundHovered: Qt.darker(emojiReactionActiveBackground, 1.1)
     }
 }
 

src/StatusQ/Core/Theme/ThemePalette.qml

@@ -1,7 +1,6 @@
 import QtQuick 2.13
 
 QtObject {
-
     id: theme
 
     property string name
@@ -10,88 +9,95 @@ QtObject {
         source: "../../../assets/fonts/Inter/Inter-Regular.otf"
     }
 
-    property var baseFontThin: FontLoader {
-        source: "../../../assets/fonts/Inter/Inter-Thin.otf"
-    }
-
-    property var baseFontExtraLight: FontLoader {
-        source: "../../../assets/fonts/Inter/Inter-ExtraLight.otf"
-    }
-
-    property var baseFontLight: FontLoader {
-        source: "../../../assets/fonts/Inter/Inter-Light.otf"
-    }
-
-    property var baseFontMedium: FontLoader {
-        source: "../../../assets/fonts/Inter/Inter-Medium.otf"
-    }
-
-    property var baseFontBold: FontLoader {
-        source: "../../../assets/fonts/Inter/Inter-Bold.otf"
-    }
-
-    property var baseFontExtraBold: FontLoader {
-        source: "../../../assets/fonts/Inter/Inter-ExtraBold.otf"
-    }
-
-    property var baseFontBlack: FontLoader {
-        source: "../../../assets/fonts/Inter/Inter-Black.otf"
-    }
-
     property var monoFont: FontLoader {
         source: "../../../assets/fonts/InterStatus/InterStatus-Regular.otf"
     }
 
-    property var monoFontThin: FontLoader {
-        source: "../../../assets/fonts/InterStatus/InterStatus-Thin.otf"
-    }
-
-    property var monoFontExtraLight: FontLoader {
-        source: "../../../assets/fonts/InterStatus/InterStatus-ExtraLight.otf"
-    }
-
-    property var monoFontLight: FontLoader {
-        source: "../../../assets/fonts/InterStatus/InterStatus-Light.otf"
-    }
-
-    property var monoFontMedium: FontLoader {
-        source: "../../../assets/fonts/InterStatus/InterStatus-Medium.otf"
-    }
-
-    property var monoFontBold: FontLoader {
-        source: "../../../assets/fonts/InterStatus/InterStatus-Bold.otf"
-    }
-
-    property var monoFontExtraBold: FontLoader {
-        source: "../../../assets/fonts/InterStatus/InterStatus-ExtraBold.otf"
-    }
-
-    property var monoFontBlack: FontLoader {
-        source: "../../../assets/fonts/InterStatus/InterStatus-Black.otf"
-    }
-
     property var codeFont: FontLoader {
         source: "../../../assets/fonts/RobotoMono/RobotoMono-Regular.ttf"
     }
 
-    property var codeFontThin: FontLoader {
-        source: "../../../assets/fonts/RobotoMono/RobotoMono-Thin.ttf"
-    }
+    readonly property QtObject _d: QtObject {
+        // specific font variants should not be accessed directly
 
-    property var codeFontExtraLight: FontLoader {
-        source: "../../../assets/fonts/RobotoMono/RobotoMono-ExtraLight.ttf"
-    }
+        // Inter font variants
+        property var baseFontThin: FontLoader {
+            source: "../../../assets/fonts/Inter/Inter-Thin.otf"
+        }
 
-    property var codeFontLight: FontLoader {
-        source: "../../../assets/fonts/RobotoMono/RobotoMono-Light.ttf"
-    }
+        property var baseFontExtraLight: FontLoader {
+            source: "../../../assets/fonts/Inter/Inter-ExtraLight.otf"
+        }
 
-    property var codeFontMedium: FontLoader {
-        source: "../../../assets/fonts/RobotoMono/RobotoMono-Medium.ttf"
-    }
+        property var baseFontLight: FontLoader {
+            source: "../../../assets/fonts/Inter/Inter-Light.otf"
+        }
 
-    property var codeFontBold: FontLoader {
-        source: "../../../assets/fonts/RobotoMono/RobotoMono-Bold.ttf"
+        property var baseFontMedium: FontLoader {
+            source: "../../../assets/fonts/Inter/Inter-Medium.otf"
+        }
+
+        property var baseFontBold: FontLoader {
+            source: "../../../assets/fonts/Inter/Inter-Bold.otf"
+        }
+
+        property var baseFontExtraBold: FontLoader {
+            source: "../../../assets/fonts/Inter/Inter-ExtraBold.otf"
+        }
+
+        property var baseFontBlack: FontLoader {
+            source: "../../../assets/fonts/Inter/Inter-Black.otf"
+        }
+
+        // Inter Status font variants
+        property var monoFontThin: FontLoader {
+            source: "../../../assets/fonts/InterStatus/InterStatus-Thin.otf"
+        }
+
+        property var monoFontExtraLight: FontLoader {
+            source: "../../../assets/fonts/InterStatus/InterStatus-ExtraLight.otf"
+        }
+
+        property var monoFontLight: FontLoader {
+            source: "../../../assets/fonts/InterStatus/InterStatus-Light.otf"
+        }
+
+        property var monoFontMedium: FontLoader {
+            source: "../../../assets/fonts/InterStatus/InterStatus-Medium.otf"
+        }
+
+        property var monoFontBold: FontLoader {
+            source: "../../../assets/fonts/InterStatus/InterStatus-Bold.otf"
+        }
+
+        property var monoFontExtraBold: FontLoader {
+            source: "../../../assets/fonts/InterStatus/InterStatus-ExtraBold.otf"
+        }
+
+        property var monoFontBlack: FontLoader {
+            source: "../../../assets/fonts/InterStatus/InterStatus-Black.otf"
+        }
+
+        // Roboto font variants
+        property var codeFontThin: FontLoader {
+            source: "../../../assets/fonts/RobotoMono/RobotoMono-Thin.ttf"
+        }
+
+        property var codeFontExtraLight: FontLoader {
+            source: "../../../assets/fonts/RobotoMono/RobotoMono-ExtraLight.ttf"
+        }
+
+        property var codeFontLight: FontLoader {
+            source: "../../../assets/fonts/RobotoMono/RobotoMono-Light.ttf"
+        }
+
+        property var codeFontMedium: FontLoader {
+            source: "../../../assets/fonts/RobotoMono/RobotoMono-Medium.ttf"
+        }
+
+        property var codeFontBold: FontLoader {
+            source: "../../../assets/fonts/RobotoMono/RobotoMono-Bold.ttf"
+        }
     }
 
     property color black: getColor('black')

src/StatusQ/Layout/StatusSectionLayout.qml

@@ -81,11 +81,19 @@ SplitView {
     property bool showHeader: true
 
     /*!
-        \qmlproperty int StatusAppLayout::notificationCount
-        This property holds the number of notifications to be displayed in the notifications
-        button of the header component.
+        \qmlproperty alias StatusAppLayout::notificationCount
+        This property holds a reference to the notificationCount property of the
+        header component.
     */
-    property int notificationCount
+    property alias notificationCount: statusToolBar.notificationCount
+
+    /*!
+        \qmlproperty alias StatusAppLayout::backButtonName
+        This property holds a reference to the backButtonName property of the
+        header component.
+    */
+    property alias backButtonName: statusToolBar.backButtonName
+
     /*!
         \qmlproperty alias StatusAppLayout::headerContent
         This property holds a reference to the custom header content of
@@ -99,6 +107,13 @@ SplitView {
     */
     property alias notificationButton: statusToolBar.notificationButton
 
+    /*!
+        \qmlsignal
+        This signal is emitted when the back button of the header component
+        is pressed.
+    */
+    signal backButtonClicked()
+
     /*!
         \qmlsignal
         This signal is emitted when the notification button of the header component
@@ -134,6 +149,9 @@ SplitView {
                 id: statusToolBar
                 width: visible ? parent.width : 0
                 visible: root.showHeader
+                onBackButtonClicked: {
+                    root.backButtonClicked();
+                }
                 onNotificationButtonClicked: {
                     root.notificationButtonClicked();
                 }

src/assets/img/icons/notification-muted.svg

@@ -1,4 +1,3 @@
-<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.281 20C14.9447 20 14.7031 20.3279 14.7344 20.6628C14.7444 20.7703 14.7499 20.8827 14.7499 21C14.7499 22.3889 13.5436 23.75 11.9999 23.75C10.4563 23.75 9.24992 22.3889 9.24992 21C9.24992 20.8827 9.25542 20.7703 9.26547 20.6628C9.29677 20.3279 9.05515 20 8.71885 20H5.52103C3.78474 20 2.87319 17.9394 4.04115 16.6547L5.218 15.3601C5.72872 14.7983 6.069 14.1028 6.19909 13.3548L7.31456 6.94085C7.71072 4.66293 9.68781 3 11.9999 3C14.312 3 16.2891 4.66293 16.6853 6.94085L17.8008 13.3548C17.9308 14.1028 18.2711 14.7983 18.7818 15.3601L19.9587 16.6547C21.1266 17.9394 20.2151 20 18.4788 20H15.281ZM11.0322 20.0283L11.0313 20.0293L11.039 20.0214L11.0415 20.0188C11.0427 20.0175 11.0433 20.0168 11.0434 20.0167C11.0438 20.0163 11.0434 20.0167 11.0434 20.0167L11.0415 20.0188C11.0525 20.0073 11.0681 20 11.084 20H12.9159C12.9318 20 12.9469 20.0068 12.9579 20.0183C12.9608 20.0217 12.9679 20.0302 12.978 20.0438C13.001 20.0744 13.0389 20.13 13.0791 20.2104C13.1582 20.3687 13.2499 20.6296 13.2499 21C13.2499 21.6111 12.6654 22.25 11.9999 22.25C11.3344 22.25 10.7499 21.6111 10.7499 21C10.7499 20.6296 10.8416 20.3687 10.9207 20.2104C10.9609 20.13 10.9988 20.0744 11.0218 20.0438C11.032 20.0302 11.0386 20.0222 11.0415 20.0188L11.039 20.0214L11.0372 20.0233L11.034 20.0265L11.0322 20.0283ZM5.15106 17.6637L6.32791 16.3691C7.03015 15.5967 7.49804 14.6403 7.67691 13.6118L8.79238 7.19786C9.06358 5.63842 10.4171 4.5 11.9999 4.5C13.5828 4.5 14.9363 5.63842 15.2075 7.19786L16.3229 13.6118C16.5018 14.6403 16.9697 15.5967 17.6719 16.3691L18.8488 17.6637C19.1408 17.9849 18.9129 18.5 18.4788 18.5H5.52103C5.08696 18.5 4.85907 17.9849 5.15106 17.6637Z" fill="black"/>
-<rect x="0.585786" y="20.7988" width="28" height="4" rx="2" transform="rotate(-45 0.585786 20.7988)" fill="black" stroke="white" stroke-width="2"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9386 19C14.6023 19 14.3607 19.3279 14.392 19.6628C14.402 19.7703 14.4075 19.8827 14.4075 20C14.4075 21.3889 13.2012 22.75 11.6575 22.75C10.1139 22.75 8.90752 21.3889 8.90752 20C8.90752 19.8827 8.91302 19.7703 8.92307 19.6628C8.95437 19.3279 8.71275 19 8.37646 19H6.29189L4.28033 21.0116C3.98744 21.3045 3.51256 21.3045 3.21967 21.0116C2.92678 20.7187 2.92678 20.2438 3.21967 19.9509L19.1296 4.041C19.4225 3.74811 19.8973 3.74811 20.1902 4.041C20.4831 4.33389 20.4831 4.80877 20.1902 5.10166L16.7885 8.50335L17.4584 12.3548C17.5884 13.1028 17.9287 13.7983 18.4394 14.3601L19.6163 15.6547C20.7843 16.9394 19.8727 19 18.1364 19H14.9386ZM15.4916 9.80031L7.79189 17.5H18.1364C18.5705 17.5 18.7984 16.9849 18.5064 16.6637L17.3295 15.3691C16.6273 14.5967 16.1594 13.6403 15.9805 12.6118L15.4916 9.80031ZM7.53808 11.4413L5.46494 13.5144C5.65331 13.152 5.78602 12.7612 5.85669 12.3548L6.97216 5.94085C7.36832 3.66293 9.34541 2 11.6575 2C13.1002 2 14.4125 2.64744 15.2916 3.68774L14.2254 4.75394C13.6248 3.98434 12.69 3.5 11.6575 3.5C10.0747 3.5 8.72118 4.63842 8.44998 6.19786L7.53808 11.4413ZM10.6991 19.0188C10.7101 19.0073 10.7257 19 10.7416 19H12.5735C12.5894 19 12.6045 19.0068 12.6155 19.0183C12.6184 19.0217 12.6255 19.0302 12.6356 19.0438C12.6586 19.0744 12.6965 19.13 12.7367 19.2104C12.8158 19.3687 12.9075 19.6296 12.9075 20C12.9075 20.6111 12.323 21.25 11.6575 21.25C10.992 21.25 10.4075 20.6111 10.4075 20C10.4075 19.6296 10.4992 19.3687 10.5783 19.2104C10.6185 19.13 10.6564 19.0744 10.6794 19.0438C10.6896 19.0302 10.6962 19.0222 10.6991 19.0188Z" fill="#0D1625"/>
 </svg>