From 37b1c834c9aff972f30abdb79121c7f775e3bb02 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Tue, 5 Mar 2024 14:21:35 +0100
Subject: [PATCH] [web] Remove unnecessary HTML elements

---
 web-src/src/components/ModalDialog.vue        |  76 ++--
 web-src/src/components/ModalDialogAddRss.vue  | 108 +++---
 .../components/ModalDialogAddUrlStream.vue    | 117 +++----
 web-src/src/components/ModalDialogAlbum.vue   | 202 ++++++-----
 .../components/ModalDialogAlbumSpotify.vue    | 151 ++++----
 web-src/src/components/ModalDialogArtist.vue  | 112 +++---
 .../components/ModalDialogArtistSpotify.vue   | 124 ++++---
 .../src/components/ModalDialogComposer.vue    | 119 +++----
 .../src/components/ModalDialogDirectory.vue   |  64 ++--
 web-src/src/components/ModalDialogGenre.vue   |  98 +++---
 .../src/components/ModalDialogPlaylist.vue    | 105 +++---
 .../components/ModalDialogPlaylistSave.vue    | 119 +++----
 .../components/ModalDialogPlaylistSpotify.vue | 131 ++++---
 .../src/components/ModalDialogQueueItem.vue   | 275 +++++++--------
 .../components/ModalDialogRemotePairing.vue   | 102 +++---
 web-src/src/components/ModalDialogTrack.vue   | 324 +++++++++---------
 .../components/ModalDialogTrackSpotify.vue    | 195 +++++------
 17 files changed, 1174 insertions(+), 1248 deletions(-)

diff --git a/web-src/src/components/ModalDialog.vue b/web-src/src/components/ModalDialog.vue
index 61fefbf8..81c7ca29 100644
--- a/web-src/src/components/ModalDialog.vue
+++ b/web-src/src/components/ModalDialog.vue
@@ -1,46 +1,44 @@
 <template>
-  <div>
-    <transition name="fade">
-      <div v-if="show" class="modal is-active">
-        <div class="modal-background" @click="$emit('close')" />
-        <div class="modal-content">
-          <div class="card">
-            <div class="card-content">
-              <p v-if="title" class="title is-4" v-text="title" />
-              <slot name="modal-content" />
-            </div>
-            <footer class="card-footer is-clipped">
-              <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="close_action" />
-              </a>
-              <a
-                v-if="delete_action"
-                class="card-footer-item has-background-danger has-text-white has-text-weight-bold"
-                @click="$emit('delete')"
-              >
-                <mdicon class="icon" name="delete" size="16" />
-                <span class="is-size-7" v-text="delete_action" />
-              </a>
-              <a
-                v-if="ok_action"
-                class="card-footer-item has-background-info has-text-white has-text-weight-bold"
-                @click="$emit('ok')"
-              >
-                <mdicon class="icon" name="check" size="16" />
-                <span class="is-size-7" v-text="ok_action" />
-              </a>
-            </footer>
+  <transition name="fade">
+    <div v-if="show" class="modal is-active">
+      <div class="modal-background" @click="$emit('close')" />
+      <div class="modal-content">
+        <div class="card">
+          <div class="card-content">
+            <p v-if="title" class="title is-4" v-text="title" />
+            <slot name="modal-content" />
           </div>
+          <footer class="card-footer is-clipped">
+            <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="close_action" />
+            </a>
+            <a
+              v-if="delete_action"
+              class="card-footer-item has-background-danger has-text-white has-text-weight-bold"
+              @click="$emit('delete')"
+            >
+              <mdicon class="icon" name="delete" size="16" />
+              <span class="is-size-7" v-text="delete_action" />
+            </a>
+            <a
+              v-if="ok_action"
+              class="card-footer-item has-background-info has-text-white has-text-weight-bold"
+              @click="$emit('ok')"
+            >
+              <mdicon class="icon" name="check" size="16" />
+              <span class="is-size-7" v-text="ok_action" />
+            </a>
+          </footer>
         </div>
-        <button
-          class="modal-close is-large"
-          aria-label="close"
-          @click="$emit('close')"
-        />
       </div>
-    </transition>
-  </div>
+      <button
+        class="modal-close is-large"
+        aria-label="close"
+        @click="$emit('close')"
+      />
+    </div>
+  </transition>
 </template>
 
 <script>
diff --git a/web-src/src/components/ModalDialogAddRss.vue b/web-src/src/components/ModalDialogAddRss.vue
index 5f52aa7b..1942fcdd 100644
--- a/web-src/src/components/ModalDialogAddRss.vue
+++ b/web-src/src/components/ModalDialogAddRss.vue
@@ -1,61 +1,59 @@
 <template>
-  <div>
-    <transition name="fade">
-      <div v-if="show" class="modal is-active">
-        <div class="modal-background" @click="$emit('close')" />
-        <div class="modal-content">
-          <form class="card" @submit.prevent="add_stream">
-            <div class="card-content">
-              <p class="title is-4" v-text="$t('dialog.add.rss.title')" />
-              <div class="field">
-                <p class="control has-icons-left">
-                  <input
-                    ref="url_field"
-                    v-model="url"
-                    class="input is-shadowless"
-                    type="url"
-                    pattern="http[s]?://.*"
-                    required
-                    :placeholder="$t('dialog.add.rss.placeholder')"
-                    :disabled="loading"
-                  />
-                  <mdicon class="icon is-left" name="rss" size="16" />
-                </p>
-                <p class="help" v-text="$t('dialog.add.rss.help')" />
-              </div>
-            </div>
-            <footer v-if="loading" class="card-footer">
-              <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')"
+  <transition name="fade">
+    <div v-if="show" class="modal is-active">
+      <div class="modal-background" @click="$emit('close')" />
+      <div class="modal-content">
+        <form class="card" @submit.prevent="add_stream">
+          <div class="card-content">
+            <p class="title is-4" v-text="$t('dialog.add.rss.title')" />
+            <div class="field">
+              <p class="control has-icons-left">
+                <input
+                  ref="url_field"
+                  v-model="url"
+                  class="input is-shadowless"
+                  type="url"
+                  pattern="http[s]?://.*"
+                  required
+                  :placeholder="$t('dialog.add.rss.placeholder')"
+                  :disabled="loading"
                 />
-              </a>
-            </footer>
-            <footer v-else class="card-footer is-clipped">
-              <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="card-footer-item has-background-info has-text-white has-text-weight-bold"
-                @click="add_stream"
-              >
-                <mdicon class="icon" name="playlist-plus" size="16" />
-                <span class="is-size-7" v-text="$t('dialog.add.rss.add')" />
-              </a>
-            </footer>
-          </form>
-        </div>
-        <button
-          class="modal-close is-large"
-          aria-label="close"
-          @click="$emit('close')"
-        />
+                <mdicon class="icon is-left" name="rss" size="16" />
+              </p>
+              <p class="help" v-text="$t('dialog.add.rss.help')" />
+            </div>
+          </div>
+          <footer v-if="loading" class="card-footer">
+            <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>
+          </footer>
+          <footer v-else class="card-footer is-clipped">
+            <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="card-footer-item has-background-info has-text-white has-text-weight-bold"
+              @click="add_stream"
+            >
+              <mdicon class="icon" name="playlist-plus" size="16" />
+              <span class="is-size-7" v-text="$t('dialog.add.rss.add')" />
+            </a>
+          </footer>
+        </form>
       </div>
-    </transition>
-  </div>
+      <button
+        class="modal-close is-large"
+        aria-label="close"
+        @click="$emit('close')"
+      />
+    </div>
+  </transition>
 </template>
 
 <script>
diff --git a/web-src/src/components/ModalDialogAddUrlStream.vue b/web-src/src/components/ModalDialogAddUrlStream.vue
index 9cff4192..ea536632 100644
--- a/web-src/src/components/ModalDialogAddUrlStream.vue
+++ b/web-src/src/components/ModalDialogAddUrlStream.vue
@@ -1,67 +1,62 @@
 <template>
