feat(Activity center): add placeholder activity center

Fixes #2608
2021-05-28 13:35:21 -04:00 · 2021-05-28 13:35:21 -04:00 · bee54e628f
parent f138f93815
commit bee54e628f
16 changed files with 472 additions and 111 deletions
--- a/ui/app/AppLayouts/Chat/ChatColumn/ActivityCenter.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/ActivityCenter.qml
@ -0,0 +1,131 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import "../../../../shared"
+import "../../../../shared/status"
+import "../../../../imports"
+import "./ChatComponents"
+import "../components"
+
+Popup {
+    enum Filter {
+        All,
+        Mentions,
+        Replies,
+        ContactRequests
+    }
+    property int currentFilter: ActivityCenter.Filter.All
+
+    id: activityCenter
+    modal: true
+
+    Overlay.modal: Rectangle {
+        color: Qt.rgba(0, 0, 0, 0.4)
+    }
+    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
+    parent: Overlay.overlay
+    width: 560
+    height: chatColumnLayout.height - (chatTopBarContent.height * 2) // TODO get screen size
+    background: Rectangle {
+        color: Style.current.background
+        radius: Style.current.radius
+    }
+    y: chatTopBarContent.height
+    x: applicationWindow.width - activityCenter.width - Style.current.halfPadding
+    onOpened: {
+        popupOpened = true
+    }
+    onClosed: {
+        popupOpened = false
+    }
+    padding: 0
+
+    ActivityCenterTopBar {
+        id: activityCenterTopBar
+    }
+
+    Column {
+        id: notificationsContainer
+        anchors.top: activityCenterTopBar.bottom
+        anchors.topMargin: 13
+        width: parent.width
+
+        StyledText {
+            text: "Today"
+            anchors.left: parent.left
+            anchors.leftMargin: Style.current.padding
+            font.pixelSize: 15
+            color: Style.current.secondaryText
+            height: implicitHeight + 4
+        }
+
+        ContactRequest {
+            name: "@alice.eth"
+            address: "0x04db719bf99bee817c97cab909c682d43e1ffa58c4f24edaa0cb7e97e6779dbfd44f430d9a4777e0faa45d74bdbe70240cbea9db8e2cf9a8111374ef4f5d50ac24"
+            identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAb0lEQVR4Ae3UQQqAIBRF0Wj9ba9Bq6l5JBQqfn/ngDMH3YS3AAB/tO3H+XRG3b9bR/+gVoREI2RapVXpfd5+X5oXERKNkHS+rk3tOpWkeREh0QiZVu91ql2zNC8iJBoh0yqtSqt1slpCghICANDPBc0ESPh0bHkHAAAAAElFTkSuQmCC"
+            // TODO set to transparent bg if the notif is read
+            color: Utils.setColorAlpha(Style.current.blue, 0.1)
+            radius: 0
+        }
+
+        ContactRequest {
+            name: "@bob.eth"
+            address: "0x04db719bf99bee817c97cab909c682d43e1ffa58c4f24edaa0cb7e97e6779dbfd44f430d9a4777e0faa45d74bdbe70240cbea9db8e2cf9a8111374ef4f5d50ac24"
+            identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAjUlEQVR4nOzWwQmEUAwG4V2xF+sTLEOwPqvRBhSUEBh/5jt6eDIEQoZfCENoDKExhMYQmpiQsevhbV+Pq+/ztPw7/hczEUNoDKEpb5C77fRWdZvFTMQQGkNoHt9a3bdT9f2YiRhCY4iaxEzEEBpDaMq3Vjdvra8yhCYmJEbMRAyhMYTGEBpDaM4AAAD//8vbFGZ2G0s4AAAAAElFTkSuQmCC"
+            // TODO set to transparent bg if the notif is read
+            color: Utils.setColorAlpha(Style.current.blue, 0.1)
+            radius: 0
+        }
+
+        Rectangle {
+            width: parent.width
+            height: childrenRect.height + Style.current.smallPadding
+            color: Utils.setColorAlpha(Style.current.blue, 0.1)
+
+            Message {
+                id: placeholderMessage
+                anchors.right: undefined
+                messageId: "placeholderMessage"
+                userName: "@vitalik"
+                identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAb0lEQVR4Ae3UQQqAIBRF0Wj9ba9Bq6l5JBQqfn/ngDMH3YS3AAB/tO3H+XRG3b9bR/+gVoREI2RapVXpfd5+X5oXERKNkHS+rk3tOpWkeREh0QiZVu91ql2zNC8iJBoh0yqtSqt1slpCghICANDPBc0ESPh0bHkHAAAAAElFTkSuQmCC"
+                message: "@roger great question my dude"
+                contentType: Constants.messageType
+                placeholderMessage: true
+            }
+
+            StatusIconButton {
+                id: markReadBtn
+                icon.name: "double-check"
+                iconColor: Style.current.primary
+                icon.width: 24
+                icon.height: 24
+                width: 32
+                height: 32
+                onClicked: console.log('TODO mark read')
+                anchors.right: parent.right
+                anchors.rightMargin: 12
+                anchors.verticalCenter: placeholderMessage.verticalCenter
+                z: 52
+
+                StatusToolTip {
+                  visible: markReadBtn.hovered
+                  text: qsTr("Mark as Read")
+                  orientation: "left"
+                  x: - width - Style.current.padding
+                  y: markReadBtn.height / 2 - height / 2 + 4
+                }
+            }
+
+            ActivityChannelBadge {
+                name: "status-desktop-ui"
+                chatType: Constants.chatTypePublic
+                chatId: "status-desktop-ui"
+                anchors.top: markReadBtn.bottom
+                anchors.topMargin: Style.current.halfPadding
+                anchors.left: parent.left
+                anchors.leftMargin: 61 // TODO find a way to align with the text of the message
+            }
+        }
+
+        // TODO add reply placeholder and chaeck if we can do the bubble under
+    }
+}
--- a/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ActivityCenterTopBar.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ActivityCenterTopBar.qml
@ -0,0 +1,112 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import "../../../../../imports"
+import "../../../../../shared"
+import "../../../../../shared/status"
+import ".."
+import "../../../Profile/LeftTab/constants.js" as ProfileConstants
+
+Item {
+    width: parent.width
+    height: 64
+
+    Row {
+        id: filterButtons
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: Style.current.padding
+        height: allBtn.height
+        spacing: Style.current.padding
+
+       StatusButton {
+           id: allBtn
+           text: qsTr("All")
+           type: "secondary"
+           size: "small"
+           highlighted: activityCenter.currentFilter === ActivityCenter.Filter.All
+           onClicked: activityCenter.currentFilter = ActivityCenter.Filter.All
+       }
+
+       StatusButton {
+           id: mentionsBtn
+           text: qsTr("Mentions")
+           type: "secondary"
+           size: "small"
+           highlighted: activityCenter.currentFilter === ActivityCenter.Filter.Mentions
+           onClicked: activityCenter.currentFilter = ActivityCenter.Filter.Mentions
+       }
+
+       StatusButton {
+           id: repliesbtn
+           text: qsTr("Replies")
+           type: "secondary"
+           size: "small"
+           highlighted: activityCenter.currentFilter === ActivityCenter.Filter.Replies
+           onClicked: activityCenter.currentFilter = ActivityCenter.Filter.Replies
+       }
+
+       StatusButton {
+           id: contactRequestsBtn
+           text: qsTr("Contact requests")
+           type: "secondary"
+           size: "small"
+           highlighted: activityCenter.currentFilter === ActivityCenter.Filter.ContactRequests
+           onClicked: activityCenter.currentFilter = ActivityCenter.Filter.ContactRequests
+       }
+    }
+
+    Row {
+        id: otherButtons
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+        anchors.rightMargin: Style.current.padding
+        height: markAllReadBtn.height
+        spacing: Style.current.padding
+
+       StatusIconButton {
+           id: markAllReadBtn
+           icon.name: "double-check"
+           iconColor: Style.current.primary
+           icon.width: 24
+           icon.height: 24
+           width: 32
+           height: 32
+           onClicked: console.log('TODO mark all as read')
+
+           StatusToolTip {
+             visible: markAllReadBtn.hovered
+             text: qsTr("Mark all as Read")
+           }
+       }
+
+       StatusContextMenuButton {
+           id: moreActionsBtn
+           onClicked: moreActionsMenu.open()
+
+           PopupMenu {
+               id: moreActionsMenu
+               x: moreActionsBtn.width - moreActionsMenu.width
+               y: moreActionsBtn.height + 4
+
+               Action {
+                   icon.source: "../../../../img/eye-barred.svg"
+                   icon.width: 16
+                   icon.height: 16
+                   text: qsTr("Hide read notifications")
+                   onTriggered: console.log('TODO Change settings')
+               }
+               Action {
+                   icon.source: "../../../../img/bell.svg"
+                   icon.width: 16
+                   icon.height: 16
+                   text: qsTr("Notification settings")
+                   onTriggered: {
+                       activityCenter.close()
+                       appMain.changeAppSection(Constants.profile)
+                       profileLayoutContainer.changeProfileSection(ProfileConstants.NOTIFICATIONS)
+                   }
+               }
+           }
+       }
+    }
+}
--- a/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ActivityChannelBadge.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ActivityChannelBadge.qml
@ -0,0 +1,78 @@
+import QtQuick 2.13
+import "../../../../../imports"
+import "../../../../../shared"
+import "../../../../../shared/status"
+import ".."
+
+Rectangle {
+    property string chatId: ""
+    property string name: "channelName"
+    property string identicon
+    property int chatType: Constants.chatTypePublic
+    property int realChatType: {
+        if (chatType === Constants.chatTypeCommunity) {
+            // TODO add a check for private community chats once it is created
+            return Constants.chatTypePublic
+        }
+        return chatType
+    }
+
+    property string profileImage: realChatType === Constants.chatTypeOneToOne ? appMain.getProfileImage(chatId) || ""  : ""
+
+    id: wrapper
+    height: 24
+    width: childrenRect.width + Style.current.smallPadding
+    color: Style.current.transparent
+    border.color: Style.current.borderSecondary
+    border.width: 1
+    radius: 11
+
+    Connections {
+        enabled: realChatType === Constants.chatTypeOneToOne
+        target: profileModel.contacts.list
+        onContactChanged: {
+            if (pubkey === wrapper.chatId) {
+                wrapper.profileImage = appMain.getProfileImage(wrapper.chatId)
+            }
+        }
+    }
+
+    SVGImage {
+        id: channelIcon
+        width: 16
+        height: 16
+        fillMode: Image.PreserveAspectFit
+        source: "../../../../img/channel-icon-" + (wrapper.realChatType === Constants.chatTypePublic ? "public-chat.svg" : "group.svg")
+        anchors.left: parent.left
+        anchors.leftMargin: 4
+        anchors.verticalCenter:parent.verticalCenter
+    }
+
+    StatusIdenticon {
+        id: contactImage
+        height: 16
+        width: 16
+        chatId: wrapper.chatId
+        chatName: wrapper.name
+        chatType: wrapper.realChatType
+        identicon: wrapper.profileImage || wrapper.identicon
+        anchors.left: channelIcon.right
+        anchors.leftMargin: 4
+        anchors.verticalCenter: parent.verticalCenter
+        letterSize: 11
+    }
+
+    StyledText {
+        id: contactInfo
+        text: wrapper.realChatType !== Constants.chatTypePublic ?
+                  Emoji.parse(Utils.removeStatusEns(Utils.filterXSS(wrapper.name))) :
+                  "#" + Utils.filterXSS(wrapper.name)
+        anchors.left: contactImage.right
+        anchors.leftMargin: 4
+        color: Style.current.secondaryText
+        font.weight: Font.Medium
+        font.pixelSize: 13
+        anchors.verticalCenter: parent.verticalCenter
+    }
+
+}
--- a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml
@ -176,6 +176,10 @@ Item {
    }

    function clickMessage(isProfileClick, isSticker = false, isImage = false, image = null, emojiOnly = false, hideEmojiPicker = false) {
+        if (placeholderMessage) {
+            return
+        }
+
        if (isImage) {
            imageClick(image);
            return;
--- a/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml
@ -64,73 +64,126 @@ Item {
        }
    }

-    StatusContextMenuButton {
-        id: moreActionsBtn
-        anchors.verticalCenter: parent.verticalCenter
+    Row {
+        height: parent.height
        anchors.right: parent.right
        anchors.rightMargin: Style.current.smallPadding
+        spacing: 12

-        onClicked: {
-            var menu = chatContextMenu;
-            var isPrivateGroupChat = chatsModel.activeChannel.chatType === Constants.chatTypePrivateGroupChat
-            if(isPrivateGroupChat){
-                menu = groupContextMenu
+        StatusContextMenuButton {
+            id: moreActionsBtn
+            anchors.verticalCenter: parent.verticalCenter
+
+            onClicked: {
+                var menu = chatContextMenu;
+                var isPrivateGroupChat = chatsModel.activeChannel.chatType === Constants.chatTypePrivateGroupChat
+                if(isPrivateGroupChat){
+                    menu = groupContextMenu
+                }
+
+                if (menu.opened) {
+                    return menu.close()
+                }
+
+                if (isPrivateGroupChat) {
+                    menu.popup(moreActionsBtn.x, moreActionsBtn.height)
+                } else {
+                    menu.openMenu(chatsModel.activeChannel, chatsModel.getActiveChannelIdx(),
+                                  moreActionsBtn.x - chatContextMenu.width + moreActionsBtn.width + 4,
+                                  moreActionsBtn.height - 4)
+                }
            }

-            if (menu.opened) {
-                return menu.close()
+            ChannelContextMenu {
+                id: chatContextMenu
+                closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
            }

-            if (isPrivateGroupChat) {
-                menu.popup(moreActionsBtn.x, moreActionsBtn.height)
-            } else {
-                menu.openMenu(chatsModel.activeChannel, chatsModel.getActiveChannelIdx(),
-                              moreActionsBtn.x - chatContextMenu.width + moreActionsBtn.width + 4,
-                              moreActionsBtn.height - 4)
-            }
-        }
-
-        ChannelContextMenu {
-            id: chatContextMenu
-            closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
-        }
-
-        PopupMenu {
-            id: groupContextMenu
-            closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
-            Action {
-                icon.source: "../../../img/group_chat.svg"
-                icon.width: chatTopBarContent.iconSize
-                icon.height: chatTopBarContent.iconSize
-                //% "Group Information"
-                text: qsTrId("group-information")
-                onTriggered: openPopup(groupInfoPopupComponent, {channel: chatsModel.activeChannel})
-            }
-            Action {
-                icon.source: "../../../img/close.svg"
-                icon.width: chatTopBarContent.iconSize
-                icon.height: chatTopBarContent.iconSize
-                //% "Clear History"
-                text: qsTrId("clear-history")
-                onTriggered: chatsModel.clearChatHistory(chatsModel.activeChannel.id)
-            }
-            Action {
-                icon.source: "../../../img/leave_chat.svg"
-                icon.width: chatTopBarContent.iconSize
-                icon.height: chatTopBarContent.iconSize
-                //% "Leave group"
-                text: qsTrId("leave-group")
-                onTriggered: {
-                  //% "Leave group"
-                  deleteChatConfirmationDialog.title = qsTrId("leave-group")
-                  //% "Leave group"
-                  deleteChatConfirmationDialog.confirmButtonLabel = qsTrId("leave-group")
-                  //% "Are you sure you want to leave this chat?"
-                  deleteChatConfirmationDialog.confirmationText = qsTrId("are-you-sure-you-want-to-leave-this-chat-")
-                  deleteChatConfirmationDialog.open()
+            PopupMenu {
+                id: groupContextMenu
+                closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
+                Action {
+                    icon.source: "../../../img/group_chat.svg"
+                    icon.width: chatTopBarContent.iconSize
+                    icon.height: chatTopBarContent.iconSize
+                    //% "Group Information"
+                    text: qsTrId("group-information")
+                    onTriggered: openPopup(groupInfoPopupComponent, {channel: chatsModel.activeChannel})
+                }
+                Action {
+                    icon.source: "../../../img/close.svg"
+                    icon.width: chatTopBarContent.iconSize
+                    icon.height: chatTopBarContent.iconSize
+                    //% "Clear History"
+                    text: qsTrId("clear-history")
+                    onTriggered: chatsModel.clearChatHistory(chatsModel.activeChannel.id)
+                }
+                Action {
+                    icon.source: "../../../img/leave_chat.svg"
+                    icon.width: chatTopBarContent.iconSize
+                    icon.height: chatTopBarContent.iconSize
+                    //% "Leave group"
+                    text: qsTrId("leave-group")
+                    onTriggered: {
+                      //% "Leave group"
+                      deleteChatConfirmationDialog.title = qsTrId("leave-group")
+                      //% "Leave group"
+                      deleteChatConfirmationDialog.confirmButtonLabel = qsTrId("leave-group")
+                      //% "Are you sure you want to leave this chat?"
+                      deleteChatConfirmationDialog.confirmationText = qsTrId("are-you-sure-you-want-to-leave-this-chat-")
+                      deleteChatConfirmationDialog.open()
+                    }
                }
            }
        }
+
+        Rectangle {
+              id: separator
+              width: 1
+              height: 24
+              color: Style.current.separator
+              anchors.verticalCenter: parent.verticalCenter
+        }
+
+        StatusIconButton {
+            id: activityCenterBtn
+            icon.name: "bell"
+            iconColor: Style.current.contextMenuButtonForegroundColor
+            hoveredIconColor: Style.current.contextMenuButtonForegroundColor
+            highlightedBackgroundColor: Style.current.contextMenuButtonBackgroundHoverColor
+            anchors.verticalCenter: parent.verticalCenter
+
+            onClicked: activityCenter.open()
+
+            Rectangle {
+                // TODO unhardcode this
+                property int nbUnseenNotifs: 3
+
+                id: badge
+                visible: nbUnseenNotifs > 0
+                anchors.top: parent.top
+                anchors.topMargin: -2
+                anchors.left: parent.right
+                anchors.leftMargin: -17
+                radius: height / 2
+                color: Style.current.blue
+                border.color: activityCenterBtn.hovered ? Style.current.secondaryBackground : Style.current.background
+                border.width: 2
+                width: badge.nbUnseenNotifs < 10 ? 18 : badge.width + 14
+                height: 18
+
+                Text {
+                    font.pixelSize: 12
+                    color: Style.current.white
+                    anchors.centerIn: parent
+                    text: badge.nbUnseenNotifs
+                }
+            }
+        }
+    }
+
+    ActivityCenter {
+        id: activityCenter
    }

    ConfirmationDialog {
--- a/ui/app/AppLayouts/Profile/Sections/Contacts/ContactRequest.qml
+++ b/ui/app/AppLayouts/Profile/Sections/Contacts/ContactRequest.qml
@ -1,9 +1,9 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
-import "../../../../../imports"
-import "../../../../../shared"
-import "../../../../../shared/status"
+import "../../../../imports"
+import "../../../../shared"
+import "../../../../shared/status"

 Rectangle {
    property string name
@ -110,7 +110,7 @@ Rectangle {
                id: contactContextMenu
                hasArrow: false
                Action {
-                    icon.source: "../../../../img/profileActive.svg"
+                    icon.source: "../../../img/profileActive.svg"
                    icon.width: menuButton.iconSize
                    icon.height: menuButton.iconSize
                    //% "View Profile"
@ -120,7 +120,7 @@ Rectangle {
                }
                Separator {}
                Action {
-                    icon.source: "../../../../img/block-icon.svg"
+                    icon.source: "../../../img/block-icon.svg"
                    icon.width: menuButton.iconSize
                    icon.height: menuButton.iconSize
                    icon.color: Style.current.danger
--- a/ui/app/AppLayouts/Profile/LeftTab/components/MenuButton.qml
+++ b/ui/app/AppLayouts/Profile/LeftTab/components/MenuButton.qml
@ -9,7 +9,7 @@ Rectangle {
    property int menuItemId: -1
    property bool hovered: false
    property bool active: false
-    property url source: "../../../../img/add_watch_only.svg"
+    property url source: "../../../../img/eye.svg"
    property string text: "My Profile"
    property var onClicked: function () {}

--- a/ui/app/AppLayouts/Wallet/components/AddAccount.qml
+++ b/ui/app/AppLayouts/Wallet/components/AddAccount.qml
@ -52,7 +52,7 @@ StatusRoundButton {
        Action {
            //% "Add a watch-only address"
            text: qsTrId("add-a-watch-account")
-            icon.source: "../../../img/add_watch_only.svg"
+            icon.source: "../../../img/eye.svg"
            icon.width: 19
            icon.height: 19
            onTriggered: {
--- a/ui/app/img/double-check.svg
+++ b/ui/app/img/double-check.svg
@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.864 4.42199C23.2086 4.65176 23.3017 5.11741 23.072 5.46206L13.1979 19.4222C13.0733 19.6091 12.8714 19.7303 12.6478 19.7525C12.4242 19.7746 12.2025 19.6953 12.0436 19.5365L6.04357 13.5365C5.75067 13.2436 5.75067 12.7687 6.04357 12.4758C6.33646 12.1829 6.81133 12.1829 7.10423 12.4758L12.4573 17.8289L21.8239 4.63C22.0537 4.28536 22.5193 4.19223 22.864 4.42199Z" fill="#4360DF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.8555 4.38365C18.1925 4.6244 18.2706 5.09281 18.0299 5.42988L12.0524 13.7986C11.8116 14.1357 11.3432 14.2137 11.0061 13.973C10.6691 13.7322 10.591 13.2638 10.8318 12.9268L16.8092 4.55803C17.05 4.22097 17.5184 4.1429 17.8555 4.38365Z" fill="#4360DF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.01928 12.4798C1.31098 12.1857 1.78585 12.1838 2.07993 12.4755L8.09754 18.4444C8.39162 18.7361 8.39355 19.211 8.10185 19.505C7.81015 19.7991 7.33528 19.801 7.0412 19.5093L1.02359 13.5404C0.729506 13.2487 0.727577 12.7738 1.01928 12.4798Z" fill="#4360DF"/>
+</svg>
--- a/ui/app/img/eye-barred.svg
+++ b/ui/app/img/eye-barred.svg
@ -0,0 +1,5 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.3106 5.08383C3.47498 5.21168 3.48295 5.45719 3.33272 5.60139C2.4528 6.44596 1.83196 7.31912 1.53385 7.77538C1.40473 7.97299 1.40473 8.22212 1.53385 8.41973C2.22374 9.4756 4.642 12.7642 7.99987 12.7642C9.27105 12.7642 10.4076 12.2929 11.3666 11.6499C11.4891 11.5678 11.6506 11.5705 11.767 11.661L13.6929 13.1589C13.9109 13.3285 14.225 13.2892 14.3945 13.0712C14.5641 12.8533 14.5248 12.5391 14.3068 12.3696L2.30683 3.03625C2.08886 2.86672 1.77472 2.90599 1.60518 3.12396C1.43565 3.34193 1.47492 3.65607 1.69289 3.82561L3.3106 5.08383ZM10.374 10.5776C10.5546 10.718 10.5431 10.9945 10.3435 11.1061C9.62297 11.5091 8.83558 11.7642 7.99987 11.7642C6.65503 11.7642 5.43533 11.1035 4.41804 10.2294C3.88269 9.76947 3.42963 9.27253 3.07451 8.83433C2.72544 8.40359 2.72544 7.79153 3.07451 7.36079C3.42963 6.92259 3.88269 6.42564 4.41804 5.96568C4.42534 5.95941 4.43603 5.95916 4.44362 5.96507L5.40697 6.71433C5.53334 6.81263 5.56978 6.98616 5.512 7.13547C5.39651 7.43392 5.33317 7.75834 5.33317 8.09756C5.33317 9.57031 6.52708 10.7642 7.99984 10.7642C8.57551 10.7642 9.10858 10.5818 9.54439 10.2716C9.67478 10.1788 9.85188 10.1715 9.97822 10.2697L10.374 10.5776ZM6.33895 7.95774C6.35758 7.73341 6.6183 7.65648 6.79599 7.79468L8.58974 9.18982C8.76734 9.32796 8.75719 9.59968 8.54453 9.67318C8.37384 9.73218 8.19058 9.76422 7.99984 9.76422C7.07936 9.76422 6.33317 9.01803 6.33317 8.09756C6.33317 8.05047 6.33512 8.00384 6.33895 7.95774Z" fill="#2946C4"/>
+<path d="M5.90453 4.37541C5.71048 4.22448 5.74177 3.92363 5.97022 3.8328C6.59796 3.58322 7.27707 3.43091 7.99971 3.43091C11.3576 3.43091 13.7758 6.71953 14.4657 7.7754C14.5948 7.97301 14.5948 8.22214 14.4657 8.41975C14.2593 8.73564 13.8982 9.25136 13.4036 9.81907C13.2894 9.95007 13.0929 9.9664 12.9558 9.85973L12.6937 9.65584C12.5393 9.53578 12.5213 9.30948 12.6497 9.16203C12.7471 9.05026 12.839 8.94058 12.9251 8.83435C13.2741 8.4036 13.2741 7.79154 12.9251 7.3608C12.5699 6.9226 12.1169 6.42566 11.5815 5.9657C10.5642 5.09168 9.34454 4.43091 7.99971 4.43091C7.50066 4.43091 7.01885 4.5219 6.55821 4.68101C6.44751 4.71925 6.32438 4.70196 6.23193 4.63005L5.90453 4.37541Z" fill="#2946C4"/>
+<path d="M10.574 7.39952C10.6468 7.6683 10.3434 7.82786 10.1236 7.65692L9.18908 6.93006C9.08479 6.82382 8.96638 6.7315 8.83688 6.65613L7.86996 5.90407C7.6638 5.74373 7.7385 5.43091 7.99968 5.43091C9.23091 5.43091 10.2672 6.26533 10.574 7.39952Z" fill="#2946C4"/>
+</svg>
--- a/ui/app/img/add_watch_only.svg
+++ b/ui/app/img/add_watch_only.svg
--- a/ui/nim-status-client.pro
+++ b/ui/nim-status-client.pro
@ -96,6 +96,9 @@ DISTFILES += \
    app/AppLayouts/Browser/FavoritesBar.qml \
    app/AppLayouts/Browser/FavoritesList.qml \
    app/AppLayouts/Browser/components/BookmarkButton.qml \
+    app/AppLayouts/Chat/ChatColumn/ActivityCenter.qml \
+    app/AppLayouts/Chat/ChatColumn/ChatComponents/ActivityCenterTopBar.qml \
+    app/AppLayouts/Chat/ChatColumn/ChatComponents/ActivityChannelBadge.qml \
    app/AppLayouts/Chat/ChatColumn/ChatComponents/AddToContactBanner.qml \
    app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandButton.qml \
    app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandModal.qml \
@ -160,6 +163,7 @@ DISTFILES += \
    app/AppLayouts/Chat/components/CommunityDetailPopup.qml \
    app/AppLayouts/Chat/components/ContactList.qml \
    app/AppLayouts/Chat/components/ContactRequestsPopup.qml \
+    app/AppLayouts/Chat/components/ContactRequest.qml \
    app/AppLayouts/Chat/components/CreateCommunityPopup.qml \
    app/AppLayouts/Chat/components/EmojiCategoryButton.qml \
    app/AppLayouts/Chat/components/EmojiPopup.qml \
@ -179,7 +183,6 @@ DISTFILES += \
    app/AppLayouts/Profile/LeftTab/components/MenuButton.qml \
    app/AppLayouts/Chat/data/EmojiReactions.qml \
    app/AppLayouts/Profile/Sections/AppearanceContainer.qml \
-    app/AppLayouts/Profile/Sections/Contacts/ContactRequest.qml \
    app/AppLayouts/Profile/Sections/NetworksModal.qml \
    app/AppLayouts/Profile/Sections/BackupSeedModal.qml \
    app/AppLayouts/Profile/Sections/BrowserContainer.qml \
--- a/ui/shared/status/StatusButton.qml
+++ b/ui/shared/status/StatusButton.qml
@ -131,7 +131,7 @@ Button {
                return hovered && forceBgColorOnHover ? control.bgHoverColor : "transparent"
            }
            if (type === "secondary") {
-                return hovered ? control.bgColor : "transparent"
+                return hovered || control.highlighted ? control.bgColor : "transparent"
            }
            return !enabled ? (control.bgColor === Style.current.transparent ? control.bgColor : Style.current.buttonDisabledBackgroundColor) :
                      (hovered ? control.bgHoverColor : control.bgColor)
--- a/ui/shared/status/StatusContextMenuButton.qml
+++ b/ui/shared/status/StatusContextMenuButton.qml
@ -1,44 +1,12 @@
 import QtQuick 2.13
-import QtQuick.Controls 2.13
-import QtQml 2.14
-import QtGraphicalEffects 1.13
 import "../../imports"
 import "../../shared"

-RoundButton {
-    id: control
-    implicitWidth: 32
-    implicitHeight: 32
-    contentItem: Item {
-        anchors.fill: parent
-
-        SVGImage {
-            id: iconImg
-            source: "/../../app/img/dots-icon.svg"
-            width: 18
-            height: 4
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
-            fillMode: Image.PreserveAspectFit
-        }
-
-        ColorOverlay {
-            id: iconColorOverlay
-            anchors.fill: iconImg
-            source: iconImg
-            color: Style.current.contextMenuButtonForegroundColor
-            antialiasing: true
-        }
-    }
-    background: Rectangle {
-        radius: Style.current.radius
-        color: hovered ? Style.current.contextMenuButtonBackgroundHoverColor : Style.current.transparent
-    }
-
-    MouseArea {
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-        anchors.fill: parent
-        onPressed: mouse.accepted = false
-    }
+StatusIconButton {
+    id: moreActionsBtn
+    anchors.verticalCenter: parent.verticalCenter
+    icon.name: "dots-icon"
+    iconColor: Style.current.contextMenuButtonForegroundColor
+    hoveredIconColor: Style.current.contextMenuButtonForegroundColor
+    highlightedBackgroundColor: Style.current.contextMenuButtonBackgroundHoverColor
 }
--- a/ui/shared/status/StatusIdenticon.qml
+++ b/ui/shared/status/StatusIdenticon.qml
@ -10,6 +10,7 @@ Item {
    property string chatName
    property int chatType
    property string identicon
+    property int letterSize: 15

    width: 40
    height: 40
@ -27,6 +28,7 @@ Item {
            chatName: root.chatName
            width: parent.width
            height: parent.height
+            letterSize: root.letterSize
        }
    }

--- a/ui/shared/status/StatusToolTip.qml
+++ b/ui/shared/status/StatusToolTip.qml
@ -25,8 +25,8 @@ ToolTip {
        }
        Rectangle {
            color: tooltipContentBg.color
-            height: orientation === "top" || orientation === "bottom" ? 24 : 24
-            width: orientation === "top" || orientation === "bottom" ? 24 : 24
+            height: 26
+            width: 26
            rotation: 45
            radius: 1
            x: {
@ -34,18 +34,18 @@ ToolTip {
                    return tooltipBg.width / 2 - width / 2
                }
                if (orientation === "left") {
-                    return tooltipContentBg.width - (width / 2) - 4
+                    return tooltipContentBg.width - (width / 2) - 7
                }
                if (orientation === "right") {
-                    return -width/2 + 4
+                    return -width/2 + 7
                }
            }
            y: {
                if (orientation === "bottom") {
-                    return -height / 2
+                    return -height / 2 + 5
                }
                if (orientation === "top") {
-                    return tooltipBg.height - height
+                    return tooltipBg.height - height - 5
                }
                if (orientation === "left" || orientation === "right") {
                    return tooltipContentBg.height / 2 - (height / 2)