[polari] mainWindow: Make layout adaptive

[Marge Bot <marge-bot src gnome org>]

commit c51ad7aecdd9e5331187dcc33135129845a21bb8
Author: Florian Müllner <fmuellner gnome org>
Date:   Fri Mar 18 15:10:08 2022 +0100

    mainWindow: Make layout adaptive
    
    While we're still quite far from being truly usable on mobile, we
    can at least adapt the main layout:
     - use a leaflet as top-level container
     - navigate between sidebar/chat area as necessary
     - show all titlebar decorations when folded
    
    Part-of: <https://gitlab.gnome.org/GNOME/polari/-/merge_requests/250>

 data/resources/main-window.ui | 24 ++++++++++++++++++++----
 src/mainWindow.js             |  6 ++++++
 2 files changed, 26 insertions(+), 4 deletions(-)
---
diff --git a/data/resources/main-window.ui b/data/resources/main-window.ui
index a59c759f..4b50773a 100644
--- a/data/resources/main-window.ui
+++ b/data/resources/main-window.ui
@@ -39,14 +39,16 @@
     <child>
       <object class="AdwToastOverlay" id="overlay">
         <child>
-          <object class="GtkBox">
+          <object class="AdwLeaflet" id="mainLeaflet">
             <child>
               <object class="GtkBox">
                 <property name="orientation">vertical</property>
                 <child>
                   <object class="AdwHeaderBar" id="titlebarLeft">
                     <property name="hexpand">False</property>
-                    <property name="show-end-title-buttons">False</property>
+                    <binding name="show-end-title-buttons">
+                      <lookup name="folded">mainLeaflet</lookup>
+                    </binding>
                     <property name="title-widget">
                       <object class="GtkLabel"/>
                     </property>
@@ -107,7 +109,12 @@
               </object>
             </child>
             <child>
-              <object class="GtkSeparator"/>
+              <object class="AdwLeafletPage">
+                <property name="navigatable">False</property>
+                <property name="child">
+                  <object class="GtkSeparator"/>
+                </property>
+              </object>
             </child>
             <child>
               <object class="GtkBox">
@@ -115,7 +122,9 @@
                 <property name="hexpand">True</property>
                 <child>
                   <object class="AdwHeaderBar" id="titlebarRight">
-                    <property name="show-start-title-buttons">False</property>
+                    <binding name="show-start-title-buttons">
+                      <lookup name="folded">mainLeaflet</lookup>
+                    </binding>
                     <!-- Use a custom title widget to enable markup for subtitles
                          (for URLs in channel topics); other than that, we want
                          the default GtkHeaderBar behavior, e.g. the subtitle may
@@ -190,6 +199,13 @@
                         </child>
                       </object>
                     </property>
+                    <child type="start">
+                      <object class="GtkButton" id="backButton">
+                        <property name="icon-name">go-previous-symbolic</property>
+                        <property name="visible" bind-source="mainLeaflet"
+                                  bind-property="folded" bind-flags="sync-create"/>
+                      </object>
+                    </child>
                     <child type="end">
                       <object class="GtkToggleButton" id="showUserListButton">
                         <property name="focus-on-click">False</property>
diff --git a/src/mainWindow.js b/src/mainWindow.js
index 5454ce7b..ee3751a1 100644
--- a/src/mainWindow.js
+++ b/src/mainWindow.js
@@ -79,7 +79,9 @@ export default GObject.registerClass(
 class MainWindow extends Adw.ApplicationWindow {
     static [Gtk.template] = 'resource:///org/gnome/Polari/ui/main-window.ui';
     static [Gtk.internalChildren] = [
+        'backButton',
         'joinButton',
+        'mainLeaflet',
         'showUserListButton',
         'userListPopover',
         'roomListRevealer',
@@ -138,6 +140,10 @@ class MainWindow extends Adw.ApplicationWindow {
 
         this._roomStack.connect('notify::view-height',
             () => this.notify('view-height'));
+        this._roomStack.connect('notify::visible-child',
+            () => this._mainLeaflet.navigate(Adw.NavigationDirection.FORWARD));
+        this._backButton.connect('clicked',
+            () => this._mainLeaflet.navigate(Adw.NavigationDirection.BACKWARD));
 
         this._accountsMonitor = AccountsMonitor.getDefault();
         this._accountsChangedId = this._accountsMonitor.connect(