feat(ActivityCenter): Notification badge with community info

src/app/modules/main/communities/view.nim

@@ -234,6 +234,19 @@ QtObject:
   proc requestCommunityInfo*(self: View, communityId: string) {.slot.} =
     self.delegate.requestCommunityInfo(communityId)
 
+  proc getCommunityDetails*(self: View, communityId: string): string {.slot.} =
+    let communityItem = self.model.getItemById(communityId)
+    if (communityItem.id == ""):
+      return ""
+
+    # TODO: unify with observed community approach
+    let jsonObj = %* {
+      "name": communityItem.name,
+      "image": communityItem.image,
+      "color": communityItem.color,
+    }
+    return $jsonObj
+
   proc isUserMemberOfCommunity*(self: View, communityId: string): bool {.slot.} =
     self.delegate.isUserMemberOfCommunity(communityId)
 

ui/app/AppLayouts/Chat/stores/RootStore.qml

@@ -371,7 +371,19 @@ QtObject {
     }
 
     function requestCommunityInfo(id) {
-        communitiesModuleInst.requestCommunityInfo(id)   
+        communitiesModuleInst.requestCommunityInfo(id)
+    }
+
+    function getCommunityDetailsAsJson(id) {
+        let jsonObj = communitiesModuleInst.getCommunityDetails(id)
+        try {
+            let obj = JSON.parse(jsonObj)
+            return obj
+        }
+        catch (e) {
+            console.debug("error parsing community by id: ", id, " error: ", e.message)
+            return {}
+        }
     }
 
     function getLinkTitleAndCb(link) {

ui/app/mainui/activitycenter/controls/Badge.qml

@@ -10,7 +10,7 @@ Rectangle {
     id: root
 
     height: visible ? 24 : 0
-    width: childrenRect.width
+    width: childrenRect.width + Style.current.smallPadding * 2
     radius: height / 2
     border.width: 1
     border.color: Style.current.borderSecondary

ui/app/mainui/activitycenter/controls/ChannelBadge.qml

@@ -12,7 +12,7 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Utils 0.1 as StatusQUtils
 
 Badge {
-    id: channelBadge
+    id: root
 
     signal channelNameClicked()
 
@@ -41,7 +41,7 @@ Badge {
         asset.width: 16
         asset.height: 16
         asset.letterSize: 11
-        name: channelBadge.name
+        name: root.name
     }
 
     StyledText {

ui/app/mainui/activitycenter/controls/CommunityBadge.qml

@@ -10,80 +10,45 @@ import shared.panels 1.0
 import shared.status 1.0
 
 Badge {
-    id: communityBadge
+    id: root
 
-    property string image: ""
+    property string communityImage
-    property string iconColor: ""
+    property string communityName
-    property bool useLetterIdenticon: !image
+    property string communityColor
-    property string communityName: ""
+
-    property string channelName: ""
+    property string channelName
-    property string communityId: ""
-    property string name: "channelName"
-    property color textColor
 
     signal communityNameClicked()
     signal channelNameClicked()
 
-    SVGImage {
+    StatusSmartIdenticon {
-        id: communityIcon
+        id: identicon
-        width: 16
-        height: 16
-        source: Style.svg("communities")
         anchors.left: parent.left
-        anchors.verticalCenter:parent.verticalCenter
+        anchors.leftMargin: Style.current.smallPadding
-
-        ColorOverlay {
-            anchors.fill: parent
-            source: parent
-            color: textColor
-        }
-    }
-
-    Loader {
-        id: communityImageLoader
-        active: true
-        anchors.left: communityIcon.visible ? communityIcon.right : parent.left
-        anchors.leftMargin: 2
         anchors.verticalCenter: parent.verticalCenter
-        sourceComponent: communityBadge.useLetterIdenticon ? letterIdenticon : imageIcon
+        name: root.communityName
-    }
+        asset.width: 16
-
+        asset.height: 16
-    Component {
+        asset.color: root.communityColor
-        id: imageIcon
+        asset.letterSize: width / 2.4
-        RoundedImage {
+        asset.name: root.communityImage
-            source: communityBadge.image
+        asset.isImage: true
-            noMouseArea: true
-            noHover: true
-            width: 16
-            height: 16
-        }
-    }
-
-    Component {
-        id: letterIdenticon
-        StatusLetterIdenticon {
-            width: 16
-            height: 16
-            letterSize: 12
-            name: communityBadge.communityName
-            color: communityBadge.iconColor
-        }
     }
 
     StyledTextEdit {
-        id: communityName
+        id: communityNameText
-        text: Utils.getLinkStyle(communityBadge.communityName, hoveredLink, textColor)
+        width: implicitWidth > 300 ? 300 : implicitWidth
         height: 18
+        anchors.left: identicon.right
+        anchors.leftMargin: 4
+        anchors.verticalCenter: parent.verticalCenter
+        text: Utils.getLinkStyle(root.communityName, hoveredLink, root.communityColor)
         readOnly: true
         textFormat: Text.RichText
-        width: implicitWidth > 300 ? 300 : implicitWidth
         clip: true
-        anchors.left: communityImageLoader.right
+        color: root.communityColor
-        anchors.leftMargin: 4
-        color: textColor
         font.pixelSize: 13
-        anchors.verticalCenter: parent.verticalCenter
+        onLinkActivated: root.communityNameClicked()
-        onLinkActivated: communityNameClicked()
     }
 
     SVGImage {
@@ -91,28 +56,29 @@ Badge {
         source: Style.svg("show-category")
         width: 16
         height: 16
-        anchors.left: communityName.right
+        visible: root.channelName.length
+        anchors.left: communityNameText.right
         anchors.verticalCenter: parent.verticalCenter
 
         ColorOverlay {
             anchors.fill: parent
             source: parent
-            color: textColor
+            color: root.communityColor
         }
     }
 
     StyledTextEdit {
-        id: channelName
+        id: channelNameText
-        text: Utils.getLinkStyle(communityBadge.channelName || name, hoveredLink, textColor)
+        width: implicitWidth > 300 ? 300 : implicitWidth
         height: 18
+        anchors.left: caretImage.right
+        anchors.verticalCenter: parent.verticalCenter
+        text: Utils.getLinkStyle(root.channelName || name, hoveredLink, root.channelColor)
         readOnly: true
         textFormat: Text.RichText
-        width: implicitWidth > 300 ? 300 : implicitWidth
         clip: true
-        anchors.left: caretImage.right
+        color: root.communityColor
-        color: textColor
         font.pixelSize: 13
-        anchors.verticalCenter: parent.verticalCenter
+        onLinkActivated: root.channelNameClicked()
-        onLinkActivated: channelNameClicked()
     }
 }

ui/app/mainui/activitycenter/panels/ActivityChannelBadgePanel.qml

@@ -1,101 +0,0 @@
-import QtQuick 2.13
-
-import StatusQ.Core.Theme 0.1
-
-import utils 1.0
-import shared.controls 1.0
-import shared 1.0
-import shared.panels 1.0
-import shared.status 1.0
-
-import "../controls"
-
-Rectangle {
-    id: root
-
-    property bool isCommunity: false
-    property string name: "channelName"
-    property int realChatType: -1
-    property string channelName: ""
-    property string communityName: ""
-    property string communityColor: ""
-    property string communityThumbnailImage: ""
-    property string repliedMessageId: ""
-    property string repliedMessageContent: ""
-    property int notificationType
-    property string profileImage: ""
-
-    property color textColor: Theme.palette.baseColor1
-
-    signal communityNameClicked()
-    signal channelNameClicked()
-
-    height: visible ? 24 : 0
-    width: childrenRect.width + 12
-    color: Style.current.transparent
-    border.color: Style.current.borderSecondary
-    border.width: 1
-    radius: 11
-    visible: (repliedMessageId > -1)
-
-
-    Loader {
-        active: true
-        height: parent.height
-        anchors.left: parent.left
-        anchors.leftMargin: 4
-        sourceComponent: {
-            switch (root.notificationType) {
-            case Constants.activityCenterNotificationTypeMention: 
-                return root.isCommunity ? communityBadgeComponent : channelBadgeComponent
-            case Constants.activityCenterNotificationTypeReply: 
-                return replyComponent
-            default: 
-                return root.isCommunity ? communityBadgeComponent : channelBadgeComponent
-            }
-        }
-    }
-
-    Component {
-        id: replyComponent
-
-        ReplyComponent {
-            width: childrenRect.width
-            height: parent.height
-            repliedMessageContent: root.repliedMessageContent
-        }
-    }
-
-    Component {
-        id: communityBadgeComponent
-
-        CommunityBadge {
-            width: childrenRect.width
-            height: parent.height
-
-            textColor: root.textColor
-            image: root.communityThumbnailImage
-            iconColor: root.communityColor
-            communityName: root.communityName
-            channelName: root.channelName
-            name: root.name
-
-            onCommunityNameClicked: root.communityNameClicked()
-            onChannelNameClicked: root.channelNameClicked()
-        }
-    }
-
-    Component {
-        id: channelBadgeComponent
-
-        ChannelBadge {
-            width: childrenRect.width
-            height: parent.height
-
-            realChatType: root.realChatType
-            textColor: root.textColor
-            name: root.name
-            profileImage: root.profileImage
-        }
-    }
-}

ui/app/mainui/activitycenter/panels/qmldir

@@ -1,2 +1,2 @@
 ActivityCenterPopupTopBarPanel 1.0 ActivityCenterPopupTopBarPanel.qml
-ActivityChannelBadgePanel 1.0 ActivityChannelBadgePanel.qml
+

ui/app/mainui/activitycenter/views/ActivityNotificationMention.qml

@@ -14,9 +14,6 @@ import "../controls"
 ActivityNotificationMessage {
     id: root
 
-    signal communityNameClicked()
-    signal channelNameClicked()
-
     badge: notification.message.communityId ? communityBadgeComponent : notification.chatId ? groupChatBadgeComponent : null
 
     Component {
@@ -25,16 +22,23 @@ ActivityNotificationMessage {
         CommunityBadge {
             id: communityBadge
 
-            property string communityId: notification.message.communityId
+            property var community: root.store.getCommunityDetailsAsJson(notification.message.communityId)
+            // TODO: here i need chanel
+            // property var channel: root.store.chatSectionModule.getItemAsJson(notification.chatId)
 
-            textColor: Utils.colorForPubkey(communityId)
+            communityName: community.name
-            // TODO: wrong result image: Global.getProfileImage(communityId)
+            communityImage: community.image
-            // TODO: wrong result iconColor: Utils.colorForPubkey(communityId)
+            communityColor: community.color
-            communityName: root.store.getSectionNameById(communityId)
-            // TODO: no info about channelName
 
-            onCommunityNameClicked: root.communityNameClicked()
+            // channelName: channel.name
-            onChannelNameClicked: root.channelNameClicked()
+
+            onCommunityNameClicked: {
+                root.store.setActiveCommunity(notification.message.communityId)
+            }
+            onChannelNameClicked: {
+                root.activityCenterClose()
+                root.store.activityCenterModuleInst.switchTo(notification.sectionId, notification.chatId, notification.id)
+            }
         }
     }