-  <div>
-    <transition name="fade">
-      <div v-if="show" class="modal is-active">
-        <div class="modal-background" @click="$emit('close')" />
-        <div class="modal-content">
-          <form class="card" @submit.prevent="play">
-            <div class="card-content">
-              <p class="title is-4" v-text="$t('dialog.add.stream.title')" />
-              <div class="field">
-                <p class="control has-icons-left">
-                  <input
-                    ref="url_field"
-                    v-model="url"
-                    class="input is-shadowless"
-                    type="url"
-                    pattern="http[s]?://.*"
-                    required
-                    :placeholder="$t('dialog.add.stream.placeholder')"
-                    :disabled="loading"
-                  />
-                  <mdicon class="icon is-left" name="web" size="16" />
-                </p>
-              </div>
+  <transition name="fade">
+    <div v-if="show" class="modal is-active">
+      <div class="modal-background" @click="$emit('close')" />
+      <div class="modal-content">
+        <form class="card" @submit.prevent="play">
+          <div class="card-content">
+            <p class="title is-4" v-text="$t('dialog.add.stream.title')" />
+            <div class="field">
+              <p class="control has-icons-left">
+                <input
+                  ref="url_field"
+                  v-model="url"
+                  class="input is-shadowless"
+                  type="url"
+                  pattern="http[s]?://.*"
+                  required
+                  :placeholder="$t('dialog.add.stream.placeholder')"
+                  :disabled="loading"
+                />
+                <mdicon class="icon is-left" name="web" size="16" />
+              </p>
             </div>
-            <footer v-if="loading" class="card-footer">
-              <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>
-            </footer>
-            <footer v-else class="card-footer is-clipped">
-              <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="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="card-footer-item has-background-info has-text-white has-text-weight-bold"
-                @click="play"
-              >
-                <mdicon class="icon" name="play" size="16" />
-                <span class="is-size-7" v-text="$t('dialog.add.stream.play')" />
-              </a>
-            </footer>
-          </form>
-        </div>
-        <button
-          class="modal-close is-large"
-          aria-label="close"
-          @click="$emit('close')"
-        />
+          </div>
+          <footer v-if="loading" class="card-footer">
+            <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>
+          </footer>
+          <footer v-else class="card-footer is-clipped">
+            <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="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="card-footer-item has-background-info has-text-white has-text-weight-bold"
+              @click="play"
+            >
+              <mdicon class="icon" name="play" size="16" />
+              <span class="is-size-7" v-text="$t('dialog.add.stream.play')" />
+            </a>
+          </footer>
+        </form>
       </div>
-    </transition>
-  </div>
+      <button
+        class="modal-close is-large"
+        aria-label="close"
+        @click="$emit('close')"
+      />
+    </div>
+  </transition>
 </template>
 
 <script>
diff --git a/web-src/src/components/ModalDialogAlbum.vue b/web-src/src/components/ModalDialogAlbum.vue
index 68b70834..aa60eeb0 100644
--- a/web-src/src/components/ModalDialogAlbum.vue
+++ b/web-src/src/components/ModalDialogAlbum.vue
@@ -1,116 +1,114 @@
 <template>
-  <div>
-    <transition name="fade">
-      <div v-if="show" class="modal is-active">
-        <div class="modal-background" @click="$emit('close')" />
-        <div class="modal-content">
-          <div class="card">
-            <div class="card-content">
-              <cover-artwork
-                :artwork_url="album.artwork_url"
-                :artist="album.artist"
-                :album="album.name"
-                class="fd-has-shadow fd-cover fd-cover-normal-image mb-5"
+  <transition name="fade">
+    <div v-if="show" class="modal is-active">
+      <div class="modal-background" @click="$emit('close')" />
+      <div class="modal-content">
+        <div class="card">
+          <div class="card-content">
+            <cover-artwork
+              :artwork_url="album.artwork_url"
+              :artist="album.artist"
+              :album="album.name"
+              class="fd-has-shadow fd-cover fd-cover-normal-image mb-5"
+            />
+            <p class="title is-4">
+              <a
+                class="has-text-link"
+                @click="open_album"
+                v-text="album.name"
               />
-              <p class="title is-4">
+            </p>
+            <div v-if="media_kind_resolved === 'podcast'" class="buttons">
+              <a
+                class="button is-small"
+                @click="mark_played"
+                v-text="$t('dialog.album.mark-as-played')"
+              />
+              <a
+                v-if="album.data_kind === 'url'"
+                class="button is-small"
+                @click="$emit('remove-podcast')"
+                v-text="$t('dialog.album.remove-podcast')"
+              />
+            </div>
+            <div class="content is-small">
+              <p v-if="album.artist">
+                <span class="heading" v-text="$t('dialog.album.artist')" />
                 <a
-                  class="has-text-link"
-                  @click="open_album"
-                  v-text="album.name"
+                  class="title is-6 has-text-link"
+                  @click="open_artist"
+                  v-text="album.artist"
                 />
               </p>
-              <div v-if="media_kind_resolved === 'podcast'" class="buttons">
-                <a
-                  class="button is-small"
-                  @click="mark_played"
-                  v-text="$t('dialog.album.mark-as-played')"
+              <p v-if="album.date_released">
+                <span
+                  class="heading"
+                  v-text="$t('dialog.album.release-date')"
                 />
-                <a
-                  v-if="album.data_kind === 'url'"
-                  class="button is-small"
-                  @click="$emit('remove-podcast')"
-                  v-text="$t('dialog.album.remove-podcast')"
+                <span
+                  class="title is-6"
+                  v-text="$filters.date(album.date_released)"
                 />
-              </div>
-              <div class="content is-small">
-                <p v-if="album.artist">
-                  <span class="heading" v-text="$t('dialog.album.artist')" />
-                  <a
-                    class="title is-6 has-text-link"
-                    @click="open_artist"
-                    v-text="album.artist"
-                  />
-                </p>
-                <p v-if="album.date_released">
-                  <span
-                    class="heading"
-                    v-text="$t('dialog.album.release-date')"
-                  />
-                  <span
-                    class="title is-6"
-                    v-text="$filters.date(album.date_released)"
-                  />
-                </p>
-                <p v-else-if="album.year > 0">
-                  <span class="heading" v-text="$t('dialog.album.year')" />
-                  <span class="title is-6" v-text="album.year" />
-                </p>
-                <p>
-                  <span class="heading" v-text="$t('dialog.album.tracks')" />
-                  <span class="title is-6" v-text="album.track_count" />
-                </p>
-                <p>
-                  <span class="heading" v-text="$t('dialog.album.duration')" />
-                  <span
-                    class="title is-6"
-                    v-text="$filters.durationInHours(album.length_ms)"
-                  />
-                </p>
-                <p>
-                  <span class="heading" v-text="$t('dialog.album.type')" />
-                  <span
-                    class="title is-6"
-                    v-text="
-                      [
-                        $t('media.kind.' + album.media_kind),
-                        $t('data.kind.' + album.data_kind)
-                      ].join(' - ')
-                    "
-                  />
-                </p>
-                <p>
-                  <span class="heading" v-text="$t('dialog.album.added-on')" />
-                  <span
-                    class="title is-6"
-                    v-text="$filters.datetime(album.time_added)"
-                  />
-                </p>
-              </div>
+              </p>
+              <p v-else-if="album.year > 0">
+                <span class="heading" v-text="$t('dialog.album.year')" />
+                <span class="title is-6" v-text="album.year" />
+              </p>
+              <p>
+                <span class="heading" v-text="$t('dialog.album.tracks')" />
+                <span class="title is-6" v-text="album.track_count" />
+              </p>
+              <p>
+                <span class="heading" v-text="$t('dialog.album.duration')" />
+                <span
+                  class="title is-6"
+                  v-text="$filters.durationInHours(album.length_ms)"
+                />
+              </p>
+              <p>
+                <span class="heading" v-text="$t('dialog.album.type')" />
+                <span
+                  class="title is-6"
+                  v-text="
+                    [
+                      $t('media.kind.' + album.media_kind),
+                      $t('data.kind.' + album.data_kind)
+                    ].join(' - ')
+                  "
+                />
+              </p>
+              <p>
+                <span class="heading" v-text="$t('dialog.album.added-on')" />
+                <span
+                  class="title is-6"
+                  v-text="$filters.datetime(album.time_added)"
+                />
+              </p>
             </div>
-            <footer class="card-footer">
-              <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>
-            </footer>
           </div>
+          <footer class="card-footer">
+            <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>
+          </footer>
         </div>
-        <button
-          class="modal-close is-large"
-          aria-label="close"
-          @click="$emit('close')"
-        />
       </div>
-    </transition>
-  </div>
+      <button
+        class="modal-close is-large"
+        aria-label="close"
+        @click="$emit('close')"
+      />
+    </div>
+  </transition>
 </template>
 
 <script>
