Add playlist view

data/res/style.css

@@ -34,4 +34,24 @@
   margin-top: 3px;
   margin-bottom: 3px;
   font-size: smaller;
+}
+
+.playlist {
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.playlist > row {
+  border-radius: 12px;
+}
+
+.playlisttile .title {
+  font-weight: bold;
+}
+
+.playlisttile .subtitle {
+  font-size: smaller;
+}
+
+.playlisttile .parttitle {
+  font-size: smaller;
 }

data/ui/playlist_page.blp

@@ -22,6 +22,15 @@ template $MusicusPlaylistPage : Adw.Bin {
       Adw.Clamp {
         maximum-size: 1000;
         tightening-threshold: 600;
+
+        Gtk.ListView playlist {
+          styles ["playlist", "background"]
+          margin-top: 12;
+          margin-bottom: 12;
+          margin-start: 12;
+          margin-end: 12;
+          single-click-activate: true;
+        }
       }
     }
   }

data/ui/playlist_tile.blp

@@ -0,0 +1,45 @@
+using Gtk 4.0;
+using Adw 1;
+
+template $MusicusPlaylistTile : Gtk.Box {
+  styles ["playlisttile"]
+
+  Adw.Bin {
+    width-request: 48;
+
+    Gtk.Image playing_icon {
+      visible: false;
+      icon-name: "media-playback-start-symbolic";
+    }
+  }
+
+  Gtk.Box {
+    margin-end: 12;
+    orientation: vertical;
+    
+    Gtk.Label title_label {
+      styles ["title"]
+      visible: false;
+      margin-top: 24;
+      halign: start;
+      wrap: true;
+    }
+
+    Gtk.Label performances_label {
+      styles ["subtitle", "dim-label"]
+      visible: false;
+      halign: start;
+      wrap: true;
+    }
+
+    Gtk.Label part_title_label {
+      styles ["parttitle"]
+      margin-top: 12;
+      margin-bottom: 12;
+      visible: false;
+      margin-start: 24;
+      halign: start;
+      wrap: true;
+    }
+  }
+}

data/ui/window.blp

@@ -16,13 +16,6 @@ template $MusicusWindow : Adw.ApplicationWindow {
           }
         };
       }
-       
-      Gtk.StackPage {
-        name: "playlist";
-        child: $MusicusPlaylistPage {
-          close => $hide_playlist() swapped;
-        };
-      }
     }
 
     [bottom]