feature(@desktop/chat): popup search added on the left side

As requested by design popup search added for the left side, click on a search
field (above channels list).

Refers to the changes requested by the issue-2934

Fixes: #2934

ui/app/AppLayouts/Chat/ChatColumn.qml

@@ -7,7 +7,6 @@ import QtGraphicalEffects 1.0
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
-import StatusQ.Popups 0.1
 
 import "../../../shared"
 import "../../../shared/status"
@@ -165,107 +164,6 @@ Item {
         }
     }
 
-    StatusSearchLocationMenu {
-        id: searchPopupMenu
-        searchPopup: searchPopup
-        locatioModel: chatsModel.messageSearchViewController.locationMenuModel
-
-        onItemClicked: {
-            chatsModel.messageSearchViewController.setSearchLocation(firstLevelItemValue, secondLevelItemValue)
-            if(searchPopup.searchText !== "")
-                searchMessages(searchPopup.searchText)
-        }
-    }
-
-    property var searchMessages: Backpressure.debounce(searchPopup, 400, function (value) {
-        chatsModel.messageSearchViewController.searchMessages(value)
-    })
-
-    StatusSearchPopup {
-        id: searchPopup
-
-        noResultsLabel: qsTr("No results")
-        defaultSearchLocationText: qsTr("Anywhere")
-
-        searchOptionsPopupMenu: searchPopupMenu
-        searchResults: chatsModel.messageSearchViewController.resultModel
-        onSearchTextChanged: {
-            searchMessages(searchPopup.searchText);
-        }
-        onAboutToHide: {
-            if (searchPopupMenu.visible) {
-                searchPopupMenu.close();
-            }
-            //clear menu
-            for (var i = 2; i <= searchPopupMenu.count; i++) {
-                searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
-            }
-        }
-        onClosed: {
-            searchPopupMenu.dismiss();
-        }
-        onOpened: {
-            searchPopup.resetSearchSelection();
-            chatsModel.messageSearchViewController.prepareLocationMenuModel()
-
-            const jsonObj = chatsModel.messageSearchViewController.getSearchLocationObject()
-
-            if (!jsonObj) {
-                return
-            }
-
-            let obj = JSON.parse(jsonObj)
-            if (obj.location === "") {
-                if(obj.subLocation === "") {
-                    chatsModel.messageSearchViewController.setSearchLocation("", "")
-                }
-                else {
-                    searchPopup.setSearchSelection(obj.subLocation.text,
-                                       "",
-                                       obj.subLocation.imageSource,
-                                       obj.subLocation.isIdenticon,
-                                       obj.subLocation.iconName,
-                                       obj.subLocation.identiconColor)
-
-                    chatsModel.messageSearchViewController.setSearchLocation("", obj.subLocation.value)
-                }
-            }
-            else {
-                if (obj.location.title === "Chat") {
-                    searchPopup.setSearchSelection(obj.subLocation.text,
-                                       "",
-                                       obj.subLocation.imageSource,
-                                       obj.subLocation.isIdenticon,
-                                       obj.subLocation.iconName,
-                                       obj.subLocation.identiconColor)
-
-                    chatsModel.messageSearchViewController.setSearchLocation(obj.location.value, obj.subLocation.value)
-                }
-                else {
-                    searchPopup.setSearchSelection(obj.location.title,
-                                       obj.subLocation.text,
-                                       obj.location.imageSource,
-                                       obj.location.isIdenticon,
-                                       obj.location.iconName,
-                                       obj.location.identiconColor)
-
-                    chatsModel.messageSearchViewController.setSearchLocation(obj.location.value, obj.subLocation.value)
-                }
-            }
-        }
-        onResultItemClicked: {
-            searchPopup.close()
-
-            chatsModel.switchToSearchedItem(itemId)
-        }
-
-        onResultItemTitleClicked: {
-            const pk = titleId
-            const userProfileImage = appMain.getProfileImage(pk)
-            return openProfilePopup(chatsModel.userNameOrAlias(pk), pk, userProfileImage || utilsModel.generateIdenticon(pk))
-        }
-    }
-
     StackLayout {
         anchors.fill: parent
         currentIndex:  chatsModel.channelView.activeChannelIndex > -1 && chatGroupsListViewCount > 0 ? 0 : 1

ui/app/AppLayouts/Chat/ChatLayout.qml

@@ -11,6 +11,7 @@ import "./ChatColumn"
 import "./CommunityComponents"
 
 import StatusQ.Layout 0.1
+import StatusQ.Popups 0.1
 
 StatusAppThreePanelLayout {
     id: chatView
@@ -33,6 +34,115 @@ StatusAppThreePanelLayout {
         chatColumn.onActivated()
     }
 
+    StatusSearchLocationMenu {
+        id: searchPopupMenu
+        searchPopup: searchPopup
+        locationModel: chatsModel.messageSearchViewController.locationMenuModel
+
+        onItemClicked: {
+            chatsModel.messageSearchViewController.setSearchLocation(firstLevelItemValue, secondLevelItemValue)
+            if(searchPopup.searchText !== "")
+                searchMessages(searchPopup.searchText)
+        }
+    }
+
+    property var searchMessages: Backpressure.debounce(searchPopup, 400, function (value) {
+        chatsModel.messageSearchViewController.searchMessages(value)
+    })
+
+    Connections {
+        target: chatsModel.messageSearchViewController.locationMenuModel
+        onModelAboutToBeReset: {
+            for (var i = 2; i <= searchPopupMenu.count; i++) {
+                //clear menu
+                if (!!searchPopupMenu.takeItem(i)) {
+                    searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
+                }
+            }
+        }
+    }
+
+    StatusSearchPopup {
+        id: searchPopup
+
+        noResultsLabel: qsTr("No results")
+        defaultSearchLocationText: qsTr("Anywhere")
+
+        searchOptionsPopupMenu: searchPopupMenu
+        searchResults: chatsModel.messageSearchViewController.resultModel
+        onSearchTextChanged: {
+            searchMessages(searchPopup.searchText);
+        }
+        onAboutToHide: {
+            if (searchPopupMenu.visible) {
+                searchPopupMenu.close();
+            }
+        }
+        onClosed: {
+            searchPopupMenu.dismiss();
+        }
+        onOpened: {
+            searchPopup.resetSearchSelection();
+            chatsModel.messageSearchViewController.prepareLocationMenuModel()
+
+            const jsonObj = chatsModel.messageSearchViewController.getSearchLocationObject()
+
+            if (!jsonObj) {
+                return
+            }
+
+            let obj = JSON.parse(jsonObj)
+            if (obj.location === "") {
+                if(obj.subLocation === "") {
+                    chatsModel.messageSearchViewController.setSearchLocation("", "")
+                }
+                else {
+                    searchPopup.setSearchSelection(obj.subLocation.text,
+                                       "",
+                                       obj.subLocation.imageSource,
+                                       obj.subLocation.isIdenticon,
+                                       obj.subLocation.iconName,
+                                       obj.subLocation.identiconColor)
+
+                    chatsModel.messageSearchViewController.setSearchLocation("", obj.subLocation.value)
+                }
+            }
+            else {
+                if (obj.location.title === "Chat") {
+                    searchPopup.setSearchSelection(obj.subLocation.text,
+                                       "",
+                                       obj.subLocation.imageSource,
+                                       obj.subLocation.isIdenticon,
+                                       obj.subLocation.iconName,
+                                       obj.subLocation.identiconColor)
+
+                    chatsModel.messageSearchViewController.setSearchLocation(obj.location.value, obj.subLocation.value)
+                }
+                else {
+                    searchPopup.setSearchSelection(obj.location.title,
+                                       obj.subLocation.text,
+                                       obj.location.imageSource,
+                                       obj.location.isIdenticon,
+                                       obj.location.iconName,
+                                       obj.location.identiconColor)
+
+                    chatsModel.messageSearchViewController.setSearchLocation(obj.location.value, obj.subLocation.value)
+                }
+            }
+        }
+        onResultItemClicked: {
+            searchPopup.close()
+
+            chatsModel.switchToSearchedItem(itemId)
+        }
+
+        onResultItemTitleClicked: {
+            const pk = titleId
+            const userProfileImage = appMain.getProfileImage(pk)
+            return openProfilePopup(chatsModel.userNameOrAlias(pk), pk, userProfileImage || utilsModel.generateIdenticon(pk))
+        }
+    }
+
     leftPanel: Loader {
         id: contactColumnLoader
         sourceComponent: appSettings.communitiesEnabled && chatsModel.communities.activeCommunity.active ? communtiyColumnComponent : contactsColumnComponent

ui/app/AppLayouts/Chat/ContactsColumn.qml

@@ -21,7 +21,6 @@ Item {
     height: parent.height
 
     property int chatGroupsListViewCount: channelList.chatListItems.count
-    property alias searchStr: searchInput.text
     signal openProfileClicked()
 
     MouseArea {
@@ -48,23 +47,29 @@ Item {
         width: parent.width
         height: searchInput.height
 
-        StatusBaseInput {
+        Item {
-            id: searchInput
-
             anchors.verticalCenter: parent.verticalCenter
             anchors.left: parent.left
             anchors.right: actionButton.left
             anchors.leftMargin: 16
             anchors.rightMargin: 16
+            implicitHeight: searchInput.height
+            implicitWidth: searchInput.width
 
+            StatusBaseInput {
+                id: searchInput
                 height: 36
+                width: parent.width
                 topPadding: 8
                 bottomPadding: 0
                 //% "Search"
                 placeholderText: qsTrId("search")
                 icon.name: "search"
-            Keys.onEscapePressed: {
+            }
-                actionButton.forceActiveFocus();
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: searchPopup.open()
             }
         }
 
@@ -202,23 +207,6 @@ Item {
 
         clip: true
 
-        Item {
-            id: noSearchResults
-            anchors.top: parent.top
-            anchors.horizontalCenter: parent.horizontalCenter
-            width: parent.width
-            visible: !!!channelList.height && contactsColumn.searchStr !== ""
-            height: visible ? 300 : 0
-
-            StatusBaseText {
-                font.pixelSize: 15
-                color: Theme.palette.directColor5
-                anchors.centerIn: parent
-                //% "No search results"
-                text: qsTrId("no-search-results")
-            }
-        }
-
         StatusChatList {
             id: channelList
 
@@ -232,10 +220,6 @@ Item {
                 return appMain.getProfileImage(id)
             }
 
-            filterFn: function (chatListItem) {
-                return !!!contactsColumn.searchStr || chatListItem.name.toLowerCase().includes(contactsColumn.searchStr.toLowerCase())
-            }
-
             Connections {
                 target: profileModel.contacts.list
                 onContactChanged: {
@@ -265,14 +249,6 @@ Item {
                 }
             }
         }
-
-        EmptyView {
-            id: emptyViewAndSuggestions
-            width: parent.width
-            visible: !appSettings.hideChannelSuggestions && !noSearchResults.visible
-            anchors.top: noSearchResults.visible ? noSearchResults.bottom : channelList.bottom
-            anchors.topMargin: 32
-        }
     }
 
     Component {