diff --git a/web-src/src/components/ModalDialogAlbumSpotify.vue b/web-src/src/components/ModalDialogAlbumSpotify.vue
index a9918d47..4a74ab9f 100644
--- a/web-src/src/components/ModalDialogAlbumSpotify.vue
+++ b/web-src/src/components/ModalDialogAlbumSpotify.vue
@@ -1,90 +1,85 @@
 <template>
-  <div>
-    <transition name="fade">
-      <div v-if="show" class="modal is-active">
-        <div class="modal-background" @click="$emit('close')" />
-        <div class="modal-content">
-          <div class="card">
-            <div class="card-content">
-              <cover-artwork
-                :artwork_url="artwork_url(album)"
-                :artist="album.artist"
-                :album="album.name"
-                class="fd-has-shadow fd-cover fd-cover-normal-image mb-5"
-                @load="artwork_loaded"
-                @error="artwork_error"
+  <transition name="fade">
+    <div v-if="show" class="modal is-active">
+      <div class="modal-background" @click="$emit('close')" />
+      <div class="modal-content">
+        <div class="card">
+          <div class="card-content">
+            <cover-artwork
+              :artwork_url="artwork_url(album)"
+              :artist="album.artist"
+              :album="album.name"
+              class="fd-has-shadow fd-cover fd-cover-normal-image mb-5"
+              @load="artwork_loaded"
+              @error="artwork_error"
+            />
+            <p class="title is-4">
+              <a
+                class="has-text-link"
+                @click="open_album"
+                v-text="album.name"
               />
-              <p class="title is-4">
+            </p>
+            <div class="content is-small">
+              <p>
+                <span
+                  class="heading"
+                  v-text="$t('dialog.spotify.album.album-artist')"
+                />
                 <a
-                  class="has-text-link"
-                  @click="open_album"
-                  v-text="album.name"
+                  class="title is-6 has-text-link"
+                  @click="open_artist"
+                  v-text="album.artists[0].name"
                 />
               </p>
-              <div class="content is-small">
-                <p>
-                  <span
-                    class="heading"
-                    v-text="$t('dialog.spotify.album.album-artist')"
-                  />
-                  <a
-                    class="title is-6 has-text-link"
-                    @click="open_artist"
-                    v-text="album.artists[0].name"
-                  />
-                </p>
-                <p>
-                  <span
-                    class="heading"
-                    v-text="$t('dialog.spotify.album.release-date')"
-                  />
-                  <span
-                    class="title is-6"
-                    v-text="$filters.date(album.release_date)"
-                  />
-                </p>
-                <p>
-                  <span
-                    class="heading"
-                    v-text="$t('dialog.spotify.album.type')"
-                  />
-                  <span class="title is-6" v-text="album.album_type" />
-                </p>
-              </div>
+              <p>
+                <span
+                  class="heading"
+                  v-text="$t('dialog.spotify.album.release-date')"
+                />
+                <span
+                  class="title is-6"
+                  v-text="$filters.date(album.release_date)"
+                />
+              </p>
+              <p>
+                <span
+                  class="heading"
+                  v-text="$t('dialog.spotify.album.type')"
+                />
+                <span class="title is-6" v-text="album.album_type" />
+              </p>
             </div>
-            <footer class="card-footer">
-              <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>
-            </footer>
           </div>
+          <footer class="card-footer">
+            <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>
+          </footer>
         </div>
-        <button
-          class="modal-close is-large"
-          aria-label="close"
-          @click="$emit('close')"
-        />
       </div>
-    </transition>
-  </div>
+      <button
+        class="modal-close is-large"
+        aria-label="close"
+        @click="$emit('close')"
+      />
+    </div>
+  </transition>
 </template>
 
 <script>
diff --git a/web-src/src/components/ModalDialogArtist.vue b/web-src/src/components/ModalDialogArtist.vue
index a63a33a5..925e6415 100644
--- a/web-src/src/components/ModalDialogArtist.vue
+++ b/web-src/src/components/ModalDialogArtist.vue
@@ -1,67 +1,65 @@
 <template>
-  <div>
-    <transition name="fade">
-      <div v-if="show" class="modal is-active">
-        <div class="modal-background" @click="$emit('close')" />
-        <div class="modal-content">
-          <div class="card">
-            <div class="card-content">
-              <p class="title is-4">
-                <a
-                  class="has-text-link"
-                  @click="open_artist"
-                  v-text="artist.name"
+  <transition name="fade">
+    <div v-if="show" class="modal is-active">
+      <div class="modal-background" @click="$emit('close')" />
+      <div class="modal-content">
+        <div class="card">
+          <div class="card-content">
+            <p class="title is-4">
+              <a
+                class="has-text-link"
+                @click="open_artist"
+                v-text="artist.name"
+              />
+            </p>
+            <div class="content is-small">
+              <p>
+                <span class="heading" v-text="$t('dialog.artist.albums')" />
+                <span class="title is-6" v-text="artist.album_count" />
+              </p>
+              <p>
+                <span class="heading" v-text="$t('dialog.artist.tracks')" />
+                <span class="title is-6" v-text="artist.track_count" />
+              </p>
+              <p>
+                <span class="heading" v-text="$t('dialog.artist.type')" />
+                <span
+                  class="title is-6"
+                  v-text="$t('data.kind.' + artist.data_kind)"
+                />
+              </p>
+              <p>
+                <span class="heading" v-text="$t('dialog.artist.added-on')" />
+                <span
+                  class="title is-6"
+                  v-text="$filters.datetime(artist.time_added)"
                 />
               </p>
-              <div class="content is-small">
-                <p>
-                  <span class="heading" v-text="$t('dialog.artist.albums')" />
-                  <span class="title is-6" v-text="artist.album_count" />
-                </p>
-                <p>
-                  <span class="heading" v-text="$t('dialog.artist.tracks')" />
-                  <span class="title is-6" v-text="artist.track_count" />
-                </p>
-                <p>
-                  <span class="heading" v-text="$t('dialog.artist.type')" />
-                  <span
-                    class="title is-6"
-                    v-text="$t('data.kind.' + artist.data_kind)"
-                  />
-                </p>
-                <p>
-                  <span class="heading" v-text="$t('dialog.artist.added-on')" />
-                  <span
-                    class="title is-6"
-                    v-text="$filters.datetime(artist.time_added)"
-                  />
-                </p>
-              </div>
             </div>
-            <footer class="card-footer">
-              <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>
-            </footer>
           </div>
+          <footer class="card-footer">
+            <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>
+          </footer>
         </div>
-        <button
-          class="modal-close is-large"
-          aria-label="close"
-          @click="$emit('close')"
-        />
       </div>
-    </transition>
-  </div>
+      <button
+        class="modal-close is-large"
+        aria-label="close"
+        @click="$emit('close')"
+      />
+    </div>
+  </transition>
 </template>
 
 <script>
diff --git a/web-src/src/components/ModalDialogArtistSpotify.vue b/web-src/src/components/ModalDialogArtistSpotify.vue
index b2fc7020..17c8b02a 100644
--- a/web-src/src/components/ModalDialogArtistSpotify.vue
+++ b/web-src/src/components/ModalDialogArtistSpotify.vue
@@ -1,73 +1,71 @@
 <template>
-  <div>
-    <transition name="fade">
-      <div v-if="show" class="modal is-active">
-        <div class="modal-background" @click="$emit('close')" />
-        <div class="modal-content">
-          <div class="card">
-            <div class="card-content">
-              <p class="title is-4">
-                <a
-                  class="has-text-link"
-                  @click="open_artist"
-                  v-text="artist.name"
+  <transition name="fade">
+    <div v-if="show" class="modal is-active">
+      <div class="modal-background" @click="$emit('close')" />
+      <div class="modal-content">
+        <div class="card">
+          <div class="card-content">
+            <p class="title is-4">
+              <a
+                class="has-text-link"
+                @click="open_artist"
+                v-text="artist.name"
+              />
+            </p>
+            <div class="content is-small">
+              <p>
+                <span
+                  class="heading"
+                  v-text="$t('dialog.spotify.artist.popularity')"
+                />
+                <span
+                  class="title is-6"
+                  v-text="
+                    [artist.popularity, artist.followers.total].join(' / ')
+                  "
                 />
               </p>
