refactor(@desktop/chat): make use of StatusQ's input in contact list search

Also, use `StatusPopupMenu` for starting new chats.

ui/app/AppLayouts/Chat/CommunityComponents/CommunitiesPopup.qml

@@ -17,8 +17,8 @@ StatusModal {
     id: popup
 
     onOpened: {
-        searchBox.text = "";
+        contentComponent.searchBox.text = "";
-        searchBox.forceActiveFocus(Qt.MouseFocusReason)
+        contentComponent.searchBox.forceActiveFocus(Qt.MouseFocusReason)
     }
 
     //% "Communities"
@@ -44,6 +44,7 @@ StatusModal {
 
     content: Column {
         width: popup.width
+        property alias searchBox: searchBox
 
         Item {
             height: 68

ui/app/AppLayouts/Chat/ContactsColumn.qml

@@ -11,6 +11,7 @@ import "./CommunityComponents"
 
 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
 
@@ -20,14 +21,14 @@ Item {
     height: parent.height
 
     property int chatGroupsListViewCount: channelList.chatListItems.count
-    property alias searchStr: searchBox.text
+    property alias searchStr: searchInput.text
     signal openProfileClicked()
 
     MouseArea {
         anchors.fill: parent
         onClicked: {
             //steal focus from search field
-            addChat.forceActiveFocus();
+            actionButton.forceActiveFocus();
         }
     }
 
@@ -40,25 +41,122 @@ Item {
         text: qsTrId("chat")
     }
 
-    SearchBox {
+    Item {
-        id: searchBox
+        id: searchInputWrapper
         anchors.top: headline.bottom
-        anchors.topMargin: Style.current.padding
+        anchors.topMargin: 16
-        anchors.right: addChat.left
+        width: parent.width
-        anchors.rightMargin: Style.current.padding
+        height: searchInput.height
-        anchors.left: parent.left
-        anchors.leftMargin: Style.current.padding
-        Keys.onEscapePressed: {
-            addChat.forceActiveFocus();
-        }
-    }
 
-    AddChat {
+        StatusBaseInput {
-        id: addChat
+            id: searchInput
-        anchors.right: parent.right
+
-        anchors.rightMargin: Style.current.padding
+            anchors.verticalCenter: parent.verticalCenter
-        anchors.top: headline.bottom
+            anchors.left: parent.left
-        anchors.topMargin: Style.current.padding
+            anchors.right: actionButton.left
+            anchors.leftMargin: 16
+            anchors.rightMargin: 16
+
+            height: 36
+            topPadding: 8
+            bottomPadding: 0
+            placeholderText: qsTr("Search")
+            icon.name: "search"
+            Keys.onEscapePressed: {
+                actionButton.forceActiveFocus();
+            }
+        }
+
+        StatusRoundButton {
+            id: actionButton
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.right
+            anchors.rightMargin: 8
+            width: 32
+            height: 32
+
+            type: StatusRoundButton.Type.Secondary
+            icon.name: "add"
+            state: "default"
+
+            onClicked: chatContextMenu.popup(actionButton.width-chatContextMenu.width, actionButton.height + 4)
+            states: [
+                State {
+                    name: "default"
+                    PropertyChanges {
+                        target: actionButton
+                        icon.rotation: 0
+                        highlighted: false
+                    }
+                },
+                State {
+                    name: "pressed"
+                    PropertyChanges {
+                        target: actionButton
+                        icon.rotation: 45
+                        highlighted: true
+                    }
+                }
+            ]
+
+            transitions: [
+                Transition {
+                    from: "default"
+                    to: "pressed"
+
+                    RotationAnimation {
+                        duration: 150
+                        direction: RotationAnimation.Clockwise
+                        easing.type: Easing.InCubic
+                    }
+                },
+                Transition {
+                    from: "pressed"
+                    to: "default"
+                    RotationAnimation {
+                        duration: 150
+                        direction: RotationAnimation.Counterclockwise
+                        easing.type: Easing.OutCubic
+                    }
+                }
+            ]
+
+            StatusPopupMenu {
+                id: chatContextMenu
+
+                onOpened: {
+                    actionButton.state = "pressed"
+                }
+
+                onClosed: {
+                    actionButton.state = "default"
+                }
+
+                StatusMenuItem {
+                    text: qsTr("Start new chat")
+                    icon.name: "private-chat"
+                    onTriggered: openPopup(privateChatPopupComponent)
+                }
+
+                StatusMenuItem {
+                    text: qsTr("Start group chat")
+                    icon.name: "group-chat"
+                    onTriggered: openPopup(groupChatPopupComponent)
+                }
+
+                StatusMenuItem {
+                    text: qsTr("Join public chat")
+                    icon.name: "public-chat"
+                    onTriggered: openPopup(publicChatPopupComponent)
+                }
+
+                StatusMenuItem {
+                    text: qsTr("Communities")
+                    icon.name: "communities"
+                    onTriggered: openPopup(communitiesPopupComponent)
+                }
+            }
+        }
     }
 
     StatusContactRequestsIndicatorListItem {
@@ -66,7 +164,7 @@ Item {
 
         property int nbRequests: profileModel.contacts.contactRequests.count
 
-        anchors.top: searchBox.bottom
+        anchors.top: searchInputWrapper.bottom
         anchors.topMargin: visible ? Style.current.padding : 0
         anchors.horizontalCenter: parent.horizontalCenter
 

ui/app/AppLayouts/Chat/ContactsColumn/AddChat.qml

@@ -1,73 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
-import QtQuick.Layouts 1.13
-import "../../../../imports"
-import "../../../../shared"
-import "../../../../shared/status"
-import "../components"
-StatusRoundButton {
-    id: btnAdd
-    pressedIconRotation: 45
-    icon.name: "plusSign"
-    size: "medium"
-    type: "secondary"
-    width: 36
-    height: 36
-
-    onClicked: {
-        if (newChatMenu.opened) {
-            newChatMenu.close()
-        } else {
-            let x = btnAdd.iconX + btnAdd.icon.width / 2 - newChatMenu.width / 2
-            newChatMenu.popup(x, btnAdd.height + 4)
-        }
-    }
-    
-    PopupMenu {
-        id: newChatMenu
-        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
-
-        Action {
-            //% "Start new chat"
-            text: qsTrId("start-new-chat")
-            icon.source: "../../../img/new_chat.svg"
-            icon.width: 20
-            icon.height: 20
-            onTriggered: openPopup(privateChatPopupComponent)
-        }
-        Action {
-            //% "Start group chat"
-            text: qsTrId("start-group-chat")
-            icon.source: "../../../img/group_chat.svg"
-            icon.width: 20
-            icon.height: 20
-            onTriggered: openPopup(groupChatPopupComponent)
-        }
-        Action {
-            //% "Join public chat"
-            text: qsTrId("new-public-group-chat")
-            icon.source: "../../../img/public_chat.svg"
-            icon.width: 20
-            icon.height: 20
-            onTriggered: openPopup(publicChatPopupComponent)
-        }
-        Action {
-            enabled: appSettings.communitiesEnabled
-            //% "Communities"
-            text: qsTrId("communities")
-            icon.source: "../../../img/communities.svg"
-            icon.width: 20
-            icon.height: 20
-            onTriggered: {
-                openPopup(communitiesPopupComponent)
-            }
-        }
-        onAboutToShow: {
-            btnAdd.state = "pressed"
-        }
-
-        onAboutToHide: {
-            btnAdd.state = "default"
-        }
-    }
-}