feat: introduce StatusNotification component

This component renders a macos like notification and can be used in the
notification settings for message previews.

ui/app/img/status-logo-icon.svg

@@ -0,0 +1 @@
+<svg fill="none" height="41" viewBox="0 0 39 41" width="39" xmlns="http://www.w3.org/2000/svg"><path d="m19.402 40.4286c10.655 0 19.2926-8.869 19.2926-19.8095s-8.6376-19.80953-19.2926-19.80953c-10.65504 0-19.292625 8.86903-19.292625 19.80953s8.637585 19.8095 19.292625 19.8095z" fill="#4360df"/><g clip-rule="evenodd" fill="#fff" fill-rule="evenodd"><path d="m16.1669 21.464c-3.0002.1732-4.8181 1.773-4.6898 4.164.1316 2.4326 2.5502 3.9272 4.9699 3.7909 3.9373-.231 6.8419-3.8232 7.1692-7.933-.5359.128-1.0817.208-1.6311.2391-2.215.1282-3.6032-.3893-5.8182-.261z"/><path d="m22.6544 20.4367c3.133-.1849 5.0296-1.8944 4.8957-4.4494-.1372-2.5989-2.6615-4.201-5.187-4.0508-4.1161.2437-7.1433 4.0855-7.4842 8.4771.5588-.1372 1.1284-.2227 1.702-.2553 2.3129-.1375 3.7641.4158 6.0735.2784z"/></g></svg>

ui/imports/Constants.qml

@@ -25,6 +25,9 @@ QtObject {
     readonly property int notifyAllMessages: 0
     readonly property int notifyJustMentions: 1
     readonly property int notifyNone: 2
+    readonly property int notificationPreviewAnonymous: 0
+    readonly property int notificationPreviewNameOnly: 1
+    readonly property int notificationPreviewNameAndMessage: 2
     readonly property int fetchMoreMessagesButton: -2
     readonly property int chatIdentifier: -1
     readonly property int unknownContentType: 0

ui/imports/Theme.qml

@@ -18,6 +18,8 @@ QtObject {
     readonly property color blue: "#4360DF"
     readonly property color transparent: "#00000000"
     readonly property color darkGrey: "#939BA1"
+    readonly property color darkerGrey: "#717171"
+    readonly property color evenDarkerGrey: "#4C4C4C"
     readonly property color lightBlueText: "#8f9fec"
     readonly property color darkBlue: "#3c55c9"
     readonly property color darkBlueBtn: "#5a70dd"

ui/imports/Themes/DarkTheme.qml

@@ -14,7 +14,7 @@ Theme {
     property color darkAccentBlue: "#2946C4"
     property color transparent: "#00000000"
     property color darkGrey: "#838C91"
-    property color darkerGrey: "#252528"
+    property color evenDarkerGrey: "#252528"
     property color lightBlueText: "#8f9fec"
     property color darkBlue: "#3c55c9"
     property color darkBlueBtn: "#5a70dd"
@@ -26,7 +26,7 @@ Theme {
     property color tenPercentBlue: Qt.rgba(67, 96, 223, 0.1)
 
     property color background: almostBlack
-    property color border: darkerGrey
+    property color border: evenDarkerGrey
     property color borderSecondary: tenPercentWhite
     property color borderTertiary: blue
     property color textColor: white
@@ -37,7 +37,7 @@ Theme {
     property color inputBorderFocus: blue
     property color inputColor: darkGrey
     property color modalBackground: background
-    property color backgroundHover: darkerGrey
+    property color backgroundHover: evenDarkerGrey
     property color secondaryText: darkGrey
     property color secondaryHover: tenPercentWhite
     property color primary: blue
@@ -47,14 +47,14 @@ Theme {
     property color primaryMenuItemTextHover: almostBlack
     property color backgroundTertiary: tenPercentBlue
     property color pillButtonTextColor: almostBlack
-    property color chatReplyCurrentUser: darkerGrey
+    property color chatReplyCurrentUser: evenDarkerGrey
-    property color topBarChatInfoColor: darkerGrey
+    property color topBarChatInfoColor: evenDarkerGrey
 
     property color buttonForegroundColor: blue
     property color buttonBackgroundColor: secondaryBackground
     property color buttonSecondaryColor: darkGrey
     property color buttonDisabledForegroundColor: buttonSecondaryColor
-    property color buttonDisabledBackgroundColor: darkerGrey
+    property color buttonDisabledBackgroundColor: evenDarkerGrey
 
     property color roundedButtonForegroundColor: white
     property color roundedButtonBackgroundColor: secondaryBackground

ui/imports/Themes/Theme.qml

@@ -19,6 +19,8 @@ QtObject {
     property color blue
     property color transparent
     property color darkGrey
+    property color darkerGrey
+    property color evenDarkerGrey
     property color lightBlueText
     property color darkBlue
     property color darkBlueBtn

ui/shared/status/StatusNotification.qml

@@ -0,0 +1,106 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
+import "../../imports"
+import "../../shared"
+
+Rectangle {
+    id: root
+    property string chatId: ""
+    property string name: "channelName"
+    property string message: "My latest message\n with a return"
+    property int chatType: Constants.chatTypePublic
+    property string identicon: ""
+
+    color: "#F7F7F7"
+    width: 366
+    height: 75
+
+    anchors.top: applicationWindow.top
+    radius: Style.current.radius
+
+    Loader {
+        id: identicon
+        sourceComponent: root.identicon === "" || appSettings.notificationMessagePreviewSetting === Constants.notificationPreviewAnonymous ?  statusIdenticon : userOrChannelIdenticon 
+        anchors.left: parent.left
+        anchors.leftMargin: Style.current.padding
+        anchors.verticalCenter: parent.verticalCenter
+        height: 40
+        width: 40
+    }
+
+    Component {
+        id: userOrChannelIdenticon
+        StatusIdenticon {
+            height: 40
+            width: 40
+            chatName: root.name
+            chatType: root.chatType
+            identicon: root.identicon
+        }
+    }
+
+    Component {
+        id: statusIdenticon
+        SVGImage {
+            source: "../../app/img/status-logo-icon.svg"
+            width: 40
+            height: 40
+        }
+    }
+
+    StyledText {
+        id: name
+        anchors.bottom: messagePreview.top
+        anchors.bottomMargin: 2
+        anchors.left: identicon.right
+        anchors.leftMargin: Style.current.smallPadding
+        anchors.right: openButton.left
+        anchors.rightMargin: Style.current.smallPadding
+        elide: Text.ElideRight
+        text: root.name
+        font.weight: Font.Medium
+        font.pixelSize: 15
+        color: Style.current.evenDarkerGrey
+    }
+
+    StyledText {
+        id: messagePreview
+        anchors.bottom: identicon.bottom
+        anchors.bottomMargin: 2
+        anchors.left: identicon.right
+        anchors.leftMargin: Style.current.smallPadding
+        anchors.right: openButton.left
+        anchors.rightMargin: Style.current.padding
+        elide: Text.ElideRight
+        clip: true // This is needed because emojis don't ellide correctly
+        font.pixelSize: 14
+        color: Style.current.evenDarkerGrey
+        text: root.message
+    }
+
+    Rectangle {
+        id: openButton
+        anchors.right: parent.right
+        height: parent.height
+        width: 85
+        color: "transparent"
+
+        Rectangle {
+            height: parent.height
+            width: 1.2
+            anchors.left: parent.left
+            color: "#D9D9D9"
+        }
+
+        StyledText {
+            font.weight: Font.Medium
+            font.pixelSize: 14
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: qsTr("Open")
+            color: Style.current.darkerGrey
+        }
+    }
+}
+