-              <div class="content is-small">
-                <p>
-                  <span
-                    class="heading"
-                    v-text="$t('dialog.spotify.artist.popularity')"
-                  />
-                  <span
-                    class="title is-6"
-                    v-text="
-                      [artist.popularity, artist.followers.total].join(' / ')
-                    "
-                  />
-                </p>
-                <p>
-                  <span
-                    class="heading"
-                    v-text="$t('dialog.spotify.artist.genres')"
-                  />
-                  <span class="title is-6" v-text="artist.genres.join(', ')" />
-                </p>
-              </div>
+              <p>
+                <span
+                  class="heading"
+                  v-text="$t('dialog.spotify.artist.genres')"
+                />
+                <span class="title is-6" v-text="artist.genres.join(', ')" />
+              </p>
             </div>
-            <footer class="card-footer">
-              <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>
-            </footer>
           </div>
+          <footer class="card-footer">
+            <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>
+          </footer>
         </div>
-        <button
-          class="modal-close is-large"
-          aria-label="close"
-          @click="$emit('close')"
-        />
       </div>
-    </transition>
-  </div>
+      <button
+        class="modal-close is-large"
+        aria-label="close"
+        @click="$emit('close')"
+      />
+    </div>
+  </transition>
 </template>
 
 <script>
diff --git a/web-src/src/components/ModalDialogComposer.vue b/web-src/src/components/ModalDialogComposer.vue
index 47d826e1..a780170e 100644
--- a/web-src/src/components/ModalDialogComposer.vue
+++ b/web-src/src/components/ModalDialogComposer.vue
@@ -1,69 +1,64 @@
 <template>
-  <div>
-    <transition name="fade">
-      <div v-if="show" class="modal is-active">
-        <div class="modal-background" @click="$emit('close')" />
-        <div class="modal-content">
-          <div class="card">
-            <div class="card-content">
-              <p class="title is-4">
-                <a
-                  class="has-text-link"
-                  @click="open_albums"
-                  v-text="composer.name"
-                />
-              </p>
-              <p>
-                <span class="heading" v-text="$t('dialog.composer.albums')" />
-                <a
-                  class="has-text-link is-6"
-                  @click="open_albums"
-                  v-text="composer.album_count"
-                />
-              </p>
-              <p>
-                <span class="heading" v-text="$t('dialog.composer.tracks')" />
-                <a
-                  class="has-text-link is-6"
-                  @click="open_tracks"
-                  v-text="composer.track_count"
-                />
-              </p>
-              <p>
-                <span class="heading" v-text="$t('dialog.composer.duration')" />
-                <span
-                  class="title is-6"
-                  v-text="$filters.durationInHours(composer.length_ms)"
-                />
-              </p>
-            </div>
-            <footer class="card-footer">
-              <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>
-            </footer>
+  <transition name="fade">
+    <div v-if="show" class="modal is-active">
+      <div class="modal-background" @click="$emit('close')" />
+      <div class="modal-content">
+        <div class="card">
+          <div class="card-content">
+            <p class="title is-4">
+              <a
+                class="has-text-link"
+                @click="open_albums"
+                v-text="composer.name"
+              />
+            </p>
+            <p>
+              <span class="heading" v-text="$t('dialog.composer.albums')" />
+              <a
+                class="has-text-link is-6"
+                @click="open_albums"
+                v-text="composer.album_count"
+              />
+            </p>
+            <p>
+              <span class="heading" v-text="$t('dialog.composer.tracks')" />
+              <a
+                class="has-text-link is-6"
+                @click="open_tracks"
+                v-text="composer.track_count"
+              />
+            </p>
+            <p>
+              <span class="heading" v-text="$t('dialog.composer.duration')" />
+              <span
+                class="title is-6"
+                v-text="$filters.durationInHours(composer.length_ms)"
+              />
+            </p>
           </div>
+          <footer class="card-footer">
+            <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>
+          </footer>
         </div>
-        <button
-          class="modal-close is-large"
-          aria-label="close"
-          @click="$emit('close')"
-        />
       </div>
-    </transition>
-  </div>
+      <button
+        class="modal-close is-large"
+        aria-label="close"
+        @click="$emit('close')"
+      />
+    </div>
+  </transition>
 </template>
 
 <script>
diff --git a/web-src/src/components/ModalDialogDirectory.vue b/web-src/src/components/ModalDialogDirectory.vue
index 17697c96..a7bd7f85 100644
--- a/web-src/src/components/ModalDialogDirectory.vue
+++ b/web-src/src/components/ModalDialogDirectory.vue
@@ -1,40 +1,38 @@
 <template>
-  <div>
-    <transition name="fade">
-      <div v-if="show" class="modal is-active">
-        <div class="modal-background" @click="$emit('close')" />
-        <div class="modal-content">
-          <div class="card">
-            <div class="card-content">
-              <p class="title is-4" v-text="directory" />
-            </div>
-            <footer class="card-footer">
-              <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.directory.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.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>
-            </footer>
+  <transition name="fade">
+    <div v-if="show" class="modal is-active">
+      <div class="modal-background" @click="$emit('close')" />
+      <div class="modal-content">
+        <div class="card">
+          <div class="card-content">
+            <p class="title is-4" v-text="directory" />
           </div>
+          <footer class="card-footer">
+            <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.directory.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.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>
+          </footer>
         </div>
-        <button
-          class="modal-close is-large"
-          aria-label="close"
-          @click="$emit('close')"
-        />
       </div>
-    </transition>
-  </div>
+      <button
+        class="modal-close is-large"
+        aria-label="close"
+        @click="$emit('close')"
+      />
+    </div>
+  </transition>
 </template>
 
 <script>
diff --git a/web-src/src/components/ModalDialogGenre.vue b/web-src/src/components/ModalDialogGenre.vue
index 80b2d67c..02982139 100644
--- a/web-src/src/components/ModalDialogGenre.vue
+++ b/web-src/src/components/ModalDialogGenre.vue
@@ -1,60 +1,58 @@
 <template>
-  <div>
-    <transition name="fade">
-      <div v-if="show" class="modal is-active">
-        <div class="modal-background" @click="$emit('close')" />
-        <div class="modal-content">
-          <div class="card">
-            <div class="card-content">
-              <p class="title is-4">
-                <a
-                  class="has-text-link"
-                  @click="open_genre"
-                  v-text="genre.name"
+  <transition name="fade">
+    <div v-if="show" class="modal is-active">
+      <div class="modal-background" @click="$emit('close')" />
+      <div class="modal-content">
+        <div class="card">
+          <div class="card-content">
+            <p class="title is-4">
+              <a
+                class="has-text-link"
+                @click="open_genre"
+                v-text="genre.name"
+              />
+            </p>
+            <div class="content is-small">
+              <p>
+                <span class="heading" v-text="$t('dialog.genre.albums')" />
+                <span class="title is-6" v-text="genre.album_count" />
+              </p>
+              <p>
+                <span class="heading" v-text="$t('dialog.genre.tracks')" />
+                <span class="title is-6" v-text="genre.track_count" />
+              </p>
+              <p>
+                <span class="heading" v-text="$t('dialog.genre.duration')" />
+                <span
+                  class="title is-6"
+                  v-text="$filters.durationInHours(genre.length_ms)"
                 />
               </p>
-              <div class="content is-small">
-                <p>
-                  <span class="heading" v-text="$t('dialog.genre.albums')" />
-                  <span class="title is-6" v-text="genre.album_count" />
-                </p>
-                <p>
-                  <span class="heading" v-text="$t('dialog.genre.tracks')" />
-                  <span class="title is-6" v-text="genre.track_count" />
-                </p>
-                <p>
-                  <span class="heading" v-text="$t('dialog.genre.duration')" />
-                  <span
-                    class="title is-6"
-                    v-text="$filters.durationInHours(genre.length_ms)"
-                  />
-                </p>
-              </div>
             </div>
-            <footer class="card-footer">
-              <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>
-            </footer>
           </div>
+          <footer class="card-footer">
+            <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>
+          </footer>
         </div>
-        <button
-          class="modal-close is-large"
-          aria-label="close"
-          @click="$emit('close')"
-        />
       </div>
-    </transition>
-  </div>
+      <button
+        class="modal-close is-large"
+        aria-label="close"
+        @click="$emit('close')"
+      />
+    </div>
+  </transition>
 </template>
 
 <script>
diff --git a/web-src/src/components/ModalDialogPlaylist.vue b/web-src/src/components/ModalDialogPlaylist.vue
index 0d83f158..885e622f 100644
--- a/web-src/src/components/ModalDialogPlaylist.vue
+++ b/web-src/src/components/ModalDialogPlaylist.vue
@@ -1,66 +1,61 @@
 <template>
