chore(community): replace plus button by adhoc btn

Fixes #5677

src/app/modules/main/chat_section/chat_content/controller.nim

@@ -125,7 +125,7 @@ proc init*(self: Controller) =
     self.delegate.onChatRenamed(args.newName)
 
   self.events.on(SIGNAL_CHAT_UPDATE) do(e: Args):
-    var args = ChatUpdateArgsNew(e)
+    var args = ChatUpdateArgs(e)
     for chat in args.chats:
       if self.chatId == chat.id:
         self.delegate.onChatEdited(chat)

src/app/modules/main/chat_section/chat_content/users/controller.nim

@@ -113,7 +113,7 @@ proc init*(self: Controller) =
         self.delegate.onChatMembersAdded(args.ids)
 
     self.events.on(SIGNAL_CHAT_UPDATE) do(e: Args):
-      var args = ChatUpdateArgsNew(e)
+      var args = ChatUpdateArgs(e)
       for chat in args.chats:
         if (chat.id == self.chatId):
           self.delegate.onChatUpdated(chat)

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

@@ -105,13 +105,20 @@ proc init*(self: Controller) =
     self.delegate.onContactUnblocked(args.contactId)
 
   self.events.on(SIGNAL_CHAT_UPDATE) do(e: Args):
-    var args = ChatUpdateArgsNew(e)
+    var args = ChatUpdateArgs(e)
     for chat in args.chats:
       let belongsToCommunity = chat.communityId.len > 0
       self.delegate.addChatIfDontExist(chat, belongsToCommunity, self.events, self.settingsService,
         self.contactService, self.chatService, self.communityService, self.messageService, self.gifService,
         self.mailserversService, setChatAsActive = false)
 
+  self.events.on(SIGNAL_CHAT_CREATED) do(e: Args):
+    var args = CreatedChatArgs(e)
+    let belongsToCommunity = args.chat.communityId.len > 0
+    self.delegate.addChatIfDontExist(args.chat, belongsToCommunity, self.events, self.settingsService,
+      self.contactService, self.chatService, self.communityService, self.messageService, self.gifService,
+      self.mailserversService, setChatAsActive = true)
+
   if (self.isCommunitySection):
     self.events.on(SIGNAL_COMMUNITY_CHANNEL_CREATED) do(e:Args):
       let args = CommunityChatArgs(e)

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

@@ -796,16 +796,14 @@ method addChatIfDontExist*(self: Module,
     gifService: gif_service.Service,
     mailserversService: mailservers_service.Service,
     setChatAsActive: bool = true) =
-
   let sectionId = self.controller.getMySectionId()
   if(belongsToCommunity and sectionId != chat.communityId or
     not belongsToCommunity and sectionId != singletonInstance.userProfile.getPubKey()):
     return
 
   if self.doesCatOrChatExist(chat.id):
-    if chat.chatType != ChatType.OneToOne:
+    if(chat.chatType != ChatType.OneToOne):
       self.onChatRenamed(chat.id, chat.name)
     return
-
   self.addNewChat(chat, belongsToCommunity, events, settingsService, contactService, chatService,
     communityService, messageService, gifService, mailserversService, setChatAsActive)

src/app/modules/main/profile_section/notifications/controller.nim

@@ -75,7 +75,7 @@ proc init*(self: Controller) =
     self.delegate.removeItemWithId(args.chatId)
 
   self.events.on(SIGNAL_CHAT_UPDATE) do(e: Args):
-    var args = ChatUpdateArgsNew(e)
+    var args = ChatUpdateArgs(e)
     for chat in args.chats:
       let belongsToCommunity = chat.communityId.len > 0
       self.delegate.addChat(chat)

src/app_service/service/activity_center/service.nim

@@ -186,7 +186,7 @@ QtObject:
 
       let (chats, messages) = self.chatService.parseChatResponse(response)
       self.events.emit(chat_service.SIGNAL_CHAT_UPDATE,
-        ChatUpdateArgsNew(messages: messages, chats: chats))
+        ChatUpdateArgs(messages: messages, chats: chats))
 
     except Exception as e:
       error "Error marking as accepted", msg = e.msg

src/app_service/service/chat/service.nim

@@ -24,8 +24,7 @@ logScope:
 include ../../common/json_utils
 
 type
