From 6481d6f0eeb8bf2c950884ea6853150a9106cb16 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sat, 15 Mar 2025 08:20:21 +0100
Subject: [PATCH] [web] Streamline title bar of modal dialogs

---
 web-src/src/components/ListProperties.vue       |  4 ----
 web-src/src/components/ModalDialog.vue          |  7 ++++++-
 web-src/src/components/ModalDialogAlbum.vue     | 17 -----------------
 .../src/components/ModalDialogAlbumSpotify.vue  |  8 --------
 web-src/src/components/ModalDialogArtist.vue    | 10 ----------
 .../src/components/ModalDialogArtistSpotify.vue | 10 ----------
 web-src/src/components/ModalDialogComposer.vue  |  1 -
 web-src/src/components/ModalDialogGenre.vue     | 11 -----------
 web-src/src/components/ModalDialogPlayable.vue  |  7 ++++++-
 web-src/src/components/ModalDialogPlaylist.vue  | 10 ----------
 .../components/ModalDialogPlaylistSpotify.vue   | 10 ----------
 web-src/src/components/ModalDialogQueueItem.vue |  7 ++++++-
 12 files changed, 18 insertions(+), 84 deletions(-)

diff --git a/web-src/src/components/ListProperties.vue b/web-src/src/components/ListProperties.vue
index 90bfe383..2eb848a6 100644
--- a/web-src/src/components/ListProperties.vue
+++ b/web-src/src/components/ListProperties.vue
@@ -1,8 +1,4 @@
 <template>
-  <div class="title is-4">
-    <a v-if="item.handler" @click="item.handler" v-text="item.name"></a>
-    <span v-else v-text="item.name" />
-  </div>
   <control-image
     v-if="item.image"
     :url="item.image"
diff --git a/web-src/src/components/ModalDialog.vue b/web-src/src/components/ModalDialog.vue
index 93956683..f77346da 100644
--- a/web-src/src/components/ModalDialog.vue
+++ b/web-src/src/components/ModalDialog.vue
@@ -4,8 +4,13 @@
       <div class="modal-background" @click="$emit('close')" />
       <div class="modal-content">
         <div class="card is-shadowless">
+          <div class="card-header">
+            <div v-if="title" class="card-header-title" v-text="title" />
+            <div class="card-header-icon">
+              <button class="delete" @click="$emit('close')"></button>
+            </div>
+          </div>
           <div class="card-content">
-            <p v-if="title" class="title is-4" v-text="title" />
             <slot name="content" />
           </div>
           <footer v-if="actions.length" class="card-footer">
