[web] Simplify the modal dialog with actions

web-src/src/components/ListAlbums.vue

@@ -48,12 +48,11 @@
       @play-count-changed="play_count_changed()"
     />
     <modal-dialog-action
-      :close_action="$t('page.podcast.cancel')"
+      :actions="actions"
-      :delete_action="$t('page.podcast.remove')"
       :show="show_remove_podcast_modal"
       :title="$t('page.podcast.remove-podcast')"
-      @close="show_remove_podcast_modal = false"
+      @cancel="show_remove_podcast_modal = false"
-      @delete="remove_podcast"
+      @remove="remove_podcast"
     >
       <template #modal-content>
         <i18n-t keypath="list.albums.info" tag="p" scope="global">
@@ -99,6 +98,20 @@ export default {
   },
 
   computed: {
+    actions() {
+      return [
+        {
+          label: this.$t('page.podcast.cancel'),
+          event: 'cancel',
+          icon: 'cancel'
+        },
+        {
+          label: this.$t('page.podcast.remove'),
+          event: 'remove',
+          icon: 'delete'
+        }
+      ]
+    },
     media_kind_resolved() {
       return this.media_kind || this.selected_item.media_kind
     }

web-src/src/components/ModalDialogAction.vue

@@ -1,21 +1,19 @@
 <template>
-  <modal-dialog :show="show" @close="$emit('close')">
+  <modal-dialog :show="show">
     <template #content>
       <p v-if="title" class="title is-4" v-text="title" />
       <slot name="modal-content" />
     </template>
     <template #footer>
-      <a class="card-footer-item has-text-dark" @click="$emit('close')">
+      <a
-        <mdicon class="icon" name="cancel" size="16" />
+        v-for="action in actions"
-        <span class="is-size-7" v-text="close_action" />
+        :key="action.event"
-      </a>
+        class="card-footer-item"
-      <a v-if="delete_action" class="card-footer-item" @click="$emit('delete')">
+        :class="{ 'is-disabled': action.disabled }"
-        <mdicon class="icon" name="delete" size="16" />
+        @click="$emit(action.event)"
-        <span class="is-size-7" v-text="delete_action" />
+      >
-      </a>
+        <mdicon class="icon" :name="action.icon" size="16" />
-      <a v-if="ok_action" class="card-footer-item" @click="$emit('ok')">
+        <span class="is-size-7" v-text="action.label" />
-        <mdicon class="icon" name="check" size="16" />
-        <span class="is-size-7" v-text="ok_action" />
       </a>
     </template>
   </modal-dialog>
@@ -28,13 +26,10 @@ export default {
   name: 'ModalDialogAction',
   components: { ModalDialog },
   props: {
-    close_action: { default: '', type: String },
+    actions: { type: Array, required: true },
-    delete_action: { default: '', type: String },
-    ok_action: { default: '', type: String },
     show: Boolean,
-    title: { required: true, type: String }
+    title: { default: '', type: String }
   },
-  emits: ['delete', 'close', 'ok'],
   watch: {
     show() {
       const { classList } = document.querySelector('html')

web-src/src/components/ModalDialogAddRss.vue

@@ -1,6 +1,12 @@
 <template>
-  <modal-dialog :show="show" @close="$emit('close')">
+  <modal-dialog-action
-    <template #content>
+    :actions="actions"
+    :show="show"
+    @cancel="$emit('close')"
+    @close="$emit('close')"
+    @add="add"
+  >
+    <template #modal-content>
       <p class="title is-4" v-text="$t('dialog.add.rss.title')" />
       <div class="field">
         <p class="control has-icons-left">
@@ -20,39 +26,18 @@
         <p class="help" v-text="$t('dialog.add.rss.help')" />
       </div>
     </template>
-    <template v-if="loading" #footer>
+  </modal-dialog-action>
-      <a class="card-footer-item has-text-dark">
-        <mdicon class="icon" name="web" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.add.rss.processing')" />
-      </a>
-    </template>
-    <template v-else #footer>
-      <a class="card-footer-item has-text-dark" @click="$emit('close')">
-        <mdicon class="icon" name="cancel" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.add.rss.cancel')" />
-      </a>
-      <a
-        :class="{ 'is-disabled': disabled }"
-        class="card-footer-item"
-        @click="add_stream"
-      >
-        <mdicon class="icon" name="playlist-plus" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.add.rss.add')" />
-      </a>
-    </template>
-  </modal-dialog>
 </template>
 
 <script>
-import ModalDialog from '@/components/ModalDialog.vue'
+import ModalDialogAction from '@/components/ModalDialogAction.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogAddRss',
-  components: { ModalDialog },
+  components: { ModalDialogAction },
   props: { show: Boolean },
   emits: ['close', 'podcast-added'],
-
   data() {
     return {
       disabled: true,
@@ -60,7 +45,26 @@ export default {
       url: ''
     }
   },
-
+  computed: {
+    actions() {
+      if (this.loading) {
+        return [{ label: this.$t('dialog.add.rss.processing'), icon: 'web' }]
+      }
+      return [
+        {
+          label: this.$t('dialog.add.rss.cancel'),
+          event: 'cancel',
+          icon: 'cancel'
+        },
+        {
+          label: this.$t('dialog.add.rss.add'),
+          disabled: this.disabled,
+          event: 'add',
+          icon: 'playlist-plus'
+        }
+      ]
+    }
+  },
   watch: {
     show() {
       if (this.show) {
@@ -72,9 +76,8 @@ export default {
       }
     }
   },
-
   methods: {
-    add_stream() {
+    add() {
       this.loading = true
       webapi
         .library_add(this.url)

web-src/src/components/ModalDialogAddUrlStream.vue

@@ -1,6 +1,13 @@
 <template>
-  <modal-dialog :show="show" @close="$emit('close')">
+  <modal-dialog-action
-    <template #content>
+    :actions="actions"
+    :show="show"
+    @add="add"
+    @cancel="$emit('close')"
+    @close="$emit('close')"
+    @play="play"
+  >
+    <template #modal-content>
       <form @submit.prevent="play">
         <p class="title is-4" v-text="$t('dialog.add.stream.title')" />
         <div class="field">
@@ -21,47 +28,18 @@
         </div>
       </form>
     </template>
-    <template v-if="loading" #footer>
+  </modal-dialog-action>
-      <a class="card-footer-item has-text-dark">
-        <mdicon class="icon" name="web" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.add.stream.loading')" />
-      </a>
-    </template>
-    <template v-else #footer>
-      <a class="card-footer-item has-text-dark" @click="$emit('close')">
-        <mdicon class="icon" name="cancel" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.add.stream.cancel')" />
-      </a>
-      <a
-        :class="{ 'is-disabled': disabled }"
-        class="card-footer-item has-text-dark"
-        @click="add_stream"
-      >
-        <mdicon class="icon" name="playlist-plus" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.add.stream.add')" />
-      </a>
-      <a
-        :class="{ 'is-disabled': disabled }"
-        class="card-footer-item has-text-dark"
-        @click="play"
-      >
-        <mdicon class="icon" name="play" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.add.stream.play')" />
-      </a>
-    </template>
-  </modal-dialog>
 </template>
 
 <script>
-import ModalDialog from '@/components/ModalDialog.vue'
+import ModalDialogAction from '@/components/ModalDialogAction.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogAddUrlStream',
-  components: { ModalDialog },
+  components: { ModalDialogAction },
   props: { show: Boolean },
   emits: ['close'],
-
   data() {
     return {
       disabled: true,
@@ -69,7 +47,32 @@ export default {
       url: ''
     }
   },
-
+  computed: {
+    actions() {
+      if (this.loading) {
+        return [{ label: this.$t('dialog.add.stream.processing'), icon: 'web' }]
+      }
+      return [
+        {
+          label: this.$t('dialog.add.stream.cancel'),
+          event: 'cancel',
+          icon: 'cancel'
+        },
+        {
+          label: this.$t('dialog.add.stream.add'),
+          disabled: this.disabled,
+          event: 'add',
+          icon: 'playlist-plus'
+        },
+        {
+          label: this.$t('dialog.add.stream.play'),
+          disabled: this.disabled,
+          event: 'play',
+          icon: 'play'
+        }
+      ]
+    }
+  },
   watch: {
     show() {
       if (this.show) {
@@ -81,9 +84,8 @@ export default {
       }
     }
   },
-
   methods: {
-    add_stream() {
+    add() {
       this.loading = true
       webapi
         .queue_add(this.url)

web-src/src/components/ModalDialogAlbum.vue

@@ -1,6 +1,13 @@
 <template>
-  <modal-dialog :show="show" @close="$emit('close')">
+  <modal-dialog-action
-    <template #content>
+    :actions="actions"
+    :show="show"
+    @add="queue_add"
+    @add-next="queue_add_next"
+    @close="$emit('close')"
+    @play="play"
+  >
+    <template #modal-content>
       <div class="title is-4">
         <a @click="open" v-text="item.name" />
       </div>
@@ -77,31 +84,17 @@
         <div class="title is-6" v-text="$filters.datetime(item.time_added)" />
       </div>
     </template>
-    <template #footer>
+  </modal-dialog-action>
-      <a class="card-footer-item has-text-dark" @click="queue_add">
-        <mdicon class="icon" name="playlist-plus" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.album.add')" />
-      </a>
-      <a class="card-footer-item has-text-dark" @click="queue_add_next">
-        <mdicon class="icon" name="playlist-play" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.album.add-next')" />
-      </a>
-      <a class="card-footer-item has-text-dark" @click="play">
-        <mdicon class="icon" name="play" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.album.play')" />
-      </a>
-    </template>
-  </modal-dialog>
 </template>
 
 <script>
 import CoverArtwork from '@/components/CoverArtwork.vue'
-import ModalDialog from '@/components/ModalDialog.vue'
+import ModalDialogAction from '@/components/ModalDialogAction.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogAlbum',
-  components: { ModalDialog, CoverArtwork },
+  components: { ModalDialogAction, CoverArtwork },
   props: {
     item: { required: true, type: Object },
     media_kind: { default: '', type: String },
@@ -116,6 +109,25 @@ export default {
   },
 
   computed: {
+    actions() {
+      return [
+        {
+          label: this.$t('dialog.album.add'),
+          event: 'add',
+          icon: 'playlist-plus'
+        },
+        {
+          label: this.$t('dialog.album.add-next'),
+          event: 'add-next',
+          icon: 'playlist-play'
+        },
+        {
+          label: this.$t('dialog.album.play'),
+          event: 'play',
+          icon: 'play'
+        }
+      ]
+    },
     media_kind_resolved() {
       return this.media_kind || this.item.media_kind
     }

web-src/src/components/ModalDialogAlbumSpotify.vue

@@ -1,6 +1,13 @@
 <template>
-  <modal-dialog :show="show" @close="$emit('close')">
+  <modal-dialog-action
-    <template #content>
+    :actions="actions"
+    :show="show"
+    @add="queue_add"
+    @add-next="queue_add_next"
+    @close="$emit('close')"
+    @play="play"
+  >
+    <template #modal-content>
       <div class="title is-4">
         <a @click="open" v-text="item.name" />
       </div>
@@ -36,40 +43,45 @@
         <div class="title is-6" v-text="item.album_type" />
       </div>
     </template>
-    <template #footer>
+  </modal-dialog-action>
-      <a class="card-footer-item has-text-dark" @click="queue_add">
-        <mdicon class="icon" name="playlist-plus" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.spotify.album.add')" />
-      </a>
-      <a class="card-footer-item has-text-dark" @click="queue_add_next">
-        <mdicon class="icon" name="playlist-play" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.spotify.album.add-next')" />
-      </a>
-      <a class="card-footer-item has-text-dark" @click="play">
-        <mdicon class="icon" name="play" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.spotify.album.play')" />
-      </a>
-    </template>
-  </modal-dialog>
 </template>
 
 <script>
 import CoverArtwork from '@/components/CoverArtwork.vue'
-import ModalDialog from '@/components/ModalDialog.vue'
+import ModalDialogAction from '@/components/ModalDialogAction.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogAlbumSpotify',
-  components: { ModalDialog, CoverArtwork },
+  components: { ModalDialogAction, CoverArtwork },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
-
   data() {
     return {
       artwork_visible: false
     }
   },
-
+  computed: {
+    actions() {
+      return [
+        {
+          label: this.$t('dialog.spotify.album.add'),
+          event: 'add',
+          icon: 'playlist-plus'
+        },
+        {
+          label: this.$t('dialog.spotify.album.add-next'),
+          event: 'add-next',
+          icon: 'playlist-play'
+        },
+        {
+          label: this.$t('dialog.spotify.album.play'),
+          event: 'play',
+          icon: 'play'
+        }
+      ]
+    }
+  },
   methods: {
     artwork_error() {
       this.artwork_visible = false

web-src/src/components/ModalDialogArtist.vue

@@ -1,6 +1,13 @@
 <template>
-  <modal-dialog :show="show" @close="$emit('close')">
+  <modal-dialog-action
-    <template #content>
+    :actions="actions"
+    :show="show"
+    @add="queue_add"
+    @add-next="queue_add_next"
+    @close="$emit('close')"
+    @play="play"
+  >
+    <template #modal-content>
       <div class="title is-4">
         <a @click="open" v-text="item.name" />
       </div>
@@ -30,33 +37,39 @@
         <div class="title is-6" v-text="$filters.datetime(item.time_added)" />
       </div>
     </template>
-    <template #footer>
+  </modal-dialog-action>
-      <a class="card-footer-item has-text-dark" @click="queue_add">
-        <mdicon class="icon" name="playlist-plus" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.artist.add')" />
-      </a>
-      <a class="card-footer-item has-text-dark" @click="queue_add_next">
-        <mdicon class="icon" name="playlist-play" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.artist.add-next')" />
-      </a>
-      <a class="card-footer-item has-text-dark" @click="play">
-        <mdicon class="icon" name="play" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.artist.play')" />
-      </a>
-    </template>
-  </modal-dialog>
 </template>
 
 <script>
-import ModalDialog from '@/components/ModalDialog.vue'
+import ModalDialogAction from '@/components/ModalDialogAction.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogArtist',
-  components: { ModalDialog },
+  components: { ModalDialogAction },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
-
+  computed: {
+    actions() {
+      return [
+        {
+          label: this.$t('dialog.artist.add'),
+          event: 'add',
+          icon: 'playlist-plus'
+        },
+        {
+          label: this.$t('dialog.artist.add-next'),
+          event: 'add-next',
+          icon: 'playlist-play'
+        },
+        {
+          label: this.$t('dialog.artist.play'),
+          event: 'play',
+          icon: 'play'
+        }
+      ]
+    }
+  },
   methods: {
     open() {
       this.$emit('close')

web-src/src/components/ModalDialogArtistSpotify.vue

@@ -1,6 +1,13 @@
 <template>
-  <modal-dialog :show="show" @close="$emit('close')">
+  <modal-dialog-action
-    <template #content>
+    :actions="actions"
+    :show="show"
+    @add="queue_add"
+    @add-next="queue_add_next"
+    @close="$emit('close')"
+    @play="play"
+  >
+    <template #modal-content>
       <div class="title is-4">
         <a @click="open" v-text="item.name" />
       </div>
@@ -22,33 +29,39 @@
         <div class="title is-6" v-text="item.genres.join(', ')" />
       </div>
     </template>
-    <template #footer>
+  </modal-dialog-action>
-      <a class="card-footer-item has-text-dark" @click="queue_add">
-        <mdicon class="icon" name="playlist-plus" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.spotify.artist.add')" />
-      </a>
-      <a class="card-footer-item has-text-dark" @click="queue_add_next">
-        <mdicon class="icon" name="playlist-play" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.spotify.artist.add-next')" />
-      </a>
-      <a class="card-footer-item has-text-dark" @click="play">
-        <mdicon class="icon" name="play" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.spotify.artist.play')" />
-      </a>
-    </template>
-  </modal-dialog>
 </template>
 
 <script>
-import ModalDialog from '@/components/ModalDialog.vue'
+import ModalDialogAction from '@/components/ModalDialogAction.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogArtistSpotify',
-  components: { ModalDialog },
+  components: { ModalDialogAction },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
-
+  computed: {
+    actions() {
+      return [
+        {
+          label: this.$t('dialog.spotify.artist.add'),
+          event: 'add',
+          icon: 'playlist-plus'
+        },
+        {
+          label: this.$t('dialog.spotify.artist.add-next'),
+          event: 'add-next',
+          icon: 'playlist-play'
+        },
+        {
+          label: this.$t('dialog.spotify.artist.play'),
+          event: 'play',
+          icon: 'play'
+        }
+      ]
+    }
+  },
   methods: {
     open() {
       this.$emit('close')

web-src/src/components/ModalDialogComposer.vue

@@ -1,6 +1,13 @@
 <template>
-  <modal-dialog :show="show" @close="$emit('close')">
+  <modal-dialog-action
-    <template #content>
+    :actions="actions"
+    :show="show"
+    @add="queue_add"
+    @add-next="queue_add_next"
+    @close="$emit('close')"
+    @play="play"
+  >
+    <template #modal-content>
       <div class="title is-4">
         <a @click="open_albums" v-text="item.name" />
       </div>
@@ -33,33 +40,39 @@
         />
       </div>
     </template>
-    <template #footer>
+  </modal-dialog-action>
-      <a class="card-footer-item has-text-dark" @click="queue_add">
-        <mdicon class="icon" name="playlist-plus" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.composer.add')" />
-      </a>
-      <a class="card-footer-item has-text-dark" @click="queue_add_next">
-        <mdicon class="icon" name="playlist-play" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.composer.add-next')" />
-      </a>
-      <a class="card-footer-item has-text-dark" @click="play">
-        <mdicon class="icon" name="play" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.composer.play')" />
-      </a>
-    </template>
-  </modal-dialog>
 </template>
 
 <script>
-import ModalDialog from '@/components/ModalDialog.vue'
+import ModalDialogAction from '@/components/ModalDialogAction.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogComposer',
-  components: { ModalDialog },
+  components: { ModalDialogAction },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
-
+  computed: {
+    actions() {
+      return [
+        {
+          label: this.$t('dialog.composer.add'),
+          event: 'add',
+          icon: 'playlist-plus'
+        },
+        {
+          label: this.$t('dialog.composer.add-next'),
+          event: 'add-next',
+          icon: 'playlist-play'
+        },
+        {
+          label: this.$t('dialog.composer.play'),
+          event: 'play',
+          icon: 'play'
+        }
+      ]
+    }
+  },
   methods: {
     open_albums() {
       this.$emit('close')

web-src/src/components/ModalDialogDirectory.vue

@@ -1,35 +1,45 @@
 <template>
-  <modal-dialog :show="show" @close="$emit('close')">
+  <modal-dialog-action
-    <template #content>
+    :actions="actions"
-      <p class="title is-4" v-text="item" />
+    :show="show"
-    </template>
+    :title="item"
-    <template #footer>
+    @add="queue_add"
-      <a class="card-footer-item has-text-dark" @click="queue_add">
+    @add-next="queue_add_next"
-        <mdicon class="icon" name="playlist-plus" size="16" />
+    @close="$emit('close')"
-        <span class="is-size-7" v-text="$t('dialog.directory.add')" />
+    @play="play"
-      </a>
+  />
-      <a class="card-footer-item has-text-dark" @click="queue_add_next">
-        <mdicon class="icon" name="playlist-play" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.directory.add-next')" />
-      </a>
-      <a class="card-footer-item has-text-dark" @click="play">
-        <mdicon class="icon" name="play" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.directory.play')" />
-      </a>
-    </template>
-  </modal-dialog>
 </template>
 
 <script>
-import ModalDialog from '@/components/ModalDialog.vue'
+import ModalDialogAction from '@/components/ModalDialogAction.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogDirectory',
-  components: { ModalDialog },
+  components: { ModalDialogAction },
   props: { item: { required: true, type: String }, show: Boolean },
   emits: ['close'],
-
+  computed: {
+    actions() {
+      return [
+        {
+          label: this.$t('dialog.directory.add'),
+          event: 'add',
+          icon: 'playlist-plus'
+        },
+        {
+          label: this.$t('dialog.directory.add-next'),
+          event: 'add-next',
+          icon: 'playlist-play'
+        },
+        {
+          label: this.$t('dialog.directory.play'),
+          event: 'play',
+          icon: 'play'
+        }
+      ]
+    }
+  },
   methods: {
     play() {
       this.$emit('close')

web-src/src/components/ModalDialogGenre.vue

@@ -1,6 +1,13 @@
 <template>
-  <modal-dialog :show="show" @close="$emit('close')">
+  <modal-dialog-action
-    <template #content>
+    :actions="actions"
+    :show="show"
+    @add="queue_add"
+    @add-next="queue_add_next"
+    @close="$emit('close')"
+    @play="play"
+  >
+    <template #modal-content>
       <div class="title is-4">
         <a @click="open" v-text="item.name" />
       </div>
@@ -29,38 +36,42 @@
         />
       </div>
     </template>
-    <template #footer>
+  </modal-dialog-action>
-      <a class="card-footer-item has-text-dark" @click="queue_add">
-        <mdicon class="icon" name="playlist-plus" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.genre.add')" />
-      </a>
-      <a class="card-footer-item has-text-dark" @click="queue_add_next">
-        <mdicon class="icon" name="playlist-play" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.genre.add-next')" />
-      </a>
-      <a class="card-footer-item has-text-dark" @click="play">
-        <mdicon class="icon" name="play" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.genre.play')" />
-      </a>
-    </template>
-  </modal-dialog>
 </template>
 
 <script>
-import ModalDialog from '@/components/ModalDialog.vue'
+import ModalDialogAction from '@/components/ModalDialogAction.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogGenre',
-  components: { ModalDialog },
+  components: { ModalDialogAction },
   props: {
     item: { required: true, type: Object },
     media_kind: { required: true, type: String },
     show: Boolean
   },
   emits: ['close'],
-
   computed: {
+    actions() {
+      return [
+        {
+          label: this.$t('dialog.genre.add'),
+          event: 'add',
+          icon: 'playlist-plus'
+        },
+        {
+          label: this.$t('dialog.genre.add-next'),
+          event: 'add-next',
+          icon: 'playlist-play'
+        },
+        {
+          label: this.$t('dialog.genre.play'),
+          event: 'play',
+          icon: 'play'
+        }
+      ]
+    },
     expression() {
       return `genre is "${this.item.name}" and media_kind is ${this.media_kind}`
     }

web-src/src/components/ModalDialogPlaylist.vue

@@ -1,6 +1,13 @@
 <template>
-  <modal-dialog :show="show" @close="$emit('close')">
+  <modal-dialog-action
-    <template #content>
+    :actions="actions"
+    :show="show"
+    @add="queue_add"
+    @add-next="queue_add_next"
+    @close="$emit('close')"
+    @play="play"
+  >
+    <template #modal-content>
       <div class="title is-4">
         <a @click="open" v-text="item.name" />
       </div>
@@ -26,37 +33,46 @@
         <div class="title is-6" v-text="item.item_count" />
       </div>
     </template>
-    <template v-if="!item.folder" #footer>
+  </modal-dialog-action>
-      <a class="card-footer-item has-text-dark" @click="queue_add">
-        <mdicon class="icon" name="playlist-plus" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.playlist.add')" />
-      </a>
-      <a class="card-footer-item has-text-dark" @click="queue_add_next">
-        <mdicon class="icon" name="playlist-play" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.playlist.add-next')" />
-      </a>
-      <a class="card-footer-item has-text-dark" @click="play">
-        <mdicon class="icon" name="play" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.playlist.play')" />
-      </a>
-    </template>
-  </modal-dialog>
 </template>
 
 <script>
-import ModalDialog from '@/components/ModalDialog.vue'
+import ModalDialogAction from '@/components/ModalDialogAction.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogPlaylist',
-  components: { ModalDialog },
+  components: { ModalDialogAction },
   props: {
     item: { required: true, type: Object },
     show: Boolean,
     uris: { default: '', type: String }
   },
   emits: ['close'],
-
+  computed: {
+    actions() {
+      if (!this.item.folder) {
+        return [
+          {
+            label: this.$t('dialog.playlist.add'),
+            event: 'add',
+            icon: 'playlist-plus'
+          },
+          {
+            label: this.$t('dialog.playlist.add-next'),
+            event: 'add-next',
+            icon: 'playlist-play'
+          },
+          {
+            label: this.$t('dialog.playlist.play'),
+            event: 'play',
+            icon: 'play'
+          }
+        ]
+      }
+      return []
+    }
+  },
   methods: {
     open() {
       this.$emit('close')

web-src/src/components/ModalDialogPlaylistSave.vue

@@ -1,6 +1,12 @@
 <template>
-  <modal-dialog :show="show" @close="$emit('close')">
+  <modal-dialog-action
-    <template #content>
+    :actions="actions"
+    :show="show"
+    @cancel="$emit('close')"
+    @close="$emit('close')"
+    @save="save"
+  >
+    <template #modal-content>
       <form @submit.prevent="save">
         <p class="title is-4" v-text="$t('dialog.playlist.save.title')" />
         <div class="field">
@@ -21,39 +27,18 @@
         </div>
       </form>
     </template>
-    <template v-if="loading" #footer>
+  </modal-dialog-action>
-      <a class="card-footer-item has-text-dark">
-        <mdicon class="icon" name="web" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.playlist.save.saving')" />
-      </a>
-    </template>
-    <template v-else #footer>
-      <a class="card-footer-item has-text-danger" @click="$emit('close')">
-        <mdicon class="icon" name="cancel" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.playlist.save.cancel')" />
-      </a>
-      <a
-        :class="{ 'is-disabled': disabled }"
-        class="card-footer-item has-text-weight-bold"
-        @click="save"
-      >
-        <mdicon class="icon" name="content-save" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.playlist.save.save')" />
-      </a>
-    </template>
-  </modal-dialog>
 </template>
 
 <script>
-import ModalDialog from '@/components/ModalDialog.vue'
+import ModalDialogAction from '@/components/ModalDialogAction.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogPlaylistSave',
-  components: { ModalDialog },
+  components: { ModalDialogAction },
   props: { show: Boolean },
   emits: ['close'],
-
   data() {
     return {
       disabled: true,
@@ -61,7 +46,23 @@ export default {
       playlist_name: ''
     }
   },
-
+  actions() {
+    if (loading) {
+      return [{ label: this.$t('dialog.playlist.save.saving'), icon: 'web' }]
+    }
+    return [
+      {
+        label: this.$t('dialog.playlist.save.cancel'),
+        event: 'cancel',
+        icon: 'cancel'
+      },
+      {
+        label: this.$t('dialog.playlist.save.save'),
+        event: 'content-save',
+        icon: 'save'
+      }
+    ]
+  },
   watch: {
     show() {
       if (this.show) {
@@ -73,7 +74,6 @@ export default {
       }
     }
   },
-
   methods: {
     check_name(event) {
       const { validity } = event.target

web-src/src/components/ModalDialogPlaylistSpotify.vue

@@ -1,6 +1,13 @@
 <template>
-  <modal-dialog :show="show" @close="$emit('close')">
+  <modal-dialog-action
-    <template #content>
+    :actions="actions"
+    :show="show"
+    @add="queue_add"
+    @add-next="queue_add_next"
+    @close="$emit('close')"
+    @play="play"
+  >
+    <template #modal-content>
       <div class="title is-4">
         <a @click="open" v-text="item.name" />
       </div>
@@ -26,36 +33,39 @@
         <div class="title is-6" v-text="item.uri" />
       </div>
     </template>
-    <template #footer>
+  </modal-dialog-action>
-      <a class="card-footer-item has-text-dark" @click="queue_add">
-        <mdicon class="icon" name="playlist-plus" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.spotify.playlist.add')" />
-      </a>
-      <a class="card-footer-item has-text-dark" @click="queue_add_next">
-        <mdicon class="icon" name="playlist-play" size="16" />
-        <span
-          class="is-size-7"
-          v-text="$t('dialog.spotify.playlist.add-next')"
-        />
-      </a>
-      <a class="card-footer-item has-text-dark" @click="play">
-        <mdicon class="icon" name="play" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.spotify.playlist.play')" />
-      </a>
-    </template>
-  </modal-dialog>
 </template>
 
 <script>
-import ModalDialog from '@/components/ModalDialog.vue'
+import ModalDialogAction from '@/components/ModalDialogAction.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogPlaylistSpotify',
-  components: { ModalDialog },
+  components: { ModalDialogAction },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
-
+  computed: {
+    actions() {
+      return [
+        {
+          label: this.$t('dialog.spotify.playlist.add'),
+          event: 'add',
+          icon: 'playlist-plus'
+        },
+        {
+          label: this.$t('dialog.spotify.playlist.add-next'),
+          event: 'add-next',
+          icon: 'playlist-play'
+        },
+        {
+          label: this.$t('dialog.spotify.playlist.play'),
+          event: 'play',
+          icon: 'play'
+        }
+      ]
+    }
+  },
   methods: {
     open() {
       this.$emit('close')

web-src/src/components/ModalDialogQueueItem.vue

@@ -1,6 +1,12 @@
 <template>
-  <modal-dialog :show="show" @close="$emit('close')">
+  <modal-dialog-action
-    <template #content>
+    :actions="actions"
+    :show="show"
+    @remove="remove"
+    @close="$emit('close')"
+    @play="play"
+  >
+    <template #modal-content>
       <div class="title is-4" v-text="item.title" />
       <div class="subtitle" v-text="item.artist" />
       <div v-if="item.album" class="mb-3">
@@ -114,41 +120,44 @@
         </div>
       </div>
     </template>
-    <template #footer>
+  </modal-dialog-action>
-      <a class="card-footer-item has-text-dark" @click="remove">
-        <mdicon class="icon" name="delete" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.queue-item.remove')" />
-      </a>
-      <a class="card-footer-item has-text-dark" @click="play">
-        <mdicon class="icon" name="play" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.queue-item.play')" />
-      </a>
-    </template>
-  </modal-dialog>
 </template>
 
 <script>
-import ModalDialog from '@/components/ModalDialog.vue'
+import ModalDialogAction from '@/components/ModalDialogAction.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
 import { useServicesStore } from '@/stores/services'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogQueueItem',
-  components: { ModalDialog },
+  components: { ModalDialogAction },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
-
   setup() {
     return { servicesStore: useServicesStore() }
   },
-
   data() {
     return {
       spotify_track: {}
     }
   },
-
+  computed: {
+    actions() {
+      return [
+        {
+          label: this.$t('dialog.queue-item.remove'),
+          event: 'remove',
+          icon: 'delete'
+        },
+        {
+          label: this.$t('dialog.queue-item.play'),
+          event: 'play',
+          icon: 'play'
+        }
+      ]
+    }
+  },
   watch: {
     item() {
       if (this.item?.data_kind === 'spotify') {
@@ -164,7 +173,6 @@ export default {
       }
     }
   },
-
   methods: {
     open_album() {
       if (this.item.data_kind === 'spotify') {

web-src/src/components/ModalDialogRemotePairing.vue

@@ -1,8 +1,14 @@
 <template>
-  <modal-dialog :show="show" @close="$emit('close')">
+  <modal-dialog-action
-    <template #content>
+    :actions="actions"
+    :show="show"
+    @cancel="cancel"
+    @close="$emit('close')"
+    @pair="pair"
+  >
+    <template #modal-content>
       <p class="title is-4" v-text="$t('dialog.remote-pairing.title')" />
-      <form @submit.prevent="kickoff_pairing">
+      <form @submit.prevent="pair">
         <label class="label" v-text="pairing.remote" />
         <div class="field">
           <div class="control">
@@ -18,46 +24,46 @@
         </div>
       </form>
     </template>
-    <template #footer>
+  </modal-dialog-action>
-      <a class="card-footer-item has-text-danger" @click="$emit('close')">
-        <mdicon class="icon" name="cancel" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.remote-pairing.cancel')" />
-      </a>
-      <a class="card-footer-item" @click="kickoff_pairing">
-        <mdicon class="icon" name="cellphone" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.remote-pairing.pair')" />
-      </a>
-    </template>
-  </modal-dialog>
 </template>
 
 <script>
-import ModalDialog from '@/components/ModalDialog.vue'
+import ModalDialogAction from '@/components/ModalDialogAction.vue'
 import { useRemotesStore } from '@/stores/remotes'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogRemotePairing',
-  components: { ModalDialog },
+  components: { ModalDialogAction },
   props: { show: Boolean },
   emits: ['close'],
-
   setup() {
     return { remoteStore: useRemotesStore() }
   },
-
   data() {
     return {
       pairing_req: { pin: '' }
     }
   },
-
   computed: {
+    actions() {
+      return [
+        {
+          label: this.$t('dialog.remote-pairing.cancel'),
+          event: 'cancel',
+          icon: 'cancel'
+        },
+        {
+          label: this.$t('dialog.remote-pairing.pair'),
+          event: 'pair',
+          icon: 'cellphone'
+        }
+      ]
+    },
     pairing() {
       return this.remoteStore.pairing
     }
   },
-
   watch: {
     show() {
       if (this.show) {
@@ -69,9 +75,8 @@ export default {
       }
     }
   },
-
   methods: {
-    kickoff_pairing() {
+    pair() {
       webapi.pairing_kickoff(this.pairing_req).then(() => {
         this.pairing_req.pin = ''
       })

web-src/src/components/ModalDialogTrack.vue

@@ -1,6 +1,13 @@
 <template>
-  <modal-dialog :show="show" @close="$emit('close')">
+  <modal-dialog-action
-    <template #content>
+    :actions="actions"
+    :show="show"
+    @add="queue_add"
+    @add-next="queue_add_next"
+    @close="$emit('close')"
+    @play="play"
+  >
+    <template #modal-content>
       <p class="title is-4" v-text="item.title" />
       <p class="subtitle" v-text="item.artist" />
       <div v-if="item.media_kind === 'podcast'" class="buttons">
@@ -150,45 +157,49 @@
         <div class="title is-6" v-text="item.comment" />
       </div>
     </template>
-    <template #footer>
+  </modal-dialog-action>
-      <a class="card-footer-item has-text-dark" @click="queue_add">
-        <mdicon class="icon" name="playlist-plus" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.track.add')" />
-      </a>
-      <a class="card-footer-item has-text-dark" @click="queue_add_next">
-        <mdicon class="icon" name="playlist-play" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.track.add-next')" />
-      </a>
-      <a class="card-footer-item has-text-dark" @click="play">
-        <mdicon class="icon" name="play" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.track.play')" />
-      </a>
-    </template>
-  </modal-dialog>
 </template>
 
 <script>
-import ModalDialog from '@/components/ModalDialog.vue'
+import ModalDialogAction from '@/components/ModalDialogAction.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
 import { useServicesStore } from '@/stores/services'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogTrack',
-  components: { ModalDialog },
+  components: { ModalDialogAction },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close', 'play-count-changed'],
-
   setup() {
     return { servicesStore: useServicesStore() }
   },
-
   data() {
     return {
       spotify_track: {}
     }
   },
-
+  computed: {
+    actions() {
+      return [
+        {
+          label: this.$t('dialog.track.add'),
+          event: 'add',
+          icon: 'playlist-plus'
+        },
+        {
+          label: this.$t('dialog.track.add-next'),
+          event: 'add-next',
+          icon: 'playlist-play'
+        },
+        {
+          label: this.$t('dialog.track.play'),
+          event: 'play',
+          icon: 'play'
+        }
+      ]
+    }
+  },
   watch: {
     item() {
       if (
@@ -208,7 +219,6 @@ export default {
       }
     }
   },
-
   methods: {
     mark_new() {
       webapi

web-src/src/components/ModalDialogTrackSpotify.vue

@@ -1,6 +1,13 @@
 <template>
-  <modal-dialog :show="show" @close="$emit('close')">
+  <modal-dialog-action
-    <template #content>
+    :actions="actions"
+    :show="show"
+    @add="queue_add"
+    @add-next="queue_add_next"
+    @close="$emit('close')"
+    @play="play"
+  >
+    <template #modal-content>
       <p class="title is-4" v-text="item.name" />
       <p class="subtitle" v-text="item.artists[0].name" />
       <div class="mb-3">
@@ -59,33 +66,39 @@
         <div class="title is-6" v-text="item.uri" />
       </div>
     </template>
-    <template #footer>
+  </modal-dialog-action>
-      <a class="card-footer-item has-text-dark" @click="queue_add">
-        <mdicon class="icon" name="playlist-plus" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.spotify.track.add')" />
-      </a>
-      <a class="card-footer-item has-text-dark" @click="queue_add_next">
-        <mdicon class="icon" name="playlist-play" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.spotify.track.add-next')" />
-      </a>
-      <a class="card-footer-item has-text-dark" @click="play">
-        <mdicon class="icon" name="play" size="16" />
-        <span class="is-size-7" v-text="$t('dialog.spotify.track.play')" />
-      </a>
-    </template>
-  </modal-dialog>
 </template>
 
 <script>
-import ModalDialog from '@/components/ModalDialog.vue'
+import ModalDialogAction from '@/components/ModalDialogAction.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogTrackSpotify',
-  components: { ModalDialog },
+  components: { ModalDialogAction },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
-
+  computed: {
+    actions() {
+      return [
+        {
+          label: this.$t('dialog.spotify.track.add'),
+          event: 'add',
+          icon: 'playlist-plus'
+        },
+        {
+          label: this.$t('dialog.spotify.track.add-next'),
+          event: 'add-next',
+          icon: 'playlist-play'
+        },
+        {
+          label: this.$t('dialog.spotify.track.play'),
+          event: 'play',
+          icon: 'play'
+        }
+      ]
+    }
+  },
   methods: {
     open_album() {
       this.$emit('close')

web-src/src/components/ModalDialogUpdate.vue

@@ -1,11 +1,10 @@
 <template>
   <modal-dialog-action
+    :actions="actions"
     :show="show"
     :title="$t('dialog.update.title')"
-    :ok_action="libraryStore.updating ? '' : $t('dialog.update.rescan')"
+    @analyse="update_library"
-    :close_action="$t('dialog.update.cancel')"
+    @cancel="close()"
-    @ok="update_library"
-    @close="close()"
   >
     <template #modal-content>
       <div v-if="!libraryStore.updating">
@@ -70,6 +69,22 @@ export default {
   },
 
   computed: {
+    actions() {
+      return [
+        {
+          label: this.$t('dialog.update.cancel'),
+          event: 'cancel',
+          icon: 'cancel'
+        },
+        {
+          label: this.libraryStore.updating
+            ? 'In progress'
+            : this.$t('dialog.update.rescan'),
+          event: 'analyse',
+          icon: 'check'
+        }
+      ]
+    },
     rss() {
       return this.libraryStore.rss
     },

web-src/src/pages/PagePodcast.vue

@@ -47,12 +47,11 @@
           @remove-podcast="open_remove_podcast_dialog"
         />
         <modal-dialog-action
+          :actions="actions"
           :show="show_remove_podcast_modal"
           :title="$t('page.podcast.remove-podcast')"
-          :close_action="$t('page.podcast.cancel')"
+          @cancel="show_remove_podcast_modal = false"
-          :delete_action="$t('page.podcast.remove')"
+          @remove="remove_podcast"
-          @close="show_remove_podcast_modal = false"
-          @delete="remove_podcast"
         >
           <template #modal-content>
             <i18n-t keypath="page.podcast.remove-info" tag="p" scope="global">
@@ -118,7 +117,22 @@ export default {
       tracks: new GroupedList()
     }
   },
-
+  computed: {
+    actions() {
+      return [
+        {
+          label: this.$t('page.podcast.cancel'),
+          event: 'cancel',
+          icon: 'cancel'
+        },
+        {
+          label: this.$t('page.podcast.remove'),
+          event: 'remove',
+          icon: 'delete'
+        }
+      ]
+    }
+  },
   methods: {
     open_remove_podcast_dialog() {
       webapi