-  # TODO remove New when refactored
+  ChatUpdateArgs* = ref object of Args
-  ChatUpdateArgsNew* = ref object of Args
     chats*: seq[ChatDto]
     messages*: seq[MessageDto]
     # TODO refactor that part
@@ -37,6 +36,9 @@ type
     # statusUpdates*: seq[StatusUpdate]
     # deletedMessages*: seq[RemovedMessage]
 
+  CreatedChatArgs* = ref object of Args
+    chat*: ChatDto
+
   ChatArgs* = ref object of Args
     communityId*: string # This param should be renamed to `sectionId`, that will avoid some confusions one may have.
     chatId*: string
@@ -86,6 +88,7 @@ const SIGNAL_CHAT_MEMBER_REMOVED* = "chatMemberRemoved"
 const SIGNAL_CHAT_MEMBER_UPDATED* = "chatMemberUpdated"
 const SIGNAL_CHAT_SWITCH_TO_OR_CREATE_1_1_CHAT* = "switchToOrCreateOneToOneChat"
 const SIGNAL_CHAT_ADDED_OR_UPDATED* = "chatAddedOrUpdated"
+const SIGNAL_CHAT_CREATED* = "chatCreated"
 
 QtObject:
   type Service* = ref object of QObject
@@ -117,7 +120,7 @@ QtObject:
           if (chatDto.active):
             chats.add(chatDto)
             self.updateOrAddChat(chatDto)
-        self.events.emit(SIGNAL_CHAT_UPDATE, ChatUpdateArgsNew(messages: receivedData.messages, chats: chats))
+        self.events.emit(SIGNAL_CHAT_UPDATE, ChatUpdateArgs(messages: receivedData.messages, chats: chats))
 
       if (receivedData.clearedHistories.len > 0):
         for clearedHistoryDto in receivedData.clearedHistories:
@@ -227,7 +230,7 @@ QtObject:
 
   proc emitUpdate(self: Service, response: RpcResponse[JsonNode]) =
     var (chats, messages) = self.parseChatResponse(response)
-    self.events.emit(SIGNAL_CHAT_UPDATE, ChatUpdateArgsNew(messages: messages, chats: chats))
+    self.events.emit(SIGNAL_CHAT_UPDATE, ChatUpdateArgs(messages: messages, chats: chats))
 
   proc getAllChats*(self: Service): seq[ChatDto] =
     return toSeq(self.chats.values)
@@ -283,6 +286,8 @@ QtObject:
 
       let response =  status_group_chat.createOneToOneChat(communityID, chatId, ensName)
       result = self.createChatFromResponse(response)
+      if result.success:
+        self.events.emit(SIGNAL_CHAT_CREATED, CreatedChatArgs(chat: result.chatDto))
     except Exception as e:
       let errDesription = e.msg
       error "error: ", errDesription
@@ -517,6 +522,8 @@ QtObject:
     try:
       let response = status_group_chat.createGroupChat(communityID, name, members)
       result = self.createChatFromResponse(response)
+      if result.success:
+        self.events.emit(SIGNAL_CHAT_CREATED, CreatedChatArgs(chat: result.chatDto))
     except Exception as e:
       error "error while creating group chat", msg = e.msg
 

ui/app/AppLayouts/Chat/views/ChatColumnView.qml

