[gnome-characters/bilelmoussaoui/ui-cleanup: 4/8] window: split header bars

[Bilal Elmoussaoui <bilelmoussaoui src gnome org>]

commit 55ddbe28b785f90dc097bcc1f1f5605829c05653
Author: Bilal Elmoussaoui <bil elmoussaoui gmail com>
Date:   Thu Feb 11 21:29:01 2021 +0100

    window: split header bars

 data/mainwindow.ui | 154 +++++++++++++++++++++++++++++------------------------
 src/window.js      |  10 ++--
 2 files changed, 90 insertions(+), 74 deletions(-)
---
diff --git a/data/mainwindow.ui b/data/mainwindow.ui
index d3bb1e8..ed32ac3 100644
--- a/data/mainwindow.ui
+++ b/data/mainwindow.ui
@@ -4,115 +4,116 @@
   <template class="Gjs_MainWindow" parent="HdyApplicationWindow">
     <property name="height-request">660</property>
     <child>
-      <object class="GtkBox">
-        <property name="orientation">vertical</property>
+      <object class="HdyLeaflet">
         <property name="visible">True</property>
         <child>
-          <object class="GtkHeaderBar" id="main-headerbar">
-            <property name="can_focus">False</property>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
             <property name="visible">True</property>
-            <property name="show-close-button">True</property>
-            <property name="has-subtitle">False</property>
-            <property name="title" translatable="yes">Current page</property>
             <child>
-              <object class="GtkToggleButton" id="search-active-button">
-                <property name="can_focus">True</property>
+              <object class="HdyHeaderBar" id="sidebar-headerbar">
                 <property name="visible">True</property>
-                <style>
-                  <class name="image-button"/>
-                </style>
+                <property name="title" translatable="yes">Characters</property>
                 <child>
-                  <object class="GtkImage" id="search-button-image">
+                  <object class="GtkToggleButton" id="search-active-button">
+                    <property name="can_focus">True</property>
                     <property name="visible">True</property>
-                    <property name="icon-name">edit-find-symbolic</property>
+                    <style>
+                      <class name="image-button"/>
+                    </style>
+                    <child>
+                      <object class="GtkImage" id="search-button-image">
+                        <property name="visible">True</property>
+                        <property name="icon-name">edit-find-symbolic</property>
+                      </object>
+                    </child>
                   </object>
                 </child>
               </object>
-              <packing>
-                <property name="pack-type">start</property>
-              </packing>
             </child>
             <child>
-              <object class="GtkButton" id="back-button">
-                <property name="can_focus">True</property>
-                <property name="visible">False</property>
-                <style>
-                  <class name="image-button"/>
-                </style>
+              <object class="GtkBox" id="sidebar">
+                <property name="visible">True</property>
+                <property name="hexpand">False</property>
+                <property name="vexpand">True</property>
+                <property name="orientation">vertical</property>
                 <child>
-                  <object class="GtkImage" id="back-button-image">
+                  <object class="GtkSearchBar" id="search-bar">
                     <property name="visible">True</property>
-                    <property name="icon-name">go-previous-symbolic</property>
+                    <property name="halign">fill</property>
+                    <child>
+                      <object class="GtkSearchEntry" id="search-entry">
+                        <property name="can_focus">True</property>
+                        <property name="visible">True</property>
+                        <property name="halign">fill</property>
+                      </object>
+                    </child>
                   </object>
                 </child>
               </object>
-              <packing>
-                <property name="pack-type">start</property>
-              </packing>
             </child>
+          </object>
+        </child>
+        <child>
+          <object class="HdyWindowHandle" id="header-separator">
+            <property name="visible">True</property>
             <child>
-              <object class="GtkMenuButton" id="menu-button">
-                <property name="can_focus">False</property>
+              <object class="GtkSeparator">
                 <property name="visible">True</property>
-                <property name="use_popover">True</property>
+                <property name="orientation">vertical</property>
                 <style>
-                  <class name="image-button"/>
+                  <class name="sidebar"/>
                 </style>
-                <child>
-                  <object class="GtkImage" id="menu-button-image">
-                    <property name="visible">True</property>
-                    <property name="icon-name">open-menu-symbolic</property>
-                  </object>
-                </child>
               </object>
-              <packing>
-                <property name="pack-type">end</property>
-              </packing>
             </child>
           </object>
         </child>
         <child>
-          <object class="GtkGrid" id="main-grid">
-            <property name="can_focus">False</property>
-            <property name="visible">True</property>
+          <object class="GtkBox" id="container">
             <property name="orientation">vertical</property>
