refactor(UsersStore): Decouple users store from UI components and centralize instantiation in Chat.RootStore

This refactor separates the `UsersStore` usage from low-level UI components by lifting its instantiation up to the `Chat.RootStore`. All components now use this single centralized instance, eliminating multiple unnecessary store instantiations and improving state consistency and maintainability across the app.

No functional changes to user flows;  implementation is cleaner and more maintainable.

Updated all affected components and flows:
- User mentions list in the status chat input (for both standard and edit chat input modes)
- Right-side members/users column
- Group chat members management

Closes #18000

Author: noeliaSD

ui/app/AppLayouts/Chat/ChatLayout.qml

@@ -68,6 +68,19 @@ StackLayout {
     property var cbGetCompressedPk: function (publicKey) { console.error("Implement me"); return ""}
     property var cbGetEmojiHash: function (publicKey) { console.error("Implement me"); return ""}
 
+    // Users related data:
+    readonly property bool amIChatAdmin: root.rootStore.amIChatAdmin()
+    property var usersModel
+
+    // Users related but just for group chats:
+    property var temporaryUsersModel
+
+    // Users related signals
+    signal updateGroupMembers()
+    signal resetTemporaryUsersModel()
+    signal appendTemporaryUsersModel(string pubKey, string displayName)
+    signal removeFromTemporaryUsersModel(string pubKey)
+
     signal profileButtonClicked()
     signal openAppSearch()
     signal buyStickerPackRequested(string packId, int price)
@@ -184,6 +197,7 @@ StackLayout {
             sectionItemModel: root.sectionItemModel
             joinedMembersCount: membersModelAdaptor.joinedMembers.ModelCount.count
             areTestNetworksEnabled: root.networksStore.areTestNetworksEnabled
+            amIChatAdmin: root.rootStore.amIChatAdmin()
             amIMember: sectionItem.amIMember
             amISectionAdmin: root.sectionItemModel.memberRole === Constants.memberRole.owner ||
                              root.sectionItemModel.memberRole === Constants.memberRole.admin ||
@@ -246,6 +260,15 @@ StackLayout {
             cbGetCompressedPk: root.cbGetCompressedPk
             cbGetEmojiHash: root.cbGetEmojiHash
 
+            // Users related data:
+            usersModel: root.usersModel
+            temporaryUsersModel: root.temporaryUsersModel
+
+            onUpdateGroupMembers: root.updateGroupMembers()
+            onResetTemporaryUsersModel: root.resetTemporaryUsersModel()
+            onAppendTemporaryUsersModel: root.appendTemporaryUsersModel(pubKey, displayName)
+            onRemoveFromTemporaryUsersModel: root.removeFromTemporaryUsersModel(pubKey)
+
             onFinaliseOwnershipClicked: Global.openFinaliseOwnershipPopup(communityId)
             onCommunityInfoButtonClicked: root.currentIndex = 1
             onCommunityManageButtonClicked: root.currentIndex = 1

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

@@ -16,6 +16,14 @@ import utils 1.0
 QtObject {
     id: root
 
+    // Backend Entry Point:
+    // Important:
+    // Each `ChatLayout` has its own chatCommunitySectionModule
+    // (on the backend chat and community sections share the same module since they are actually the same)
+    property var chatCommunitySectionModule
+
+    readonly property var activeChatContentModule: root.currentChatContentModule()
+
     property ContactsStore contactsStore
     property CommunityTokensStore communityTokensStore
     property WalletStore.RootStore walletStore
@@ -28,12 +36,17 @@ QtObject {
         chatCommunitySectionModuleInst: chatCommunitySectionModule
     }
 
+    // Unique instance for all the chat / channel related low-level UI components
+    readonly property UsersStore usersStore: UsersStore {
+        property var chatDetails: !!root.activeChatContentModule ? root.activeChatContentModule.chatDetails : null
+
+        isFullCommunityMembers: chatDetails.belongsToCommunity && !chatDetails.requiresPermissions
+        usersModule: !!root.activeChatContentModule ? root.activeChatContentModule.usersModule : null
+        chatCommunitySectionModule: root.chatCommunitySectionModule
+    }
+
     property bool openCreateChat: false
 
-    // Important:
-    // Each `ChatLayout` has its own chatCommunitySectionModule
-    // (on the backend chat and community sections share the same module since they are actually the same)
-    property var chatCommunitySectionModule
     readonly property var sectionDetails: d.sectionDetailsInstantiator.count ? d.sectionDetailsInstantiator.objectAt(0) : null
 
     property var communityItemsModel: chatCommunitySectionModule.model

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

@@ -3,33 +3,33 @@ import QtQuick 2.15
 QtObject {
     id: root
 
-    property var chatCommunitySectionModule
-    property var chatDetails
-    property var usersModule
+    // External properties:
+    required property var chatCommunitySectionModule
+    required property var usersModule
+    required property bool isFullCommunityMembers
 
+    // Public API:
     readonly property var usersModel: {
-        if (!chatDetails && !chatCommunitySectionModule) {
-            return null
-        }
-        let isFullCommunityList = !chatDetails.requiresPermissions
-        if (chatDetails.belongsToCommunity && isFullCommunityList && !!chatCommunitySectionModule) {
+        if (root.isFullCommunityMembers) {
             // Community channel with no permisisons. We can use the section's membersModel
-            return chatCommunitySectionModule.membersModel
+            return root.chatCommunitySectionModule ? root.chatCommunitySectionModule.membersModel : null
         }
-        return usersModule ? usersModule.model : null
+        return root.usersModule ? root.usersModule.model : null
     }
-    readonly property var temporaryModel: usersModule ? usersModule.temporaryModel : null
+
+    // Used for editing:
+    readonly property var temporaryModel: root.usersModule ? root.usersModule.temporaryModel : null
 
     function appendTemporaryModel(pubKey, displayName) {
-        usersModule.appendTemporaryModel(pubKey, displayName)
+        root.usersModule.appendTemporaryModel(pubKey, displayName)
     }
     function removeFromTemporaryModel(pubKey) {
-        usersModule.removeFromTemporaryModel(pubKey)
+        root.usersModule.removeFromTemporaryModel(pubKey)
     }
     function resetTemporaryModel() {
-        usersModule.resetTemporaryModel()
+        root.usersModule.resetTemporaryModel()
     }
     function updateGroupMembers() {
-        usersModule.updateGroupMembers()
+        root.usersModule.updateGroupMembers()
     }
 }

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

@@ -66,6 +66,9 @@ Item {
     property var cbGetCompressedPk: function (publicKey) { console.error("Implement me"); return ""}
     property var cbGetEmojiHash: function (publicKey) { console.error("Implement me"); return ""}
 
+    // Users related data:
+    property var usersModel
+
     signal openStickerPackPopup(string stickerPackId)
     signal tokenPaymentRequested(string recipientAddress, string symbol, string rawAmount, int chainId)
 
@@ -114,12 +117,6 @@ Item {
             model: !!d.activeChatContentModule ? d.activeChatContentModule.inputAreaModule.urlsModel : null
         }
 
-        readonly property ChatStores.UsersStore activeUsersStore: ChatStores.UsersStore {
-            usersModule: !!d.activeChatContentModule ? d.activeChatContentModule.usersModule : null
-            chatDetails: !!d.activeChatContentModule ? d.activeChatContentModule.chatDetails : null
-            chatCommunitySectionModule: root.rootStore.chatCommunitySectionModule
-        }
-
         readonly property ChatStores.MessageStore activeMessagesStore: ChatStores.MessageStore {
             messageModule: d.activeChatContentModule ? d.activeChatContentModule.messagesModule : null
             chatSectionModule: root.rootStore.chatCommunitySectionModule
@@ -213,7 +210,7 @@ Item {
             preservedText = d.activeChatContentModule.inputAreaModule.preservedProperties.text
 
             d.activeChatContentModule.inputAreaModule.clearLinkPreviewCache()
-            // Call later to make sure activeUsersStore and activeMessagesStore bindings are updated
+            // Call later to make sure usersStore and activeMessagesStore bindings are updated
             Qt.callLater(d.restoreInputState, preservedText)
         }
 
@@ -236,6 +233,7 @@ Item {
     // The best would be if we made qml to follow the struct we have on the backend side.
 
     ColumnLayout {
+
         anchors.fill: parent
         spacing: 0
 
@@ -276,6 +274,8 @@ Item {
                         cbGetCompressedPk: root.cbGetCompressedPk
                         cbGetEmojiHash: root.cbGetEmojiHash
 
+                        usersModel: root.usersModel
+
                         onOpenStickerPackPopup: {
                             root.openStickerPackPopup(stickerPackId)
                         }
@@ -329,7 +329,7 @@ Item {
                                  && !d.sendingInProgress
                     }
 
-                    usersModel: d.activeUsersStore.usersModel
+                    usersModel: root.usersModel
                     linkPreviewModel: !!d.activeChatContentModule ? d.activeChatContentModule.inputAreaModule.linkPreviewModel : null
                     paymentRequestModel: !!d.activeChatContentModule ? d.activeChatContentModule.inputAreaModule.paymentRequestModel : null
                     formatBalance: d.formatBalance

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

@@ -43,9 +43,9 @@ ColumnLayout {
 
     property var emojiPopup
     property var stickersPopup
-    property UsersStore usersStore: UsersStore {
-        chatCommunitySectionModule: root.rootStore.chatCommunitySectionModule
-    }
+
+    // Users related data:
+    property var usersModel
 
     signal openStickerPackPopup(string stickerPackId)
     signal tokenPaymentRequested(string recipientAddress, string symbol, string rawAmount, int chainId)
@@ -80,11 +80,6 @@ ColumnLayout {
     objectName: "chatContentViewColumn"
     spacing: 0
 
-    onChatContentModuleChanged: if (!!chatContentModule) {
-        root.usersStore.chatDetails = root.chatContentModule.chatDetails
-        root.usersStore.usersModule = root.chatContentModule.usersModule
-    }
-
     Loader {
         Layout.fillWidth: true
         active: root.isBlocked
@@ -109,7 +104,6 @@ ColumnLayout {
             formatBalance: root.formatBalance
             emojiPopup: root.emojiPopup
             stickersPopup: root.stickersPopup
-            usersStore: root.usersStore
             stickersLoaded: root.stickersLoaded
             chatId: root.chatId
             isOneToOne: root.chatType === Constants.chatType.oneToOne
@@ -119,6 +113,7 @@ ColumnLayout {
             sendViaPersonalChatEnabled: root.sendViaPersonalChatEnabled
             disabledTooltipText: root.disabledTooltipText
             areTestNetworksEnabled: root.areTestNetworksEnabled
+            usersModel: root.usersModel
 
             // Unfurling related data:
             gifUnfurlingEnabled: root.gifUnfurlingEnabled

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

@@ -29,6 +29,15 @@ Item {
     property var emojiPopup
     property int padding: Theme.halfPadding
 
+    property var usersModel
+    property var temporaryUsersModel
+    property var amIChatAdmin
+
+    signal updateGroupMembers()
+    signal resetTemporaryUsersModel()
+    signal appendTemporaryUsersModel(string pubKey, string displayName)
+    signal removeFromTemporaryUsersModel(string pubKey)
+
     signal searchButtonClicked()
     signal displayEditChannelPopup(string chatId,
                                    string chatName,
@@ -345,16 +354,19 @@ Item {
         id: membersSelector
 
         MembersEditSelectorView {
-            rootStore: root.rootStore
-            usersStore: UsersStore {
-                chatDetails: chatContentModule.chatDetails
-                chatCommunitySectionModule: root.rootStore.chatCommunitySectionModule
-                usersModule: root.chatContentModule.usersModule
-            }
             contactsModel: root.mutualContactsModel
+            usersModel: root.usersModel
+            temporaryUsersModel: root.temporaryUsersModel
+
+            amIChatAdmin: root.amIChatAdmin
 
             onConfirmed: root.state = d.stateInfoButtonContent
             onRejected: root.state = d.stateInfoButtonContent
+
+            onUpdateGroupMembers: root.updateGroupMembers()
+            onResetTemporaryUsersModel: root.resetTemporaryUsersModel()
+            onAppendTemporaryUsersModel: root.appendTemporaryUsersModel(pubKey, displayName)
+            onRemoveFromTemporaryUsersModel: root.removeFromTemporaryUsersModel(pubKey)
         }
     }
 }

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

@@ -33,11 +33,13 @@ Item {
 
     property RootStore rootStore
     property MessageStore messageStore
-    property UsersStore usersStore
     property ContactsStore contactsStore
     property string channelEmoji
     property var formatBalance
 
+    // Users related data:
+    property var usersModel
+
     property var emojiPopup
     property var stickersPopup
     property bool areTestNetworksEnabled
@@ -297,14 +299,14 @@ Item {
 
             rootStore: root.rootStore
             messageStore: root.messageStore
-            usersStore: root.usersStore
             contactsStore: root.contactsStore
             channelEmoji: root.channelEmoji
             emojiPopup: root.emojiPopup
             stickersPopup: root.stickersPopup
             chatLogView: ListView.view
             chatContentModule: root.chatContentModule
             formatBalance: root.formatBalance
+            usersModel: root.usersModel
 
             isChatBlocked: root.isChatBlocked
 

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

@@ -114,6 +114,17 @@ StatusSectionLayout {
     property var cbGetCompressedPk: function (publicKey) { console.error("Implement me"); return ""}
     property var cbGetEmojiHash: function (publicKey) { console.error("Implement me"); return ""}
 
+    // Users related data:
+    property var usersModel
+    property var temporaryUsersModel
+    property bool amIChatAdmin
+
+    // Users related signals
+    signal updateGroupMembers()
+    signal resetTemporaryUsersModel()
+    signal appendTemporaryUsersModel(string pubKey, string displayName)
+    signal removeFromTemporaryUsersModel(string pubKey)
+
     // Community transfer ownership related props:
     required property bool isPendingOwnershipRequest
     signal finaliseOwnershipClicked
@@ -195,12 +206,6 @@ StatusSectionLayout {
     rightPanel: Component {
         id: userListComponent
         UserListPanel {
-            readonly property var usersStore: ChatStores.UsersStore {
-                usersModule: !!root.chatContentModule ? root.chatContentModule.usersModule : null
-                chatDetails: !!root.chatContentModule ? root.chatContentModule.chatDetails : null
-                chatCommunitySectionModule: root.rootStore.chatCommunitySectionModule
-            }
-
             anchors.fill: parent
 
             chatType: root.chatContentModule.chatDetails.type
@@ -210,7 +215,7 @@ StatusSectionLayout {
             communityMemberReevaluationStatus: root.rootStore.communityMemberReevaluationStatus
 
             usersModel: SortFilterProxyModel {
-                sourceModel: usersStore.usersModel
+                sourceModel: root.usersModel
 
                 proxyRoles: FastExpressionRole {
                     name: "emojiHash"
@@ -255,6 +260,10 @@ StatusSectionLayout {
             mutualContactsModel: root.mutualContactsModel
             emojiPopup: root.emojiPopup
 
+            usersModel: root.usersModel
+            temporaryUsersModel: root.temporaryUsersModel
+            amIChatAdmin: root.amIChatAdmin
+
             onSearchButtonClicked: root.openAppSearch()
             onDisplayEditChannelPopup: {
                 Global.openPopup(contactColumnLoader.item.createChannelPopup, {
@@ -270,6 +279,11 @@ StatusSectionLayout {
                     hideIfPermissionsNotMet: hideIfPermissionsNotMet
                 });
             }
+
+            onUpdateGroupMembers: root.updateGroupMembers()
+            onResetTemporaryUsersModel: root.resetTemporaryUsersModel()
+            onAppendTemporaryUsersModel: root.appendTemporaryUsersModel(pubKey, displayName)
+            onRemoveFromTemporaryUsersModel: root.removeFromTemporaryUsersModel(pubKey)
         }
     }
 
@@ -310,6 +324,9 @@ StatusSectionLayout {
             cbGetCompressedPk: root.cbGetCompressedPk
             cbGetEmojiHash: root.cbGetEmojiHash
 
+            // Users related data:
+            usersModel: root.usersModel
+
             onOpenStickerPackPopup: {
                 Global.openPopup(statusStickerPackClickPopup, {packId: stickerPackId, store: root.stickersPopup.store} )
             }