diff --git a/web-src/src/components/ModalDialogAlbum.vue b/web-src/src/components/ModalDialogAlbum.vue
index c6de7670..c99c9a32 100644
--- a/web-src/src/components/ModalDialogAlbum.vue
+++ b/web-src/src/components/ModalDialogAlbum.vue
@@ -38,7 +38,6 @@ export default {
     },
     playable() {
       return {
-        handler: this.open,
         image: this.item.artwork_url,
         name: this.item.name,
         properties: [
@@ -79,22 +78,6 @@ export default {
           this.$emit('close')
         })
     },
-    open() {
-      this.$emit('close')
-      if (this.media_kind_resolved === 'podcast') {
-        this.$router.push({ name: 'podcast', params: { id: this.item.id } })
-      } else if (this.media_kind_resolved === 'audiobook') {
-        this.$router.push({
-          name: 'audiobooks-album',
-          params: { id: this.item.id }
-        })
-      } else {
-        this.$router.push({
-          name: 'music-album',
-          params: { id: this.item.id }
-        })
-      }
-    },
     openArtist() {
       this.$emit('close')
       if (this.media_kind_resolved === 'audiobook') {
diff --git a/web-src/src/components/ModalDialogAlbumSpotify.vue b/web-src/src/components/ModalDialogAlbumSpotify.vue
index 8f9c5e85..a751d33f 100644
--- a/web-src/src/components/ModalDialogAlbumSpotify.vue
+++ b/web-src/src/components/ModalDialogAlbumSpotify.vue
@@ -17,7 +17,6 @@ export default {
   computed: {
     playable() {
       return {
-        handler: this.open,
         image: this.item?.images?.[0]?.url || '',
         name: this.item.name || '',
         properties: [
@@ -37,13 +36,6 @@ export default {
     }
   },
   methods: {
-    open() {
-      this.$emit('close')
-      this.$router.push({
-        name: 'music-spotify-album',
-        params: { id: this.item.id }
-      })
-    },
     openArtist() {
       this.$emit('close')
       this.$router.push({
diff --git a/web-src/src/components/ModalDialogArtist.vue b/web-src/src/components/ModalDialogArtist.vue
index 8800e1b4..f8fb2f2e 100644
--- a/web-src/src/components/ModalDialogArtist.vue
+++ b/web-src/src/components/ModalDialogArtist.vue
@@ -17,7 +17,6 @@ export default {
   computed: {
     playable() {
       return {
-        handler: this.open,
         name: this.item.name,
         properties: [
           { key: 'property.albums', value: this.item.album_count },
@@ -34,15 +33,6 @@ export default {
         uri: this.item.uri
       }
     }
-  },
-  methods: {
-    open() {
-      this.$emit('close')
-      this.$router.push({
-        name: 'music-artist',
-        params: { id: this.item.id }
-      })
-    }
   }
 }
 </script>
diff --git a/web-src/src/components/ModalDialogArtistSpotify.vue b/web-src/src/components/ModalDialogArtistSpotify.vue
index 2f2682d7..c6e832d2 100644
--- a/web-src/src/components/ModalDialogArtistSpotify.vue
+++ b/web-src/src/components/ModalDialogArtistSpotify.vue
@@ -17,7 +17,6 @@ export default {
   computed: {
     playable() {
       return {
-        handler: this.open,
         name: this.item.name,
         properties: [
           {
@@ -31,15 +30,6 @@ export default {
         uri: this.item.uri
       }
     }
-  },
-  methods: {
-    open() {
-      this.$emit('close')
-      this.$router.push({
-        name: 'music-spotify-artist',
-        params: { id: this.item.id }
-      })
-    }
   }
 }
 </script>
diff --git a/web-src/src/components/ModalDialogComposer.vue b/web-src/src/components/ModalDialogComposer.vue
index 8e5f90a1..a268c73a 100644
--- a/web-src/src/components/ModalDialogComposer.vue
+++ b/web-src/src/components/ModalDialogComposer.vue
@@ -18,7 +18,6 @@ export default {
     playable() {
       return {
         expression: `composer is "${this.item.name}" and media_kind is music`,
-        handler: this.openAlbums,
         name: this.item.name,
         properties: [
           {
diff --git a/web-src/src/components/ModalDialogGenre.vue b/web-src/src/components/ModalDialogGenre.vue
index c7205bdc..14355a4f 100644
--- a/web-src/src/components/ModalDialogGenre.vue
+++ b/web-src/src/components/ModalDialogGenre.vue
@@ -22,7 +22,6 @@ export default {
     playable() {
       return {
         expression: `genre is "${this.item.name}" and media_kind is ${this.media_kind}`,
-        handler: this.open,
         name: this.item.name,
         properties: [
           { key: 'property.albums', value: this.item.album_count },
@@ -34,16 +33,6 @@ export default {
         ]
       }
     }
-  },
-  methods: {
-    open() {
-      this.$emit('close')
-      this.$router.push({
-        name: 'genre-albums',
-        params: { name: this.item.name },
-        query: { media_kind: this.media_kind }
-      })
-    }
   }
 }
 </script>
diff --git a/web-src/src/components/ModalDialogPlayable.vue b/web-src/src/components/ModalDialogPlayable.vue
index ffd5999f..f4982bc7 100644
--- a/web-src/src/components/ModalDialogPlayable.vue
+++ b/web-src/src/components/ModalDialogPlayable.vue
@@ -1,5 +1,10 @@
 <template>
-  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+  <modal-dialog
+    :actions="actions"
+    :show="show"
+    :title="item.name"
+    @close="$emit('close')"
+  >
     <template #content>
       <list-properties :item="item">
         <template v-if="buttons.length" #buttons>
diff --git a/web-src/src/components/ModalDialogPlaylist.vue b/web-src/src/components/ModalDialogPlaylist.vue
index de54bcab..7c254a74 100644
--- a/web-src/src/components/ModalDialogPlaylist.vue
+++ b/web-src/src/components/ModalDialogPlaylist.vue
@@ -21,7 +21,6 @@ export default {
   computed: {
     playable() {
       return {
-        handler: this.open,
         name: this.item.name,
         properties: [
           { key: 'property.tracks', value: this.item.item_count },
@@ -35,15 +34,6 @@ export default {
         uris: this.uris
       }
     }
-  },
-  methods: {
-    open() {
-      this.$emit('close')
-      this.$router.push({
-        name: 'playlist',
-        params: { id: this.item.id }
-      })
-    }
   }
 }
 </script>
diff --git a/web-src/src/components/ModalDialogPlaylistSpotify.vue b/web-src/src/components/ModalDialogPlaylistSpotify.vue
index c847f4d8..3292a7c2 100644
--- a/web-src/src/components/ModalDialogPlaylistSpotify.vue
+++ b/web-src/src/components/ModalDialogPlaylistSpotify.vue
@@ -17,7 +17,6 @@ export default {
   computed: {
     playable() {
       return {
-        handler: this.open,
         name: this.item.name,
         properties: [
           { key: 'property.owner', value: this.item.owner?.display_name },
@@ -27,15 +26,6 @@ export default {
         uri: this.item.uri
       }
     }
-  },
-  methods: {
-    open() {
-      this.$emit('close')
-      this.$router.push({
-        name: 'playlist-spotify',
-        params: { id: this.item.id }
-      })
-    }
   }
 }
 </script>
diff --git a/web-src/src/components/ModalDialogQueueItem.vue b/web-src/src/components/ModalDialogQueueItem.vue
index 797ebf1c..524b6769 100644
--- a/web-src/src/components/ModalDialogQueueItem.vue
+++ b/web-src/src/components/ModalDialogQueueItem.vue
@@ -1,5 +1,10 @@
 <template>
-  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+  <modal-dialog
+    :actions="actions"
+    :show="show"
+    :title="item.title"
+    @close="$emit('close')"
+  >
     <template #content>
       <list-properties :item="playable" />
     </template>