Show pages headers to go back to pane when needed

TODO.md

@@ -2,7 +2,6 @@
 
 ## Before release
 
-- page back buttons
 - Add Gentoo instructions
 - Build final AppImage and test media opening
 

src/gui/Base/HPageHeader.qml

@@ -0,0 +1,50 @@
+// SPDX-License-Identifier: LGPL-3.0-or-later
+
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+
+Rectangle {
+    width: page.width
+    height: show ? theme.baseElementsHeight : 0
+    visible: height > 0
+    color: theme.controls.header.background
+
+
+    property HPage page: parent
+    property bool show: mainUI.mainPane.collapse
+
+
+    Behavior on height { HNumberAnimation {} }
+
+    HRowLayout {
+        anchors.fill: parent
+
+        HButton {
+            id: goToMainPaneButton
+            padded: false
+            backgroundColor: "transparent"
+            icon.name: "go-back-to-main-pane"
+            toolTip.text: qsTr("Go back to main pane")
+
+            onClicked: mainUI.mainPane.toggleFocus()
+
+            Layout.preferredWidth: theme.baseElementsHeight
+            Layout.fillHeight: true
+        }
+
+        HLabel {
+            text: page.title
+            elide: Text.ElideRight
+            horizontalAlignment: Qt.AlignHCenter
+            verticalAlignment: Qt.AlignVCenter
+
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+        }
+
+        Item {
+            Layout.preferredWidth: goToMainPaneButton.width
+            Layout.fillHeight: true
+        }
+    }
+}

src/gui/PageLoader.qml

@@ -16,7 +16,9 @@ HLoader {
 
     Component.onCompleted: {
         if (! py.startupAnyAccountsSaved) {
-            pageLoader.showPage("AddAccount/AddAccount")
+            pageLoader.showPage(
+                "AddAccount/AddAccount", {"header.show": false},
+            )
             return
         }
 

src/gui/Pages/AccountSettings/AccountSettings.qml

@@ -8,6 +8,8 @@ import "../../Base"
 
 HFlickableColumnPage {
     id: accountSettings
+    title: qsTr("Account settings")
+    header: HPageHeader {}
 
 
     property int avatarPreferredSize: 256 * theme.uiScale

src/gui/Pages/AddAccount/AddAccount.qml

@@ -5,6 +5,9 @@ import QtQuick.Layouts 1.12
 import "../../Base"
 
 HFlickableColumnPage {
+    title: qsTr("Add an account")
+    header: HPageHeader {}
+
     HTabContainer {
         tabModel: [
             qsTr("Sign in"), qsTr("Register"), qsTr("Reset"),

src/gui/Pages/AddChat/AddChat.qml

@@ -7,6 +7,8 @@ import "../../Base"
 
 HFlickableColumnPage {
     id: addChatPage
+    title: qsTr("Add new chat")
+    header: HPageHeader {}
 
 
     property string userId

src/themes/Midnight.qpl

@@ -107,7 +107,7 @@ controls:
         color windowOverlay: hsluv(0, 0, 0, 0.7)
 
     header:
-        color background: colors.mediumBackground
+        color background: colors.strongBackground
 
     button:
         color background: colors.strongBackground
@@ -306,7 +306,7 @@ mainPane:
 
 chat:
     roomHeader:
-        color background: colors.strongBackground
+        color background: controls.header.background
         color name:       colors.text
         color topic:      colors.dimText