feat(act-center): add community badge links to community and channel

src/app/chat/view.nim

@@ -776,6 +776,10 @@ QtObject:
       error "Error editing channel", msg=e.msg, channelId, name, description
       result = StatusGoError(error: e.msg).toJson
 
+  proc getChannelNameById*(self: ChatsView, channelId: string): string {.slot.} =
+    if self.status.chat.channels.hasKey(channelId):
+      result = self.status.chat.channels[channelId].name
+
   proc setActiveChannelByIndex*(self: ChatsView, index: int) {.slot.} =
     self.channelView.setActiveChannelByIndex(index)
 

src/app/chat/views/activity_notification_list.nim

@@ -151,6 +151,8 @@ QtObject:
     self.markActivityCenterNotificationsRead(fmt"[""{id}""]")
 
   proc toActivityCenterNotificationViewItem*(self: ActivityNotificationList, activityCenterNotification: ActivityCenterNotification): ActivityCenterNotificationViewItem =
+    let communityId = self.status.chat.getCommunityIdForChat(activityCenterNotification.chatId)
+    activityCenterNotification.message.communityId = communityId
     ActivityCenterNotificationViewItem(
           id: activityCenterNotification.id,
           chatId: activityCenterNotification.chatId,

src/app/chat/views/community_list.nim

@@ -45,6 +45,44 @@ QtObject:
 
   method rowCount*(self: CommunityList, index: QModelIndex = nil): int = self.communities.len
 
+  proc getCommunityIndex(self: CommunityList, communityId: string): int {.slot.} =
+    var i = 0
+    for community in self.communities:
+      if (community.id == communityId):
+        return i
+      i = i + 1
+    return -1
+
+  proc rowData(self: CommunityList, index: int, column: string): string {.slot.} =
+    if (index > self.communities.len - 1):
+      return
+    let community = self.communities[index]
+    case column:
+      of "name": result = community.name
+      of "description": result = community.description
+      of "id": result = community.id
+      of "access": result = $community.access
+      of "admin": result = $community.admin
+      of "verified": result = $community.verified
+      of "joined": result = $community.joined
+      of "ensOnly": result = $community.ensOnly
+      of "canRequestAccess": result = $community.canRequestAccess
+      of "canJoin": result = $community.canJoin
+      of "isMember": result = $community.isMember
+      of "nbMembers": result = $community.members.len
+      of "unviewedMessagesCount": result = $community.unviewedMessagesCount
+      of "thumbnailImage":
+        if (not community.communityImage.isNil):
+          result = community.communityImage.thumbnail
+        else:
+          result = ""
+      of "largeImage":
+        if (not community.communityImage.isNil):
+          result = community.communityImage.large
+        else:
+          result = ""
+      of "communityColor": result = community.communityColor
+
   method data(self: CommunityList, index: QModelIndex, role: int): QVariant =
     if not index.isValid:
       return

src/status/chat.nim

@@ -580,6 +580,12 @@ proc getLinkPreviewData*(link: string, success: var bool): JsonNode =
 proc rpcChatMessages*(chatId: string, cursorVal: JsonNode, limit: int, success: var bool): string =
   result = status_chat.rpcChatMessages(chatId, cursorVal, limit, success)
 
+proc getCommunityIdForChat*(self: ChatModel, chatId: string): string =
+  if (not self.hasChannel(chatId)):
+    return ""
+  return self.channels[chatId].communityId
+  
+
 proc rpcReactions*(chatId: string, cursorVal: JsonNode, limit: int, success: var bool): string =
   result = status_chat.rpcReactions(chatId, cursorVal, limit, success)
 

ui/app/AppLayouts/Chat/ChatColumn/ActivityCenter.qml

@@ -228,6 +228,11 @@ Popup {
                                         }
 
                                         activityCenter.close()
+
+                                        if (model.message.communityId) {
+                                            chatsModel.communities.setActiveCommunity(model.message.communityId)
+                                        }
+
                                         chatsModel.channelView.setActiveChannel(model.message.chatId)
                                         positionAtMessage(model.message.messageId)
                                     }
@@ -247,17 +252,6 @@ Popup {
                                     prevMsgTimestamp: notificationDelegate.idx === 0 ? "" : chatsModel.activityNotificationList.getNotificationData(prevMessageIndex, "timestamp")
                                 }
 
-                                ActivityChannelBadge {
-                                    id: badge
-                                    name: model.name
-                                    chatId: model.chatId
-                                    notificationType: model.notificationType
-                                    responseTo: model.message.responseTo
-                                    anchors.top: notificationMessage.bottom
-                                    anchors.left: parent.left
-                                    anchors.leftMargin: 61 // TODO find a way to align with the text of the message
-                                }
-
                                 Rectangle {
                                     anchors.top: notificationMessage.bottom
                                     anchors.bottom: badge.bottom
@@ -266,6 +260,18 @@ Popup {
                                     color: model.read ? Style.current.transparent : Utils.setColorAlpha(Style.current.blue, 0.1)
 
                                 }
+
+                                ActivityChannelBadge {
+                                    id: badge
+                                    name: model.name
+                                    chatId: model.chatId
+                                    notificationType: model.notificationType
+                                    responseTo: model.message.responseTo
+                                    communityId: model.message.communityId
+                                    anchors.top: notificationMessage.bottom
+                                    anchors.left: parent.left
+                                    anchors.leftMargin: 61 // TODO find a way to align with the text of the message
+                                }
                             }
                         }
                     }

ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ActivityChannelBadge.qml

