ui: Use AdwAdaptiveState to manage adaptive UI

AdwAdaptiveState is a new utility that is part of
AdwWindow and AdwApplicationWindow. It allows for arbitrary
changes at specific breakpoints, meaning that we can move,
show, and hide widgets normally without any undefined behavior
or flickering.

AdwAdaptiveState allows us to remove the GtkRevealers that we
used previously, as there's only a simple crossfade transition
between states now.

3 files changed, 108 insertions, 89 deletions

diff --git a/build-aux/flatpak/org.gnome.Nautilus.json b/build-aux/flatpak/org.gnome.Nautilus.json
index a41ca82a6..0bf549546 100644
--- a/build-aux/flatpak/org.gnome.Nautilus.json
+++ b/build-aux/flatpak/org.gnome.Nautilus.json
@@ -152,6 +152,39 @@
       ]
     },
     {
+        "name" : "libsass",
+        "buildsystem" : "meson",
+        "sources" : [
+            {
+              "type" : "git",
+              "url" : "https://github.com/lazka/libsass.git",
+              "branch" : "meson"
+            }
+        ]
+    },
+    {
+        "name" : "sassc",
+        "buildsystem" : "meson",
+        "sources" : [
+            {
+              "type" : "git",
+              "url" : "https://github.com/lazka/sassc.git",
+              "branch" : "meson"
+            }
+        ]
+    },
+    {
+        "name" : "libadwaita",
+        "buildsystem" : "meson",
+        "sources" : [
+            {
+                "type" : "git",
+                "url" : "https://gitlab.gnome.org/GNOME/libadwaita.git",
+                "branch" : "wip/exalm/adaptive-states"
+            }
+        ]
+    },
+    {
       "buildsystem": "meson",
       "builddir": true,
       "name": "nautilus",
diff --git a/src/resources/ui/nautilus-toolbar.ui b/src/resources/ui/nautilus-toolbar.ui
index 9bfef3960..ae80b95cb 100644
--- a/src/resources/ui/nautilus-toolbar.ui
+++ b/src/resources/ui/nautilus-toolbar.ui
@@ -118,105 +118,81 @@
           </object>
         </child>
         <child type="start">
+          <object class="GtkToggleButton" id="show_sidebar_button">
+            <property name="visible" bind-source="NautilusToolbar" bind-property="show-sidebar-button" bind-flags="bidirectional|sync-create"/>
+            <property name="active" bind-source="NautilusToolbar" bind-property="sidebar-button-active" bind-flags="bidirectional|sync-create"/>
+            <property name="tooltip-text" translatable="yes">Show sidebar</property>
+            <property name="icon-name">sidebar-show-symbolic</property>
+          </object>
+        </child>
+        <child type="start">
           <object class="GtkBox">
+            <property name="visible" bind-source="NautilusToolbar" bind-property="show-toolbar-children" bind-flags="sync-create"/>
+            <property name="spacing">6</property>
             <child>
-              <object class="GtkRevealer">
-                <property name="reveal-child" bind-source="NautilusToolbar" bind-property="show-sidebar-button" bind-flags="bidirectional|sync-create"/>
-                <property name="transition-type">slide-right</property>
-                <property name="child">
-                  <object class="GtkToggleButton" id="show_sidebar_button">
-                    <property name="active" bind-source="NautilusToolbar" bind-property="sidebar-button-active" bind-flags="bidirectional|sync-create"/>
-                    <property name="tooltip-text" translatable="yes">Show sidebar</property>
-                    <property name="icon-name">sidebar-show-symbolic</property>
-                  </object>
-                </property>
+              <object class="NautilusHistoryControls">
+                <property name="window-slot" bind-source="NautilusToolbar" bind-property="window-slot" bind-flags="sync-create"/>
               </object>
             </child>
             <child>
-              <object class="GtkRevealer">
-                <property name="reveal-child" bind-source="NautilusToolbar" bind-property="show-toolbar-children" bind-flags="sync-create"/>
-                <property name="transition-type">slide-right</property>
-                <property name="child">
-                  <object class="GtkBox">
-                    <property name="spacing">6</property>
-                    <child>
-                      <object class="NautilusHistoryControls">
-                        <property name="window-slot" bind-source="NautilusToolbar" bind-property="window-slot" bind-flags="sync-create"/>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkSeparator">
-                        <style>
-                          <class name="spacer"/>
-                        </style>
-                      </object>
-                    </child>
-                  </object>
-                </property>
+              <object class="GtkSeparator">
+                <style>
+                  <class name="spacer"/>
+                </style>
               </object>
             </child>
           </object>
         </child>
         <child type="end">
+          <object class="GtkMenuButton" id="app_button">
+            <property name="tooltip-text" translatable="yes">Main Menu</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <property name="icon_name">open-menu-symbolic</property>
+            <property name="popover">
+              <object class="GtkPopoverMenu">
+                <property name="menu-model">app_menu</property>
+                <child type="zoom-out">
+                  <object class="GtkButton">
+                    <property name="icon-name">zoom-out-symbolic</property>
+                    <property name="action-name">view.zoom-out</property>
+                    <property name="tooltip-text" translatable="yes">Zoom out</property>
+                    <style>
+                      <class name="flat"/>
+                    </style>
+                  </object>
+                </child>
+                <child type="zoom-in">
+                  <object class="GtkButton">
+                    <property name="icon-name">zoom-in-symbolic</property>
+                    <property name="action-name">view.zoom-in</property>
+                    <property name="tooltip-text" translatable="yes">Zoom in</property>
+                    <style>
+                      <class name="flat"/>
+                    </style>
+                  </object>
+                </child>
+              </object>
+            </property>
+          </object>
+        </child>
+        <child type="end">
           <object class="GtkBox">
+            <property name="visible" bind-source="NautilusToolbar" bind-property="show-toolbar-children" bind-flags="sync-create"/>
+            <property name="spacing">6</property>
             <child>
-              <object class="GtkRevealer">
-                <property name="reveal-child" bind-source="NautilusToolbar" bind-property="show-toolbar-children" bind-flags="sync-create"/>
-                <property name="transition-type">slide-left</property>
-                <property name="child">
-                  <object class="GtkBox">
-                    <property name="spacing">6</property>
-                    <property name="margin-end">6</property>
-                    <child>
-                      <object class="GtkSeparator">
-                        <style>
-                          <class name="spacer"/>
-                        </style>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="NautilusProgressIndicator"/>
-                    </child>
-                    <child>
-                      <object class="NautilusViewControls">
-                        <property name="window-slot" bind-source="NautilusToolbar" bind-property="window-slot" bind-flags="sync-create"/>
-                      </object>
-                    </child>
-                  </object>
-                </property>
+              <object class="GtkSeparator">
+                <style>
+                  <class name="spacer"/>
+                </style>
               </object>
             </child>
             <child>
-              <object class="GtkMenuButton" id="app_button">
-                <property name="tooltip-text" translatable="yes">Main Menu</property>
-                <property name="halign">center</property>
-                <property name="valign">center</property>
-                <property name="icon_name">open-menu-symbolic</property>
-                <property name="popover">
-                  <object class="GtkPopoverMenu">
-                    <property name="menu-model">app_menu</property>
-                    <child type="zoom-out">
-                      <object class="GtkButton">
-                        <property name="icon-name">zoom-out-symbolic</property>
-                        <property name="action-name">view.zoom-out</property>
-                        <property name="tooltip-text" translatable="yes">Zoom out</property>
-                        <style>
-                          <class name="flat"/>
-                        </style>
-                      </object>
-                    </child>
-                    <child type="zoom-in">
-                      <object class="GtkButton">
-                        <property name="icon-name">zoom-in-symbolic</property>
-                        <property name="action-name">view.zoom-in</property>
-                        <property name="tooltip-text" translatable="yes">Zoom in</property>
-                        <style>
-                          <class name="flat"/>
-                        </style>
-                      </object>
-                    </child>
-                  </object>
-                </property>
+              <object class="NautilusProgressIndicator"/>
+            </child>
+            <child>
+              <object class="NautilusViewControls">
+                <property name="window-slot" bind-source="NautilusToolbar" bind-property="window-slot" bind-flags="sync-create"/>
               </object>
             </child>
           </object>
diff --git a/src/resources/ui/nautilus-window.ui b/src/resources/ui/nautilus-window.ui
index 31afae73a..1af126399 100644
--- a/src/resources/ui/nautilus-window.ui
+++ b/src/resources/ui/nautilus-window.ui
@@ -38,6 +38,8 @@
     </section>
   </menu>
   <template class="NautilusWindow" parent="AdwApplicationWindow">
+    <property name="width-request">360</property>
+    <property name="height-request">380</property>
     <property name="show-menubar">False</property>
     <property name="title" translatable="yes">_Files</property>
     <child>
@@ -47,15 +49,15 @@
             <property name="orientation">vertical</property>
             <child>
               <object class="NautilusToolbar" id="toolbar">
-                <property name="show-sidebar-button" bind-source="content_flap" bind-property="folded" bind-flags="sync-create"/>
+                <property name="show-toolbar-children">True</property>
                 <property name="sidebar-button-active" bind-source="content_flap" bind-property="reveal-flap" bind-flags="bidirectional|sync-create"/>
-                <property name="show-toolbar-children" bind-source="content_flap" bind-property="folded" bind-flags="sync-create|invert-boolean"/>
                 <property name="window-slot" bind-source="NautilusWindow" bind-property="active-slot" bind-flags="sync-create"/>
               </object>
             </child>
             <child>
               <object class="AdwFlap" id="content_flap">
                 <property name="swipe-to-close" bind-source="content_flap" bind-property="folded" bind-flags="sync-create"/>
+                <property name="fold-policy">never</property>
                 <child type="flap">
                   <object class="NautilusGtkPlacesSidebar" id="places_sidebar">
                     <property name="vexpand">True</property>
@@ -73,7 +75,6 @@
                 <child>
                   <object class="GtkBox">
                     <property name="orientation">vertical</property>
-                    <property name="width-request">360</property>
                     <child>
                       <object class="AdwTabBar" id="tab_bar">
                         <property name="view">tab_view</property>
@@ -89,8 +90,8 @@
               </object>
             </child>
             <child>
-              <object class="GtkActionBar">
-                <property name="revealed" bind-source="content_flap" bind-property="folded" bind-flags="sync-create"/>
+              <object class="GtkActionBar" id="action_bar">
+                <property name="revealed">False</property>
                 <child type="start">
                   <object class="NautilusHistoryControls">
                     <property name="window-slot" bind-source="NautilusWindow" bind-property="active-slot" bind-flags="sync-create"/>
@@ -115,5 +116,14 @@
         </property>
       </object>
     </child>
+    <child>
+      <object class="AdwAdaptiveState" id="narrow_state">
+        <condition type="max-width">600</condition>
+        <setter object="content_flap" property="fold-policy">always</setter>
+        <setter object="toolbar" property="show-sidebar-button">True</setter>
+        <setter object="toolbar" property="show-toolbar-children">False</setter>
+        <setter object="action_bar" property="revealed">True</setter>
+      </object>
+    </child>
   </template>
 </interface>