From 570c663178e7cf2b8ab8704487f0316cd132c264 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sat, 15 Feb 2025 20:15:58 +0100
Subject: [PATCH] [web] Remove button section when not present

---
 .../src/components/ModalDialogPlayable.vue    |   4 +-
 web-src/src/components/ModalDialogTrack.vue   |  15 +--
 web-src/src/pages/PageSettingsArtwork.vue     | 104 ++++++++++--------
 3 files changed, 64 insertions(+), 59 deletions(-)

diff --git a/web-src/src/components/ModalDialogPlayable.vue b/web-src/src/components/ModalDialogPlayable.vue
index 32a1e577..a87266cd 100644
--- a/web-src/src/components/ModalDialogPlayable.vue
+++ b/web-src/src/components/ModalDialogPlayable.vue
@@ -2,7 +2,7 @@
   <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
     <template #content>
       <list-properties :item="item">
-        <template #buttons>
+        <template v-if="buttons.length" #buttons>
           <div class="buttons">
             <a
               v-for="button in buttons"
@@ -27,7 +27,7 @@ export default {
   name: 'ModalDialogPlayable',
   components: { ListProperties, ModalDialog },
   props: {
-    buttons: { default: null, type: Array },
+    buttons: { default: () => [], type: Array },
     item: { required: true, type: Object },
     show: Boolean
   },
diff --git a/web-src/src/components/ModalDialogTrack.vue b/web-src/src/components/ModalDialogTrack.vue
index f27aa679..d36934bb 100644
--- a/web-src/src/components/ModalDialogTrack.vue
+++ b/web-src/src/components/ModalDialogTrack.vue
@@ -28,17 +28,12 @@ export default {
   },
   computed: {
     buttons() {
-      if (this.item.media_kind === 'podcast') {
-        if (this.item.play_count > 0) {
-          return [{ label: 'dialog.track.mark-as-new', handler: this.mark_new }]
-        }
-        if (this.item.play_count === 0) {
-          return [
-            { label: 'dialog.track.mark-as-played', handler: this.mark_played }
-          ]
-        }
+      if (this.item.media_kind !== 'podcast') {
+        return []
       }
-      return []
+      return this.item.play_count > 0
+        ? [{ label: 'dialog.track.mark-as-new', handler: this.mark_new }]
+        : [{ label: 'dialog.track.mark-as-played', handler: this.mark_played }]
     },
     playable() {
       return {
diff --git a/web-src/src/pages/PageSettingsArtwork.vue b/web-src/src/pages/PageSettingsArtwork.vue
index 37aa944f..84d57a84 100644
--- a/web-src/src/pages/PageSettingsArtwork.vue
+++ b/web-src/src/pages/PageSettingsArtwork.vue
@@ -10,57 +10,67 @@
           class="content"
           v-text="$t('page.settings.artwork.explanation-1')"
         />
-        <control-setting-switch category="artwork" name="streamurl_ignore">
-          <template #label>
-            <span v-text="$t('page.settings.artwork.streaming')" />
-          </template>
-        </control-setting-switch>
-        <control-setting-switch
-          category="artwork"
-          name="show_cover_artwork_in_album_lists"
-        >
-          <template #label>
-            <span v-text="$t('page.settings.artwork.show-coverart')" />
-          </template>
-        </control-setting-switch>
+        <div class="content">
+          <control-setting-switch category="artwork" name="streamurl_ignore">
+            <template #label>
+              <span v-text="$t('page.settings.artwork.streaming')" />
+            </template>
+          </control-setting-switch>
+          <control-setting-switch
+            category="artwork"
+            name="show_cover_artwork_in_album_lists"
+          >
+            <template #label>
+              <span v-text="$t('page.settings.artwork.show-coverart')" />
+            </template>
+          </control-setting-switch>
+        </div>
         <div
           class="content"
           v-text="$t('page.settings.artwork.explanation-2')"
         />
-        <control-setting-switch
-          v-if="spotify.spotify_logged_in"
-          category="artwork"
-          name="use_artwork_source_spotify"
-        >
-          <template #label>
-            <span v-text="$t('page.settings.artwork.spotify')" />
-            <a href="https://www.spotify.com/" target="_blank">
-              <span class="icon"><mdicon name="open-in-new" size="16" /></span>
-            </a>
-          </template>
-        </control-setting-switch>
-        <control-setting-switch
-          category="artwork"
-          name="use_artwork_source_discogs"
-        >
-          <template #label>
-            <span v-text="$t('page.settings.artwork.discogs')" />
-            <a href="https://www.discogs.com/" target="_blank">
-              <span class="icon"><mdicon name="open-in-new" size="16" /></span>
-            </a>
-          </template>
-        </control-setting-switch>
-        <control-setting-switch
-          category="artwork"
-          name="use_artwork_source_coverartarchive"
-        >
-          <template #label>
-            <span v-text="$t('page.settings.artwork.coverartarchive')" />
-            <a href="https://coverartarchive.org/" target="_blank">
-              <span class="icon"><mdicon name="open-in-new" size="16" /></span>
-            </a>
-          </template>
-        </control-setting-switch>
+        <div class="content">
+          <control-setting-switch
+            v-if="spotify.spotify_logged_in"
+            category="artwork"
+            name="use_artwork_source_spotify"
+          >
+            <template #label>
+              <span v-text="$t('page.settings.artwork.spotify')" />
+              <a href="https://www.spotify.com/" target="_blank">
+                <span class="icon">
+                  <mdicon name="open-in-new" size="16" />
+                </span>
+              </a>
+            </template>
+          </control-setting-switch>
+          <control-setting-switch
+            category="artwork"
+            name="use_artwork_source_discogs"
+          >
+            <template #label>
+              <span v-text="$t('page.settings.artwork.discogs')" />
+              <a href="https://www.discogs.com/" target="_blank">
+                <span class="icon">
+                  <mdicon name="open-in-new" size="16" />
+                </span>
+              </a>
+            </template>
+          </control-setting-switch>
+          <control-setting-switch
+            category="artwork"
+            name="use_artwork_source_coverartarchive"
+          >
+            <template #label>
+              <span v-text="$t('page.settings.artwork.coverartarchive')" />
+              <a href="https://coverartarchive.org/" target="_blank">
+                <span class="icon">
+                  <mdicon name="open-in-new" size="16" />
+                </span>
+              </a>
+            </template>
+          </control-setting-switch>
+        </div>
       </template>
     </content-with-heading>
   </div>