-  <div>
-    <transition name="fade">
-      <div v-if="show" class="modal is-active">
-        <div class="modal-background" @click="$emit('close')" />
-        <div class="modal-content">
-          <div class="card">
-            <div class="card-content">
-              <p class="title is-4">
-                <a
-                  class="has-text-link"
-                  @click="open_playlist"
-                  v-text="playlist.name"
+  <transition name="fade">
+    <div v-if="show" class="modal is-active">
+      <div class="modal-background" @click="$emit('close')" />
+      <div class="modal-content">
+        <div class="card">
+          <div class="card-content">
+            <p class="title is-4">
+              <a
+                class="has-text-link"
+                @click="open_playlist"
+                v-text="playlist.name"
+              />
+            </p>
+            <div class="content is-small">
+              <p>
+                <span class="heading" v-text="$t('dialog.playlist.path')" />
+                <span class="title is-6" v-text="playlist.path" />
+              </p>
+              <p>
+                <span class="heading" v-text="$t('dialog.playlist.type')" />
+                <span
+                  class="title is-6"
+                  v-text="$t('playlist.type.' + playlist.type)"
                 />
               </p>
-              <div class="content is-small">
-                <p>
-                  <span class="heading" v-text="$t('dialog.playlist.path')" />
-                  <span class="title is-6" v-text="playlist.path" />
-                </p>
-                <p>
-                  <span class="heading" v-text="$t('dialog.playlist.type')" />
-                  <span
-                    class="title is-6"
-                    v-text="$t('playlist.type.' + playlist.type)"
-                  />
-                </p>
-                <p v-if="!playlist.folder">
-                  <span
-                    class="heading"
-                    v-text="$t('dialog.playlist.track-count')"
-                  />
-                  <span class="title is-6" v-text="playlist.item_count" />
-                </p>
-              </div>
-            </div>
-            <footer v-if="!playlist.folder" class="card-footer">
-              <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" />
+              <p v-if="!playlist.folder">
                 <span
-                  class="is-size-7"
-                  v-text="$t('dialog.playlist.add-next')"
+                  class="heading"
+                  v-text="$t('dialog.playlist.track-count')"
                 />
-              </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>
-            </footer>
+                <span class="title is-6" v-text="playlist.item_count" />
+              </p>
+            </div>
           </div>
+          <footer v-if="!playlist.folder" class="card-footer">
+            <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>
+          </footer>
         </div>
-        <button
-          class="modal-close is-large"
-          aria-label="close"
-          @click="$emit('close')"
-        />
       </div>
-    </transition>
-  </div>
+      <button
+        class="modal-close is-large"
+        aria-label="close"
+        @click="$emit('close')"
+      />
+    </div>
+  </transition>
 </template>
 
 <script>
diff --git a/web-src/src/components/ModalDialogPlaylistSave.vue b/web-src/src/components/ModalDialogPlaylistSave.vue
index 99dec78c..33618cb2 100644
--- a/web-src/src/components/ModalDialogPlaylistSave.vue
+++ b/web-src/src/components/ModalDialogPlaylistSave.vue
@@ -1,69 +1,64 @@
 <template>
-  <div>
-    <transition name="fade">
-      <div v-if="show" class="modal is-active">
-        <div class="modal-background" @click="$emit('close')" />
-        <div class="modal-content">
-          <div class="card">
-            <div class="card-content">
-              <p class="title is-4" v-text="$t('dialog.playlist.save.title')" />
-              <form class="mb-5" @submit.prevent="save">
-                <div class="field">
-                  <p class="control has-icons-left">
-                    <input
-                      ref="playlist_name_field"
-                      v-model="playlist_name"
-                      class="input is-shadowless"
-                      type="text"
-                      :placeholder="$t('dialog.playlist.save.playlist-name')"
-                      :disabled="loading"
-                    />
-                    <mdicon class="icon is-left" name="file-music" size="16" />
-                  </p>
-                </div>
-              </form>
-            </div>
-            <footer v-if="loading" class="card-footer">
-              <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>
-            </footer>
-            <footer v-else class="card-footer is-clipped">
-              <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="card-footer-item has-background-info has-text-white 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>
-            </footer>
+  <transition name="fade">
+    <div v-if="show" class="modal is-active">
+      <div class="modal-background" @click="$emit('close')" />
+      <div class="modal-content">
+        <div class="card">
+          <div class="card-content">
+            <p class="title is-4" v-text="$t('dialog.playlist.save.title')" />
+            <form class="mb-5" @submit.prevent="save">
+              <div class="field">
+                <p class="control has-icons-left">
+                  <input
+                    ref="playlist_name_field"
+                    v-model="playlist_name"
+                    class="input is-shadowless"
+                    type="text"
+                    :placeholder="$t('dialog.playlist.save.playlist-name')"
+                    :disabled="loading"
+                  />
+                  <mdicon class="icon is-left" name="file-music" size="16" />
+                </p>
+              </div>
+            </form>
           </div>
+          <footer v-if="loading" class="card-footer">
+            <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>
+          </footer>
+          <footer v-else class="card-footer is-clipped">
+            <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="card-footer-item has-background-info has-text-white 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>
+          </footer>
         </div>
-        <button
-          class="modal-close is-large"
-          aria-label="close"
-          @click="$emit('close')"
-        />
       </div>
-    </transition>
-  </div>
+      <button
+        class="modal-close is-large"
+        aria-label="close"
+        @click="$emit('close')"
+      />
+    </div>
+  </transition>
 </template>
 
 <script>
diff --git a/web-src/src/components/ModalDialogPlaylistSpotify.vue b/web-src/src/components/ModalDialogPlaylistSpotify.vue
index 03a97aa2..405f6e36 100644
--- a/web-src/src/components/ModalDialogPlaylistSpotify.vue
+++ b/web-src/src/components/ModalDialogPlaylistSpotify.vue
@@ -1,78 +1,73 @@
 <template>
-  <div>
-    <transition name="fade">
-      <div v-if="show" class="modal is-active">
-        <div class="modal-background" @click="$emit('close')" />
-        <div class="modal-content">
-          <div class="card">
-            <div class="card-content">
-              <p class="title is-4">
-                <a
-                  class="has-text-link"
-                  @click="open_playlist"
-                  v-text="playlist.name"
+  <transition name="fade">
+    <div v-if="show" class="modal is-active">
+      <div class="modal-background" @click="$emit('close')" />
+      <div class="modal-content">
+        <div class="card">
+          <div class="card-content">
+            <p class="title is-4">
+              <a
+                class="has-text-link"
+                @click="open_playlist"
+                v-text="playlist.name"
+              />
+            </p>
+            <div class="content is-small">
+              <p>
+                <span
+                  class="heading"
+                  v-text="$t('dialog.spotify.playlist.owner')"
                 />
+                <span class="title is-6" v-text="playlist.owner.display_name" />
+              </p>
+              <p>
+                <span
+                  class="heading"
+                  v-text="$t('dialog.spotify.playlist.tracks')"
+                />
+                <span class="title is-6" v-text="playlist.tracks.total" />
+              </p>
+              <p>
+                <span
+                  class="heading"
+                  v-text="$t('dialog.spotify.playlist.path')"
+                />
+                <span class="title is-6" v-text="playlist.uri" />
               </p>
-              <div class="content is-small">
-                <p>
-                  <span
-                    class="heading"
-                    v-text="$t('dialog.spotify.playlist.owner')"
-                  />
-                  <span
-                    class="title is-6"
-                    v-text="playlist.owner.display_name"
-                  />
-                </p>
-                <p>
-                  <span
-                    class="heading"
-                    v-text="$t('dialog.spotify.playlist.tracks')"
-                  />
-                  <span class="title is-6" v-text="playlist.tracks.total" />
-                </p>
-                <p>
-                  <span
-                    class="heading"
-                    v-text="$t('dialog.spotify.playlist.path')"
-                  />
-                  <span class="title is-6" v-text="playlist.uri" />
-                </p>
-              </div>
             </div>
-            <footer class="card-footer">
-              <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>
-            </footer>
           </div>
+          <footer class="card-footer">
+            <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>
+          </footer>
         </div>
-        <button
-          class="modal-close is-large"
-          aria-label="close"
-          @click="$emit('close')"
-        />
       </div>
-    </transition>
-  </div>
+      <button
+        class="modal-close is-large"
+        aria-label="close"
+        @click="$emit('close')"
+      />
+    </div>
+  </transition>
 </template>
 
 <script>
