refactor(desktop/chat) Cleaning up panels

ui/app/AppLayouts/Chat/ChatLayout.qml

@@ -181,6 +181,7 @@ StatusAppThreePanelLayout {
             messageContextMenu: quickActionMessageOptionsMenu
             profilePubKey: profileModel.profile.pubKey
             contactsList: profileModel.contacts.list
+            community: chatsModel.communities.activeCommunity
         }
     }
 
@@ -208,6 +209,7 @@ StatusAppThreePanelLayout {
     Component {
         id: communtiyColumnComponent
         CommunityColumnView {
+            rootStore: chatColumn.rootStore
             pinnedMessagesPopupComponent: chatColumn.pinnedMessagesPopupComponent
         }
     }
@@ -243,8 +245,9 @@ StatusAppThreePanelLayout {
         }
     }
 
-    MessageContextMenuPanel {
+    MessageContextMenuView {
         id: quickActionMessageOptionsMenu
+        store: chatColumn.rootStore
         reactionModel: chatColumn.rootStore.emojiReactionsModel
     }
 }

ui/app/AppLayouts/Chat/controls/FetchMoreMessagesButton.qml

@@ -2,7 +2,7 @@ import QtQuick 2.13
 
 import StatusQ.Components 0.1
 
-import "../../../../../shared/panels"
+import "../../../../shared/panels"
 
 import utils 1.0
 
