Add button to remove song from queue

src/main.rs

@@ -122,8 +122,22 @@ async fn post_queue(req: tide::Request<()>) -> tide::Result {
     Ok("".into())
 }
 
-async fn delete_queue(_req: tide::Request<()>) -> tide::Result {
-    mpd::connect()?.clear()?;
+#[derive(Deserialize)]
+struct DeleteQueueQuery {
+    #[serde(default)]
+    id: Option<u32>,
+}
+
+async fn delete_queue(req: tide::Request<()>) -> tide::Result {
+    let query: DeleteQueueQuery = req.query()?;
+
+    let mut mpd = mpd::connect()?;
+    if let Some(id) = query.id {
+        mpd.deleteid(id)?;
+    } else {
+        mpd.clear()?;
+    }
+
     Ok("".into())
 }
 

src/mpd.rs

@@ -55,6 +55,7 @@ pub fn ls(path: &str) -> anyhow::Result<Vec<Entry>> {
 }
 
 pub struct QueueItem {
+    pub id: u32,
     pub file: String,
     pub title: String,
     pub artist: Option<String>,
@@ -70,6 +71,7 @@ pub fn playlist() -> anyhow::Result<Vec<QueueItem>> {
         .queue()?
         .into_iter()
         .map(|song| QueueItem {
+            id: song.place.unwrap().id,
             file: song.file.clone(),
             title: song.title.as_ref().unwrap_or(&song.file).clone(),
             artist: song.artist.clone(),

static/style.css

@@ -108,12 +108,20 @@ ul {
 .queue ul .metadata {
   flex: 1;
 }
+
+.queue ul .metadata * {
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
 .queue ul .song__name {
   overflow: hidden;
   display: -webkit-box;
-  -webkit-line-clamp: 2; /* number of lines to show */
-  line-clamp: 2; 
-  -webkit-box-orient: vertical;
+}
+
+.queue ul li:not(:hover) .remove {
+  display: none;
 }
 
 .browser .header {
@@ -134,12 +142,8 @@ ul {
   margin-right: 1.0rem;
 }
 
-ul.breadcrumb {
-  display: flex;
-  flex-wrap: wrap;
-  list-style: none;
-}
-@media (prefers-contrast: more) {
+ul.breadcrumb {  position: relative;
+  rast: more) {
   ul.breadcrumb {
     background-color: black;
     border: 2px solid white;
@@ -187,14 +191,20 @@ ul.dir li .material-symbols-outlined {
 
 .albumart {
   border-radius: 0.25rem;
-  background-color: #445;
   width: 48px;
   height: 48px;
+  background: #445 url(/static/placeholder.webp);
+  background-size: contain;
 }
+
 .albumart a {
   display: block;
 }
 
+.albumart img {
+  visibility: hidden;
+}
+
 .queue .albumart {
   margin: 0.75rem;
   margin-left: 0;

templates/queue.html

@@ -17,6 +17,9 @@
       <div class="song__artist" title="Artist">{{ artist }}</div>
       {% endif %}
     </div>
+    <div class="remove">
+      <button class="material-symbols-outlined" title="Remove" hx-delete="/queue?id={{ item.id }}">close</button>
+    </div>
   </li>
   {% endfor %}
 </ul>