diff --git a/web-src/src/components/ModalDialogQueueItem.vue b/web-src/src/components/ModalDialogQueueItem.vue
index a0ab87c7..923a013e 100644
--- a/web-src/src/components/ModalDialogQueueItem.vue
+++ b/web-src/src/components/ModalDialogQueueItem.vue
@@ -1,151 +1,140 @@
 <template>
-  <div>
-    <transition name="fade">
-      <div v-if="show" class="modal is-active">
-        <div class="modal-background" @click="$emit('close')" />
-        <div class="modal-content">
-          <div class="card">
-            <div class="card-content">
-              <p class="title is-4" v-text="item.title" />
-              <p class="subtitle" v-text="item.artist" />
-              <div class="content is-small">
-                <p v-if="item.album">
-                  <span
-                    class="heading"
-                    v-text="$t('dialog.queue-item.album')"
-                  />
-                  <a
-                    class="title is-6 has-text-link"
-                    @click="open_album"
-                    v-text="item.album"
-                  />
-                </p>
-                <p v-if="item.album_artist">
-                  <span
-                    class="heading"
-                    v-text="$t('dialog.queue-item.album-artist')"
-                  />
-                  <a
-                    class="title is-6 has-text-link"
-                    @click="open_album_artist"
-                    v-text="item.album_artist"
-                  />
-                </p>
-                <p v-if="item.composer">
-                  <span
-                    class="heading"
-                    v-text="$t('dialog.queue-item.composer')"
-                  />
-                  <span class="title is-6" v-text="item.composer" />
-                </p>
-                <p v-if="item.year">
-                  <span class="heading" v-text="$t('dialog.queue-item.year')" />
-                  <span class="title is-6" v-text="item.year" />
-                </p>
-                <p v-if="item.genre">
-                  <span
-                    class="heading"
-                    v-text="$t('dialog.queue-item.genre')"
-                  />
-                  <a
-                    class="title is-6 has-text-link"
-                    @click="open_genre"
-                    v-text="item.genre"
-                  />
-                </p>
-                <p v-if="item.disc_number">
-                  <span
-                    class="heading"
-                    v-text="$t('dialog.queue-item.position')"
-                  />
-                  <span
-                    class="title is-6"
-                    v-text="[item.disc_number, item.track_number].join(' / ')"
-                  />
-                </p>
-                <p v-if="item.length_ms">
-                  <span
-                    class="heading"
-                    v-text="$t('dialog.queue-item.duration')"
-                  />
-                  <span
-                    class="title is-6"
-                    v-text="$filters.durationInHours(item.length_ms)"
-                  />
-                </p>
-                <p>
-                  <span class="heading" v-text="$t('dialog.queue-item.path')" />
-                  <span class="title is-6" v-text="item.path" />
-                </p>
-                <p>
-                  <span class="heading" v-text="$t('dialog.queue-item.type')" />
-                  <span class="title is-6">
-                    <span
-                      v-text="
-                        [
-                          $t('media.kind.' + item.media_kind),
-                          $t('data.kind.' + item.data_kind)
-                        ].join(' - ')
-                      "
-                    />
-                  </span>
-                </p>
-                <p v-if="item.samplerate">
-                  <span
-                    class="heading"
-                    v-text="$t('dialog.queue-item.quality')"
-                  />
-                  <span class="title is-6">
-                    <span v-text="item.type" />
-                    <span
-                      v-if="item.samplerate"
-                      v-text="
-                        $t('dialog.queue-item.samplerate', {
-                          rate: item.samplerate
-                        })
-                      "
-                    />
-                    <span
-                      v-if="item.channels"
-                      v-text="
-                        $t('dialog.queue-item.channels', {
-                          channels: $filters.channels(item.channels)
-                        })
-                      "
-                    />
-                    <span
-                      v-if="item.bitrate"
-                      v-text="
-                        $t('dialog.queue-item.bitrate', { rate: item.bitrate })
-                      "
-                    />
-                  </span>
-                </p>
-              </div>
-            </div>
-            <footer class="card-footer">
-              <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')"
+  <transition name="fade">
+    <div v-if="show" class="modal is-active">
+      <div class="modal-background" @click="$emit('close')" />
+      <div class="modal-content">
+        <div class="card">
+          <div class="card-content">
+            <p class="title is-4" v-text="item.title" />
+            <p class="subtitle" v-text="item.artist" />
+            <div class="content is-small">
+              <p v-if="item.album">
+                <span class="heading" v-text="$t('dialog.queue-item.album')" />
+                <a
+                  class="title is-6 has-text-link"
+                  @click="open_album"
+                  v-text="item.album"
                 />
-              </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>
-            </footer>
+              </p>
+              <p v-if="item.album_artist">
+                <span
+                  class="heading"
+                  v-text="$t('dialog.queue-item.album-artist')"
+                />
+                <a
+                  class="title is-6 has-text-link"
+                  @click="open_album_artist"
+                  v-text="item.album_artist"
+                />
+              </p>
+              <p v-if="item.composer">
+                <span
+                  class="heading"
+                  v-text="$t('dialog.queue-item.composer')"
+                />
+                <span class="title is-6" v-text="item.composer" />
+              </p>
+              <p v-if="item.year">
+                <span class="heading" v-text="$t('dialog.queue-item.year')" />
+                <span class="title is-6" v-text="item.year" />
+              </p>
+              <p v-if="item.genre">
+                <span class="heading" v-text="$t('dialog.queue-item.genre')" />
+                <a
+                  class="title is-6 has-text-link"
+                  @click="open_genre"
+                  v-text="item.genre"
+                />
+              </p>
+              <p v-if="item.disc_number">
+                <span
+                  class="heading"
+                  v-text="$t('dialog.queue-item.position')"
+                />
+                <span
+                  class="title is-6"
+                  v-text="[item.disc_number, item.track_number].join(' / ')"
+                />
+              </p>
+              <p v-if="item.length_ms">
+                <span
+                  class="heading"
+                  v-text="$t('dialog.queue-item.duration')"
+                />
+                <span
+                  class="title is-6"
+                  v-text="$filters.durationInHours(item.length_ms)"
+                />
+              </p>
+              <p>
+                <span class="heading" v-text="$t('dialog.queue-item.path')" />
+                <span class="title is-6" v-text="item.path" />
+              </p>
+              <p>
+                <span class="heading" v-text="$t('dialog.queue-item.type')" />
+                <span class="title is-6">
+                  <span
+                    v-text="
+                      [
+                        $t('media.kind.' + item.media_kind),
+                        $t('data.kind.' + item.data_kind)
+                      ].join(' - ')
+                    "
+                  />
+                </span>
+              </p>
+              <p v-if="item.samplerate">
+                <span
+                  class="heading"
+                  v-text="$t('dialog.queue-item.quality')"
+                />
+                <span class="title is-6">
+                  <span v-text="item.type" />
+                  <span
+                    v-if="item.samplerate"
+                    v-text="
+                      $t('dialog.queue-item.samplerate', {
+                        rate: item.samplerate
+                      })
+                    "
+                  />
+                  <span
+                    v-if="item.channels"
+                    v-text="
+                      $t('dialog.queue-item.channels', {
+                        channels: $filters.channels(item.channels)
+                      })
+                    "
+                  />
+                  <span
+                    v-if="item.bitrate"
+                    v-text="
+                      $t('dialog.queue-item.bitrate', { rate: item.bitrate })
+                    "
+                  />
+                </span>
+              </p>
+            </div>
           </div>
+          <footer class="card-footer">
+            <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>
+          </footer>
         </div>
-        <button
-          class="modal-close is-large"
-          aria-label="close"
-          @click="$emit('close')"
-        />
       </div>
-    </transition>
-  </div>
+      <button
+        class="modal-close is-large"
+        aria-label="close"
+        @click="$emit('close')"
+      />
+    </div>
+  </transition>
 </template>
 
 <script>
diff --git a/web-src/src/components/ModalDialogRemotePairing.vue b/web-src/src/components/ModalDialogRemotePairing.vue
index 75c0b6b7..ef694802 100644
--- a/web-src/src/components/ModalDialogRemotePairing.vue
+++ b/web-src/src/components/ModalDialogRemotePairing.vue
@@ -1,63 +1,55 @@
 <template>