@@ -11,8 +11,8 @@ Item {
     height: childrenRect.height + Style.current.smallPadding * 2
     anchors.left: parent.left
     anchors.right: parent.right
-    property int nextMessageIndex
+//    property int nextMessageIndex
-    property string nextMsgTimestamp
+//    property string nextMsgTimestamp
     signal clicked()
     signal timerTriggered()
     Timer {

ui/app/AppLayouts/Chat/controls/GapComponent.qml

@@ -1,7 +1,6 @@
 import QtQuick 2.13
-import "../../../../../shared"
+import "../../../../shared"
-import "../../../../../shared/panels"
+import "../../../../shared/panels"
-import "../../../../../shared/status/core"
 
 import utils 1.0
 

ui/app/AppLayouts/Chat/controls/UserDelegate.qml

@@ -48,7 +48,8 @@ Item {
             target: wrapper.contactsList
             onContactChanged: {
                 if (pubkey === wrapper.publicKey) {
-                    wrapper.profileImage = appMain.getProfileImage(wrapper.publicKey)
+                    wrapper.profileImage = !!appMain.getProfileImage(wrapper.publicKey) ?
+                                appMain.getProfileImage(wrapper.publicKey) : ""
                 }
             }
         }

ui/app/AppLayouts/Chat/controls/communities/MembershipRadioButton.qml

@@ -1,55 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
-import QtGraphicalEffects 1.13
-import "../../../../shared"
-import "../../../../shared/panels"
-import "../../../../shared/status"
-
-import utils 1.0
-import "."
-
-Item {
-    property string text
-    property string description
-    property var buttonGroup
-    property bool checked: false
-    property bool hideSeparator: false
-    signal radioCheckedChanged(bool checked)
-
-    id: root
-    width: parent.width
-    height: childrenRect.height
-
-    StatusRadioButtonRow {
-        id: radioBtn
-        text: root.text
-        buttonGroup: root.buttonGroup
-        checked: root.checked
-        onRadioCheckedChanged: {
-            root.radioCheckedChanged(checked)
-        }
-    }
-
-    StyledText {
-        id: radioDesc
-        text: root.description
-        anchors.top: radioBtn.bottom
-        anchors.topMargin: Style.current.halfPadding
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.rightMargin: 100
-        font.pixelSize: 13
-        color: Style.current.secondaryText
-        wrapMode: Text.WordWrap
-    }
-
-    Separator {
-        visible: !root.hideSeparator
-        anchors.top: radioDesc.bottom
-        anchors.topMargin: visible ? Style.current.halfPadding : 0
-        anchors.left: parent.left
-        anchors.leftMargin: -Style.current.halfPadding
-        anchors.right: parent.right
-        anchors.rightMargin: -Style.current.halfPadding
-    }
-}

ui/app/AppLayouts/Chat/panels/ChatReplyPanel.qml

@@ -14,10 +14,18 @@ Loader {
     id: root
 
     property int nameMargin: 6
-//    property bool isCurrentUser: false
     property int textFieldWidth: item ? item.textField.width : 0
     property int textFieldImplicitWidth: 0
     property int authorWidth: item ? item.authorMetrics.width : 0
+    property bool longReply: false
+    property color elementsColor: isCurrentUser ? Style.current.chatReplyCurrentUser : Style.current.secondaryText
+    property var container
+    property int chatHorizontalPadding
+    property var stickerData
+    signal clickMessage(bool isProfileClick, bool isSticker, bool isImage, var image, bool emojiOnly, bool hideEmojiPicker, bool isReply)
+
+//    TODO bring those back and remove dynamic scoping
+//    property bool isCurrentUser: false
 //    property int repliedMessageType
 //    property string repliedMessageImage
 //    property string repliedMessageUserIdenticon
@@ -25,15 +33,8 @@ Loader {
 //    property string repliedMessageUserImage
 //    property string repliedMessageAuthor
 //    property string repliedMessageContent
-    property bool longReply: false
-    property color elementsColor: isCurrentUser ? Style.current.chatReplyCurrentUser : Style.current.secondaryText
-    property var container
-    property int chatHorizontalPadding
 //    property string responseTo: ""
-    property var stickerData
-
 //    signal scrollToBottom(bool isit, var container)
-    signal clickMessage(bool isProfileClick, bool isSticker, bool isImage, var image, bool emojiOnly, bool hideEmojiPicker, bool isReply)
 
     sourceComponent: Component {
         Item {

ui/app/AppLayouts/Chat/panels/EmojiReactionsPanel.qml

@@ -14,14 +14,16 @@ Item {
     width: childrenRect.width
 
     property int imageMargin: 4
-//    property bool isCurrentUser
-//    property var emojiReactionsModel
-//    property bool isMessageActive
     signal addEmojiClicked()
     signal hoverChanged(bool hovered)
     signal toggleReaction(int emojiID)
     signal setMessageActive(string messageId, bool active)
 
+//    TODO bring those back and remove dynamic scoping
+//    property bool isCurrentUser
+//    property var emojiReactionsModel
+//    property bool isMessageActive
+
     Row {
         spacing: root.imageMargin
 

ui/app/AppLayouts/Chat/panels/FetchMoreMessagesMenuPanel.qml

@@ -1,63 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
-import QtQuick.Layouts 1.13
-
-import "../../../../shared"
-import "../../../../shared/popups"
-import "../../../../shared/status"
-
-import utils 1.0
-
-// TODO: replace with StatusPopupmenu
-//Todo Unsed?
-
-PopupMenu {
-    //% "Fetch Messages"
-    title: qsTrId("fetch-messages")
-
-    // TODO call fetch for the wanted duration
-    //% "Last 24 hours"
-    Action {
-        text: qsTrId("last-24-hours");
-        icon.width: 0;
-        onTriggered: {
-            chatsModel.requestMoreMessages(Constants.fetchRangeLast24Hours)
-            timer.setTimeout(function(){
-                chatsModel.messageView.hideLoadingIndicator()
-            }, 3000);
-        }
-    }
-    //% "Last 2 days"
-    Action {
-        text: qsTrId("last-2-days");
-        icon.width: 0;
-        onTriggered: {
-            chatsModel.requestMoreMessages(Constants.fetchRangeLast2Days)
-            timer.setTimeout(function(){
-                chatsModel.messageView.hideLoadingIndicator()
-            }, 4000);
-        }
-      }
-    //% "Last 3 days"
-    Action {
-        text: qsTrId("last-3-days");
-        icon.width: 0;
-        onTriggered: {
-            chatsModel.requestMoreMessages(Constants.fetchRangeLast3Days)
-            timer.setTimeout(function(){
-                chatsModel.messageView.hideLoadingIndicator()
-            }, 5000);
-        }
-    }
-    //% "Last 7 days"
-    Action {
-        text: qsTrId("last-7-days");
-        icon.width: 0;
-        onTriggered: {
-            chatsModel.requestMoreMessages(Constants.fetchRangeLast7Days)
-            timer.setTimeout(function(){
-                chatsModel.messageView.hideLoadingIndicator()
-            }, 7000);
-        }
-    }
-}

ui/app/AppLayouts/Chat/panels/StatusUpdatePanel.qml

@@ -20,6 +20,12 @@ MouseArea {
     property int statusAgeEpoch: 0
     property var messageContextMenu
 
+    signal userNameClicked(bool isProfileClick)
+    signal setMessageActive(string messageId, bool active)
+    signal emojiBtnClicked(bool isProfileClick, bool isSticker, bool isImage, var image, bool emojiOnly)
+    signal clickMessage(bool isProfileClick, bool isSticker, bool isImage, var image, bool emojiOnly, bool hideEmojiPicker, bool isReply)
+
+//    TODO bring those back and remove dynamic scoping
 //    property var emojiReactionsModel
 //    property string timestamp: ""
 //    property bool isCurrentUser: false
@@ -31,10 +37,6 @@ MouseArea {
 //    property bool isMessage: false
 //    property string profileImageSource: ""
 //    property string userIdenticon: ""
-    signal userNameClicked(bool isProfileClick)
-    signal setMessageActive(string messageId, bool active)
-    signal emojiBtnClicked(bool isProfileClick, bool isSticker, bool isImage, var image, bool emojiOnly)
-    signal clickMessage(bool isProfileClick, bool isSticker, bool isImage, var image, bool emojiOnly, bool hideEmojiPicker, bool isReply)
 
     anchors.top: parent.top
     anchors.topMargin: 0
@@ -100,7 +102,7 @@ MouseArea {
             anchors.verticalCenter: chatName.verticalCenter
             anchors.left: chatName.right
             anchors.leftMargin: Style.current.halfPadding
-            timestamp: root.timestamp
+            //timestamp: timestamp
         }
 
         ChatTextView {

ui/app/AppLayouts/Chat/panels/TransactionBubblePanel.qml

@@ -8,6 +8,10 @@ import "../controls"
 import "../views"
 
 Item {
+    id: root
+    width: rectangleBubble.width
+    height: rectangleBubble.height
+
     property var commandParametersObject: {
         try {
             return JSON.parse(commandParameters)
@@ -30,6 +34,7 @@ Item {
     property var focusedAccount
     property string activeChannelName
     property string activeChannelIdenticon
+    property var balanceView
     signal getGasPrice()
     signal sendTransactionClicked(string fromAddress)
     property var token: JSON.parse(commandParametersObject.contract) // TODO: handle {}
@@ -39,8 +44,8 @@ Item {
         if (!tokenAmount || !token.symbol) {
             return "0"
         }
-        var defaultFiatSymbol = walletModel.balanceView.defaultCurrency
+        var defaultFiatSymbol = root.balanceView.defaultCurrency
-        return walletModel.balanceView.getFiatValue(tokenAmount, token.symbol, defaultFiatSymbol) + " " + defaultFiatSymbol.toUpperCase()
+        return root.balanceView.getFiatValue(tokenAmount, token.symbol, defaultFiatSymbol) + " " + defaultFiatSymbol.toUpperCase()
     }
     property int state: commandParametersObject.commandState
 
@@ -55,10 +60,6 @@ Item {
         }
     }
 
-    id: root
-    width: rectangleBubble.width
-    height: rectangleBubble.height
-
     Rectangle {
         id: rectangleBubble
         width: (bubbleLoader.active ? bubbleLoader.width : valueContainer.width)

ui/app/AppLayouts/Chat/panels/communities/CommunityProfilePopupOverviewPanel.qml

@@ -23,6 +23,7 @@ Column {
     signal editButtonClicked()
     signal transferOwnershipButtonClicked()
     signal leaveButtonClicked()
+    signal copyToClipboard(string link)
 
     Item {
         height: Math.max(46, communityDescription.height + 16)
@@ -54,7 +55,8 @@ Column {
         icon.name: "copy"
         iconButton.onClicked: {
             let link = `${Constants.communityLinkPrefix}${root.community.id}`
-            chatsModel.copyToClipboard(link)
+            //chatsModel.copyToClipboard(link)
+            root.copyToClipboard(link);
             tooltip.visible = !tooltip.visible
         }
         width: parent.width

ui/app/AppLayouts/Chat/panels/communities/CommunityUserListPanel.qml

@@ -24,7 +24,7 @@ Item {
     property var contactsList
     property string profilePubKey
     property var messageContextMenu
-    property QtObject community: chatsModel.communities.activeCommunity
+    property var community
 
     StyledText {
         id: titleText

ui/app/AppLayouts/Chat/panels/communities/CommunityWelcomeBannerPanel.qml

@@ -21,6 +21,7 @@ Rectangle {
     border.color: Style.current.border
     radius: 16
     color: Style.current.transparent
+    property var activeCommunity
 
     MouseArea {
         anchors.fill: parent
@@ -55,7 +56,7 @@ Rectangle {
         type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
         onClicked: {
             let hiddenBannerIds = appSettings.hiddenCommunityWelcomeBanners
-            hiddenBannerIds.push(chatsModel.communities.activeCommunity.id)
+            hiddenBannerIds.push(root.activeCommunity.id)
             appSettings.hiddenCommunityWelcomeBanners = hiddenBannerIds
             root.visible = false
         }
@@ -85,7 +86,7 @@ Rectangle {
         anchors.bottom: manageBtn.top
         anchors.bottomMargin: Style.current.halfPadding
         onClicked: openPopup(inviteFriendsToCommunityPopup, {
-            community: chatsModel.communities.activeCommunity
+            community: root.activeCommunity
         })
     }
 
@@ -97,7 +98,7 @@ Rectangle {
         anchors.bottom: parent.bottom
         anchors.bottomMargin: Style.current.padding
         onClicked: openPopup(communityProfilePopup, {
-            community: chatsModel.communities.activeCommunity
+            community: root.activeCommunity
         })
     }
 }

ui/app/AppLayouts/Chat/popups/PinnedMessagesPopup.qml

@@ -183,10 +183,11 @@ ModalPopup {
                         messageStore.showEdit = false;
                         messageStore.messageContextMenu = msgContextMenu;
                     }
-                    MessageContextMenuPanel {
+                    MessageContextMenuView {
                         id: msgContextMenu
                         pinnedPopup: true
                         pinnedMessage: true
+                        store: popup.rootStore
                         reactionModel: popup.rootStore.emojiReactionsModel
                         onShouldCloseParentPopup: {
                             messageDelegate.listView.closePopup();

ui/app/AppLayouts/Chat/popups/community/CommunityProfilePopup.qml

@@ -71,6 +71,11 @@ StatusModal {
                     chatsModel.communities.leaveCommunity(popup.community.id)
                     popup.close()
                 }
+                onCopyToClipboard: {
+                    //TODO
+                    //root.store.copyToClipboard(link);
+                    chatsModel.copyToClipboard(link);
+                }
             }
         }
 

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

@@ -11,6 +11,16 @@ QtObject {
     property var walletModelInst: walletModel
     property var profileModelInst: profileModel
 
+    property var activeCommunity: chatsModelInst.communities.activeCommunity
+
+    function copyToClipboard(text) {
+        chatsModelInst.copyToClipboard(text);
+    }
+
+    function deleteMessage(messageId) {
+        chatsModelInst.messageView.deleteMessage(messageId);
+    }
+
     function lastTwoItems(nodes) {
         //% " and "
         return nodes.join(qsTrId("-and-"));
@@ -50,4 +60,23 @@ QtObject {
         }
         return tooltip
     }
+
+    function getCommunity(communityId) {
+        try {
+            const communityJson = chatsModelInst.communities.list.getCommunityByIdJson(communityId);
+            if (!communityJson) {
+                return null;
+            }
+
+            let community = JSON.parse(communityJson);
+            if (community) {
+                community.nbMembers = community.members.length;
+            }
+            return community
+        } catch (e) {
+            console.error("Error parsing community", e);
+        }
+
+       return null;
+    }
 }

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

@@ -97,7 +97,7 @@ Item {
                 font.pixelSize: 10
                 visible: true
                 color: Style.current.secondaryText
-                timestamp: root.timestamp
+                //timestamp: root.timestamp
             }
         }
 

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

@@ -110,8 +110,9 @@ Item {
         }
     }
 
-    MessageContextMenuPanel {
+    MessageContextMenuView {
         id: contextmenu
+        store: chatColumnLayout.rootStore
         reactionModel: chatColumnLayout.rootStore.emojiReactionsModel
     }
 

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

@@ -158,7 +158,7 @@ StatusPopupMenu {
     Component {
         id: deleteChatConfirmationDialogComponent
         ConfirmationDialog {
-            property string chatId: chatItem.id
+            property string chatId: !!chatItem ? chatItem.id : ""
             btnType: "warn"
             header.title: communityActive ? qsTr("Delete #%1").arg(chatItem.name) :
                                             chatItem && chatItem.chatType === Constants.chatTypeOneToOne ?

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

@@ -7,7 +7,7 @@ import utils 1.0
 
 StyledText {
     id: chatTime
-    property string timestamp
+    //property string timestamp
     visible: chatTime.messageStore.isMessage
     color: Style.current.secondaryText
     text: Utils.formatTime(timestamp)

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

@@ -23,6 +23,7 @@ Item {
     // TODO unhardcode
     property int chatGroupsListViewCount: communityChatListAndCategories.chatList.count
     property Component pinnedMessagesPopupComponent
+    property var rootStore
 
     StatusChatInfoToolBar {
         id: communityHeader
@@ -240,7 +241,9 @@ Item {
             anchors.top: communityChatListAndCategories.bottom
             anchors.topMargin: active ? Style.current.padding : 0
             sourceComponent: Component {
-                CommunityWelcomeBannerPanel {}
+                CommunityWelcomeBannerPanel {
+                    activeCommunity: rootStore.activeCommunity
+                }
             }
         }
 

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

@@ -297,7 +297,7 @@ Item {
             anchors.left: chatName.right
             anchors.leftMargin: 4
             color: Style.current.secondaryText
-            timestamp: timestamp
+            //timestamp: timestamp
         }
 
         Loader {
@@ -565,6 +565,7 @@ Item {
                 anchors.topMargin: active ? (chatName.visible ? 4 : 6) : 0
                 sourceComponent: Component {
                     TransactionBubblePanel {
+                        balanceView: root.store.walletModelInst.balanceView
                         focusedAccount: root.store.walletModelInst.accountsView.focusedAccount
                         activeChannelName: root.store.chatsModelInst.channelView.activeChannel.name
                         activeChannelIdenticon: root.store.chatsModelInst.channelView.activeChannel.identicon
@@ -585,7 +586,8 @@ Item {
                 anchors.topMargin: active ? 8 : 0
                 sourceComponent: Component {
                     id: invitationBubble
-                    InvitationBubblePanel {
+                    InvitationBubbleView {
+                        store: root.store
                         communityId: container.communityId
                     }
                 }

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

@@ -235,14 +235,17 @@ Item {
                 target: profileModel.contacts.list
                 onContactChanged: {
                     for (var i = 0; i < channelList.chatListItems.count; i++) {
-                        let chatItem = channelList.statusChatListItems.model.itemAt(i);
+                        let chatItem = !!channelList.statusChatListItems.model.itemAt(i) ?
-                        if (chatItem.chatId === pubkey) {
+                                channelList.statusChatListItems.model.itemAt(i) : null
-                            let profileImage = appMain.getProfileImage(pubkey)
+                        if (!!chatItem) {
-                            if (!!profileImage) {
+                            if (chatItem.chatId === pubkey) {
-                                chatItem.image.isIdenticon = false
+                                let profileImage = appMain.getProfileImage(pubkey)
-                                chatItem.image.source = profileImage
+                                if (!!profileImage) {
+                                    chatItem.image.isIdenticon = false
+                                    chatItem.image.source = profileImage
+                                }
+                                break;
                             }
-                            break;
                         }
                     }
                 }

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

@@ -11,19 +11,20 @@ import "../../../../shared/panels"
 import "../../../../shared/popups"
 
 Item {
-    property string communityId
-    property var invitedCommunity
-    property int innerMargin: 12
-    property bool isLink: false
-
     id: root
     anchors.left: parent.left
     height: rectangleBubbleLoader.height
     width: rectangleBubbleLoader.width
 
+    property string communityId
+    property var invitedCommunity
+    property int innerMargin: 12
+    property bool isLink: false
+    property var store
+
     function getCommunity() {
         try {
-            const communityJson = chatsModel.communities.list.getCommunityByIdJson(communityId)
+            const communityJson = root.store.chatsModelInst.communities.list.getCommunityByIdJson(communityId)
             if (!communityJson) {
                 return null
             }
@@ -45,7 +46,7 @@ Item {
     }
 
     Connections {
-        target: chatsModel.communities
+        target: root.store.chatsModelInst.communities
         onCommunityChanged: function (communityId) {
             if (communityId === root.communityId) {
                 root.invitedCommunity = getCommunity()
@@ -87,7 +88,7 @@ Item {
             Rectangle {
                 id: rectangleBubble
                 property alias button: joinBtn
-                property bool isPendingRequest: chatsModel.communities.isCommunityRequestPending(communityId)
+                property bool isPendingRequest: root.store.chatsModelInst.communities.isCommunityRequestPending(communityId)
                 width: 270
                 height: title.height + title.anchors.topMargin +
                         invitedYou.height + invitedYou.anchors.topMargin +
@@ -105,7 +106,7 @@ Item {
                 states: [
                     State {
                         name: "requiresEns"
-                        when: invitedCommunity.ensOnly && !profileModel.profile.ensVerified
+                        when: invitedCommunity.ensOnly && !root.store.profileModelInst.profile.ensVerified
                         PropertyChanges {
                             target: joinBtn
                             //% "Membership requires an ENS username"
@@ -172,7 +173,7 @@ Item {
                 ]
 
                 Connections {
-                    target: chatsModel.communities
+                    target: root.store.chatsModelInst.communities
                     onMembershipRequestChanged: function(communityId, communityName, requestAccepted) {
                         if (communityId === root.communityId) {
                             rectangleBubble.isPendingRequest = false
@@ -200,10 +201,10 @@ Item {
                 StatusBaseText {
                     id: invitedYou
                     text: {
-                        if (chatsModel.channelView.activeChannel.chatType === Constants.chatTypeOneToOne) {
+                        if (root.store.chatsModelInst.channelView.activeChannel.chatType === Constants.chatTypeOneToOne) {
                             return isCurrentUser ?
                                         //% "You invited %1 to join a community"
-                                        qsTrId("you-invited--1-to-join-a-community").arg(chatsModel.userNameOrAlias(chatsModel.channelView.activeChannel.id))
+                                        qsTrId("you-invited--1-to-join-a-community").arg(root.store.chatsModelInst.userNameOrAlias(root.store.chatsModelInst.channelView.activeChannel.id))
                                         //% "%1 invited you to join a community"
                                       : qsTrId("-1-invited-you-to-join-a-community").arg(displayUserName)
                         } else {
@@ -301,16 +302,16 @@ Item {
                                 let error
 
                                 if (rectangleBubble.state === "joined") {
-                                    chatsModel.communities.setActiveCommunity(communityId);
+                                    root.store.chatsModelInst.communities.setActiveCommunity(communityId);
                                     return
                                 } else if (rectangleBubble.state === "unjoined") {
-                                    error = chatsModel.communities.joinCommunity(communityId, true)
+                                    error = root.store.chatsModelInst.communities.joinCommunity(communityId, true)
                                 }
                                 else if (rectangleBubble.state === "requestToJoin") {
-                                    error = chatsModel.communities.requestToJoinCommunity(communityId,
+                                    error = root.store.chatsModelInst.communities.requestToJoinCommunity(communityId,
-                                                                                          profileModel.profile.ensVerified ? profileModel.profile.username : "")
+                                                                                          root.store.profileModelInst.profile.ensVerified ? root.store.profileModelInst.profile.username : "")
                                     if (!error) {
-                                        rectangleBubble.isPendingRequest = chatsModel.communities.isCommunityRequestPending(communityId)
+                                        rectangleBubble.isPendingRequest = root.store.chatsModelInst.communities.isCommunityRequestPending(communityId)
                                     }
                                 }
 

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

@@ -19,6 +19,7 @@ Column {
     property var container
     property bool isCurrentUser: false
     property bool isImageLink: false
+    property var rootStore
     readonly property string uuid: Utils.uuid()
     spacing: Style.current.halfPadding
 
@@ -210,7 +211,8 @@ Column {
 
     Component {
         id: invitationBubble
-        InvitationBubblePanel {
+        InvitationBubbleView {
+            store: root.rootStore
             communityId: linkData.communityId
             isLink: true
             anchors.left: parent.left

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

@@ -15,9 +15,10 @@ import "../../../../shared/status"
 import "../controls"
 
 StatusPopupMenu {
-    id: messageContextMenu
+    id: root
     width: emojiContainer.visible ? emojiContainer.width : 176
 
+    property var store
     property string messageId
     property int contentType
     property bool isProfile: false
@@ -43,16 +44,16 @@ StatusPopupMenu {
     property var setXPosition: function() {return 0}
     property var setYPosition: function() {return 0}
     property bool canPin: {
-        const nbPinnedMessages = chatsModel.messageView.pinnedMessagesList.count
+        const nbPinnedMessages = root.store.chatsModelInst.messageView.pinnedMessagesList.count
         return nbPinnedMessages < Constants.maxNumberOfPins
     }
 
     onHeightChanged: {
-        messageContextMenu.y = setYPosition()
+        root.y = setYPosition()
     }
 
     onWidthChanged: {
-        messageContextMenu.x = setXPosition()
+        root.x = setXPosition()
     }
 
     signal shouldCloseParentPopup
@@ -72,9 +73,9 @@ StatusPopupMenu {
         emojiReactionsReactedByUser = newEmojiReactions;
 
         /* // copy link feature not ready yet
-        const numLinkUrls = messageContextMenu.linkUrls.split(" ").length
+        const numLinkUrls = root.linkUrls.split(" ").length
         copyLinkMenu.enabled = numLinkUrls > 1
-        copyLinkAction.enabled = !!messageContextMenu.linkUrls && numLinkUrls === 1 && !emojiOnly && !messageContextMenu.isProfile
+        copyLinkAction.enabled = !!root.linkUrls && numLinkUrls === 1 && !emojiOnly && !root.isProfile
         */
         popup()
     }
@@ -83,23 +84,23 @@ StatusPopupMenu {
         id: emojiContainer
         width: emojiRow.width
         height: visible ? emojiRow.height : 0
-        visible: !hideEmojiPicker && (messageContextMenu.emojiOnly || !messageContextMenu.isProfile)
+        visible: !hideEmojiPicker && (root.emojiOnly || !root.isProfile)
         Row {
             id: emojiRow
             spacing: Style.current.halfPadding
             leftPadding: Style.current.halfPadding
             rightPadding: Style.current.halfPadding
-            bottomPadding: messageContextMenu.emojiOnly ? 0 : Style.current.padding
+            bottomPadding: root.emojiOnly ? 0 : Style.current.padding
 
             Repeater {
-                model: messageContextMenu.reactionModel
+                model: root.reactionModel
                 delegate: EmojiReaction {
                     source: Style.svg(filename)
                     emojiId: model.emojiId
-                    reactedByUser: !!messageContextMenu.emojiReactionsReactedByUser[model.emojiId]
+                    reactedByUser: !!root.emojiReactionsReactedByUser[model.emojiId]
                     onCloseModal: {
                         chatsModel.toggleReaction(SelectedMessage.messageId, emojiId)
-                        messageContextMenu.close()
+                        root.close()
                     }
                 }
             }
@@ -108,7 +109,7 @@ StatusPopupMenu {
 
     Item {
         id: profileHeader
-        visible: messageContextMenu.isProfile
+        visible: root.isProfile
         width: parent.width
         height: visible ? profileImage.height + username.height + Style.current.padding : 0
         Rectangle {
@@ -128,7 +129,7 @@ StatusPopupMenu {
 
         StyledText {
             id: username
-            text: Utils.removeStatusEns(isCurrentUser ? profileModel.ens.preferredUsername || userName : userName)
+            text: Utils.removeStatusEns(isCurrentUser ? root.store.profileModelInst.ens.preferredUsername || userName : userName)
             elide: Text.ElideRight
             maximumLineCount: 3
             horizontalAlignment: Text.AlignHCenter
@@ -150,14 +151,14 @@ StatusPopupMenu {
             cursorShape: Qt.PointingHandCursor
             onClicked: {
                 openProfilePopup(userName, fromAuthor, identicon);
-                messageContextMenu.close()
+                root.close()
             }
         }
     }
 
     Separator {
         anchors.bottom: viewProfileAction.top
-        visible: !messageContextMenu.emojiOnly && !messageContextMenu.hideEmojiPicker
+        visible: !root.emojiOnly && !root.hideEmojiPicker
     }
 
     /*  // copy link feature not ready yet
@@ -166,8 +167,8 @@ StatusPopupMenu {
         //% "Copy link"
         text: qsTrId("copy-link")
         onTriggered: {
-            chatsModel.copyToClipboard(linkUrls.split(" ")[0])
+            root.store.chatsModelInst.copyToClipboard(linkUrls.split(" ")[0])
-            messageContextMenu.close()
+            root.close()
         }
         icon.name: "link"
         enabled: false
@@ -181,13 +182,13 @@ StatusPopupMenu {
 
         Repeater {
             id: linksRepeater
-            model: messageContextMenu.linkUrls.split(" ")
+            model: root.linkUrls.split(" ")
             delegate: MenuItem {
                 id: popupMenuItem
                 text: modelData
                 onTriggered: {
-                    chatsModel.copyToClipboard(modelData)
+                    root.store.chatsModelInst.copyToClipboard(modelData)
-                    messageContextMenu.close()
+                    root.close()
                 }
                 contentItem: StyledText {
                     text: popupMenuItem.text
@@ -211,8 +212,8 @@ StatusPopupMenu {
         id: copyImageAction
         text: qsTr("Copy image")
         onTriggered: {
-            chatsModel.copyImageToClipboard(imageSource ? imageSource : "")
+            root.store.chatsModelInst.copyImageToClipboard(imageSource ? imageSource : "")
-            messageContextMenu.close()
+            root.close()
         }
         icon.name: "copy"
         enabled: isRightClickOnImage
@@ -223,7 +224,7 @@ StatusPopupMenu {
         text: qsTr("Download image")
         onTriggered: {
             fileDialog.open()
-            messageContextMenu.close()
+            root.close()
         }
         icon.name: "download"
         enabled: isRightClickOnImage
@@ -235,7 +236,7 @@ StatusPopupMenu {
         text: qsTrId("view-profile")
         onTriggered: {
             openProfilePopup(userName, fromAuthor, identicon, "", nickname);
-            messageContextMenu.close()
+            root.close()
         }
         icon.name: "profile"
         enabled: isProfile
@@ -243,19 +244,19 @@ StatusPopupMenu {
 
     StatusMenuItem {
         id: sendMessageOrReplyTo
-        text: messageContextMenu.isProfile ?
+        text: root.isProfile ?
                   //% "Send message"
                   qsTrId("send-message") :
                   //% "Reply to"
                   qsTrId("reply-to")
         onTriggered: {
-            if (messageContextMenu.isProfile) {
+            if (root.isProfile) {
                 appMain.changeAppSection(Constants.chat)
-                chatsModel.channelView.joinPrivateChat(fromAuthor, "")
+                root.store.chatsModelInst.channelView.joinPrivateChat(fromAuthor, "")
             } else {
                 showReplyArea()
             }
-            messageContextMenu.close()
+            root.close()
         }
         icon.name: "chat"
         enabled: isProfile || (!hideEmojiPicker && !emojiOnly && !isProfile && !isRightClickOnImage)
@@ -285,7 +286,7 @@ StatusPopupMenu {
         }
         onTriggered: {
             if (pinnedMessage) {
-                chatsModel.messageView.unPinMessage(messageId, chatsModel.channelView.activeChannel.id)
+                root.store.chatsModelInst.messageView.unPinMessage(messageId, root.store.chatsModelInst.channelView.activeChannel.id)
                 return
             }
 
@@ -295,20 +296,20 @@ StatusPopupMenu {
                 return
             }
 
-            chatsModel.messageView.pinMessage(messageId, chatsModel.channelView.activeChannel.id)
+            root.store.chatsModelInst.messageView.pinMessage(messageId, root.store.chatsModelInst.channelView.activeChannel.id)
-            messageContextMenu.close()
+            root.close()
         }
         icon.name: "pin"
         enabled: {
             if(isProfile || emojiOnly || isRightClickOnImage)
                 return false
 
-            switch (chatsModel.channelView.activeChannel.chatType) {
+            switch (root.store.chatsModelInst.channelView.activeChannel.chatType) {
             case Constants.chatTypePublic: return false
             case Constants.chatTypeStatusUpdate: return false
             case Constants.chatTypeOneToOne: return true
-            case Constants.chatTypePrivateGroupChat: return chatsModel.channelView.activeChannel.isAdmin(profileModel.profile.pubKey)
+            case Constants.chatTypePrivateGroupChat: return root.store.chatsModelInst.channelView.activeChannel.isAdmin(root.store.profileModelInst.profile.pubKey)
-            case Constants.chatTypeCommunity: return chatsModel.communities.activeCommunity.admin
+            case Constants.chatTypeCommunity: return root.store.chatsModelInst.communities.activeCommunity.admin
             }
 
             return false
@@ -332,7 +333,7 @@ StatusPopupMenu {
         text: qsTrId("delete-message")
         onTriggered: {
             if (!appSettings.showDeleteMessageWarning) {
-                return chatsModel.messageView.deleteMessage(messageId)
+                return root.store.chatsModelInst.messageView.deleteMessage(messageId)
             }
 
             let confirmationDialog = openPopup(genericConfirmationDialog, {
@@ -348,7 +349,7 @@ StatusPopupMenu {
                                                        }
 
                                                        confirmationDialog.close()
-                                                       chatsModel.messageView.deleteMessage(messageId)
+                                                       root.store.chatsModelInst.messageView.deleteMessage(messageId)
                                                    }
                                                })
         }
@@ -357,12 +358,12 @@ StatusPopupMenu {
     }
 
     StatusMenuItem {
-        enabled: messageContextMenu.pinnedPopup
+        enabled: root.pinnedPopup
         text: qsTr("Jump to")
         onTriggered: {
-            positionAtMessage(messageContextMenu.messageId)
+            positionAtMessage(root.messageId)
-            messageContextMenu.close()
+            root.close()
-            messageContextMenu.shouldCloseParentPopup()
+            root.shouldCloseParentPopup()
         }
         icon.name: "up"
     }
@@ -373,7 +374,7 @@ StatusPopupMenu {
         selectFolder: true
         modality: Qt.NonModal
         onAccepted: {
-            chatsModel.downloadImage(imageSource ? imageSource : "", fileDialog.fileUrls)
+            root.store.chatsModelInst.downloadImage(imageSource ? imageSource : "", fileDialog.fileUrls)
             fileDialog.close()
         }
         onRejected: {

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

@@ -11,11 +11,10 @@ import "../panels"
 import "../views"
 import "../controls"
 
-Item {
+Column {
     id: root
     width: parent.width
     anchors.right: !isCurrentUser ? undefined : parent.right
-    height: visible ? childrenRect.height : 0
     z: (typeof chatLogView === "undefined") ? 1 : (chatLogView.count - index)
 
     //////////////////////////////////////
@@ -249,123 +248,27 @@ Item {
         }
     }
 
-    Timer {
-        id: timer
-    }
-
     Component {
         id: gapComponent
-        Item {
+        GapComponent {
-            id: wrapper
+            onClicked: {
-            height: childrenRect.height + Style.current.smallPadding * 2
+                rootStore.chatsModelInst.messageView.fillGaps(messageStore.messageId);
-            anchors.left: parent.left
+                root.visible = false;
-            anchors.right: parent.right
+                root.height = 0;
-            Separator {
-                id: sep1
-            }
-            StyledText {
-                id: fetchMoreButton
-                font.weight: Font.Medium
-                font.pixelSize: Style.current.primaryTextFontSize
-                color: Style.current.blue
-                //% "↓ "
-                //% "Fetch messages"
-                text: qsTrId("fetch-messages")
-                horizontalAlignment: Text.AlignHCenter
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.top: sep1.bottom
-                anchors.topMargin: Style.current.smallPadding
-                MouseArea {
-                    cursorShape: Qt.PointingHandCursor
-                    anchors.fill: parent
-                    onClicked: {
-                        chatsModel.messageView.fillGaps(messageId)
-                        root.visible = false;
-                        root.height = 0;
-                    }
-                }
-            }
-            StyledText {
-                id: fetchDate
-                anchors.top: fetchMoreButton.bottom
-                anchors.topMargin: 3
-                anchors.horizontalCenter: parent.horizontalCenter
-                horizontalAlignment: Text.AlignHCenter
-                color: Style.current.secondaryText
-                //% "before %1"
-                //% "Between %1 and %2"
-                text: qsTrId("between--1-and--2").arg(new Date(root.gapFrom*1000)).arg(new Date(root.gapTo*1000))
-            }
-            Separator {
-                anchors.top: fetchDate.bottom
-                anchors.topMargin: Style.current.smallPadding
             }
         }
     }
 
     Component {
         id: fetchMoreMessagesButtonComponent
-        Item {
+        FetchMoreMessagesButton {
-            id: wrapper
+//            nextMessageIndex: root.messageStore.nextMessageIndex
-            height: childrenRect.height + Style.current.smallPadding * 2
+//            nextMsgTimestamp: root.messageStore.nextMsgTimestamp
-            anchors.left: parent.left
+            onClicked: {
-            anchors.right: parent.right
+                rootStore.chatsModelInst.messageView.hideLoadingIndicator();
-            Separator {
-                id: sep1
             }
-            Loader {
+            onTimerTriggered: {
-                id: fetchLoaderIndicator
+                rootStore.chatsModelInst.requestMoreMessages(Constants.fetchRangeLast24Hours);
-                anchors.top: sep1.bottom
-                anchors.topMargin: Style.current.padding
-                anchors.left: parent.left
-                anchors.right: parent.right
-                active: false
-                sourceComponent: StatusLoadingIndicator {
-                    width: 12
-                    height: 12
-                }
-            }
-            StyledText {
-                id: fetchMoreButton
-                font.weight: Font.Medium
-                font.pixelSize: Style.current.primaryTextFontSize
-                color: Style.current.blue
-                //% "↓ Fetch more messages"
-                text: qsTrId("load-more-messages")
-                horizontalAlignment: Text.AlignHCenter
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.top: sep1.bottom
-                anchors.topMargin: Style.current.smallPadding
-                MouseArea {
-                    cursorShape: Qt.PointingHandCursor
-                    anchors.fill: parent
-                    onClicked: {
-                        chatsModel.requestMoreMessages(Constants.fetchRangeLast24Hours);
-                        fetchLoaderIndicator.active = true;
-                        fetchMoreButton.visible = false;
-                        fetchDate.visible = false;
-                        timer.setTimeout(function(){
-                            chatsModel.messageView.hideLoadingIndicator();
-                            fetchLoaderIndicator.active = false;
-                            fetchMoreButton.visible = true;
-                            fetchDate.visible = true;
-                        }, 3000);
-                    }
-                }
-            }
-            StyledText {
-                id: fetchDate
-                anchors.top: fetchMoreButton.bottom
-                anchors.topMargin: 3
-                anchors.horizontalCenter: parent.horizontalCenter
-                horizontalAlignment: Text.AlignHCenter
-                color: Style.current.secondaryText
-                //% "before %1"
-                text: qsTrId("before--1").arg((nextMessageIndex > -1 ? new Date(nextMsgTimestamp * 1) : new Date()).toLocaleString(Qt.locale(globalSettings.locale)))
-            }
-            Separator {
-                anchors.top: fetchDate.bottom
-                anchors.topMargin: Style.current.smallPadding
             }
         }
     }

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

@@ -289,6 +289,7 @@ Item {
         anchors.rightMargin: Style.current.padding
         sourceComponent: Component {
             TransactionBubblePanel {
+                balanceView: root.store.walletModelInst.balanceView
                 focusedAccount: root.store.walletModelInst.accountsView.focusedAccount
                 activeChannelName: root.store.chatsModelInst.channelView.activeChannel.name
                 activeChannelIdenticon: root.store.chatsModelInst.channelView.activeChannel.identicon
@@ -324,7 +325,7 @@ Item {
         anchors.verticalCenter: isImage ? dateTimeBackground.verticalCenter : undefined
         anchors.right: isImage ? dateTimeBackground.right : (linksLoader.active ? linksLoader.right : chatBox.right)
         anchors.rightMargin: isImage ? 6 : (root.isCurrentUser ? 5 : Style.current.padding)
-        timestamp: root.messageStore.timestamp
+        //timestamp: root.messageStore.timestamp
     }
 
     SentMessage {

ui/app/AppLayouts/Profile/views/EnsListView.qml

@@ -338,7 +338,7 @@ Item {
                 anchors.bottomMargin: Style.current.padding
                 anchors.right: chatBox.right
                 anchors.rightMargin: Style.current.padding
-                timestamp: root.timestamp
+                //timestamp: root.timestamp
             }
 
             StatusBaseText {
@@ -350,8 +350,6 @@ Item {
                 font.pixelSize: 14
                 color: Theme.palette.baseColor1
             }
-
-
         }
 
 

ui/app/AppLayouts/Timeline/TimelineLayout.qml

@@ -10,7 +10,6 @@ import "../../../shared/controls"
 import "../../../shared/status"
 
 import "../Chat/views"
-import "../Chat/panels"
 import "../Chat/popups"
 import "../Chat/stores"
 
@@ -214,8 +213,9 @@ ScrollView {
                     messageStore.timeout = model.timeout;
                     messageStore.messageContextMenu = msgCntxtMenu;
                 }
-                MessageContextMenuPanel {
+                MessageContextMenuView {
                     id: msgCntxtMenu
+                    store: root.store
                     reactionModel: EmojiReactions { }
                 }
             }

ui/shared/status/StatusStickersPopup.qml

@@ -185,7 +185,7 @@ Popup {
                 id: btnAddStickerPack
                 implicitWidth: 24
                 implicitHeight: 24
-                type: StatusRoundButton.Type.Secondary
+                type: StatusQControls.StatusRoundButton.Type.Secondary
                 icon.name: "add"
                 state: root.stickerPacksLoaded ? "default" : "pending"
                 onClicked: {