Show track numbers

src/mpd.rs

@@ -25,6 +25,7 @@ pub struct QueueItem {
 #[derive(Debug)]
 pub enum Entry {
     Song {
+        track: Option<i32>,
         name: String,
         artist: String,
         path: String,
@@ -272,6 +273,7 @@ impl Mpd {
             .flat_map(|prop| {
                 if let Some(file) = prop.get("file") {
                     Some(Entry::Song {
+                        track: prop.get("Track").and_then(|track| track.parse().ok()),
                         name: prop.get("Title").unwrap_or(&get_filename(file)).clone(),
                         artist: prop.get("Artist").unwrap_or(&String::new()).clone(),
                         path: file.to_string(),

static/style.css

@@ -225,6 +225,10 @@ ul.dir li .material-symbols-outlined {
   object-fit: cover;
 }
 
+.track {
+  margin-right: 0.75rem;
+}
+
 .player {
   width: 25rem;
   padding: 1rem 1rem 0;

templates/browser.html

@@ -48,7 +48,7 @@
 <ul class="dir" hx-boost="true" tabindex="-1">
   {% for entry in entries %}
   {% match entry %}
-  {% when mpd::Entry::Song with { name, path, artist } %}
+  {% when mpd::Entry::Song with { track, name, path, artist } %}
   <li 
     hx-post="/queue?path={{ path|urlencode }}"
     hx-trigger="click,keyup[key=='Enter']"
@@ -64,6 +64,11 @@
         alt="Album art"
       >
     </div>
+    {% if let Some(track) = track %}
+    <div class="track">
+      {{ track }}.
+    </div>
+    {% endif %}
     <div class="song">
       <div class="song__name">{{ name }}</div>
       <div class="song__artist">{{ artist }}</div>