-  <div>
-    <transition name="fade">
-      <div v-if="show" class="modal is-active">
-        <div class="modal-background" @click="$emit('close')" />
-        <div class="modal-content">
-          <div class="card">
-            <div class="card-content">
-              <p
-                class="title is-4"
-                v-text="$t('dialog.remote-pairing.title')"
-              />
-              <form @submit.prevent="kickoff_pairing">
-                <label class="label" v-text="pairing.remote" />
-                <div class="field">
-                  <div class="control">
-                    <input
-                      ref="pin_field"
-                      v-model="pairing_req.pin"
-                      class="input"
-                      type="text"
-                      pattern="[\d]{4}"
-                      :placeholder="$t('dialog.remote-pairing.pairing-code')"
-                    />
-                  </div>
+  <transition name="fade">
+    <div v-if="show" class="modal is-active">
+      <div class="modal-background" @click="$emit('close')" />
+      <div class="modal-content">
+        <div class="card">
+          <div class="card-content">
+            <p class="title is-4" v-text="$t('dialog.remote-pairing.title')" />
+            <form @submit.prevent="kickoff_pairing">
+              <label class="label" v-text="pairing.remote" />
+              <div class="field">
+                <div class="control">
+                  <input
+                    ref="pin_field"
+                    v-model="pairing_req.pin"
+                    class="input"
+                    type="text"
+                    pattern="[\d]{4}"
+                    :placeholder="$t('dialog.remote-pairing.pairing-code')"
+                  />
                 </div>
-              </form>
-            </div>
-            <footer class="card-footer is-clipped">
-              <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 has-background-info has-text-white has-text-weight-bold"
-                @click="kickoff_pairing"
-              >
-                <mdicon class="icon" name="cellphone" size="16" />
-                <span
-                  class="is-size-7"
-                  v-text="$t('dialog.remote-pairing.pair')"
-                />
-              </a>
-            </footer>
+              </div>
+            </form>
           </div>
+          <footer class="card-footer is-clipped">
+            <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 has-background-info has-text-white has-text-weight-bold"
+              @click="kickoff_pairing"
+            >
+              <mdicon class="icon" name="cellphone" size="16" />
+              <span
+                class="is-size-7"
+                v-text="$t('dialog.remote-pairing.pair')"
+              />
+            </a>
+          </footer>
         </div>
-        <button
-          class="modal-close is-large"
-          aria-label="close"
-          @click="$emit('close')"
-        />
       </div>
-    </transition>
-  </div>
+      <button
+        class="modal-close is-large"
+        aria-label="close"
+        @click="$emit('close')"
+      />
+    </div>
+  </transition>
 </template>
 
 <script>
diff --git a/web-src/src/components/ModalDialogTrack.vue b/web-src/src/components/ModalDialogTrack.vue
index 3fc67b47..dc12726d 100644
--- a/web-src/src/components/ModalDialogTrack.vue
+++ b/web-src/src/components/ModalDialogTrack.vue
@@ -1,182 +1,176 @@
 <template>
-  <div>
-    <transition name="fade">
-      <div v-if="show" class="modal is-active">
-        <div class="modal-background" @click="$emit('close')" />
-        <div class="modal-content">
-          <div class="card">
-            <div class="card-content">
-              <p class="title is-4" v-text="track.title" />
-              <p class="subtitle" v-text="track.artist" />
-              <div v-if="track.media_kind === 'podcast'" class="buttons">
+  <transition name="fade">
+    <div v-if="show" class="modal is-active">
+      <div class="modal-background" @click="$emit('close')" />
+      <div class="modal-content">
+        <div class="card">
+          <div class="card-content">
+            <p class="title is-4" v-text="track.title" />
+            <p class="subtitle" v-text="track.artist" />
+            <div v-if="track.media_kind === 'podcast'" class="buttons">
+              <a
+                v-if="track.play_count > 0"
+                class="button is-small"
+                @click="mark_new"
+                v-text="$t('dialog.track.mark-as-new')"
+              />
+              <a
+                v-if="track.play_count === 0"
+                class="button is-small"
+                @click="mark_played"
+                v-text="$t('dialog.track.mark-as-played')"
+              />
+            </div>
+            <div class="content is-small">
+              <p v-if="track.album">
+                <span class="heading" v-text="$t('dialog.track.album')" />
                 <a
-                  v-if="track.play_count > 0"
-                  class="button is-small"
-                  @click="mark_new"
-                  v-text="$t('dialog.track.mark-as-new')"
+                  class="title is-6 has-text-link"
+                  @click="open_album"
+                  v-text="track.album"
+                />
+              </p>
+              <p v-if="track.album_artist && track.media_kind !== 'audiobook'">
+                <span
+                  class="heading"
+                  v-text="$t('dialog.track.album-artist')"
                 />
                 <a
-                  v-if="track.play_count === 0"
-                  class="button is-small"
-                  @click="mark_played"
-                  v-text="$t('dialog.track.mark-as-played')"
+                  class="title is-6 has-text-link"
+                  @click="open_album_artist"
+                  v-text="track.album_artist"
                 />
-              </div>
-              <div class="content is-small">
-                <p v-if="track.album">
-                  <span class="heading" v-text="$t('dialog.track.album')" />
-                  <a
-                    class="title is-6 has-text-link"
-                    @click="open_album"
-                    v-text="track.album"
-                  />
-                </p>
-                <p
-                  v-if="track.album_artist && track.media_kind !== 'audiobook'"
-                >
+              </p>
+              <p v-if="track.composer">
+                <span class="heading" v-text="$t('dialog.track.composer')" />
+                <span class="title is-6" v-text="track.composer" />
+              </p>
+              <p v-if="track.date_released">
+                <span
+                  class="heading"
+                  v-text="$t('dialog.track.release-date')"
+                />
+                <span
+                  class="title is-6"
+                  v-text="$filters.date(track.date_released)"
+                />
+              </p>
+              <p v-else-if="track.year">
+                <span class="heading" v-text="$t('dialog.track.year')" />
+                <span class="title is-6" v-text="track.year" />
+              </p>
+              <p v-if="track.genre">
+                <span class="heading" v-text="$t('dialog.track.genre')" />
+                <a
+                  class="title is-6 has-text-link"
+                  @click="open_genre"
+                  v-text="track.genre"
+                />
+              </p>
+              <p v-if="track.disc_number">
+                <span class="heading" v-text="$t('dialog.track.position')" />
+                <span
+                  class="title is-6"
+                  v-text="[track.disc_number, track.track_number].join(' / ')"
+                />
+              </p>
+              <p v-if="track.length_ms">
+                <span class="heading" v-text="$t('dialog.track.duration')" />
+                <span
+                  class="title is-6"
+                  v-text="$filters.durationInHours(track.length_ms)"
+                />
+              </p>
+              <p>
+                <span class="heading" v-text="$t('dialog.track.path')" />
+                <span class="title is-6" v-text="track.path" />
+              </p>
+              <p>
+                <span class="heading" v-text="$t('dialog.track.type')" />
+                <span class="title is-6">
                   <span
-                    class="heading"
-                    v-text="$t('dialog.track.album-artist')"
-                  />
-                  <a
-                    class="title is-6 has-text-link"
-                    @click="open_album_artist"
-                    v-text="track.album_artist"
-                  />
-                </p>
-                <p v-if="track.composer">
-                  <span class="heading" v-text="$t('dialog.track.composer')" />
-                  <span class="title is-6" v-text="track.composer" />
-                </p>
-                <p v-if="track.date_released">
-                  <span
-                    class="heading"
-                    v-text="$t('dialog.track.release-date')"
-                  />
-                  <span
-                    class="title is-6"
-                    v-text="$filters.date(track.date_released)"
-                  />
-                </p>
-                <p v-else-if="track.year">
-                  <span class="heading" v-text="$t('dialog.track.year')" />
-                  <span class="title is-6" v-text="track.year" />
-                </p>
-                <p v-if="track.genre">
-                  <span class="heading" v-text="$t('dialog.track.genre')" />
-                  <a
-                    class="title is-6 has-text-link"
-                    @click="open_genre"
-                    v-text="track.genre"
-                  />
-                </p>
-                <p v-if="track.disc_number">
-                  <span class="heading" v-text="$t('dialog.track.position')" />
-                  <span
-                    class="title is-6"
-                    v-text="[track.disc_number, track.track_number].join(' / ')"
-                  />
-                </p>
-                <p v-if="track.length_ms">
-                  <span class="heading" v-text="$t('dialog.track.duration')" />
-                  <span
-                    class="title is-6"
-                    v-text="$filters.durationInHours(track.length_ms)"
-                  />
-                </p>
-                <p>
-                  <span class="heading" v-text="$t('dialog.track.path')" />
-                  <span class="title is-6" v-text="track.path" />
-                </p>
-                <p>
-                  <span class="heading" v-text="$t('dialog.track.type')" />
-                  <span class="title is-6">
-                    <span
-                      v-text="
-                        [
-                          $t('media.kind.' + track.media_kind),
-                          $t('data.kind.' + track.data_kind)
-                        ].join(' - ')
-                      "
-                    />
-                  </span>
-                </p>
-                <p v-if="track.samplerate">
-                  <span class="heading" v-text="$t('dialog.track.quality')" />
-                  <span class="title is-6">
-                    <span v-text="track.type" />
-                    <span
-                      v-if="track.samplerate"
-                      v-text="
-                        $t('dialog.track.samplerate', {
-                          rate: track.samplerate
-                        })
-                      "
-                    />
-                    <span
-                      v-if="track.channels"
-                      v-text="
-                        $t('dialog.track.channels', {
-                          channels: $filters.channels(track.channels)
-                        })
-                      "
-                    />
-                    <span
-                      v-if="track.bitrate"
-                      v-text="
-                        $t('dialog.track.bitrate', { rate: track.bitrate })
-                      "
-                    />
-                  </span>
-                </p>
-                <p>
-                  <span class="heading" v-text="$t('dialog.track.added-on')" />
-                  <span
-                    class="title is-6"
-                    v-text="$filters.datetime(track.time_added)"
-                  />
-                </p>
-                <p>
-                  <span class="heading" v-text="$t('dialog.track.rating')" />
-                  <span
-                    class="title is-6"
                     v-text="