@@ -32,7 +32,6 @@ Item {
 
     property var rootStore
     property var contactsStore
-    property var chatSectionModule
     property var emojiPopup
 
     property Component pinnedMessagesPopupComponent
@@ -166,12 +165,6 @@ Item {
         onShareChatKeyClicked: Global.openProfilePopup(userProfile.pubKey);
     }
 
-    CreateChatView {
-        rootStore: root.rootStore
-        emojiPopup: root.emojiPopup
-        visible: mainModule.activeSection.sectionType === Constants.appSection.chat && root.rootStore.openCreateChat
-    }
-
     // This is kind of a solution for applying backend refactored changes with the minimal qml changes.
     // The best would be if we made qml to follow the struct we have on the backend side.
     Repeater {
@@ -288,7 +281,6 @@ Item {
                         Component.onCompleted: {
                             parentModule.prepareChatContentModuleForChatId(model.itemId)
                             chatContentModule = parentModule.getChatContentModule()
-
                             root.checkForCreateChatOptions(model.itemId)
                         }
                     }
@@ -409,7 +401,7 @@ Item {
         height: root.height - 56 * 2 // TODO get screen size // Taken from old code top bar height was fixed there to 56
         y: 56
         store: root.rootStore
-        chatSectionModule: root.chatSectionModule
+        chatSectionModule: root.parentModule
         messageContextMenu: contextmenu
     }
 

ui/app/AppLayouts/Chat/views/ChatView.qml

@@ -53,6 +53,13 @@ StatusAppThreePanelLayout {
         }
     }
 
+    Connections {
+        target: Global
+        onCloseCreateChatView: {
+            root.rootStore.openCreateChat = false
+        }
+    }
+
     leftPanel: Loader {
         id: contactColumnLoader
         sourceComponent: root.rootStore.chatCommunitySectionModule.isCommunity()?
@@ -65,7 +72,6 @@ StatusAppThreePanelLayout {
         parentModule: root.rootStore.chatCommunitySectionModule
         rootStore: root.rootStore
         contactsStore: root.contactsStore
-        chatSectionModule: root.rootStore.chatCommunitySectionModule
         pinnedMessagesPopupComponent: root.pinnedMessagesListPopupComponent
         stickersLoaded: root.stickersLoaded
         emojiPopup: root.emojiPopup

ui/app/AppLayouts/Chat/views/CommunityColumnView.qml

@@ -4,10 +4,12 @@ import QtQuick.Dialogs 1.2
 import QtGraphicalEffects 1.13
 import QtQuick.Layouts 1.13
 
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
 import StatusQ.Popups 0.1
 
-
 import utils 1.0
 import shared 1.0
 import shared.popups 1.0
@@ -35,56 +37,49 @@ Item {
     signal infoButtonClicked
     signal manageButtonClicked
 
-    StatusChatInfoToolBar {
+    StatusChatInfoButton {
         id: communityHeader
-        anchors.top: parent.top
+        title: communityData.name
-        anchors.horizontalCenter: parent.horizontalCenter
+        subTitle: communityData.members.count <= 1 ?
-
-        chatInfoButton.title: communityData.name
-        chatInfoButton.subTitle: communityData.members.count <= 1 ?
                                      //% "1 Member"
                                      qsTrId("1-member") :
                                      //% "%1 Members"
                                      qsTrId("-1-members").arg(communityData.members.count)
+        image.source: communityData.image
+        icon.color: communityData.color
+        onClicked: root.infoButtonClicked()
+        anchors.top: parent.top
+        anchors.topMargin: 5
+        anchors.left: parent.left
+        anchors.leftMargin: Style.current.halfPadding
+        anchors.right: (implicitWidth > parent.width - 50) ? adHocChatButton.left : undefined
+        anchors.rightMargin: Style.current.halfPadding
+        type: StatusChatInfoButton.Type.OneToOneChat
+    }
 
-        chatInfoButton.image.source: communityData.image
+    StatusIconTabButton {
-        chatInfoButton.icon.color: communityData.color
+        id: adHocChatButton
-        menuButton.visible: communityData.amISectionAdmin && communityData.canManageUsers
+        icon.name: "edit"
-        chatInfoButton.onClicked: root.infoButtonClicked()
+        anchors.verticalCenter: communityHeader.verticalCenter
-
+        anchors.right: parent.right
-        popupMenu: StatusPopupMenu {
+        anchors.rightMargin: 14
-            StatusMenuItem {
+        checked: root.store.openCreateChat
-                //% "Create channel"
+        highlighted: root.store.openCreateChat
-                text: qsTrId("create-channel")
+        onClicked: {
-                icon.name: "channel"
+            root.store.openCreateChat = !root.store.openCreateChat;
-                enabled: communityData.amISectionAdmin
+            if (!root.store.openCreateChat) {
-                onTriggered: Global.openPopup(createChannelPopup)
+                Global.closeCreateChatView()
-            }
+            } else {
-
+                Global.openCreateChatView()
-            StatusMenuItem {
-                //% "Create category"
-                text: qsTrId("create-category")
-                icon.name: "channel-category"
-                enabled: communityData.amISectionAdmin
-                onTriggered: Global.openPopup(createCategoryPopup)
-            }
-
-           StatusMenuSeparator {}
-
-            StatusMenuItem {
-                //% "Invite people"
-                text: qsTrId("invite-people")
-                icon.name: "share-ios"
-                enabled: communityData.canManageUsers
-                onTriggered: Global.openPopup(inviteFriendsToCommunityPopup, {
-                    community: communityData,
-                    hasAddedContacts: root.hasAddedContacts,
-                    communitySectionModule: root.communitySectionModule
-                })
             }
         }
 
+        StatusToolTip {
+            text: qsTr("Start chat")
+            visible: parent.hovered
+        }
     } // StatusChatInfoToolBar
+
     Loader {
         id: membershipRequests
 
@@ -111,7 +106,9 @@ Item {
     ScrollView {
         id: chatGroupsContainer
         anchors.top: membershipRequests.bottom
-        anchors.bottom: parent.bottom
+        anchors.topMargin: Style.current.padding
+        anchors.bottom: createChatOrCommunity.top
+        anchors.horizontalCenter: parent.horizontalCenter
 
         topPadding: Style.current.padding
 
@@ -466,6 +463,53 @@ Item {
         } // Column
     } // ScrollView
 
+    Loader {
+        id: createChatOrCommunity
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: Style.current.padding
+        active: communityData.amISectionAdmin
+        sourceComponent: Component {
+            StatusBaseText {
+                color: Theme.palette.baseColor1
+                height: visible ? implicitHeight : 0
+                text: qsTr("Create channel or category")
+                font.underline: true
+                font.pixelSize: 13
+                textFormat: Text.RichText
+
+                MouseArea {
+                    anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        if (createChatOrCatMenu.opened) {
+                            createChatOrCatMenu.close()
+                            return
+                        }
+                        createChatOrCatMenu.open()
+                        createChatOrCatMenu.y = - createChatOrCatMenu.height - 5
+                    }
+                }
+
+                StatusPopupMenu {
+                    id: createChatOrCatMenu
+                    closePolicy: Popup.CloseOnPressOutsideParent
+                    StatusMenuItem {
+                        text: qsTr("Create channel")
+                        icon.name: "channel"
+                        onTriggered: Global.openPopup(createChannelPopup)
+                    }
+
+                    StatusMenuItem {
+                        text: qsTrId("Create category")
+                        icon.name: "channel-category"
+                        onTriggered: Global.openPopup(createCategoryPopup)
+                    }
+                }
+            }
+        }
+    }
+
     Component {
         id: createChannelPopup
         CreateChannelPopup {

ui/app/AppLayouts/Chat/views/ContactsColumnView.qml

@@ -120,6 +120,11 @@ Item {
             highlighted: root.store.openCreateChat
             onClicked: {
                 root.store.openCreateChat = !root.store.openCreateChat;
+                if (!root.store.openCreateChat) {
+                    Global.closeCreateChatView()
+                } else {
+                    Global.openCreateChatView()
+                }
             }
 
             StatusToolTip {

ui/app/AppLayouts/Chat/views/CreateChatView.qml

@@ -14,7 +14,6 @@ import shared.status 1.0
 
 Page {
     id: root
-    anchors.fill: parent
     Behavior on anchors.bottomMargin { NumberAnimation { duration: 30 }}
 
     property ListModel contactsModel: ListModel { }
@@ -22,6 +21,7 @@ Page {
     property var emojiPopup: null
 
     Keys.onEscapePressed: {
+        Global.closeCreateChatView()
         root.rootStore.openCreateChat = false;
     }
 
@@ -37,21 +37,18 @@ Page {
         }
     }
 
-    Connections {
+    onVisibleChanged: {
-        target: rootStore
+        if (visible) {
-        onOpenCreateChatChanged: {
+            for (var i = 0; i < contactsModelListView.count; i ++) {
-            if (root.rootStore.openCreateChat) {
+                var entry = contactsModelListView.itemAtIndex(i);
-                for (var i = 0; i < contactsModelListView.count; i ++) {
+                contactsModel.insert(contactsModel.count,
-                    var entry = contactsModelListView.itemAtIndex(i);
+                {"pubKey": entry.pubKey, "displayName": entry.displayName,
-                    contactsModel.insert(contactsModel.count,
+                    "icon": entry.icon});
-                    {"pubKey": entry.pubKey, "displayName": entry.displayName,
-                     "icon": entry.icon});
-                }
-                tagSelector.sortModel(root.contactsModel);
-            } else {
-                contactsModel.clear();
-                tagSelector.namesModel.clear();
             }
+            tagSelector.sortModel(root.contactsModel);
+        } else {
+            contactsModel.clear();
+            tagSelector.namesModel.clear();
         }
     }
 
@@ -66,22 +63,15 @@ Page {
                 groupName += (tagSelector.namesModel.get(i).name + (i === tagSelector.namesModel.count - 1 ? "" : "&"));
                 pubKeys.push(tagSelector.namesModel.get(i).pubKey);
             }
-            root.rootStore.chatCommunitySectionModule.createGroupChat("",groupName, JSON.stringify(pubKeys));
+            root.rootStore.chatCommunitySectionModule.createGroupChat("", groupName, JSON.stringify(pubKeys));
         }
 
         chatInput.textInput.clear();
         chatInput.textInput.textFormat = TextEdit.PlainText;
         chatInput.textInput.textFormat = TextEdit.RichText;
+        Global.changeAppSectionBySectionType(Constants.appSection.chat)
     }
 
-    visible: (opacity > 0.01)
-    onVisibleChanged: {
-        if (!visible) {
-            tagSelector.namesModel.clear();
-        }
-    }
-
-    opacity: (root.rootStore.openCreateChat) ? 1.0 : 0.0
     Behavior on opacity { NumberAnimation {}}
     background: Rectangle {
         anchors.fill: parent
@@ -95,8 +85,6 @@ Page {
         height: tagSelector.height
         anchors.top: parent.top
         anchors.topMargin: 8
-        anchors.right: parent.right
-        anchors.rightMargin: 8
         clip: true
         StatusTagSelector {
             id: tagSelector

ui/app/AppLayouts/Chat/views/qmldir

@@ -0,0 +1 @@
+CreateChatView 1.0 CreateChatView.qml

ui/app/mainui/AppMain.qml

@@ -11,6 +11,7 @@ import AppLayouts.Node 1.0
 import AppLayouts.Browser 1.0
 import AppLayouts.Chat 1.0
 import AppLayouts.Chat.popups 1.0
+import AppLayouts.Chat.views 1.0
 import AppLayouts.Profile 1.0
 import AppLayouts.Profile.popups 1.0
 import AppLayouts.CommunitiesPortal 1.0
@@ -441,201 +442,236 @@ Item {
                 }
             }
 
-            StackLayout {
-                id: appView
-                width: parent.width
             
+            Item {
+                width: parent.width
                 Layout.fillHeight: true
 
-                currentIndex: {
+                StackLayout {
-                    if(mainModule.activeSection.sectionType === Constants.appSection.chat) {
+                    id: appView
-                        return Constants.appViewStackIndex.chat
-                    }
-                    else if(mainModule.activeSection.sectionType === Constants.appSection.community) {
 
-                        for(let i = this.children.length - 1; i >=0; i--)
+                    anchors.fill: parent
-                        {
+
-                            var obj = this.children[i];
+                    currentIndex: {
-                            if(obj && obj.sectionId && obj.sectionId == mainModule.activeSection.id)
+                        if(mainModule.activeSection.sectionType === Constants.appSection.chat) {
+                            return Constants.appViewStackIndex.chat
+                        }
+                        else if(mainModule.activeSection.sectionType === Constants.appSection.community) {
+
+                            for(let i = this.children.length - 1; i >=0; i--)
                             {
-                                return i
+                                var obj = this.children[i];
+                                if(obj && obj.sectionId && obj.sectionId == mainModule.activeSection.id)
+                                {
+                                    return i
+                                }
                             }
+
+                            // Should never be here, correct index must be returned from the for loop above
+                            console.error("Wrong section type: ", mainModule.activeSection.sectionType,
+                                        " or section id: ", mainModule.activeSection.id)
+                            return Constants.appViewStackIndex.community
+                        }
+                        else if(mainModule.activeSection.sectionType === Constants.appSection.communitiesPortal) {
+                            return Constants.appViewStackIndex.communitiesPortal
+                        }
+                        else if(mainModule.activeSection.sectionType === Constants.appSection.wallet) {
+                            return Constants.appViewStackIndex.wallet
+                        }
+                        else if(mainModule.activeSection.sectionType === Constants.appSection.browser) {
+                            return Constants.appViewStackIndex.browser
+                        }
+                        else if(mainModule.activeSection.sectionType === Constants.appSection.profile) {
+                            return Constants.appViewStackIndex.profile
+                        }
+                        else if(mainModule.activeSection.sectionType === Constants.appSection.node) {
+                            return Constants.appViewStackIndex.node
                         }
 
-                        // Should never be here, correct index must be returned from the for loop above
+                        // We should never end up here
-                        console.error("Wrong section type: ", mainModule.activeSection.sectionType,
+                        console.error("Unknown section type")
-                                      " or section id: ", mainModule.activeSection.id)
-                        return Constants.appViewStackIndex.community
-                    }
-                    else if(mainModule.activeSection.sectionType === Constants.appSection.communitiesPortal) {
-                        return Constants.appViewStackIndex.communitiesPortal
-                    }
-                    else if(mainModule.activeSection.sectionType === Constants.appSection.wallet) {
-                        return Constants.appViewStackIndex.wallet
-                    }
-                    else if(mainModule.activeSection.sectionType === Constants.appSection.browser) {
-                        return Constants.appViewStackIndex.browser
-                    }
-                    else if(mainModule.activeSection.sectionType === Constants.appSection.profile) {
-                        return Constants.appViewStackIndex.profile
-                    }
-                    else if(mainModule.activeSection.sectionType === Constants.appSection.node) {
-                        return Constants.appViewStackIndex.node
                     }
 
-                    // We should never end up here
+                    onCurrentIndexChanged: {
-                    console.error("Unknown section type")
+                        var obj = this.children[currentIndex];
-                }
+                        if(!obj)
+                            return
 
-                onCurrentIndexChanged: {
+                        if (obj.onActivated && typeof obj.onActivated === "function") {
-                    var obj = this.children[currentIndex];
+                            this.children[currentIndex].onActivated()
-                    if(!obj)
+                        }
-                        return
 
-                    if (obj.onActivated && typeof obj.onActivated === "function") {
+                        if(obj === browserLayoutContainer && browserLayoutContainer.active == false){
-                        this.children[currentIndex].onActivated()
+                            browserLayoutContainer.active = true;
+                        }
+
+                        if(obj === walletLayoutContainer){
+                            walletLayoutContainer.showSigningPhrasePopup();
+                        }
                     }
 
-                    if(obj === browserLayoutContainer && browserLayoutContainer.active == false){
+                    // NOTE:
-                        browserLayoutContainer.active = true;
+                    // If we ever change stack layout component order we need to updade
+                    // Constants.appViewStackIndex accordingly
+
+                    ChatLayout {
+                        id: chatLayoutContainer
+                        Layout.fillWidth: true
+                        Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+                        Layout.fillHeight: true
+
+                        chatView.pinnedMessagesListPopupComponent: pinnedMessagesPopupComponent
+                        chatView.emojiPopup: statusEmojiPopup
+
+                        contactsStore: appMain.rootStore.contactStore
+                        rootStore.emojiReactionsModel: appMain.rootStore.emojiReactionsModel
+
+                        chatView.onProfileButtonClicked: {
+                            Global.changeAppSectionBySectionType(Constants.appSection.profile);
+                        }
+
+                        chatView.onOpenAppSearch: {
+                            appSearch.openSearchPopup()
+                        }
+
+                        Component.onCompleted: {
+                            rootStore.chatCommunitySectionModule = mainModule.getChatSectionModule()
+                        }
                     }
 
-                    if(obj === walletLayoutContainer){
+                    CommunitiesPortalLayout {
-                        walletLayoutContainer.showSigningPhrasePopup();
+                        id: communitiesPortalLayoutContainer
-                    }
+                        Layout.fillWidth: true
-                }
+                        Layout.alignment: Qt.AlignLeft | Qt.AlignTop
-
+                        Layout.fillHeight: true
-                // NOTE:
-                // If we ever change stack layout component order we need to updade
-                // Constants.appViewStackIndex accordingly
-
-                ChatLayout {
-                    id: chatLayoutContainer
-                    Layout.fillWidth: true
-                    Layout.alignment: Qt.AlignLeft | Qt.AlignTop
-                    Layout.fillHeight: true
-
-                    chatView.pinnedMessagesListPopupComponent: pinnedMessagesPopupComponent
-                    chatView.emojiPopup: statusEmojiPopup
-
-                    contactsStore: appMain.rootStore.contactStore
-                    rootStore.emojiReactionsModel: appMain.rootStore.emojiReactionsModel
-
-                    chatView.onProfileButtonClicked: {
-                        Global.changeAppSectionBySectionType(Constants.appSection.profile);
                     }
 
-                    chatView.onOpenAppSearch: {
+                    WalletLayout {
-                        appSearch.openSearchPopup()
+                        id: walletLayoutContainer
+                        Layout.fillWidth: true
+                        Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+                        Layout.fillHeight: true
+                        store: appMain.rootStore
+                        contactsStore: appMain.rootStore.profileSectionStore.contactsStore
+                        emojiPopup: statusEmojiPopup
+                        sendModal: sendModal
                     }
 
-                    Component.onCompleted: {
+                    Component {
-                        rootStore.chatCommunitySectionModule = mainModule.getChatSectionModule()
+                        id: browserLayoutComponent
+                        BrowserLayout {
+                            globalStore: appMain.rootStore
+                            sendTransactionModal: sendModal
+                        }
                     }
-                }
 
-                CommunitiesPortalLayout {
+                    Loader {
-                    id: communitiesPortalLayoutContainer
+                        id: browserLayoutContainer
-                    Layout.fillWidth: true
+                        sourceComponent: browserLayoutComponent
-                    Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+                        active: false
-                    Layout.fillHeight: true
+                        Layout.fillWidth: true
-                }
+                        Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+                        Layout.fillHeight: true
+                        // Loaders do not have access to the context, so props need to be set
+                        // Adding a "_" to avoid a binding loop
+                        // Not Refactored Yet
+                        //                property var _chatsModel: chatsModel.messageView
+                        // Not Refactored Yet
+                        //                property var _walletModel: walletModel
+                        // Not Refactored Yet
+                        //                property var _utilsModel: utilsModel
+                        property var _web3Provider: BrowserStores.Web3ProviderStore.web3ProviderInst
+                    }
 
-                WalletLayout {
+                    ProfileLayout {
-                    id: walletLayoutContainer
+                        id: profileLayoutContainer
-                    Layout.fillWidth: true
+                        Layout.fillWidth: true
-                    Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+                        Layout.alignment: Qt.AlignLeft | Qt.AlignTop
-                    Layout.fillHeight: true
+                        Layout.fillHeight: true
-                    store: appMain.rootStore
-                    contactsStore: appMain.rootStore.profileSectionStore.contactsStore
-                    emojiPopup: statusEmojiPopup
-                    sendModal: sendModal
-                }
 
-                Component {
+                        store: appMain.rootStore.profileSectionStore
-                    id: browserLayoutComponent
-                    BrowserLayout {
                         globalStore: appMain.rootStore
-                        sendTransactionModal: sendModal
+                        systemPalette: appMain.sysPalette
+                        emojiPopup: statusEmojiPopup
                     }
 
-                }
+                    NodeLayout {
+                        id: nodeLayoutContainer
+                        Layout.fillWidth: true
+                        Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+                        Layout.fillHeight: true
+                    }
 
-                Loader {
+                    Repeater {
-                    id: browserLayoutContainer
+                        model: mainModule.sectionsModel
-                    sourceComponent: browserLayoutComponent
-                    active: false
-                    Layout.fillWidth: true
-                    Layout.alignment: Qt.AlignLeft | Qt.AlignTop
-                    Layout.fillHeight: true
-                    // Loaders do not have access to the context, so props need to be set
-                    // Adding a "_" to avoid a binding loop
-                    // Not Refactored Yet
-                    //                property var _chatsModel: chatsModel.messageView
-                    // Not Refactored Yet
-                    //                property var _walletModel: walletModel
-                    // Not Refactored Yet
-                    //                property var _utilsModel: utilsModel
-                    property var _web3Provider: BrowserStores.Web3ProviderStore.web3ProviderInst
-                }
 
-                ProfileLayout {
+                        delegate: DelegateChooser {
-                    id: profileLayoutContainer
+                            id: delegateChooser
-                    Layout.fillWidth: true
+                            role: "sectionType"
-                    Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+                            DelegateChoice {
-                    Layout.fillHeight: true
+                                roleValue: Constants.appSection.community
+                                delegate: ChatLayout {
+                                    property string sectionId: model.id
+                                    Layout.fillWidth: true
+                                    Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+                                    Layout.fillHeight: true
 
-                    store: appMain.rootStore.profileSectionStore
+                                    chatView.pinnedMessagesListPopupComponent: pinnedMessagesPopupComponent
-                    globalStore: appMain.rootStore
+                                    chatView.emojiPopup: statusEmojiPopup
-                    systemPalette: appMain.sysPalette
-                    emojiPopup: statusEmojiPopup
-                }
 
-                NodeLayout {
+                                    contactsStore: appMain.rootStore.contactStore
-                    id: nodeLayoutContainer
+                                    rootStore.emojiReactionsModel: appMain.rootStore.emojiReactionsModel
-                    Layout.fillWidth: true
-                    Layout.alignment: Qt.AlignLeft | Qt.AlignTop
-                    Layout.fillHeight: true
-                }
 
-                Repeater {
+                                    chatView.onProfileButtonClicked: {
-                    model: mainModule.sectionsModel
+                                        Global.changeAppSectionBySectionType(Constants.appSection.profile);
+                                    }
 
-                    delegate: DelegateChooser {
+                                    chatView.onOpenAppSearch: {
-                        id: delegateChooser
+                                        appSearch.openSearchPopup()
-                        role: "sectionType"
+                                    }
-                        DelegateChoice {
-                            roleValue: Constants.appSection.community
-                            delegate: ChatLayout {
-                                property string sectionId: model.id
-                                Layout.fillWidth: true
-                                Layout.alignment: Qt.AlignLeft | Qt.AlignTop
-                                Layout.fillHeight: true
 
-                                chatView.pinnedMessagesListPopupComponent: pinnedMessagesPopupComponent
+                                    Component.onCompleted: {
-                                chatView.emojiPopup: statusEmojiPopup
+                                        // we cannot return QVariant if we pass another parameter in a function call
-
+                                        // that's why we're using it this way
-                                contactsStore: appMain.rootStore.contactStore
+                                        mainModule.prepareCommunitySectionModuleForCommunityId(model.id)
-                                rootStore.emojiReactionsModel: appMain.rootStore.emojiReactionsModel
+                                        rootStore.chatCommunitySectionModule = mainModule.getCommunitySectionModule()
-
+                                    }
-                                chatView.onProfileButtonClicked: {
-                                    Global.changeAppSectionBySectionType(Constants.appSection.profile);
-                                }
-
-                                chatView.onOpenAppSearch: {
-                                    appSearch.openSearchPopup()
-                                }
-
-                                Component.onCompleted: {
-                                    // we cannot return QVariant if we pass another parameter in a function call
-                                    // that's why we're using it this way
-                                    mainModule.prepareCommunitySectionModuleForCommunityId(model.id)
-                                    rootStore.chatCommunitySectionModule = mainModule.getCommunitySectionModule()
                                 }
                             }
                         }
                     }
                 }
+
+                CreateChatView {
+                    property bool opened: false
+
+                    id: createChatView
+                    rootStore: chatLayoutContainer.rootStore
+                    emojiPopup: statusEmojiPopup
+                    anchors.top: parent.top
+                    anchors.topMargin: 8
+                    anchors.rightMargin: 8
+                    anchors.bottom: parent.bottom
+                    anchors.right: parent.right
+                    width: chatLayoutContainer.chatView.width - chatLayoutContainer.chatView.leftPanel.width - anchors.rightMargin - anchors.leftMargin
+                    visible: createChatView.opened
+                    
+                    Connections {
+                        target: Global
+                        onOpenCreateChatView: {
+                            createChatView.opened = true
+                        }
+                        onCloseCreateChatView: {
+                            createChatView.opened = false
+                        }
+                    }
+                    Connections {
+                        target: mainModule
+                        onActiveSectionChanged: {
+                            Global.closeCreateChatView()
+                        }
+                    }
+                }
             }
 
             Connections {

ui/imports/utils/Global.qml

@@ -26,6 +26,8 @@ QtObject {
     signal openDownloadModalRequested()
     signal settingsLoaded()
     signal openBackUpSeedPopup()
+    signal openCreateChatView()
+    signal closeCreateChatView()
 
     signal openProfilePopupRequested(string publicKey, var parentPopup, bool openNicknamePopup)
     signal openChangeProfilePicPopup()