fix(@desktop/chat): rework invitation bubbles

InvitationBubbleView.qml:
- rework view to use layouts properly
- add missing community identicon

Backend:
- remove local community requests on community join
- propagate SIGNAL_COMMUNITY_MY_REQUEST_ADDED to UI

fixes: #7139

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

@@ -62,6 +62,10 @@ proc init*(self: Controller) =
     let args = CommunityMutedArgs(e)
     self.delegate.communityMuted(args.communityId, args.muted)
 
+  self.events.on(SIGNAL_COMMUNITY_MY_REQUEST_ADDED) do(e:Args):
+    let args = CommunityRequestArgs(e)
+    self.delegate.communityAccessRequested(args.communityRequest.communityId)
+
   self.events.on(SIGNAL_DISCORD_CATEGORIES_AND_CHANNELS_EXTRACTED) do(e:Args):
     let args = DiscordCategoriesAndChannelsArgs(e)
     self.delegate.discordCategoriesAndChannelsExtracted(args.categories, args.channels, args.oldestMessageTimestamp, args.errors, args.errorsCount)

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

@@ -109,6 +109,9 @@ method viewDidLoad*(self: AccessInterface) {.base.} =
 method communityMuted*(self: AccessInterface, communityId: string, muted: bool) {.base.} =
   raise newException(ValueError, "No implementation available")
 
+method communityAccessRequested*(self: AccessInterface, communityId: string) {.base.} =
+  raise newException(ValueError, "No implementation available")
+
 method requestExtractDiscordChannelsAndCategories*(self: AccessInterface, filesToImport: seq[string]) {.base.} =
   raise newException(ValueError, "No implementation available")
 

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

