feat: add search bar

img/search.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.92798 11.856C2.65405 11.856 0 9.2019 0 5.92798C0 2.65405 2.65405 0 5.92798 0C9.2019 0 11.856 2.65405 11.856 5.92798C11.856 7.20825 11.45 8.39368 10.76 9.36267L15.7087 14.3114C16.0945 14.6973 16.0945 15.3228 15.7087 15.7086C15.3228 16.0945 14.6973 16.0945 14.3115 15.7086L9.36279 10.76C8.3938 11.4501 7.20825 11.856 5.92798 11.856ZM5.92798 9.87988C8.1106 9.87988 9.88013 8.1106 9.88013 5.92798C9.88013 3.74536 8.1106 1.97595 5.92798 1.97595C3.74536 1.97595 1.97607 3.74536 1.97607 5.92798C1.97607 8.1106 3.74536 9.87988 5.92798 9.87988Z" fill="#939BA1"/>
+</svg>

main.qml

@@ -149,7 +149,7 @@ ApplicationWindow {
                     }
 
                     Rectangle {
-                        id: rectangle
+                        id: searchBox
                         height: 36
                         color: "#EEF2F5"
                         anchors.top: parent.top
@@ -160,13 +160,58 @@ ApplicationWindow {
                         anchors.left: parent.left
                         anchors.leftMargin: 16
 
-                        Text {
+                        TextField {
-                            id: element2
+                            id: searchText
-                            text: qsTr("Search")
+                            placeholderText: qsTr("Search")
                             anchors.left: parent.left
                             anchors.leftMargin: 32
                             anchors.verticalCenter: parent.verticalCenter
                             font.pixelSize: 12
+                            background: {
+                            }
+                        }
+
+                        Image {
+                            id: image3
+                            anchors.left: parent.left
+                            anchors.leftMargin: 10
+                            anchors.verticalCenter: parent.verticalCenter
+                            fillMode: Image.PreserveAspectFit
+                            source: "img/search.svg"
+                        }
+
+                        MouseArea {
+                            id: mouseArea
+                            anchors.fill: parent
+                            onClicked : {
+                                searchText.forceActiveFocus(Qt.MouseFocusReason)
+                            }
+                        }
+                    }
+
+                    Rectangle {
+                        id: addChat
+                        width: 36
+                        height: 36
+                        color: "#4360DF"
+                        radius: 50
+                        anchors.right: parent.right
+                        anchors.rightMargin: 9
+                        anchors.top: parent.top
+                        anchors.topMargin: 59
+
+                        Text {
+                            id: element3
+                            color: "#ffffff"
+                            text: qsTr("+")
+                            anchors.verticalCenterOffset: -1
+                            anchors.horizontalCenterOffset: 1
+                            anchors.horizontalCenter: parent.horizontalCenter
+                            anchors.verticalCenter: parent.verticalCenter
+                            lineHeight: 1
+                            fontSizeMode: Text.FixedSize
+                            font.bold: true
+                            font.pixelSize: 28
                         }
                     }
                 }
@@ -224,7 +269,6 @@ ApplicationWindow {
 
 /*##^##
 Designer {
-    D{i:0;formeditorZoom:2}D{i:9;anchors_height:40;anchors_width:40}D{i:16;anchors_y:0}
+    D{i:9;anchors_height:40;anchors_width:40}D{i:16;anchors_y:0}D{i:20;anchors_height:100;anchors_width:100}
-D{i:17;anchors_width:200}
 }
 ##^##*/