[web] Refactor the heading title in the pages

2025-11-06 20:33:10 -05:00 · 2025-03-02 18:03:17 +01:00
parent ef3e64b9c9
commit bdad6d61bf
69 changed files with 903 additions and 823 deletions
--- a/web-src/src/components/ControlButton.vue
+++ b/web-src/src/components/ControlButton.vue
@@ -1,11 +1,11 @@
 <template>
  <button
    class="button is-small is-rounded"
-    :disabled="disabled"
-    @click="handler"
+    :disabled="button.disabled"
+    @click="button.handler"
  >
-    <mdicon v-if="icon" class="icon" :name="icon" size="16" />
-    <span v-if="label" v-text="$t(label)" />
+    <mdicon v-if="button.icon" class="icon" :name="button.icon" size="16" />
+    <span v-if="button.key" v-text="$t(button.key)" />
  </button>
 </template>

@@ -13,10 +13,7 @@
 export default {
  name: 'ControlButton',
  props: {
-    disabled: { default: false, type: Boolean },
-    handler: { required: true, type: Function },
-    icon: { default: '', type: String },
-    label: { default: '', type: String }
+    button: { required: true, type: Object }
  }
 }
 </script>
--- a/web-src/src/components/ControlTabList.vue
+++ b/web-src/src/components/ControlTabList.vue
@@ -21,7 +21,7 @@
                    />
                    <span
                      :class="{ 'is-hidden-mobile': link.icon }"
-                      v-text="$t(link.label)"
+                      v-text="$t(link.key)"
                    />
                  </a>
                </li>
