[web] Streamline title bar of modal dialogs

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"

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">

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') {

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({

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>

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>

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: [
           {

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>

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>

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>

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>

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>