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,30 +1,36 @@
 using Gtk 4.0;
+using Adw 1;
 
-template $UiPlayQueue: Box {
+template $UiPlayQueue: Adw.NavigationPage {
-  name: "play-queue";
+  title: _("Play queue");
 
-  ScrolledWindow {
+  Adw.ToolbarView {
-    hexpand: true;
+    [top]
-    vscrollbar-policy: always;
+    Adw.HeaderBar {
-    hscrollbar-policy: never;
+      Button {
+        icon-name: "edit-clear-all";
+        clicked => $on_clear ();
+        sensitive: bind template.can_clear_all;
+      }
+    }
 
-    ListView view {
+    ScrolledWindow {
-      show-separators: true;
+      ListView view {
-      single-click-activate: true;
+        show-separators: true;
+        single-click-activate: true;
 
-      styles [ "rich-list" ]
+        activate => $on_row_activated ();
 
-      activate => $on_row_activated ();
+        model: NoSelection {
+          model: bind template.playbin as <$Playbin>.play_queue;
+        };
 
-      model: NoSelection {
+        factory: SignalListItemFactory {
-        model: bind template.playbin as <$Playbin>.play_queue;
+          setup => $on_song_list_setup ();
-      };
+          bind => $on_song_list_bind ();
-
+          unbind => $on_song_list_unbind ();
-      factory: SignalListItemFactory {
+        };
-        setup => $on_song_list_setup ();
+      }
-        bind => $on_song_list_bind ();
-        unbind => $on_song_list_unbind ();
-      };
     }
   }
 }

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,70 +10,87 @@ template $UiWindow: Adw.ApplicationWindow {
     can-open: false; // broken in libadwaita
 
     [content]
-    Adw.ToolbarView {
+    Adw.OverlaySplitView {
       margin-bottom: bind bottom_sheet.bottom-bar-height;
 
-      [top]
+      vexpand: true;
-      Adw.HeaderBar {
-        [start]
-        Button {
-          icon-name: "media-playlist-shuffle";
-          sensitive: bind template.can_click_shuffle_all;
-          clicked => $shuffle_all ();
-        }
 
-        title-widget: Adw.ViewSwitcher {
+      [sidebar]
-          stack: stack;
+      Adw.NavigationPage {
-          policy: wide;
+        width-request: 100;
-        };
+        title: _("audrey");
 
-        [end]
+        Adw.ToolbarView {
-        Button {
+          [top]
-          icon-name: "applications-system";
+          Adw.HeaderBar {
-          clicked => $show_setup_dialog ();
+            show-title: false;
-        }
-      }
 
-      content: Adw.ViewStack stack {
+            [end]
-        Adw.ViewStackPage {
+            Button {
-          title: _("Play queue");
+              icon-name: "applications-system";
-          icon-name: "media-playback-start";
+              clicked => $show_setup_dialog ();
+            }
+          }
 
-          child: Box {
+          content: Box {
-            name: "play-queue-page";
+            orientation: vertical;
-            homogeneous: true;
 
-            Adw.Clamp {
+            ListBox sidebar {
-              halign: center;
+              styles [
-              maximum-size: 400;
+                "navigation-sidebar",
-              width-request: 400;
+              ]
-              margin-start: 24;
-              margin-end: 24;
 
-              Image {
+              row-activated => $on_sidebar_row_activated();
-                valign: center;
+
-                styles [ "frame" ]
+              ListBoxRow sidebar_play_queue {
-                halign: center;
+                Label {
-                pixel-size: 400;
+                  xalign: 0;
-                paintable: bind template.playing_cover_art;
+                  label: _("Play queue");
+                }
               }
             }
 
-            $UiPlayQueue play_queue {
+            Separator {}
-              hexpand: true;
-              halign: fill;
 
-              margin-top: 48;
+            ListBox {
-              margin-bottom: 48;
+              selection-mode: none;
-              margin-start: 24;
-              margin-end: 24;
 
-              styles [ "frame" ]
+              styles [
-              playbin: bind template.playbin;
+                "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;
             }
           };
         }
-      };
+      }
+
+      [content]
+      Stack stack {
+        StackPage {
+          name: "play_queue";
+          title: _("Play queue");
+
+          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,28 +92,33 @@ class Ui.Window : Adw.ApplicationWindow {
             this.playing_cover_art = null;
             this.song = null;
         });
+
+        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);
+            }, (obj, res) => {
+                try {
+                    api.get_random_songs.end (res);
+                } catch (Error e) {
+                    error ("could not get random songs: %s", e.message);
+                }
+                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);
     }
-
-    public bool can_click_shuffle_all { get; private set; default = false; }
-
-    [GtkCallback] private void shuffle_all () {
-        this.can_click_shuffle_all = false;
-        this.playbin.clear ();
-        api.get_random_songs.begin (null, (song) => {
-            this.playbin.append_track (song);
-        }, (obj, res) => {
-            try {
-                api.get_random_songs.end (res);
-            } catch (Error e) {
-                error ("could not get random songs: %s", e.message);
-            }
-            this.can_click_shuffle_all = true;
-
-            this.playbin.select_track (0);
-        });
-    }
 }