Improve playlist page design

data/res/style.css

@@ -52,16 +52,8 @@
   border-radius: 12px;
 }
 
-.playlisttile .title {
-  font-weight: bold;
-}
-
-.playlisttile .subtitle {
-  font-size: smaller;
-}
-
 .playlisttile .parttitle {
-  font-size: smaller;
+  font-style: italic;
 }
 
 .program {

data/ui/playlist_page.blp

@@ -8,7 +8,7 @@ template $MusicusPlaylistPage : Adw.Bin {
     [top]
     Adw.HeaderBar {
       title-widget: Adw.WindowTitle {
-        title: _("Playlist");
+        title: _("Program");
       };
 
       [start]

data/ui/playlist_tile.blp

@@ -6,7 +6,7 @@ template $MusicusPlaylistTile : Gtk.Box {
 
   Adw.Bin {
     valign: end;
-    margin-bottom: 12;
+    margin-bottom: 14;
     width-request: 48;
 
     Gtk.Image playing_icon {
@@ -19,29 +19,38 @@ template $MusicusPlaylistTile : Gtk.Box {
     margin-end: 12;
     orientation: vertical;
     
-    Gtk.Label title_label {
+    Gtk.Label composers_label {
-      styles ["title"]
+      styles ["title-4"]
-      visible: false;
+      xalign: 0.0;
-      margin-top: 24;
-      halign: start;
       wrap: true;
+      visible: false;
+      margin-top: 32;
+    }
+
+    Gtk.Label work_label {
+      styles ["title-2"]
+      xalign: 0.0;
+      wrap: true;
+      visible: false;
+      margin-top: 32;
+      margin-bottom: 12;
     }
 
     Gtk.Label performances_label {
-      styles ["subtitle", "dim-label"]
+      xalign: 0.0;
-      visible: false;
-      halign: start;
       wrap: true;
+      visible: false;
+      margin-bottom: 12;
     }
 
     Gtk.Label part_title_label {
       styles ["parttitle"]
+      xalign: 0.0;
+      wrap: true;
       margin-top: 12;
       margin-bottom: 12;
       visible: false;
       margin-start: 24;
-      halign: start;
-      wrap: true;
     }
   }
 }

src/player.rs

@@ -219,12 +219,6 @@ impl MusicusPlayer {
             return;
         }
 
-        let title = format!(
-            "{}: {}",
-            recording.work.composers_string(),
-            recording.work.name.get(),
-        );
-
         let performances = recording.performers_string();
 
         let mut items = Vec::new();
@@ -232,7 +226,8 @@ impl MusicusPlayer {
         if tracks.len() == 1 {
             items.push(PlaylistItem::new(
                 true,
-                &title,
+                Some(&recording.work.composers_string()),
+                &recording.work.name.get(),
                 Some(&performances),
                 None,
                 &tracks[0].path,
@@ -259,7 +254,8 @@ impl MusicusPlayer {
 
             items.push(PlaylistItem::new(
                 true,
-                &title,
+                Some(&recording.work.composers_string()),
+                &recording.work.name.get(),
                 Some(&performances),
                 Some(&track_title(&first_track, 1)),
                 &first_track.path,
@@ -269,7 +265,8 @@ impl MusicusPlayer {
             for (index, track) in tracks.enumerate() {
                 items.push(PlaylistItem::new(
                     false,
-                    &title,
+                    Some(&recording.work.composers_string()),
+                    &recording.work.name.get(),
                     Some(&performances),
                     // track number = track index + 1 (first track) + 1 (zero based)
                     Some(&track_title(&track, index + 2)),

src/playlist_item.rs

@@ -17,7 +17,10 @@ mod imp {
         pub is_title: OnceCell<bool>,
 
         #[property(get, construct_only)]
-        pub title: OnceCell<String>,
+        pub composers: OnceCell<Option<String>>,
+
+        #[property(get, construct_only)]
+        pub work: OnceCell<String>,
 
         #[property(get, construct_only, nullable)]
         pub performers: OnceCell<Option<String>>,
@@ -49,7 +52,8 @@ glib::wrapper! {
 impl PlaylistItem {
     pub fn new(
         is_title: bool,
-        title: &str,
+        composers: Option<&str>,
+        work: &str,
         performers: Option<&str>,
         part_title: Option<&str>,
         path: impl AsRef<Path>,
@@ -57,7 +61,8 @@ impl PlaylistItem {
     ) -> Self {
         glib::Object::builder()
             .property("is-title", is_title)
-            .property("title", title)
+            .property("composers", composers)
+            .property("work", work)
             .property("performers", performers)
             .property("part-title", part_title)
             .property("path", path.as_ref())
@@ -66,7 +71,14 @@ impl PlaylistItem {
     }
 
     pub fn make_title(&self) -> String {
-        let mut title = self.title();
+        let mut title = String::new();
+
+        if let Some(composers) = self.composers() {
+            title.push_str(&composers);
+            title.push_str(": ");
+        }
+
+        title.push_str(&self.work());
 
         if let Some(part_title) = self.part_title() {
             title.push_str(": ");

src/playlist_tile.rs

@@ -11,7 +11,9 @@ mod imp {
         #[template_child]
         pub playing_icon: TemplateChild<gtk::Image>,
         #[template_child]
-        pub title_label: TemplateChild<gtk::Label>,
+        pub composers_label: TemplateChild<gtk::Label>,
+        #[template_child]
+        pub work_label: TemplateChild<gtk::Label>,
         #[template_child]
         pub performances_label: TemplateChild<gtk::Label>,
         #[template_child]
@@ -59,12 +61,19 @@ impl PlaylistTile {
 
         if let Some(item) = item {
             if item.is_title() {
-                imp.title_label.set_label(&item.title());
+                if let Some(composers) = item.composers() {
-                imp.title_label.set_visible(true);
+                    imp.composers_label.set_label(&composers);
+                    imp.composers_label.set_visible(true);
+                    imp.work_label.set_margin_top(3);
+                }
+
+                imp.work_label.set_label(&item.work());
+                imp.work_label.set_visible(true);
 
                 if let Some(performances) = item.performers() {
                     imp.performances_label.set_label(&performances);
                     imp.performances_label.set_visible(true);
+                    imp.work_label.set_margin_bottom(6);
                 }
             }