-                      $t('dialog.track.rating-value', {
-                        rating: Math.floor(track.rating / 10)
+                      [
+                        $t('media.kind.' + track.media_kind),
+                        $t('data.kind.' + track.data_kind)
+                      ].join(' - ')
+                    "
+                  />
+                </span>
+              </p>
+              <p v-if="track.samplerate">
+                <span class="heading" v-text="$t('dialog.track.quality')" />
+                <span class="title is-6">
+                  <span v-text="track.type" />
+                  <span
+                    v-if="track.samplerate"
+                    v-text="
+                      $t('dialog.track.samplerate', {
+                        rate: track.samplerate
                       })
                     "
                   />
-                </p>
-                <p v-if="track.comment">
-                  <span class="heading" v-text="$t('dialog.track.comment')" />
-                  <span class="title is-6" v-text="track.comment" />
-                </p>
-              </div>
+                  <span
+                    v-if="track.channels"
+                    v-text="
+                      $t('dialog.track.channels', {
+                        channels: $filters.channels(track.channels)
+                      })
+                    "
+                  />
+                  <span
+                    v-if="track.bitrate"
+                    v-text="$t('dialog.track.bitrate', { rate: track.bitrate })"
+                  />
+                </span>
+              </p>
+              <p>
+                <span class="heading" v-text="$t('dialog.track.added-on')" />
+                <span
+                  class="title is-6"
+                  v-text="$filters.datetime(track.time_added)"
+                />
+              </p>
+              <p>
+                <span class="heading" v-text="$t('dialog.track.rating')" />
+                <span
+                  class="title is-6"
+                  v-text="
+                    $t('dialog.track.rating-value', {
+                      rating: Math.floor(track.rating / 10)
+                    })
+                  "
+                />
+              </p>
+              <p v-if="track.comment">
+                <span class="heading" v-text="$t('dialog.track.comment')" />
+                <span class="title is-6" v-text="track.comment" />
+              </p>
             </div>
-            <footer class="card-footer">
-              <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>
-            </footer>
           </div>
+          <footer class="card-footer">
+            <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>
+          </footer>
         </div>
-        <button
-          class="modal-close is-large"
-          aria-label="close"
-          @click="$emit('close')"
-        />
       </div>
-    </transition>
-  </div>
+      <button
+        class="modal-close is-large"
+        aria-label="close"
+        @click="$emit('close')"
+      />
+    </div>
+  </transition>
 </template>
 
 <script>
diff --git a/web-src/src/components/ModalDialogTrackSpotify.vue b/web-src/src/components/ModalDialogTrackSpotify.vue
index d0efb140..35d90666 100644
--- a/web-src/src/components/ModalDialogTrackSpotify.vue
+++ b/web-src/src/components/ModalDialogTrackSpotify.vue
@@ -1,108 +1,103 @@
 <template>
-  <div>
-    <transition name="fade">
-      <div v-if="show" class="modal is-active">
-        <div class="modal-background" @click="$emit('close')" />
-        <div class="modal-content">
-          <div class="card">
-            <div class="card-content">
-              <p class="title is-4" v-text="track.name" />
-              <p class="subtitle" v-text="track.artists[0].name" />
-              <div class="content is-small">
-                <p>
-                  <span
-                    class="heading"
-                    v-text="$t('dialog.spotify.track.album')"
-                  />
-                  <a
-                    class="title is-6 has-text-link"
-                    @click="open_album"
-                    v-text="album.name"
-                  />
-                </p>
-                <p>
-                  <span
-                    class="heading"
-                    v-text="$t('dialog.spotify.track.album-artist')"
-                  />
-                  <a
-                    class="title is-6 has-text-link"
-                    @click="open_artist"
-                    v-text="album.artists[0].name"
-                  />
-                </p>
-                <p>
-                  <span
-                    class="heading"
-                    v-text="$t('dialog.spotify.track.release-date')"
-                  />
-                  <span
-                    class="title is-6"
-                    v-text="$filters.date(album.release_date)"
-                  />
-                </p>
-                <p>
-                  <span
-                    class="heading"
-                    v-text="$t('dialog.spotify.track.position')"
-                  />
-                  <span
-                    class="title is-6"
-                    v-text="[track.disc_number, track.track_number].join(' / ')"
-                  />
-                </p>
-                <p>
-                  <span
-                    class="heading"
-                    v-text="$t('dialog.spotify.track.duration')"
-                  />
-                  <span
-                    class="title is-6"
-                    v-text="$filters.durationInHours(track.duration_ms)"
-                  />
-                </p>
-                <p>
-                  <span
-                    class="heading"
-                    v-text="$t('dialog.spotify.track.path')"
-                  />
-                  <span class="title is-6" v-text="track.uri" />
-                </p>
-              </div>
+  <transition name="fade">
+    <div v-if="show" class="modal is-active">
+      <div class="modal-background" @click="$emit('close')" />
+      <div class="modal-content">
+        <div class="card">
+          <div class="card-content">
+            <p class="title is-4" v-text="track.name" />
+            <p class="subtitle" v-text="track.artists[0].name" />
+            <div class="content is-small">
+              <p>
+                <span
+                  class="heading"
+                  v-text="$t('dialog.spotify.track.album')"
+                />
+                <a
+                  class="title is-6 has-text-link"
+                  @click="open_album"
+                  v-text="album.name"
+                />
+              </p>
+              <p>
+                <span
+                  class="heading"
+                  v-text="$t('dialog.spotify.track.album-artist')"
+                />
+                <a
+                  class="title is-6 has-text-link"
+                  @click="open_artist"
+                  v-text="album.artists[0].name"
+                />
+              </p>
+              <p>
+                <span
+                  class="heading"
+                  v-text="$t('dialog.spotify.track.release-date')"
+                />
+                <span
+                  class="title is-6"
+                  v-text="$filters.date(album.release_date)"
+                />
+              </p>
+              <p>
+                <span
+                  class="heading"
+                  v-text="$t('dialog.spotify.track.position')"
+                />
+                <span
+                  class="title is-6"
+                  v-text="[track.disc_number, track.track_number].join(' / ')"
+                />
+              </p>
+              <p>
+                <span
+                  class="heading"
+                  v-text="$t('dialog.spotify.track.duration')"
+                />
+                <span
+                  class="title is-6"
+                  v-text="$filters.durationInHours(track.duration_ms)"
+                />
+              </p>
+              <p>
+                <span
+                  class="heading"
+                  v-text="$t('dialog.spotify.track.path')"
+                />
+                <span class="title is-6" v-text="track.uri" />
+              </p>
             </div>
-            <footer class="card-footer">
-              <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>
-            </footer>
           </div>
+          <footer class="card-footer">
+            <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>
+          </footer>
         </div>
-        <button
-          class="modal-close is-large"
-          aria-label="close"
-          @click="$emit('close')"
-        />
       </div>
-    </transition>
-  </div>
+      <button
+        class="modal-close is-large"
+        aria-label="close"
+        @click="$emit('close')"
+      />
+    </div>
+  </transition>
 </template>
 
 <script>