fix(windows): fix windows chat list empty because of popup overflow

Fixes #7906

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

@@ -32,6 +32,7 @@ Item {
     property var rootStore
     property var contactsStore
     property var emojiPopup
+    property var stickersPopup
 
     // Not Refactored Yet
     //property int chatGroupsListViewCount: 0
@@ -215,6 +216,7 @@ Item {
                             rootStore: root.rootStore
                             contactsStore: root.contactsStore
                             emojiPopup: root.emojiPopup
+                            stickersPopup: root.stickersPopup
                             sendTransactionNoEnsModal: cmpSendTransactionNoEns
                             receiveTransactionModal: cmpReceiveTransaction
                             sendTransactionWithEnsModal: cmpSendTransactionWithEns
@@ -263,6 +265,7 @@ Item {
                         rootStore: root.rootStore
                         contactsStore: root.contactsStore
                         emojiPopup: root.emojiPopup
+                        stickersPopup: root.stickersPopup
                         sendTransactionNoEnsModal: cmpSendTransactionNoEns
                         receiveTransactionModal: cmpReceiveTransaction
                         sendTransactionWithEnsModal: cmpSendTransactionWithEns

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

@@ -36,6 +36,7 @@ ColumnLayout {
     property var contactsStore
     property bool isActiveChannel: false
     property var emojiPopup
+    property var stickersPopup
     property alias textInputField: chatInput
     property UsersStore usersStore: UsersStore {}
 
@@ -145,6 +146,7 @@ ColumnLayout {
             messageContextMenu: contextmenu
             messageStore: messageStore
             emojiPopup: root.emojiPopup
+            stickersPopup: root.stickersPopup
             usersStore: root.usersStore
             stickersLoaded: root.stickersLoaded
             isChatBlocked: root.isBlocked
@@ -183,11 +185,10 @@ ColumnLayout {
 
                 messageContextMenu: contextmenu
                 emojiPopup: root.emojiPopup
+                stickersPopup: root.stickersPopup
                 isContactBlocked: root.isBlocked
                 isActiveChannel: root.isActiveChannel
                 anchors.bottom: parent.bottom
-                recentStickers: root.rootStore.stickersModuleInst.recent
-                stickerPackList: root.rootStore.stickersModuleInst.stickerPacks
                 chatType: chatContentModule? chatContentModule.chatDetails.type : Constants.chatType.unknown
 
                 Binding on chatInputPlaceholder {

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

@@ -33,6 +33,7 @@ Item {
     property string channelEmoji
 
     property var emojiPopup
+    property var stickersPopup
 
     property bool stickersLoaded: false
     property alias chatLogView: chatLogView
@@ -265,6 +266,7 @@ Item {
             contactsStore: root.contactsStore
             channelEmoji: root.channelEmoji
             emojiPopup: root.emojiPopup
+            stickersPopup: root.stickersPopup
             chatLogView: ListView.view
 
             isActiveChannel: root.isActiveChannel

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

@@ -31,6 +31,7 @@ StatusSectionLayout {
 
     property Component membershipRequestPopup
     property var emojiPopup
+    property var stickersPopup
     property bool stickersLoaded: false
 
     signal communityInfoButtonClicked()
@@ -84,6 +85,7 @@ StatusSectionLayout {
         contactsStore: root.contactsStore
         stickersLoaded: root.stickersLoaded
         emojiPopup: root.emojiPopup
+        stickersPopup: root.stickersPopup
         onOpenStickerPackPopup: {
             Global.openPopup(statusStickerPackClickPopup, {packId: stickerPackId} )
         }

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

@@ -153,8 +153,6 @@ Page {
                 visible: membersSelector.model.count > 0
                 chatType: membersSelector.model.count === 1? Constants.chatType.oneToOne : Constants.chatType.privateGroupChat
                 emojiPopup: root.emojiPopup
-                recentStickers: root.rootStore.stickersModuleInst.recent
-                stickerPackList: root.rootStore.stickersModuleInst.stickerPacks
                 closeGifPopupAfterSelection: true
                 onSendTransactionCommandButtonClicked: {
                     root.rootStore.createChatStartSendTransactionProcess = true;

ui/app/mainui/AppMain.qml

@@ -311,6 +311,11 @@ Item {
         height: 440
     }
 
+    StatusStickersPopup {
+        id: statusStickersPopup
+        store: chatLayoutContainer.rootStore
+    }
+
     StatusMainLayout {
         id: appLayout
 
@@ -801,6 +806,7 @@ Item {
                         id: chatLayoutContainer
 
                         chatView.emojiPopup: statusEmojiPopup
+                        chatView.stickersPopup: statusStickersPopup
 
                         contactsStore: appMain.rootStore.contactStore
                         rootStore.emojiReactionsModel: appMain.rootStore.emojiReactionsModel
@@ -899,6 +905,7 @@ Item {
 
                                     sourceComponent: ChatLayout {
                                         chatView.emojiPopup: statusEmojiPopup
+                                        chatView.stickersPopup: statusStickersPopup
 
                                         contactsStore: appMain.rootStore.contactStore
                                         rootStore.emojiReactionsModel: appMain.rootStore.emojiReactionsModel

ui/imports/shared/status/StatusChatInput.qml

@@ -33,8 +33,10 @@ Rectangle {
     property var store
 
     property var emojiPopup: null
+    property var stickersPopup: null
     // Use this to only enable the Connections only when this Input opens the Emoji popup
     property bool emojiPopupOpened: false
+    property bool stickersPopupOpened: false
     property bool closeGifPopupAfterSelection: true
 
     property bool emojiEvent: false
@@ -47,9 +49,6 @@ Rectangle {
     property bool isContactBlocked: false
     property bool isActiveChannel: false
 
-    property var recentStickers
-    property var stickerPackList
-
     property int messageLimit: 2000
     property int messageLimitVisible: 200
 
@@ -149,6 +148,20 @@ Rectangle {
                 }
             }
         }
+        readonly property StateGroup stickersPopupTakeover: StateGroup {
+            states: State {
+                when: control.stickersPopupOpened
+
+                PropertyChanges {
+                    target: stickersPopup
+
+                    parent: control
+                    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
+                    x: control.width - stickersPopup.width - Style.current.halfPadding
+                    y: -stickersPopup.height
+                }
+            }
+        }
 
         function copyMentions(start, end) {
             copiedMentionsPos = []
@@ -212,8 +225,8 @@ Rectangle {
     }
 
     function togglePopup(popup, btn) {
-        if (popup !== stickersPopup) {
+        if (popup !== control.stickersPopup) {
-            stickersPopup.close()
+            control.stickersPopup.close()
         }
 
         if (popup !== gifPopup) {
@@ -248,6 +261,21 @@ Rectangle {
         }
     }
 
+    Connections {
+        enabled: control.stickersPopupOpened
+        target: control.stickersPopup
+
+        onStickerSelected: {
+            control.stickerSelected(hashId, packId, url)
+            control.hideExtendedArea();
+            messageInputField.forceActiveFocus();
+        }
+        onClosed: {
+            stickersBtn.highlighted = false
+            control.stickersPopupOpened = false
+        }
+    }
+
     property var mentionsPos: []
 
     function insertMention(aliasName, publicKey, lastAtPosition, lastCursorPosition) {
@@ -955,24 +983,6 @@ Rectangle {
         }
     }
 
-    StatusStickersPopup {
-        id: stickersPopup
-        x: control.width - width - Style.current.halfPadding
-        y: -height
-        store: control.store
-        enabled: !!control.recentStickers && !!control.stickerPackList
-        recentStickers: control.recentStickers
-        stickerPackList: control.stickerPackList
-        onStickerSelected: {
-            control.stickerSelected(hashId, packId, url)
-            control.hideExtendedArea();
-            messageInputField.forceActiveFocus();
-        }
-        onClosed: {
-            stickersBtn.highlighted = false
-        }
-    }
-
     RowLayout {
         id: layout
         anchors.fill: parent
@@ -1407,7 +1417,11 @@ Rectangle {
                                 type: StatusQ.StatusFlatRoundButton.Type.Tertiary
                                 visible: !isEdit && emojiBtn.visible
                                 color: "transparent"
-                                onClicked: togglePopup(stickersPopup, stickersBtn)
+                                onClicked: {
+                                    control.stickersPopupOpened = true
+                                    
+                                    togglePopup(control.stickersPopup, stickersBtn)
+                                }
                             }
                         }
                     }

ui/imports/shared/status/StatusStickersPopup.qml

@@ -15,11 +15,12 @@ import AppLayouts.Chat.stores 1.0
 Popup {
     id: root
     property var store
-    property var recentStickers: StickerData {}
+    property var recentStickers: store.stickersModuleInst.recent
-    property var stickerPackList: StickerPackData {}
+    property var stickerPackList: store.stickersModuleInst.stickerPacks
     signal stickerSelected(string hashId, string packId, string url)
     property int installedPacksCount: stickersModule.numInstalledStickerPacks
     property bool stickerPacksLoaded: false
+    enabled: !!recentStickers && !!stickerPackList
     width: 360
     height: 440
     modal: false

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

@@ -29,6 +29,7 @@ Loader {
 
     property var chatLogView
     property var emojiPopup
+    property var stickersPopup
 
     // Once we redo qml we will know all section/chat related details in each message form the parent components
     // without an explicit need to fetch those details via message store/module.
@@ -678,6 +679,7 @@ Loader {
                     store: root.rootStore
                     usersStore: root.usersStore
                     emojiPopup: root.emojiPopup
+                    stickersPopup: root.stickersPopup
                     messageContextMenu: root.messageContextMenu
 
                     chatType: root.messageStore.getChatType()