Add back button to all pages in thin window mode

In "mobile mode" where main pane is hidden due to application's width:

- Show a back button in the tab bar of the AccountSettings and
  AddChat pages

- Show a back button in the address field (opposite to the "next
  button") of the ServerBrowser, unless there are no accounts added yet
  (application first run) and the main pane would be empty

src/gui/Base/HTabbedBox.qml

@@ -8,15 +8,38 @@ import QtQuick.Layouts 1.12
 HPage {
     default property alias swipeViewData: swipeView.contentData
 
+    property Component tabBar: HTabBar {}
+    property alias backButton: backButton
+    property bool showBackButton: false
+
+    readonly property alias swipeView: swipeView
+
     contentWidth:
         Math.max(swipeView.contentWidth, theme.controls.box.defaultWidth)
 
-    header: HTabBar {}
+    header: HRowLayout {
+        HButton {
+            id: backButton
+            visible: Layout.preferredWidth > 0
+            Layout.preferredWidth: showBackButton ? implicitWidth : 0
+
+            Behavior on Layout.preferredWidth { HNumberAnimation {} }
+        }
+
+        HLoader {
+            id: tabBarLoader
+            asynchronous: false
+            sourceComponent: tabBar
+
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+        }
+    }
 
     background: Rectangle {
         color: theme.controls.box.background
         radius: theme.controls.box.radius
-    }
+   }
 
     HNumberAnimation on scale {
         running: true
@@ -29,7 +52,7 @@ HPage {
     Behavior on implicitHeight { HNumberAnimation {} }
 
     Binding {
-        target: header
+        target: tabBarLoader.item
         property: "currentIndex"
         value: swipeView.currentIndex
     }
@@ -38,8 +61,7 @@ HPage {
         id: swipeView
         anchors.fill: parent
         clip: true
-        currentIndex: header.currentIndex
-
+        currentIndex: tabBarLoader.item.currentIndex
         onCurrentItemChanged: currentItem.takeFocus()
     }
 }

src/gui/Pages/AccountSettings/AccountSettings.qml

@@ -17,7 +17,12 @@ HPage {
         width: Math.min(implicitWidth, page.availableWidth)
         height: Math.min(implicitHeight, page.availableHeight)
 
-        header: HTabBar {
+        showBackButton: mainUI.mainPane.normalOrForceCollapse
+        backButton.icon.name: "go-back-to-main-pane"
+        backButton.toolTip.text: qsTr("Back to main pane")
+        backButton.onClicked: mainUI.mainPane.toggleFocus()
+
+        tabBar: HTabBar {
             HTabButton { text: qsTr("General") }
             HTabButton { text: qsTr("Notifications") }
             HTabButton { text: qsTr("Security") }

src/gui/Pages/AddAccount/AddAccount.qml

@@ -39,7 +39,7 @@ SwipeView {
             width: Math.min(implicitWidth, tabPage.availableWidth)
             height: Math.min(implicitHeight, tabPage.availableHeight)
 
-            header: HTabBar {
+            tabBar: HTabBar {
                 shortcutsEnabled: visible && tabPage.enabled
                 visible:
                     signInLoader.sourceComponent !== signInLoader.signInSso

src/gui/Pages/AddAccount/ServerBrowser.qml

@@ -155,6 +155,22 @@ HBox {
 
             width: parent.width
 
+            HButton {
+                icon.name: "go-back-to-main-pane"
+                icon.color: theme.colors.negativeBackground
+                onClicked: mainUI.mainPane.toggleFocus()
+                visible: Layout.preferredWidth > 0
+
+                Layout.fillHeight: true
+                Layout.preferredWidth:
+                    mainUI.mainPane.normalOrForceCollapse &&
+                    mainUI.accountsPresent ?
+                    implicitWidth :
+                    0
+
+                Behavior on Layout.preferredWidth { HNumberAnimation {} }
+            }
+
             HTextField {
                 id: field
 

src/gui/Pages/AddChat/AddChat.qml

@@ -15,7 +15,12 @@ HPage {
         width: Math.min(implicitWidth, page.availableWidth)
         height: Math.min(implicitHeight, page.availableHeight)
 
-        header: HTabBar {
+        showBackButton: mainUI.mainPane.normalOrForceCollapse
+        backButton.icon.name: "go-back-to-main-pane"
+        backButton.toolTip.text: qsTr("Back to main pane")
+        backButton.onClicked: mainUI.mainPane.toggleFocus()
+
+        tabBar: HTabBar {
             HTabButton { text: qsTr("Direct chat") }
             HTabButton { text: qsTr("Join room") }
             HTabButton { text: qsTr("Create room") }