src/style.css

@@ -1,11 +1,3 @@
-/*
-#play-queue-page {
-  background-image: linear-gradient(
-    var(--window-bg-color),
-    var(--accent-bg-color));
-}
-*/
-
 #seek-scale slider {  
   margin: 0px;
   opacity: 0%;
@@ -19,10 +11,6 @@
   min-height: 15px;
 }
 
-#play-queue .playing .title-label {
+.playing .title-label {
   font-weight: bold;
 }
-
-.drag-handle {
-  color: color-mix(in srgb, currentColor 40%, transparent);
-}

src/ui/play_queue.blp

@@ -1,19 +1,24 @@
 using Gtk 4.0;
+using Adw 1;
 
-template $UiPlayQueue: Box {
-  name: "play-queue";
+template $UiPlayQueue: Adw.NavigationPage {
+  title: _("Play queue");
+
+  Adw.ToolbarView {
+    [top]
+    Adw.HeaderBar {
+      Button {
+        icon-name: "edit-clear-all";
+        clicked => $on_clear ();
+        sensitive: bind template.can_clear_all;
+      }
+    }
 
     ScrolledWindow {
-    hexpand: true;
-    vscrollbar-policy: always;
-    hscrollbar-policy: never;
-
       ListView view {
         show-separators: true;
         single-click-activate: true;
 
-      styles [ "rich-list" ]
-
         activate => $on_row_activated ();
 
         model: NoSelection {
@@ -28,3 +33,4 @@ template $UiPlayQueue: Box {
       }
     }
   }
+}

src/ui/play_queue.vala

@@ -108,7 +108,7 @@ class Ui.PlayQueueSong : Gtk.ListBoxRow {
 }
 
 [GtkTemplate (ui = "/eu/callcc/audrey/ui/play_queue.ui")]
-public class Ui.PlayQueue : Gtk.Box {
+public class Ui.PlayQueue : Adw.NavigationPage {
     private Playbin _playbin;
     public Playbin playbin {
         get { return _playbin; }
@@ -118,14 +118,17 @@ public class Ui.PlayQueue : Gtk.Box {
 
             _playbin.play_queue.items_changed.connect (this.on_store_items_changed);
             this.can_clear_all = _playbin.play_queue.get_n_items () > 0;
+
+            _playbin.notify["play-queue-position"].connect (() => {
+            });
         }
     }
 
     public bool can_clear_all { get; private set; }
 
-    /*[GtkCallback] private void on_clear () {
+    [GtkCallback] private void on_clear () {
         this.playbin.clear ();
-    }*/
+    }
 
     private void on_store_items_changed (GLib.ListModel store, uint position, uint removed, uint added) {
         this.can_clear_all = store.get_n_items () > 0;

src/ui/play_queue_song.blp

@@ -2,7 +2,6 @@ using Gtk 4.0;
 
 template $UiPlayQueueSong: ListBoxRow {
   selectable: false;
-  activatable: false; // prevents double background change on focus
 
   Box {
     focusable: false;

src/ui/window.blp

@@ -10,22 +10,20 @@ template $UiWindow: Adw.ApplicationWindow {
     can-open: false; // broken in libadwaita
 
     [content]
-    Adw.ToolbarView {
+    Adw.OverlaySplitView {
       margin-bottom: bind bottom_sheet.bottom-bar-height;
 
+      vexpand: true;
+
+      [sidebar]
+      Adw.NavigationPage {
+        width-request: 100;
+        title: _("audrey");
+
+        Adw.ToolbarView {
           [top]
           Adw.HeaderBar {
-        [start]
-        Button {
-          icon-name: "media-playlist-shuffle";
-          sensitive: bind template.can_click_shuffle_all;
-          clicked => $shuffle_all ();
-        }
-
-        title-widget: Adw.ViewSwitcher {
-          stack: stack;
-          policy: wide;
-        };
+            show-title: false;
 
             [end]
             Button {
@@ -34,46 +32,65 @@ template $UiWindow: Adw.ApplicationWindow {
             }
           }
 
-      content: Adw.ViewStack stack {
-        Adw.ViewStackPage {
-          title: _("Play queue");
-          icon-name: "media-playback-start";
+          content: Box {
+            orientation: vertical;
 
-          child: Box {
-            name: "play-queue-page";
-            homogeneous: true;
+            ListBox sidebar {
+              styles [
+                "navigation-sidebar",
+              ]
 
-            Adw.Clamp {
-              halign: center;
-              maximum-size: 400;
-              width-request: 400;
-              margin-start: 24;
-              margin-end: 24;
+              row-activated => $on_sidebar_row_activated();
 
-              Image {
-                valign: center;
-                styles [ "frame" ]
-                halign: center;
-                pixel-size: 400;
+              ListBoxRow sidebar_play_queue {
+                Label {
+                  xalign: 0;
+                  label: _("Play queue");
+                }
+              }
+            }
+
+            Separator {}
+
+            ListBox {
+              selection-mode: none;
+
+              styles [
+                "navigation-sidebar",
+              ]
+
+              Adw.ButtonRow shuffle_all_tracks {
+                title: _("Shuffle all tracks");
+                start-icon-name: "media-playlist-shuffle";
+                sensitive: false;
+              }
+            }
+
+            Separator {
+              styles [
+                "spacer",
+              ]
+              vexpand: true;
+            }
+
+            Picture {
               paintable: bind template.playing_cover_art;
             }
+          };
+        }
       }
 
-            $UiPlayQueue play_queue {
-              hexpand: true;
-              halign: fill;
+      [content]
+      Stack stack {
+        StackPage {
+          name: "play_queue";
+          title: _("Play queue");
 
-              margin-top: 48;
-              margin-bottom: 48;
-              margin-start: 24;
-              margin-end: 24;
-
-              styles [ "frame" ]
+          child: $UiPlayQueue play_queue {
             playbin: bind template.playbin;
-            }
           };
         }
-      };
+      }
     }
 
     [bottom-bar]

src/ui/window.vala

@@ -1,8 +1,12 @@
 [GtkTemplate (ui = "/eu/callcc/audrey/ui/window.ui")]
 class Ui.Window : Adw.ApplicationWindow {
+    [GtkChild] private unowned Gtk.ListBox sidebar;
+    [GtkChild] private unowned Gtk.ListBoxRow sidebar_play_queue;
+    [GtkChild] private unowned Gtk.Stack stack;
+
     [GtkChild] public unowned Ui.PlayQueue play_queue;
     [GtkChild] public unowned Ui.Playbar playbar;
-    //[GtkChild] public unowned Adw.ButtonRow shuffle_all_tracks;
+    [GtkChild] public unowned Adw.ButtonRow shuffle_all_tracks;
 
     private Setup setup;
 
@@ -75,10 +79,11 @@ class Ui.Window : Adw.ApplicationWindow {
         this.setup.connected.connect ((api) => {
             this.api = api;
             this.playbin.api = api;
-            this.can_click_shuffle_all = true;
         });
         this.setup.load ();
 
+        this.sidebar.select_row (this.sidebar.get_row_at_index (0));
+
         this.playbin.new_track.connect (() => {
             this.now_playing (this.playbin.play_queue.get_item (this.playbin.play_queue_position) as Subsonic.Song);
         });
@@ -87,16 +92,10 @@ class Ui.Window : Adw.ApplicationWindow {
             this.playing_cover_art = null;
             this.song = null;
         });
-    }
 
-    [GtkCallback] private void show_setup_dialog () {
-        this.setup.present (this);
-    }
-
-    public bool can_click_shuffle_all { get; private set; default = false; }
-
-    [GtkCallback] private void shuffle_all () {
-        this.can_click_shuffle_all = false;
+        this.shuffle_all_tracks.sensitive = true;
+        this.shuffle_all_tracks.activated.connect (() => {
+            this.shuffle_all_tracks.sensitive = false;
             this.playbin.clear ();
             api.get_random_songs.begin (null, (song) => {
                 this.playbin.append_track (song);
@@ -106,9 +105,20 @@ class Ui.Window : Adw.ApplicationWindow {
                 } catch (Error e) {
                     error ("could not get random songs: %s", e.message);
                 }
-            this.can_click_shuffle_all = true;
+                this.shuffle_all_tracks.sensitive = true;
 
                 this.playbin.select_track (0);
             });
+        });
+    }
+
+    [GtkCallback] private void on_sidebar_row_activated (Gtk.ListBoxRow row) {
+        if (row == this.sidebar_play_queue) {
+            this.stack.set_visible_child_name("play_queue");
+        }
+    }
+
+    [GtkCallback] private void show_setup_dialog () {
+        this.setup.present (this);
     }
 }