@@ -232,6 +232,9 @@ method reorderCommunityCategories*(self: Module, communityId: string, categoryId
 method communityMuted*(self: Module, communityId: string, muted: bool) =
   self.view.model().setMuted(communityId, muted)
 
+method communityAccessRequested*(self: Module, communityId: string) =
+  self.view.communityAccessRequested(communityId)
+
 method discordCategoriesAndChannelsExtracted*(self: Module, categories: seq[DiscordCategoryDto], channels: seq[DiscordChannelDto], oldestMessageTimestamp: int, errors: Table[string, DiscordImportError], errorsCount: int) =
 
   for filePath in errors.keys:

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

@@ -76,6 +76,7 @@ QtObject:
   proc communityChanged*(self: View, communityId: string) {.signal.}
   proc discordOldestMessageTimestampChanged*(self: View) {.signal.}
   proc discordImportErrorsCountChanged*(self: View) {.signal.}
+  proc communityAccessRequested*(self: View, communityId: string) {.signal.}
 
   proc setCommunityTags*(self: View, communityTags: string) =
     self.communityTags = newQVariant(communityTags)

src/app_service/service/community/dto/community.nim

@@ -32,7 +32,7 @@ type CommunityMembershipRequestDto* = object
   chatId*: string
   communityId*: string
   state*: int
-  our*: string
+  our*: string #FIXME: should be bool
 
 type CommunitySettingsDto* = object
   id*: string

src/app_service/service/community/service.nim

@@ -1,4 +1,4 @@
-import NimQml, Tables, json, sequtils, std/algorithm, strformat, strutils, chronicles, json_serialization
+import NimQml, Tables, json, sequtils, std/algorithm, strformat, strutils, chronicles, json_serialization, sugar
 
 import ./dto/community as community_dto
 
@@ -265,6 +265,7 @@ QtObject:
     if(not self.joinedCommunities.hasKey(community.id)):
       if (community.joined and community.isMember):
         self.joinedCommunities[community.id] = community
+        keepIf(self.myCommunityRequests, request => request.communityId != community.id)
         self.events.emit(SIGNAL_COMMUNITY_JOINED, CommunityArgs(community: community, fromUserAction: false))
       return
 

ui/imports/shared/views/chat/InvitationBubbleView.qml

@@ -7,21 +7,27 @@ import utils 1.0
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
 
 import shared.panels 1.0
 import shared.popups 1.0
 
 Item {
     id: root
-    anchors.left: parent.left
-    height: rectangleBubbleLoader.height
-    width: rectangleBubbleLoader.width
 
-    property string communityId
+    implicitHeight: loader.height
-    property var invitedCommunity
+    implicitWidth: loader.width
-    property int innerMargin: 12
+
-    property bool isLink: false
     property var store
+    property string communityId
+
+    QtObject {
+        id: d
+
+        property var invitedCommunity
+        property bool invitationPending
+
+        readonly property int margin: 12
 
         function getCommunity() {
             try {
@@ -40,15 +46,21 @@ Item {
             return null
         }
 
+        function reevaluate() {
+            invitedCommunity = getCommunity()
+            invitationPending = root.store.isCommunityRequestPending(communityId)
+        }
+    }
+
     Component.onCompleted: {
-        root.invitedCommunity = getCommunity()
+        d.reevaluate()
     }
 
     Connections {
         target: root.store.communitiesModuleInst
         onCommunityChanged: function (communityId) {
             if (communityId === root.communityId) {
-                root.invitedCommunity = getCommunity()
+                d.reevaluate()
             }
         }
     }
@@ -57,38 +69,30 @@ Item {
         target: root.store.communitiesModuleInst
         onCommunityAdded: function (communityId) {
             if (communityId === root.communityId) {
-                root.invitedCommunity = getCommunity()
+                d.reevaluate()
             }
         }
     }
 
-    Component {
+    Connections {
-        id: communityIntroDialog
+        target: root.store.communitiesModuleInst
-
+        onCommunityAccessRequested: function (communityId) {
-        CommunityIntroDialog {
+            if (communityId === root.communityId) {
-            anchors.centerIn: parent
+                d.reevaluate()
-
+            }
-            property var joinMethod: () => {}
-
-            name: root.invitedCommunity ? root.invitedCommunity.name : ""
-            introMessage: root.invitedCommunity ? root.invitedCommunity.introMessage : ""
-            imageSrc: root.invitedCommunity ? root.invitedCommunity.image : ""
-
-            onJoined: joinMethod()
         }
     }
 
     Loader {
-        id: rectangleBubbleLoader
+        id: loader
-        active: !!invitedCommunity
 
-        sourceComponent: Component {
+        active: !!d.invitedCommunity
-            Rectangle {
+
+        sourceComponent: Rectangle {
             id: rectangleBubble
-                property alias button: joinBtn
+
-                property bool isPendingRequest: root.store.isCommunityRequestPending(communityId)
             width: 270
-                height: column.implicitHeight
+            height: columnLayout.implicitHeight
             radius: 16
             color: Style.current.background
             border.color: Style.current.border
@@ -97,7 +101,7 @@ Item {
             states: [
                 State {
                     name: "requiresEns"
-                        when: invitedCommunity.ensOnly && !userProfile.ensName
+                    when: d.invitedCommunity.ensOnly && !userProfile.ensName
                     PropertyChanges {
                         target: joinBtn
                         text: qsTr("Membership requires an ENS username")
@@ -106,7 +110,7 @@ Item {
                 },
                 State {
                     name: "inviteOnly"
-                        when: invitedCommunity.access === Constants.communityChatInvitationOnlyAccess
+                    when: d.invitedCommunity.access === Constants.communityChatInvitationOnlyAccess
                     PropertyChanges {
                         target: joinBtn
                         text: qsTr("You need to be invited")
@@ -115,8 +119,8 @@ Item {
                 },
                 State {
                     name: "pending"
-                        when: invitedCommunity.access === Constants.communityChatOnRequestAccess &&
+                    when: d.invitedCommunity.access === Constants.communityChatOnRequestAccess &&
-                              rectangleBubble.isPendingRequest
+                          d.invitationPending
                     PropertyChanges {
                         target: joinBtn
                         text: qsTr("Pending")
@@ -125,9 +129,9 @@ Item {
                 },
                 State {
                     name: "joined"
-                        when: (invitedCommunity.joined && invitedCommunity.isMember) ||
+                    when: (d.invitedCommunity.joined && d.invitedCommunity.isMember) ||
-                              (invitedCommunity.access === Constants.communityChatPublicAccess &&
+                          (d.invitedCommunity.access === Constants.communityChatPublicAccess &&
-                                invitedCommunity.joined)
+                            d.invitedCommunity.joined)
                     PropertyChanges {
                         target: joinBtn
                         text: qsTr("View")
@@ -135,9 +139,8 @@ Item {
                 },
                 State {
                     name: "requestToJoin"
-                        when: invitedCommunity.access === Constants.communityChatOnRequestAccess &&
+                    when: d.invitedCommunity.access === Constants.communityChatOnRequestAccess &&
-                              !invitedCommunity.joined && !invitedCommunity.isMember &&
+                          !d.invitedCommunity.joined
-                              invitedCommunity.canRequestAccess
                     PropertyChanges {
                         target: joinBtn
                         text: qsTr("Request Access")
@@ -146,10 +149,8 @@ Item {
                 },
                 State {
                     name: "unjoined"
-                        when: (invitedCommunity.access === Constants.communityChatOnRequestAccess &&
+                    when: d.invitedCommunity.access === Constants.communityChatPublicAccess &&
-                                invitedCommunity.isMember) ||
+                          !d.invitedCommunity.joined
-                              (invitedCommunity.access === Constants.communityChatPublicAccess &&
-                                !invitedCommunity.joined)
                     PropertyChanges {
                         target: joinBtn
                         text: qsTr("Join")
@@ -157,35 +158,39 @@ Item {
                 }
             ]
 
-                // Not Refactored Yet
+            ColumnLayout {
-//                Connections {
+                id: columnLayout
-//                    target: root.store.chatsModelInst.communities
+
-//                    onMembershipRequestChanged: function(communityId, communityName, requestAccepted) {
+                width: parent.width
-//                        if (communityId === root.communityId) {
+
-//                            rectangleBubble.isPendingRequest = false
+                spacing: 0
-//                        }
-//                    }
-//                }
 
                 ColumnLayout {
-                    id: column
+                    id: invitationDescriptionLayout
-                    width: parent.width
+
-                    spacing: Style.current.halfPadding
+                    Layout.leftMargin: d.margin
+                    Layout.rightMargin: d.margin
+                    Layout.topMargin: 8
+                    Layout.bottomMargin: 8
+
+                    spacing: 4
 
-                    // TODO add check if verified
                     StatusBaseText {
                         id: title
-                        color: invitedCommunity.verifed ? Theme.palette.primaryColor1 : Theme.palette.baseColor1
+
-                        text: invitedCommunity.verifed ?
+                        Layout.fillWidth: true
-                                  qsTr("Verified community invitation") :
+
-                                  qsTr("Community invitation")
+                        text: d.invitedCommunity.verifed ? qsTr("Verified community invitation") : qsTr("Community invitation")
+                        color: d.invitedCommunity.verifed ? Theme.palette.primaryColor1 : Theme.palette.baseColor1
                         font.weight: Font.Medium
-                        Layout.topMargin: Style.current.halfPadding
-                        Layout.leftMargin: root.innerMargin
                         font.pixelSize: 13
                     }
+
                     StatusBaseText {
                         id: invitedYou
+
+                        Layout.fillWidth: true
+
                         visible: text != ""
                         text: {
                             // Not Refactored Yet
@@ -200,26 +205,50 @@ Item {
     //                                      : qsTr("A community has been shared")
     //                        }
                         }
-                        Layout.leftMargin: root.innerMargin
-                        Layout.rightMargin: root.innerMargin
-                        Layout.fillWidth: true
                         wrapMode: Text.WordWrap
                         font.pixelSize: 15
-                        color: Theme.palette.directColor1
+                    }
                 }
 
-                    Separator {
+                Rectangle {
                     Layout.fillWidth: true
+                    implicitHeight: 1
+                    color: Style.current.separator
                 }
 
-                    // TODO add image when it's supported
+                RowLayout {
+                    id: communityDescriptionLayout
+
+                    Layout.leftMargin: d.margin
+                    Layout.rightMargin: d.margin
+                    Layout.topMargin: 12
+                    Layout.bottomMargin: 12
+
+                    spacing: 12
+
+                    StatusSmartIdenticon {
+                        Layout.alignment: Qt.AlignTop
+                        Layout.preferredWidth: 40
+                        Layout.preferredHeight: 40
+
+                        name: d.invitedCommunity.name
+
+                        asset {
+                            width: 40
+                            height: 40
+                            name: d.invitedCommunity.image
+                            color: d.invitedCommunity.color
+                            isImage: true
+                        }
+                    }
+
+                    ColumnLayout {
+                        spacing: 2
+
                         StatusBaseText {
-                        id: communityName
-                        text: invitedCommunity.name
-                        Layout.topMargin: 2
-                        Layout.leftMargin: root.innerMargin
                             Layout.fillWidth: true
-                        Layout.rightMargin: root.innerMargin
+
+                            text: d.invitedCommunity.name
                             font.weight: Font.Bold
                             wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                             font.pixelSize: 17
@@ -227,45 +256,41 @@ Item {
                         }
 
                         StatusBaseText {
-                        id: communityDesc
-                        text: invitedCommunity.description
-                        Layout.leftMargin: root.innerMargin
-                        Layout.rightMargin: root.innerMargin
                             Layout.fillWidth: true
+
+                            text: d.invitedCommunity.description
                             wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                             font.pixelSize: 15
                             color: Theme.palette.directColor1
                         }
 
                         StatusBaseText {
-                        id: communityNbMembers
+                            Layout.fillWidth: true
+
                             // TODO add the plural support
-                        text: qsTr("%1 members").arg(invitedCommunity.nbMembers)
+                            text: qsTr("%1 members").arg(d.invitedCommunity.nbMembers)
-                        Layout.leftMargin: root.innerMargin
                             font.pixelSize: 13
                             font.weight: Font.Medium
                             color: Theme.palette.baseColor1
                         }
-
+                    }
-                    Separator {
-                        Layout.fillWidth: true
                 }
 
-                    Item {
+                Rectangle {
-                        id: btnItemId
-                        Layout.topMargin: -column.spacing
                     Layout.fillWidth: true
-                        height: 44
+                    implicitHeight: 1
-                        clip: true
+                    color: Style.current.separator
+                }
+
                 StatusFlatButton {
                     id: joinBtn
-                            anchors.fill: parent
-                            anchors.verticalCenter: parent.verticalCenter
-                            enabled: true
-                            text: qsTr("Unsupported state")
-                            onClicked: {
-                                let error
 
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: 44
+
+                    text: qsTr("Unsupported state")
+
+                    onClicked: {
                         if (rectangleBubble.state === "joined") {
                             root.store.setActiveCommunity(communityId);
                             return
@@ -280,11 +305,33 @@ Item {
                             Global.openPopup(communityIntroDialog, { joinMethod: () => {
                                                         let error = root.store.requestToJoinCommunity(communityId, userProfile.name)
                                                         if (error) joiningError.showError(error)
-                                                                else rectangleBubble.isPendingRequest = root.store.isCommunityRequestPending(communityId)
                                                     } });
                         }
+                    }
 
-                                if (error) joiningError.showError(error)
+                    Component.onCompleted: {
+                        // FIXME: extract StatusButtonBackground or expose radius property in StatusBaseButton
+                        background.radius = 16
+                    }
+                }
+            }
+        }
+    }
+
+    Component {
+        id: communityIntroDialog
+
+        CommunityIntroDialog {
+            anchors.centerIn: parent
+
+            property var joinMethod: () => {}
+
+            name: d.invitedCommunity ? d.invitedCommunity.name : ""
+            introMessage: d.invitedCommunity ? d.invitedCommunity.introMessage : ""
+            imageSrc: d.invitedCommunity ? d.invitedCommunity.image : ""
+
+            onJoined: joinMethod()
+        }
     }
 
     MessageDialog {
@@ -300,9 +347,3 @@ Item {
         standardButtons: StandardButton.Ok
     }
 }
-                    }
-                }
-            }
-        }
-    }
-}

ui/imports/shared/views/chat/LinksMessageView.qml

@@ -240,7 +240,6 @@ Column {
         InvitationBubbleView {
             store: root.store
             communityId: linkData.communityId
-            isLink: true
             anchors.left: parent.left
         }
     }