play queue experiment

src/style.css

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

src/ui/play_queue.blp

@@ -1,13 +1,19 @@
 using Gtk 4.0;
 
 template $UiPlayQueue: Box {
+  name: "play-queue";
+
   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 {

src/ui/play_queue_song.blp

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

src/ui/window.blp

@@ -39,8 +39,38 @@ template $UiWindow: Adw.ApplicationWindow {
           title: _("Play queue");
           icon-name: "media-playback-start";
 
-          child: $UiPlayQueue play_queue {
-            playbin: bind template.playbin;
+          child: Box {
+            name: "play-queue-page";
+            homogeneous: true;
+
+            Adw.Clamp {
+              halign: center;
+              maximum-size: 400;
+              width-request: 400;
+              margin-start: 24;
+              margin-end: 24;
+
+              Image {
+                valign: center;
+                styles [ "frame" ]
+                halign: center;
+                pixel-size: 400;
+                paintable: bind template.playing_cover_art;
+              }
+            }
+
+            $UiPlayQueue play_queue {
+              hexpand: true;
+              halign: fill;
+
+              margin-top: 48;
+              margin-bottom: 48;
+              margin-start: 24;
+              margin-end: 24;
+
+              styles [ "frame" ]
+              playbin: bind template.playbin;
+            }
           };
         }
       };