-            <property name="valign">fill</property>
+            <property name="visible">True</property>
             <child>
-              <object class="GtkBox" id="main-hbox">
-                <property name="can_focus">False</property>
+              <object class="HdyHeaderBar" id="main-headerbar">
                 <property name="visible">True</property>
-                <property name="orientation">horizontal</property>
+                <property name="show-close-button">True</property>
+                <property name="has-subtitle">False</property>
+                <property name="title" translatable="yes">Current page</property>
                 <child>
-                  <object class="GtkGrid" id="sidebar-grid">
-                    <property name="can_focus">False</property>
-                    <property name="visible">True</property>
-                    <property name="hexpand">False</property>
-                    <property name="vexpand">True</property>
-                    <property name="orientation">vertical</property>
+                  <object class="GtkButton" id="back-button">
+                    <property name="can_focus">True</property>
+                    <property name="visible">False</property>
+                    <style>
+                      <class name="image-button"/>
+                    </style>
                     <child>
-                      <object class="GtkSearchBar" id="search-bar">
+                      <object class="GtkImage" id="back-button-image">
                         <property name="visible">True</property>
-                        <property name="halign">fill</property>
-                        <child>
-                          <object class="GtkSearchEntry" id="search-entry">
-                            <property name="can_focus">True</property>
-                            <property name="halign">fill</property>
-                          </object>
-                        </child>
+                        <property name="icon-name">go-previous-symbolic</property>
                       </object>
                     </child>
-                    <child>
-                      <placeholder/>
-                    </child>
                   </object>
+                  <packing>
+                    <property name="pack-type">start</property>
+                  </packing>
                 </child>
                 <child>
-                  <object class="GtkVSeparator">
+                  <object class="GtkMenuButton" id="menu-button">
+                    <property name="can_focus">False</property>
                     <property name="visible">True</property>
+                    <property name="use_popover">True</property>
+                    <style>
+                      <class name="image-button"/>
+                    </style>
+                    <child>
+                      <object class="GtkImage" id="menu-button-image">
+                        <property name="visible">True</property>
+                        <property name="icon-name">open-menu-symbolic</property>
+                      </object>
+                    </child>
                   </object>
-                </child>
-                <child>
-                  <placeholder/>
+                  <packing>
+                    <property name="pack-type">end</property>
+                  </packing>
                 </child>
               </object>
             </child>
@@ -121,4 +122,19 @@
       </object>
     </child>
   </template>
+  <object class="GtkSizeGroup">
+    <property name="mode">vertical</property>
+    <widgets>
+      <widget name="sidebar-headerbar"/>
+      <widget name="main-headerbar"/>
+      <widget name="header-separator"/>
+    </widgets>
+  </object>
+  <object class="HdyHeaderGroup">
+    <headerbars>
+      <headerbar name="sidebar-headerbar"/>
+      <headerbar name="main-headerbar"/>
+    </headerbars>
+  </object>
+
 </interface>
diff --git a/src/window.js b/src/window.js
index 5614223..865cdba 100644
--- a/src/window.js
+++ b/src/window.js
@@ -40,8 +40,7 @@ var MainWindow = GObject.registerClass({
     Template: 'resource:///org/gnome/Characters/mainwindow.ui',
     InternalChildren: ['main-headerbar', 'search-active-button',
                        'search-bar', 'search-entry', 'back-button',
-                       'menu-button',
-                       'main-grid', 'main-hbox', 'sidebar-grid'],
+                       'menu-button', 'container', 'sidebar'],
     Properties: {
         'search-active': GObject.ParamSpec.boolean(
             'search-active', '', '',
@@ -108,19 +107,20 @@ var MainWindow = GObject.registerClass({
 
         this._categoryListView =
             new CategoryList.CategoryListView({ vexpand: true });
+        this._categoryListView.show_all();
         let scroll = new Gtk.ScrolledWindow({
             hscrollbar_policy: Gtk.PolicyType.NEVER,
             hexpand: false,
+            visible: true,
         });
         scroll.add(this._categoryListView);
-        this._sidebar_grid.add(scroll);
+        this._sidebar.add(scroll);
 
         this._mainView = new MainView({
             categoryListView: this._categoryListView
         });
 
-        this._main_hbox.pack_start(this._mainView, true, true, 0);
-        this._main_grid.show_all();
+        this._container.pack_start(this._mainView, true, true, 0);
 
         // Due to limitations of gobject-introspection wrt GdkEvent
         // and GdkEventKey, this needs to be a signal handler