@@ -1,4 +1,5 @@
 import QtQuick 2.13
+import QtGraphicalEffects 1.13
 import "../../../../../imports"
 import "../../../../../shared"
 import "../../../../../shared/status"
@@ -9,6 +10,7 @@ Rectangle {
     property string name: "channelName"
     property string identicon
     property string responseTo
+    property string communityId
     property int notificationType
     property int chatType: chatsModel.channelView.chats.getChannelType(chatId)
     property int realChatType: {
@@ -34,7 +36,7 @@ Rectangle {
         height: parent.height
         sourceComponent: {
             switch (model.notificationType) {
-            case Constants.activityCenterNotificationTypeMention: return channelComponent
+            case Constants.activityCenterNotificationTypeMention: return wrapper.communityId ? communityComponent : channelComponent
             case Constants.activityCenterNotificationTypeReply: return replyComponent
             default: return channelComponent
             }
@@ -78,6 +80,133 @@ Rectangle {
                 font.pixelSize: 13
                 anchors.verticalCenter: parent.verticalCenter
                 selectByMouse: true
+                readOnly: true
+            }
+        }
+    }
+
+    Component {
+        id: communityComponent
+
+        Item {
+            property int communityIndex: chatsModel.communities.joinedCommunities.getCommunityIndex(wrapper.communityId)
+
+            property string image: communityIndex > -1 ? chatsModel.communities.joinedCommunities.rowData(communityIndex, "thumbnailImage") : ""
+            property string iconColor: !image && communityIndex > -1 ? chatsModel.communities.joinedCommunities.rowData(communityIndex, "communityColor"): ""
+            property bool useLetterIdenticon: !image
+            property string communityName: communityIndex > -1 ? chatsModel.communities.joinedCommunities.rowData(communityIndex, "name") : ""
+            property string channelName: chatsModel.getChannelNameById(wrapper.chatId)
+
+            id: communityBadge
+            width: childrenRect.width
+            height: parent.height
+            SVGImage {
+                id: communityIcon
+                width: 16
+                height: 16
+                source: "../../../../img/communities.svg"
+                anchors.left: parent.left
+                anchors.leftMargin: 4
+                anchors.verticalCenter:parent.verticalCenter
+
+                ColorOverlay {
+                    anchors.fill: parent
+                    source: parent
+                    color: Style.current.secondaryText
+                }
+            }
+
+            Loader {
+                id: communityImageLoader
+                active: true
+                anchors.left: communityIcon.right
+                anchors.leftMargin: 2
+                anchors.verticalCenter: parent.verticalCenter
+                sourceComponent: communityBadge.useLetterIdenticon ? letterIdenticon :imageIcon
+            }
+
+            Component {
+                id: imageIcon
+                RoundedImage {
+                    source: communityBadge.image
+                    noMouseArea: true
+                    noHover: true
+                    width: 16
+                    height: 16
+                }
+            }
+
+            Component {
+                id: letterIdenticon
+                StatusLetterIdenticon {
+                    width: 16
+                    height: 16
+                    letterSize: 12
+                    chatName: communityBadge.communityName
+                    color: communityBadge.iconColor
+                }
+            }
+
+            function getLinkStyle(link, hoveredLink) {
+                return `<style type="text/css">` +
+                        `a {` +
+                        `color: ${Style.current.secondaryText};` +
+                        `text-decoration: none;` +
+                        `}` +
+                        (hoveredLink !== "" ? `a[href="${hoveredLink}"] { text-decoration: underline; }` : "") +
+                        `</style>` +
+                        `<a href="${link}">${link}</a>`
+            }
+
+            StyledTextEdit {
+                id: communityName
+                text: communityBadge.getLinkStyle(communityBadge.communityName, hoveredLink)
+                height: 18
+                readOnly: true
+                textFormat: Text.RichText
+                width: implicitWidth > 300 ? 300 : implicitWidth
+                clip: true
+                anchors.left: communityImageLoader.right
+                anchors.leftMargin: 4
+                color: Style.current.secondaryText
+                font.pixelSize: 13
+                anchors.verticalCenter: parent.verticalCenter
+                onLinkActivated: function () {
+                    chatsModel.communities.setActiveCommunity(wrapper.communityId)
+                }
+            }
+
+            SVGImage {
+                id: caretImage
+                source: "../../../../img/show-category.svg"
+                width: 16
+                height: 16
+                anchors.left: communityName.right
+                anchors.verticalCenter: parent.verticalCenter
+
+                ColorOverlay {
+                    anchors.fill: parent
+                    source: parent
+                    color: Style.current.secondaryText
+                }
+            }
+
+            StyledTextEdit {
+                id: channelName
+                text: communityBadge.getLinkStyle(communityBadge.channelName || wrapper.name, hoveredLink)
+                height: 18
+                readOnly: true
+                textFormat: Text.RichText
+                width: implicitWidth > 300 ? 300 : implicitWidth
+                clip: true
+                anchors.left: caretImage.right
+                color: Style.current.secondaryText
+                font.pixelSize: 13
+                anchors.verticalCenter: parent.verticalCenter
+                onLinkActivated: function () {
+                    chatsModel.communities.setActiveCommunity(wrapper.communityId)
+                    chatsModel.setActiveChannel(model.message.chatId)
+                }
             }
         }
     }