--- a/web-src/src/components/HeadingTitle.vue
+++ b/web-src/src/components/HeadingTitle.vue
@@ -0,0 +1,24 @@
+<template>
+  <div v-if="content.title" class="title is-4" v-text="content.title" />
+  <div class="is-size-7 is-uppercase">
+    <template v-for="(part, index) in content.subtitle" :key="index">
+      <a
+        v-if="part.handler"
+        @click="part.handler"
+        v-text="$t(part.key, { count: $n(part.count) }, part.count)"
+      />
+      <span
+        v-else
+        v-text="$t(part.key, { count: $n(part.count) }, part.count)"
+      />
+      <span v-if="index !== content.subtitle.length - 1">&nbsp;|&nbsp;</span>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HeadingTitle',
+  props: { content: { required: true, type: Object } }
+}
+</script>
--- a/web-src/src/components/ListAlbums.vue
+++ b/web-src/src/components/ListAlbums.vue
@@ -100,16 +100,8 @@ export default {
  computed: {
    actions() {
      return [
-        {
-          label: this.$t('page.podcast.cancel'),
-          handler: 'cancel',
-          icon: 'cancel'
-        },
-        {
-          label: this.$t('page.podcast.remove'),
-          handler: 'remove',
-          icon: 'delete'
-        }
+        { key: 'page.podcast.cancel', handler: 'cancel', icon: 'cancel' },
+        { key: 'page.podcast.remove', handler: 'remove', icon: 'delete' }
      ]
    },
    media_kind_resolved() {
--- a/web-src/src/components/ListProperties.vue
+++ b/web-src/src/components/ListProperties.vue
@@ -13,10 +13,10 @@
  <slot v-if="$slots.buttons" name="buttons" />
  <div
    v-for="property in item.properties?.filter((p) => p.value)"
-    :key="property.label"
+    :key="property.key"
    class="mb-3"
  >
-    <div class="is-size-7 is-uppercase" v-text="$t(property.label)" />
+    <div class="is-size-7 is-uppercase" v-text="$t(property.key)" />
    <div class="title is-6">
      <a
        v-if="property.handler"
--- a/web-src/src/components/ModalDialog.vue
+++ b/web-src/src/components/ModalDialog.vue
@@ -11,13 +11,13 @@
          <footer v-if="actions.length" class="card-footer">
            <a
              v-for="action in actions"
-              :key="action.label"
+              :key="action.key"
              class="card-footer-item"
              :class="{ 'is-disabled': action.disabled }"
              @click="action.handler"
            >
              <mdicon class="icon" :name="action.icon" size="16" />
-              <span class="is-size-7" v-text="action.label" />
+              <span class="is-size-7" v-text="$t(action.key)" />
            </a>
          </footer>
        </div>
--- a/web-src/src/components/ModalDialogAddRss.vue
+++ b/web-src/src/components/ModalDialogAddRss.vue
@@ -37,16 +37,12 @@ export default {
  computed: {
    actions() {
      if (this.loading) {
-        return [{ label: this.$t('dialog.add.rss.processing'), icon: 'web' }]
+        return [{ key: 'dialog.add.rss.processing', icon: 'web' }]
      }
      return [
+        { key: 'dialog.add.rss.cancel', handler: this.cancel, icon: 'cancel' },
        {
-          label: this.$t('dialog.add.rss.cancel'),
-          handler: this.cancel,
-          icon: 'cancel'
-        },
-        {
-          label: this.$t('dialog.add.rss.add'),
+          key: 'dialog.add.rss.add',
          disabled: this.disabled,
          handler: this.add,
          icon: 'playlist-plus'
--- a/web-src/src/components/ModalDialogAddStream.vue
+++ b/web-src/src/components/ModalDialogAddStream.vue
@@ -38,22 +38,22 @@ export default {
  computed: {
    actions() {
      if (this.loading) {
-        return [{ label: this.$t('dialog.add.stream.processing'), icon: 'web' }]
+        return [{ key: 'dialog.add.stream.processing', icon: 'web' }]
      }
      return [
        {
-          label: this.$t('dialog.add.stream.cancel'),
+          key: 'dialog.add.stream.cancel',
          handler: this.cancel,
          icon: 'cancel'
        },
        {
-          label: this.$t('dialog.add.stream.add'),
+          key: 'dialog.add.stream.add',
          disabled: this.disabled,
          handler: this.add,
          icon: 'playlist-plus'
        },
        {
-          label: this.$t('dialog.add.stream.play'),
+          key: 'dialog.add.stream.play',
          disabled: this.disabled,
          handler: this.play,
          icon: 'play'
--- a/web-src/src/components/ModalDialogAlbum.vue
+++ b/web-src/src/components/ModalDialogAlbum.vue
@@ -25,15 +25,12 @@ export default {
      if (this.media_kind_resolved === 'podcast') {
        if (this.item.data_kind === 'url') {
          return [
-            { label: 'dialog.album.mark-as-played', handler: this.mark_played },
-            {
-              label: 'dialog.album.remove-podcast',
-              handler: this.remove_podcast
-            }
+            { key: 'dialog.album.mark-as-played', handler: this.mark_played },
+            { key: 'dialog.album.remove-podcast', handler: this.remove_podcast }
          ]
        }
        return [
-          { label: 'dialog.album.mark-as-played', handler: this.mark_played }
+          { key: 'dialog.album.mark-as-played', handler: this.mark_played }
        ]
      }
      return []
@@ -49,26 +46,26 @@ export default {
        uri: this.item.uri,
        properties: [
          {
-            label: 'property.artist',
+            key: 'property.artist',
            value: this.item.artist,
            handler: this.open_artist
          },
          {
-            label: 'property.release-date',
+            key: 'property.release-date',
            value: this.$filters.toDate(this.item.date_released)
          },
-          { label: 'property.year', value: this.item.year },
-          { label: 'property.tracks', value: this.item.track_count },
+          { key: 'property.year', value: this.item.year },
+          { key: 'property.tracks', value: this.item.track_count },
          {
-            label: 'property.duration',
+            key: 'property.duration',
            value: this.$filters.toTimecode(this.item.length_ms)
          },
          {
-            label: 'property.type',
+            key: 'property.type',
            value: `${this.$t(`media.kind.${this.item.media_kind}`)} - ${this.$t(`data.kind.${this.item.data_kind}`)}`
          },
          {
-            label: 'property.added-on',
+            key: 'property.added-on',
            value: this.$filters.toDateTime(this.item.time_added)
          }
        ]
--- a/web-src/src/components/ModalDialogAlbumSpotify.vue
+++ b/web-src/src/components/ModalDialogAlbumSpotify.vue
@@ -23,18 +23,15 @@ export default {
        uri: this.item.uri,
        properties: [
          {
-            label: 'property.artist',
+            key: 'property.artist',
            value: this.item?.artists?.[0]?.name,
            handler: this.open_artist
          },
          {
-            label: 'property.release-date',
+            key: 'property.release-date',
            value: this.$filters.toDate(this.item.release_date)
          },
-          {
-            label: 'property.type',
-            value: this.item.album_type
-          }
+          { key: 'property.type', value: this.item.album_type }
        ]
      }
    }
--- a/web-src/src/components/ModalDialogArtist.vue
+++ b/web-src/src/components/ModalDialogArtist.vue
@@ -21,14 +21,14 @@ export default {
        handler: this.open,
        uri: this.item.uri,
        properties: [
-          { label: 'property.albums', value: this.item.album_count },
-          { label: 'property.tracks', value: this.item.track_count },
+          { key: 'property.albums', value: this.item.album_count },
+          { key: 'property.tracks', value: this.item.track_count },
          {
-            label: 'property.type',
+            key: 'property.type',
            value: this.$t(`data.kind.${this.item.data_kind}`)
          },
          {
-            label: 'property.added-on',
+            key: 'property.added-on',
            value: this.$filters.toDateTime(this.item.time_added)
          }
        ]
--- a/web-src/src/components/ModalDialogArtistSpotify.vue
+++ b/web-src/src/components/ModalDialogArtistSpotify.vue
@@ -22,15 +22,12 @@ export default {
        uri: this.item.uri,
        properties: [
          {
-            label: 'property.popularity',
+            key: 'property.popularity',
            value: [this.item.popularity, this.item.followers?.total].join(
              ' / '
            )
          },
-          {
-            label: 'property.genres',
-            value: this.item.genres?.join(', ')
-          }
+          { key: 'property.genres', value: this.item.genres?.join(', ') }
        ]
      }
    }
--- a/web-src/src/components/ModalDialogComposer.vue
+++ b/web-src/src/components/ModalDialogComposer.vue
@@ -22,17 +22,17 @@ export default {
        expression: `composer is "${this.item.name}" and media_kind is music`,
        properties: [
          {
-            label: 'property.albums',
+            key: 'property.albums',
            value: this.item.album_count,
            handler: this.open_albums
          },
          {
-            label: 'property.tracks',
+            key: 'property.tracks',
            value: this.item.track_count,
            handler: this.open_tracks
          },
          {
-            label: 'property.duration',
+            key: 'property.duration',
            value: this.$filters.toTimecode(this.item.length_ms)
          }
        ]
--- a/web-src/src/components/ModalDialogGenre.vue
+++ b/web-src/src/components/ModalDialogGenre.vue
@@ -25,16 +25,10 @@ export default {
        handler: this.open,
        expression: `genre is "${this.item.name}" and media_kind is ${this.media_kind}`,
        properties: [
+          { key: 'property.albums', value: this.item.album_count },
+          { key: 'property.tracks', value: this.item.track_count },
          {
-            label: 'property.albums',
-            value: this.item.album_count
-          },
-          {
-            label: 'property.tracks',
-            value: this.item.track_count
-          },
-          {
-            label: 'property.duration',
+            key: 'property.duration',
            value: this.$filters.toTimecode(this.item.length_ms)
          }
        ]
--- a/web-src/src/components/ModalDialogPlayable.vue
+++ b/web-src/src/components/ModalDialogPlayable.vue
@@ -6,9 +6,8 @@
          <div class="buttons">
            <control-button
              v-for="button in buttons"
-              :key="button.label"
-              :handler="button.handler"
-              label="button.label"
+              :key="button.key"
+              :button="button"
            />
          </div>
        </template>
@@ -36,20 +35,16 @@ export default {
    actions() {
      return [
        {
-          label: this.$t('dialog.playable.add'),
+          key: 'dialog.playable.add',
          handler: this.queue_add,
          icon: 'playlist-plus'
        },
        {
-          label: this.$t('dialog.playable.add-next'),
+          key: 'dialog.playable.add-next',
          handler: this.queue_add_next,
          icon: 'playlist-play'
        },
-        {
-          label: this.$t('dialog.playable.play'),
-          handler: this.play,
-          icon: 'play'
-        }
+        { key: 'dialog.playable.play', handler: this.play, icon: 'play' }
      ]
    }
  },
--- a/web-src/src/components/ModalDialogPlaylist.vue
+++ b/web-src/src/components/ModalDialogPlaylist.vue
@@ -26,12 +26,12 @@ export default {
        uri: this.item.uri,
        uris: this.uris,
        properties: [
-          { label: 'property.tracks', value: this.item.item_count },
+          { key: 'property.tracks', value: this.item.item_count },
          {
-            label: 'property.type',
+            key: 'property.type',
            value: this.$t(`playlist.type.${this.item.type}`)
          },
-          { label: 'property.path', value: this.item.path }
+          { key: 'property.path', value: this.item.path }
        ]
      }
    }
--- a/web-src/src/components/ModalDialogPlaylistSave.vue
+++ b/web-src/src/components/ModalDialogPlaylistSave.vue
@@ -47,16 +47,16 @@ export default {
  computed: {
    actions() {
      if (this.loading) {
-        return [{ label: this.$t('dialog.playlist.save.saving'), icon: 'web' }]
+        return [{ key: 'dialog.playlist.save.saving', icon: 'web' }]
      }
      return [
        {
-          label: this.$t('dialog.playlist.save.cancel'),
+          key: 'dialog.playlist.save.cancel',
          handler: this.cancel,
          icon: 'cancel'
        },
        {
-          label: this.$t('dialog.playlist.save.save'),
+          key: 'dialog.playlist.save.save',
          disabled: this.disabled,
          handler: this.save,
          icon: 'download'
--- a/web-src/src/components/ModalDialogPlaylistSpotify.vue
+++ b/web-src/src/components/ModalDialogPlaylistSpotify.vue
@@ -21,15 +21,9 @@ export default {
        handler: this.open,
        uri: this.item.uri,
        properties: [
-          {
-            label: 'property.owner',
-            value: this.item.owner?.display_name
-          },
-          {
-            label: 'property.tracks',
-            value: this.item.tracks?.total
-          },
-          { label: 'property.path', value: this.item.uri }
+          { key: 'property.owner', value: this.item.owner?.display_name },
+          { key: 'property.tracks', value: this.item.tracks?.total },
+          { key: 'property.path', value: this.item.uri }
        ]
      }
    }
--- a/web-src/src/components/ModalDialogQueueItem.vue
+++ b/web-src/src/components/ModalDialogQueueItem.vue
@@ -30,12 +30,12 @@ export default {
    actions() {
      return [
        {
-          label: this.$t('dialog.queue-item.remove'),
+          key: this.$t('dialog.queue-item.remove'),
          handler: this.remove,
          icon: 'delete'
        },
        {
-          label: this.$t('dialog.queue-item.play'),
+          key: this.$t('dialog.queue-item.play'),
          handler: this.play,
          icon: 'play'
        }
@@ -47,37 +47,37 @@ export default {
        uri: this.item.uri,
        properties: [
          {
-            label: 'property.album',
+            key: 'property.album',
            value: this.item.album,
            handler: this.open_album
          },
          {
-            label: 'property.album-artist',
+            key: 'property.album-artist',
            value: this.item.album_artist,
            handler: this.open_album_artist
          },
-          { label: 'property.composer', value: this.item.composer },
-          { label: 'property.year', value: this.item.year },
+          { key: 'property.composer', value: this.item.composer },
+          { key: 'property.year', value: this.item.year },
          {
-            label: 'property.genre',
+            key: 'property.genre',
            value: this.item.genre,
            handler: this.open_genre
          },
          {
-            label: 'property.position',
+            key: 'property.position',
            value: [this.item.disc_number, this.item.track_number].join(' / ')
          },
          {
-            label: 'property.duration',
+            key: 'property.duration',
            value: this.$filters.toTimecode(this.item.length_ms)
          },
-          { label: 'property.path', value: this.item.path },
+          { key: 'property.path', value: this.item.path },
          {
-            label: 'property.type',
+            key: 'property.type',
            value: `${this.$t(`media.kind.${this.item.media_kind}`)} - ${this.$t(`data.kind.${this.item.data_kind}`)}`
          },
          {
-            label: 'property.quality',
+            key: 'property.quality',
            value: this.$t('dialog.track.quality-value', {
              format: this.item.type,
              bitrate: this.item.bitrate,
--- a/web-src/src/components/ModalDialogRemotePairing.vue
+++ b/web-src/src/components/ModalDialogRemotePairing.vue
@@ -47,12 +47,12 @@ export default {
    actions() {
      return [
        {
-          label: this.$t('dialog.remote-pairing.cancel'),
+          key: 'dialog.remote-pairing.cancel',
          handler: this.cancel,
          icon: 'cancel'
        },
        {
-          label: this.$t('dialog.remote-pairing.pair'),
+          key: 'dialog.remote-pairing.pair',
          handler: this.pair,
          icon: 'cellphone'
        }
--- a/web-src/src/components/ModalDialogTrack.vue
+++ b/web-src/src/components/ModalDialogTrack.vue
@@ -22,8 +22,8 @@ export default {
        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 }]
+        ? [{ key: 'dialog.track.mark-as-new', handler: this.mark_new }]
+        : [{ key: 'dialog.track.mark-as-played', handler: this.mark_played }]
    },
    playable() {
      return {
@@ -31,36 +31,36 @@ export default {
        uri: this.item.uri,
        properties: [
          {
-            label: 'property.album',
+            key: 'property.album',
            value: this.item.album,
            handler: this.open_album
          },
          {
-            label: 'property.album-artist',
+            key: 'property.album-artist',
            value: this.item.album_artist,
            handler: this.open_artist
          },
-          { label: 'property.composer', value: this.item.composer },
+          { key: 'property.composer', value: this.item.composer },
          {
-            label: 'property.release-date',
+            key: 'property.release-date',
            value: this.$filters.toDate(this.item.date_released)
          },
-          { label: 'property.year', value: this.item.year },
-          { label: 'property.genre', value: this.item.genre },
+          { key: 'property.year', value: this.item.year },
+          { key: 'property.genre', value: this.item.genre },
          {
-            label: 'property.position',
+            key: 'property.position',
            value: [this.item.disc_number, this.item.track_number].join(' / ')
          },
          {
-            label: 'property.duration',
+            key: 'property.duration',
            value: this.$filters.toTimecode(this.item.length_ms)
          },
          {
-            label: 'property.type',
+            key: 'property.type',
            value: `${this.$t(`media.kind.${this.item.media_kind}`)} - ${this.$t(`data.kind.${this.item.data_kind}`)}`
          },
          {
-            label: 'property.quality',
+            key: 'property.quality',
            value:
              this.item.data_kind !== 'spotify' &&
              this.$t('dialog.track.quality-value', {
@@ -71,17 +71,17 @@ export default {
              })
          },
          {
-            label: 'property.added-on',
+            key: 'property.added-on',
            value: this.$filters.toDateTime(this.item.time_added)
          },
          {
-            label: 'property.rating',
+            key: 'property.rating',
            value: this.$t('dialog.track.rating-value', {
              rating: Math.floor(this.item.rating / 10)
            })
          },
-          { label: 'property.comment', value: this.item.comment },
-          { label: 'property.path', value: this.item.path }
+          { key: 'property.comment', value: this.item.comment },
+          { key: 'property.path', value: this.item.path }
        ]
      }
    }
--- a/web-src/src/components/ModalDialogTrackSpotify.vue
+++ b/web-src/src/components/ModalDialogTrackSpotify.vue
@@ -24,28 +24,28 @@ export default {
        uri: this.item.uri,
        properties: [
          {
-            label: 'property.album',
+            key: 'property.album',
            value: this.item.album.name,
            handler: this.open_album
          },
          {
-            label: 'property.album-artist',
+            key: 'property.album-artist',
            value: this.item.artists[0]?.name,
            handler: this.open_artist
          },
          {
-            label: 'property.release-date',
+            key: 'property.release-date',
            value: this.$filters.toDate(this.item.album.release_date)
          },
          {
-            label: 'property.position',
+            key: 'property.position',
            value: [this.item.disc_number, this.item.track_number].join(' / ')
          },
          {
-            label: 'property.duration',
+            key: 'property.duration',
            value: this.$filters.toTimecode(this.item.duration_ms)
          },
-          { label: 'property.path', value: this.item.uri }
+          { key: 'property.path', value: this.item.uri }
        ]
      }
    }
--- a/web-src/src/components/ModalDialogUpdate.vue
+++ b/web-src/src/components/ModalDialogUpdate.vue
@@ -68,14 +68,14 @@ export default {
    actions() {
      const actions = [
        {
-          label: this.$t('dialog.update.cancel'),
+          key: 'dialog.update.cancel',
          handler: this.cancel,
          icon: 'cancel'
        }
      ]
      if (!this.libraryStore.updating) {
        actions.push({
-          label: this.$t('dialog.update.rescan'),
+          key: 'dialog.update.rescan',
          handler: this.analyse,
          icon: 'check'
        })
--- a/web-src/src/components/NavbarTop.vue
+++ b/web-src/src/components/NavbarTop.vue
@@ -33,7 +33,7 @@
                v-else-if="menu.action"
                class="dropdown-item"
                @click.stop.prevent="menu.action"
-                v-text="$t(menu.label)"
+                v-text="$t(menu.key)"
              />
              <control-link
                v-else
@@ -48,7 +48,7 @@
                    'pl-5': menu.sub,
                    'has-text-weight-semibold': menu.icon
                  }"
-                  v-text="$t(menu.label)"
+                  v-text="$t(menu.key)"
                />
              </control-link>
            </template>
@@ -82,82 +82,82 @@ export default {
      return [
        {
          name: 'playlists',
-          label: 'navigation.playlists',
+          key: 'navigation.playlists',
          icon: 'music-box-multiple',
          show: this.settingsStore.show_menu_item_playlists
        },
        {
          name: 'music',
-          label: 'navigation.music',
+          key: 'navigation.music',
          icon: 'music',
          show: this.settingsStore.show_menu_item_music
        },
        {
          name: 'music-artists',
-          label: 'navigation.artists',
+          key: 'navigation.artists',
          show: true,
          sub: true
        },
        {
          name: 'music-albums',
-          label: 'navigation.albums',
+          key: 'navigation.albums',
          show: true,
          sub: true
        },
        {
          name: 'music-genres',
-          label: 'navigation.genres',
+          key: 'navigation.genres',
          show: true,
          sub: true
        },
        {
          name: 'music-spotify',
-          label: 'navigation.spotify',
+          key: 'navigation.spotify',
          show: this.servicesStore.spotify.webapi_token_valid,
          sub: true
        },
        {
          name: 'podcasts',
-          label: 'navigation.podcasts',
+          key: 'navigation.podcasts',
          icon: 'microphone',
          show: this.settingsStore.show_menu_item_podcasts
        },
        {
          name: 'audiobooks',
-          label: 'navigation.audiobooks',
+          key: 'navigation.audiobooks',
          icon: 'book-open-variant',
          show: this.settingsStore.show_menu_item_audiobooks
        },
        {
          name: 'radio',
-          label: 'navigation.radio',
+          key: 'navigation.radio',
          icon: 'radio',
          show: this.settingsStore.show_menu_item_radio
        },
        {
          name: 'files',
-          label: 'navigation.files',
+          key: 'navigation.files',
          icon: 'folder-open',
          show: this.settingsStore.show_menu_item_files
        },
        {
          name: this.searchStore.search_source,
-          label: 'navigation.search',
+          key: 'navigation.search',
          icon: 'magnify',
          show: this.settingsStore.show_menu_item_search
        },
        { separator: true, show: true },
        {
          name: 'settings-webinterface',
-          label: 'navigation.settings',
+          key: 'navigation.settings',
          show: true
        },
        {
-          label: 'navigation.update-library',
+          key: 'navigation.update-library',
          action: this.open_update_dialog,
          show: true
        },
-        { name: 'about', label: 'navigation.about', show: true }
+        { name: 'about', key: 'navigation.about', show: true }
      ]
    },
    zindex() {
--- a/web-src/src/components/TabsAudiobooks.vue
+++ b/web-src/src/components/TabsAudiobooks.vue
@@ -14,17 +14,17 @@ export default {
        {
          to: { name: 'audiobooks-artists' },
          icon: 'account-music',
-          label: 'page.audiobooks.tabs.authors'
+          key: 'page.audiobooks.tabs.authors'
        },
        {
          to: { name: 'audiobooks-albums' },
          icon: 'album',
-          label: 'page.audiobooks.tabs.audiobooks'
+          key: 'page.audiobooks.tabs.audiobooks'
        },
        {
          to: { name: 'audiobooks-genres' },
          icon: 'speaker',
-          label: 'page.audiobooks.tabs.genres'
+          key: 'page.audiobooks.tabs.genres'
        }
      ]
    }
--- a/web-src/src/components/TabsMusic.vue
+++ b/web-src/src/components/TabsMusic.vue
@@ -18,34 +18,34 @@ export default {
        {
          to: { name: 'music-history' },
          icon: 'history',
-          label: 'page.music.tabs.history'
+          key: 'page.music.tabs.history'
        },
        {
          to: { name: 'music-artists' },
          icon: 'account-music',
-          label: 'page.music.tabs.artists'
+          key: 'page.music.tabs.artists'
        },
        {
          to: { name: 'music-albums' },
          icon: 'album',
-          label: 'page.music.tabs.albums'
+          key: 'page.music.tabs.albums'
        },
        {
          to: { name: 'music-genres' },
          icon: 'speaker',
-          label: 'page.music.tabs.genres'
+          key: 'page.music.tabs.genres'
        },
        {
          to: { name: 'music-composers' },
          icon: 'book-open-page-variant',
-          label: 'page.music.tabs.composers'
+          key: 'page.music.tabs.composers'
        }
      ]
      if (this.servicesStore.spotify.webapi_token_valid) {
        links.push({
          to: { name: 'music-spotify' },
          icon: 'spotify',
-          label: 'page.music.tabs.spotify'
+          key: 'page.music.tabs.spotify'
        })
      }
      return links
--- a/web-src/src/components/TabsSettings.vue
+++ b/web-src/src/components/TabsSettings.vue
@@ -12,20 +12,20 @@ export default {
    links() {
      return [
        {
-          to: { name: 'settings-webinterface' },
-          label: 'page.settings.tabs.general'
+          key: 'page.settings.tabs.general',
+          to: { name: 'settings-webinterface' }
        },
        {
-          to: { name: 'settings-remotes-outputs' },
-          label: 'page.settings.tabs.remotes-and-outputs'
+          key: 'page.settings.tabs.remotes-and-outputs',
+          to: { name: 'settings-remotes-outputs' }
        },
        {
-          to: { name: 'settings-artwork' },
-          label: 'page.settings.tabs.artwork'
+          key: 'page.settings.tabs.artwork',
+          to: { name: 'settings-artwork' }
        },
        {
-          to: { name: 'settings-online-services' },
-          label: 'page.settings.tabs.online-services'
+          key: 'page.settings.tabs.online-services',
+          to: { name: 'settings-online-services' }
        }
      ]
    }