fix(StatusAppChatView): Updated layout based on new designs (#765)

As part of https://github.com/status-im/status-desktop/issues/6352

ui/StatusQ/sandbox/demoapp/StatusAppChatView.qml

@@ -16,27 +16,62 @@ StatusAppThreePanelLayout {
 
     leftPanel: Item {
         anchors.fill: parent
+        anchors.margins: 16
+        RowLayout {
+            id: searchInputWrapper
+            width: parent.width
 
             StatusNavigationPanelHeadline {
                 id: headline
-            anchors.top: parent.top
+                Layout.alignment: Qt.AlignVCenter
-            anchors.topMargin: 16
-            anchors.horizontalCenter: parent.horizontalCenter
                 text: "Chat"
             }
 
-        RowLayout {
+            Item {
-            id: searchInputWrapper
+                Layout.fillWidth: true
-            width: 288
+            }
-            height: searchInput.height
+
-            anchors.top: headline.bottom
+
-            anchors.topMargin: 16
+            StatusRoundButton {
-            anchors.horizontalCenter: parent.horizontalCenter
+                Layout.alignment: Qt.AlignVCenter
+                icon.name: "public-chat"
+                icon.color: Theme.palette.directColor1
+                icon.height: editBtn.icon.height
+                icon.width: editBtn.icon.width
+                implicitWidth: editBtn.implicitWidth
+                implicitHeight: editBtn.implicitHeight
+                type: StatusRoundButton.Type.Tertiary
+                StatusToolTip {
+                    text: qsTr("Join public chats")
+                    visible: parent.hovered
+                    orientation: StatusToolTip.Orientation.Bottom
+                    y: parent.height + 12
+                }
+            }
+
+            StatusIconTabButton {
+                id: editBtn
+                icon.name: "edit"
+                icon.color: Theme.palette.directColor1
+                checked: root.createChat
+                highlighted: checked
+                onClicked: {
+                    root.createChat = !root.createChat;
+                }
+                StatusToolTip {
+                    text: qsTr("Start chat")
+                    visible: parent.hovered
+                    orientation: StatusToolTip.Orientation.Bottom
+                    y: parent.height + 12
+                }
+            }
+        }
 
         StatusBaseInput {
             id: searchInput
-                Layout.fillWidth: true
+            anchors.top: searchInputWrapper.bottom
-                Layout.alignment: Qt.AlignVCenter
+            anchors.topMargin: 16
+            width: parent.width
             implicitHeight: 36
             topPadding: 8
             bottomPadding: 8
@@ -44,25 +79,15 @@ StatusAppThreePanelLayout {
             icon.name: "search"
         }
 
-            StatusIconTabButton {
-                icon.name: "public-chat"
-            }
-
-            StatusIconTabButton {
-                icon.name: "edit"
-                onClicked: {
-                    root.createChat = !root.createChat;
-                }
-            }
-        }
-
         Column {
-            anchors.top: searchInputWrapper.bottom
+            width: parent.width
+            anchors.top: searchInput.bottom
             anchors.topMargin: 16
             anchors.horizontalCenter: parent.horizontalCenter
             spacing: 8
 
             StatusContactRequestsIndicatorListItem {
+                width: parent.width
                 anchors.horizontalCenter: parent.horizontalCenter
                 title: "Contact requests"
                 requestsCount: 3
@@ -70,6 +95,7 @@ StatusAppThreePanelLayout {
             }
 
             StatusChatList {
+                width: parent.width
                 model: Models.demoChatListItems
                 highlightItem: !root.createChat
                 onChatItemUnmuted: {