[web] Lint code

2025-11-06 20:33:10 -05:00 · 2025-03-08 21:31:25 +01:00
parent 966d563418
commit c22372daa6
72 changed files with 471 additions and 671 deletions
--- a/web-src/src/components/ControlPlayerForward.vue
+++ b/web-src/src/components/ControlPlayerForward.vue
@@ -18,15 +18,16 @@ export default {
  props: {
    offset: { required: true, type: Number }
  },
-
  setup() {
    return {
      playerStore: usePlayerStore(),
      queueStore: useQueueStore()
    }
  },
-
  computed: {
+    current() {
+      return this.queueStore.current
+    },
    disabled() {
      return (
        this.queueStore?.count <= 0 ||
@@ -37,9 +38,6 @@ export default {
    is_stopped() {
      return this.player.state === 'stop'
    },
-    current() {
-      return this.queueStore.current
-    },
    player() {
      return this.playerStore
    },
@@ -47,7 +45,6 @@ export default {
      return ['podcast', 'audiobook'].includes(this.current.media_kind)
    }
  },
-
  methods: {
    seek() {
      if (!this.disabled) {
--- a/web-src/src/components/ControlPlayerPlay.vue
+++ b/web-src/src/components/ControlPlayerPlay.vue
@@ -15,7 +15,6 @@ export default {
  props: {
    show_disabled_message: Boolean
  },
-
  setup() {
    return {
      notificationsStore: useNotificationsStore(),
@@ -23,7 +22,6 @@ export default {
      queueStore: useQueueStore()
    }
  },
-
  computed: {
    disabled() {
      return this.queueStore?.count <= 0
@@ -44,7 +42,6 @@ export default {
      return this.playerStore.state === 'play'
    }
  },
-
  methods: {
    toggle() {
      if (this.disabled) {
--- a/web-src/src/components/ControlUrlField.vue
+++ b/web-src/src/components/ControlUrlField.vue
@@ -22,16 +22,16 @@
 export default {
  name: 'ControlUrlField',
  props: {
-    placeholder: { type: String, required: true },
-    icon: { type: String, required: true },
-    help: { type: String, default: '' },
-    loading: { type: Boolean, default: false }
+    help: { default: '', type: String },
+    icon: { required: true, type: String },
+    loading: { default: false, type: Boolean },
+    placeholder: { required: true, type: String }
  },
  emits: ['url-changed'],
  data() {
    return {
-      url: '',
-      disabled: true
+      disabled: true,
+      url: ''
    }
  },
  mounted() {
--- a/web-src/src/components/ListAlbums.vue
+++ b/web-src/src/components/ListAlbums.vue
@@ -83,11 +83,9 @@ export default {
    media_kind: { default: '', type: String }
  },
  emits: ['play-count-changed', 'podcast-deleted'],
-
  setup() {
    return { settingsStore: useSettingsStore() }
  },
-
  data() {
    return {
      rss_playlist_to_remove: {},
@@ -96,19 +94,17 @@ export default {
      show_remove_podcast_modal: false
    }
  },
-
  computed: {
    actions() {
      return [
-        { key: 'page.podcast.cancel', handler: 'cancel', icon: 'cancel' },
-        { key: 'page.podcast.remove', handler: 'remove', icon: 'delete' }
+        { handler: 'cancel', icon: 'cancel', key: 'page.podcast.cancel' },
+        { handler: 'remove', icon: 'delete', key: 'page.podcast.remove' }
      ]
    },
    media_kind_resolved() {
      return this.media_kind || this.selected_item.media_kind
    }
  },
-
  methods: {
    open(item) {
      this.selected_item = item
--- a/web-src/src/components/LyricsPane.vue
+++ b/web-src/src/components/LyricsPane.vue
@@ -36,11 +36,9 @@ import { usePlayerStore } from '@/stores/player'

 export default {
  name: 'LyricsPane',
-
  setup() {
    return { lyricsStore: useLyricsStore(), playerStore: usePlayerStore() }
  },
-
  data() {
    /*
     * Non reactive. Used as a cache to speed up the finding of lyrics
@@ -54,7 +52,6 @@ export default {
      autoScrolling: true
    }
  },
-
  computed: {
    is_playing() {
      return this.playerStore.state === 'play'
@@ -85,7 +82,7 @@ export default {
          verse.words = verse.text.match(/\S+\s*/gu).map((text) => {
            const duration = text.length * unitDuration
            delay += duration
-            return { duration, delay, text }
+            return { delay, duration, text }
          })
        })
      }
--- a/web-src/src/components/ModalDialog.vue
+++ b/web-src/src/components/ModalDialog.vue
@@ -31,9 +31,9 @@
 export default {
  name: 'ModalDialog',
  props: {
-    actions: { type: Array, required: true },
+    actions: { required: true, type: Array },
    show: Boolean,
-    title: { type: String, default: '' }
+    title: { default: '', type: String }
  },
  emits: ['close'],
  watch: {
--- a/web-src/src/components/ModalDialogAddRss.vue
+++ b/web-src/src/components/ModalDialogAddRss.vue
@@ -29,32 +29,28 @@ export default {
  emits: ['close', 'podcast-added'],
  data() {
    return {
-      loading: false,
      disabled: true,
+      loading: false,
      url: ''
    }
  },
  computed: {
    actions() {
      if (this.loading) {
-        return [{ key: 'dialog.add.rss.processing', icon: 'web' }]
+        return [{ icon: 'web', key: 'dialog.add.rss.processing' }]
      }
      return [
-        { key: 'actions.cancel', handler: this.cancel, icon: 'cancel' },
+        { handler: this.cancel, icon: 'cancel', key: 'actions.cancel' },
        {
-          key: 'actions.add',
          disabled: this.disabled,
          handler: this.add,
-          icon: 'playlist-plus'
+          icon: 'playlist-plus',
+          key: 'actions.add'
        }
      ]
    }
  },
  methods: {
-    onUrlChanged(url, disabled) {
-      this.url = url
-      this.disabled = disabled
-    },
    add() {
      this.loading = true
      webapi
@@ -70,6 +66,10 @@ export default {
    },
    cancel() {
      this.$emit('close')
+    },
+    onUrlChanged(url, disabled) {
+      this.url = url
+      this.disabled = disabled
    }
  }
 }
--- a/web-src/src/components/ModalDialogAddStream.vue
+++ b/web-src/src/components/ModalDialogAddStream.vue
@@ -30,38 +30,34 @@ export default {
  emits: ['close'],
  data() {
    return {
-      loading: false,
      disabled: true,
+      loading: false,
      url: ''
    }
  },
  computed: {
    actions() {
      if (this.loading) {
-        return [{ key: 'dialog.add.stream.processing', icon: 'web' }]
+        return [{ icon: 'web', key: 'dialog.add.stream.processing' }]
      }
      return [
-        { key: 'actions.cancel', handler: this.cancel, icon: 'cancel' },
+        { handler: this.cancel, icon: 'cancel', key: 'actions.cancel' },
        {
-          key: 'actions.add',
          disabled: this.disabled,
          handler: this.add,
-          icon: 'playlist-plus'
+          icon: 'playlist-plus',
+          key: 'actions.add'
        },
        {
-          key: 'actions.play',
          disabled: this.disabled,
          handler: this.play,
-          icon: 'play'
+          icon: 'play',
+          key: 'actions.play'
        }
      ]
    }
  },
  methods: {
-    onUrlChanged(url, disabled) {
-      this.url = url
-      this.disabled = disabled
-    },
    add() {
      this.loading = true
      webapi
@@ -77,6 +73,10 @@ export default {
    cancel() {
      this.$emit('close')
    },
+    onUrlChanged(url, disabled) {
+      this.url = url
+      this.disabled = disabled
+    },
    play() {
      this.loading = true
      webapi
--- a/web-src/src/components/ModalDialogAlbum.vue
+++ b/web-src/src/components/ModalDialogAlbum.vue
@@ -25,11 +25,11 @@ export default {
      if (this.media_kind_resolved === 'podcast') {
        if (this.item.data_kind === 'url') {
          return [
-            { key: 'actions.mark-as-played', handler: this.mark_played },
-            { key: 'actions.remove-podcast', handler: this.remove_podcast }
+            { handler: this.mark_played, key: 'actions.mark-as-played' },
+            { handler: this.remove_podcast, key: 'actions.remove-podcast' }
          ]
        }
-        return [{ key: 'actions.mark-as-played', handler: this.mark_played }]
+        return [{ handler: this.mark_played, key: 'actions.mark-as-played' }]
      }
      return []
    },
@@ -38,15 +38,14 @@ export default {
    },
    playable() {
      return {
-        name: this.item.name,
        handler: this.open,
        image: this.item.artwork_url,
-        uri: this.item.uri,
+        name: this.item.name,
        properties: [
          {
+            handler: this.open_artist,
            key: 'property.artist',
-            value: this.item.artist,
-            handler: this.open_artist
+            value: this.item.artist
          },
          {
            key: 'property.release-date',
@@ -66,7 +65,8 @@ export default {
            key: 'property.added-on',
            value: this.$filters.toDateTime(this.item.time_added)
          }
-        ]
+        ],
+        uri: this.item.uri
      }
    }
  },
--- a/web-src/src/components/ModalDialogAlbumSpotify.vue
+++ b/web-src/src/components/ModalDialogAlbumSpotify.vue
@@ -17,22 +17,22 @@ export default {
  computed: {
    playable() {
      return {
-        name: this.item.name || '',
-        image: this.item?.images?.[0]?.url || '',
        handler: this.open,
-        uri: this.item.uri,
+        image: this.item?.images?.[0]?.url || '',
+        name: this.item.name || '',
        properties: [
          {
+            handler: this.open_artist,
            key: 'property.artist',
-            value: this.item?.artists?.[0]?.name,
-            handler: this.open_artist
+            value: this.item?.artists?.[0]?.name
          },
          {
            key: 'property.release-date',
            value: this.$filters.toDate(this.item.release_date)
          },
          { key: 'property.type', value: this.item.album_type }
-        ]
+        ],
+        uri: this.item.uri
      }
    }
  },
--- a/web-src/src/components/ModalDialogArtist.vue
+++ b/web-src/src/components/ModalDialogArtist.vue
@@ -17,9 +17,8 @@ export default {
  computed: {
    playable() {
      return {
-        name: this.item.name,
        handler: this.open,
-        uri: this.item.uri,
+        name: this.item.name,
        properties: [
          { key: 'property.albums', value: this.item.album_count },
          { key: 'property.tracks', value: this.item.track_count },
@@ -31,7 +30,8 @@ export default {
            key: 'property.added-on',
            value: this.$filters.toDateTime(this.item.time_added)
          }
-        ]
+        ],
+        uri: this.item.uri
      }
    }
  },
--- a/web-src/src/components/ModalDialogArtistSpotify.vue
+++ b/web-src/src/components/ModalDialogArtistSpotify.vue
@@ -17,9 +17,8 @@ export default {
  computed: {
    playable() {
      return {
-        name: this.item.name,
        handler: this.open,
-        uri: this.item.uri,
+        name: this.item.name,
        properties: [
          {
            key: 'property.popularity',
@@ -28,7 +27,8 @@ export default {
            )
          },
          { key: 'property.genres', value: this.item.genres?.join(', ') }
-        ]
+        ],
+        uri: this.item.uri
      }
    }
  },
--- a/web-src/src/components/ModalDialogComposer.vue
+++ b/web-src/src/components/ModalDialogComposer.vue
@@ -17,19 +17,19 @@ export default {
  computed: {
    playable() {
      return {
-        name: this.item.name,
-        handler: this.open_albums,
        expression: `composer is "${this.item.name}" and media_kind is music`,
+        handler: this.open_albums,
+        name: this.item.name,
        properties: [
          {
+            handler: this.open_albums,
            key: 'property.albums',
-            value: this.item.album_count,
-            handler: this.open_albums
+            value: this.item.album_count
          },
          {
+            handler: this.open_tracks,
            key: 'property.tracks',
-            value: this.item.track_count,
-            handler: this.open_tracks
+            value: this.item.track_count
          },
          {
            key: 'property.duration',
--- a/web-src/src/components/ModalDialogDirectory.vue
+++ b/web-src/src/components/ModalDialogDirectory.vue
@@ -17,8 +17,8 @@ export default {
  computed: {
    playable() {
      return {
-        name: this.item,
-        expression: `path starts with "${this.item}" order by path asc`
+        expression: `path starts with "${this.item}" order by path asc`,
+        name: this.item
      }
    }
  }
--- a/web-src/src/components/ModalDialogGenre.vue
+++ b/web-src/src/components/ModalDialogGenre.vue
@@ -21,9 +21,9 @@ export default {
  computed: {
    playable() {
      return {
-        name: this.item.name,
-        handler: this.open,
        expression: `genre is "${this.item.name}" and media_kind is ${this.media_kind}`,
+        handler: this.open,
+        name: this.item.name,
        properties: [
          { key: 'property.albums', value: this.item.album_count },
          { key: 'property.tracks', value: this.item.track_count },
--- a/web-src/src/components/ModalDialogPlayable.vue
+++ b/web-src/src/components/ModalDialogPlayable.vue
@@ -34,13 +34,13 @@ export default {
  computed: {
    actions() {
      return [
-        { key: 'actions.add', handler: this.queue_add, icon: 'playlist-plus' },
+        { handler: this.queue_add, icon: 'playlist-plus', key: 'actions.add' },
        {
-          key: 'actions.add-next',
          handler: this.queue_add_next,
-          icon: 'playlist-play'
+          icon: 'playlist-play',
+          key: 'actions.add-next'
        },
-        { key: 'actions.play', handler: this.play, icon: 'play' }
+        { handler: this.play, icon: 'play', key: 'actions.play' }
      ]
    }
  },
--- a/web-src/src/components/ModalDialogPlaylist.vue
+++ b/web-src/src/components/ModalDialogPlaylist.vue
@@ -21,10 +21,8 @@ export default {
  computed: {
    playable() {
      return {
-        name: this.item.name,
        handler: this.open,
-        uri: this.item.uri,
-        uris: this.uris,
+        name: this.item.name,
        properties: [
          { key: 'property.tracks', value: this.item.item_count },
          {
@@ -32,7 +30,9 @@ export default {
            value: this.$t(`playlist.type.${this.item.type}`)
          },
          { key: 'property.path', value: this.item.path }
-        ]
+        ],
+        uri: this.item.uri,
+        uris: this.uris
      }
    }
  },
--- a/web-src/src/components/ModalDialogPlaylistSave.vue
+++ b/web-src/src/components/ModalDialogPlaylistSave.vue
@@ -47,15 +47,15 @@ export default {
  computed: {
    actions() {
      if (this.loading) {
-        return [{ key: 'dialog.playlist.save.saving', icon: 'web' }]
+        return [{ icon: 'web', key: 'dialog.playlist.save.saving' }]
      }
      return [
-        { key: 'actions.cancel', handler: this.cancel, icon: 'cancel' },
+        { handler: this.cancel, icon: 'cancel', key: 'actions.cancel' },
        {
-          key: 'actions.save',
          disabled: this.disabled,
          handler: this.save,
-          icon: 'download'
+          icon: 'download',
+          key: 'actions.save'
        }
      ]
    }
--- a/web-src/src/components/ModalDialogPlaylistSpotify.vue
+++ b/web-src/src/components/ModalDialogPlaylistSpotify.vue
@@ -17,14 +17,14 @@ export default {
  computed: {
    playable() {
      return {
-        name: this.item.name,
        handler: this.open,
-        uri: this.item.uri,
+        name: this.item.name,
        properties: [
          { key: 'property.owner', value: this.item.owner?.display_name },
          { key: 'property.tracks', value: this.item.tracks?.total },
          { key: 'property.path', value: this.item.uri }
-        ]
+        ],
+        uri: this.item.uri
      }
    }
  },
--- a/web-src/src/components/ModalDialogQueueItem.vue
+++ b/web-src/src/components/ModalDialogQueueItem.vue
@@ -29,31 +29,30 @@ export default {
  computed: {
    actions() {
      return [
-        { key: 'actions.remove', handler: this.remove, icon: 'delete' },
-        { key: 'actions.play', handler: this.play, icon: 'play' }
+        { handler: this.remove, icon: 'delete', key: 'actions.remove' },
+        { handler: this.play, icon: 'play', key: 'actions.play' }
      ]
    },
    playable() {
      return {
        name: this.item.title,
-        uri: this.item.uri,
        properties: [
          {
+            handler: this.open_album,
            key: 'property.album',
-            value: this.item.album,
-            handler: this.open_album
+            value: this.item.album
          },
          {
+            handler: this.open_album_artist,
            key: 'property.album-artist',
-            value: this.item.album_artist,
-            handler: this.open_album_artist
+            value: this.item.album_artist
          },
          { key: 'property.composer', value: this.item.composer },
          { key: 'property.year', value: this.item.year },
          {
+            handler: this.open_genre,
            key: 'property.genre',
-            value: this.item.genre,
-            handler: this.open_genre
+            value: this.item.genre
          },
          {
            key: 'property.position',
@@ -71,13 +70,14 @@ export default {
          {
            key: 'property.quality',
            value: this.$t('dialog.track.quality-value', {
-              format: this.item.type,
              bitrate: this.item.bitrate,
              channels: this.$t('count.channels', this.item.channels),
+              format: this.item.type,
              samplerate: this.item.samplerate
            })
          }
-        ]
+        ],
+        uri: this.item.uri
      }
    }
  },
--- a/web-src/src/components/ModalDialogRemotePairing.vue
+++ b/web-src/src/components/ModalDialogRemotePairing.vue
@@ -46,8 +46,8 @@ export default {
  computed: {
    actions() {
      return [
-        { key: 'actions.cancel', handler: this.cancel, icon: 'cancel' },
-        { key: 'actions.pair', handler: this.pair, icon: 'cellphone' }
+        { handler: this.cancel, icon: 'cancel', key: 'actions.cancel' },
+        { handler: this.pair, icon: 'cellphone', key: 'actions.pair' }
      ]
    },
    pairing() {
--- a/web-src/src/components/ModalDialogTrack.vue
+++ b/web-src/src/components/ModalDialogTrack.vue
@@ -22,23 +22,22 @@ export default {
        return []
      }
      return this.item.play_count > 0
-        ? [{ key: 'actions.mark-as-new', handler: this.mark_new }]
-        : [{ key: 'actions.mark-as-played', handler: this.mark_played }]
+        ? [{ handler: this.mark_new, key: 'actions.mark-as-new' }]
+        : [{ handler: this.mark_played, key: 'actions.mark-as-played' }]
    },
    playable() {
      return {
        name: this.item.title,
-        uri: this.item.uri,
        properties: [
          {
+            handler: this.open_album,
            key: 'property.album',
-            value: this.item.album,
-            handler: this.open_album
+            value: this.item.album
          },
          {
+            handler: this.open_artist,
            key: 'property.album-artist',
-            value: this.item.album_artist,
-            handler: this.open_artist
+            value: this.item.album_artist
          },
          { key: 'property.composer', value: this.item.composer },
          {
@@ -68,9 +67,9 @@ export default {
            value:
              this.item.data_kind !== 'spotify' &&
              this.$t('dialog.track.quality-value', {
-                format: this.item.type,
                bitrate: this.item.bitrate,
                channels: this.$t('count.channels', this.item.channels),
+                format: this.item.type,
                samplerate: this.item.samplerate
              })
          },
@@ -86,7 +85,8 @@ export default {
          },
          { key: 'property.comment', value: this.item.comment },
          { key: 'property.path', value: this.item.path }
-        ]
+        ],
+        uri: this.item.uri
      }
    }
  },
--- a/web-src/src/components/ModalDialogTrackSpotify.vue
+++ b/web-src/src/components/ModalDialogTrackSpotify.vue
@@ -21,17 +21,16 @@ export default {
      }
      return {
        name: this.item.name,
-        uri: this.item.uri,
        properties: [
          {
+            handler: this.open_album,
            key: 'property.album',
-            value: this.item.album.name,
-            handler: this.open_album
+            value: this.item.album.name
          },
          {
+            handler: this.open_artist,
            key: 'property.album-artist',
-            value: this.item.artists[0]?.name,
-            handler: this.open_artist
+            value: this.item.artists[0]?.name
          },
          {
            key: 'property.release-date',
@@ -46,7 +45,8 @@ export default {
            value: this.$filters.toTimecode(this.item.duration_ms)
          },
          { key: 'property.path', value: this.item.uri }
-        ]
+        ],
+        uri: this.item.uri
      }
    }
  },
--- a/web-src/src/components/ModalDialogUpdate.vue
+++ b/web-src/src/components/ModalDialogUpdate.vue
@@ -67,13 +67,13 @@ export default {
  computed: {
    actions() {
      const actions = [
-        { key: 'actions.cancel', handler: this.cancel, icon: 'cancel' }
+        { handler: this.cancel, icon: 'cancel', key: 'actions.cancel' }
      ]
      if (!this.libraryStore.updating) {
        actions.push({
-          key: 'actions.rescan',
          handler: this.analyse,
-          icon: 'check'
+          icon: 'check',
+          key: 'actions.rescan'
        })
      }
      return actions
@@ -86,16 +86,16 @@ export default {
    }
  },
  methods: {
-    cancel() {
-      this.$emit('close')
-      this.libraryStore.update_dialog_scan_kind = ''
-    },
    analyse() {
      if (this.rescan_metadata) {
        webapi.library_rescan(this.libraryStore.update_dialog_scan_kind)
      } else {
        webapi.library_update(this.libraryStore.update_dialog_scan_kind)
      }
+    },
+    cancel() {
+      this.$emit('close')
+      this.libraryStore.update_dialog_scan_kind = ''
    }
  }
 }
--- a/web-src/src/components/NavbarBottom.vue
+++ b/web-src/src/components/NavbarBottom.vue
@@ -92,8 +92,8 @@ export default {
  name: 'NavbarBottom',
  components: {
    ControlLink,
-    ControlOutputVolume,
    ControlMainVolume,
+    ControlOutputVolume,
    ControlPlayerBack,
    ControlPlayerConsume,
    ControlPlayerForward,
@@ -116,11 +116,11 @@ export default {
  },

  computed: {
-    is_now_playing_page() {
-      return this.$route.name === 'now-playing'
-    },
    current() {
      return this.queueStore.current
+    },
+    is_now_playing_page() {
+      return this.$route.name === 'now-playing'
    }
  },
  methods: {
--- a/web-src/src/components/NavbarTop.vue
+++ b/web-src/src/components/NavbarTop.vue
@@ -81,83 +81,83 @@ export default {
    menus() {
      return [
        {
-          name: 'playlists',
-          key: 'navigation.playlists',
          icon: 'music-box-multiple',
+          key: 'navigation.playlists',
+          name: 'playlists',
          show: this.settingsStore.show_menu_item_playlists
        },
        {
-          name: 'music',
-          key: 'navigation.music',
          icon: 'music',
+          key: 'navigation.music',
+          name: 'music',
          show: this.settingsStore.show_menu_item_music
        },
        {
-          name: 'music-artists',
          key: 'navigation.artists',
+          name: 'music-artists',
          show: true,
          sub: true
        },
        {
-          name: 'music-albums',
          key: 'navigation.albums',
+          name: 'music-albums',
          show: true,
          sub: true
        },
        {
-          name: 'music-genres',
          key: 'navigation.genres',
+          name: 'music-genres',
          show: true,
          sub: true
        },
        {
-          name: 'music-spotify',
          key: 'navigation.spotify',
+          name: 'music-spotify',
          show: this.servicesStore.spotify.webapi_token_valid,
          sub: true
        },
        {
-          name: 'podcasts',
-          key: 'navigation.podcasts',
          icon: 'microphone',
+          key: 'navigation.podcasts',
+          name: 'podcasts',
          show: this.settingsStore.show_menu_item_podcasts
        },
        {
-          name: 'audiobooks',
-          key: 'navigation.audiobooks',
          icon: 'book-open-variant',
+          key: 'navigation.audiobooks',
+          name: 'audiobooks',
          show: this.settingsStore.show_menu_item_audiobooks
        },
        {
-          name: 'radio',
-          key: 'navigation.radio',
          icon: 'radio',
+          key: 'navigation.radio',
+          name: 'radio',
          show: this.settingsStore.show_menu_item_radio
        },
        {
-          name: 'files',
-          key: 'navigation.files',
          icon: 'folder-open',
+          key: 'navigation.files',
+          name: 'files',
          show: this.settingsStore.show_menu_item_files
        },
        {
-          name: this.searchStore.search_source,
-          key: 'navigation.search',
          icon: 'magnify',
+          key: 'navigation.search',
+          name: this.searchStore.search_source,
          show: this.settingsStore.show_menu_item_search
        },
        { separator: true, show: true },
        {
-          name: 'settings-webinterface',
          key: 'navigation.settings',
+          name: 'settings-webinterface',
          show: true
        },
        {
-          key: 'navigation.update-library',
          action: this.open_update_dialog,
+          key: 'navigation.update-library',
          show: true
        },
-        { name: 'about', key: 'navigation.about', show: true }
+        { key: 'navigation.about', name: 'about', show: true }
      ]
    },
    zindex() {
--- a/web-src/src/components/TabsAudiobooks.vue
+++ b/web-src/src/components/TabsAudiobooks.vue
@@ -12,19 +12,19 @@ export default {
    links() {
      return [
        {
-          to: { name: 'audiobooks-artists' },
          icon: 'account-music',
-          key: 'page.audiobooks.tabs.authors'
+          key: 'page.audiobooks.tabs.authors',
+          to: { name: 'audiobooks-artists' }
        },
        {
-          to: { name: 'audiobooks-albums' },
          icon: 'album',
-          key: 'page.audiobooks.tabs.audiobooks'
+          key: 'page.audiobooks.tabs.audiobooks',
+          to: { name: 'audiobooks-albums' }
        },
        {
-          to: { name: 'audiobooks-genres' },
          icon: 'speaker',
-          key: 'page.audiobooks.tabs.genres'
+          key: 'page.audiobooks.tabs.genres',
+          to: { name: 'audiobooks-genres' }
        }
      ]
    }
--- a/web-src/src/components/TabsMusic.vue
+++ b/web-src/src/components/TabsMusic.vue
@@ -16,36 +16,36 @@ export default {
    links() {
      const links = [
        {
-          to: { name: 'music-history' },
          icon: 'history',
-          key: 'page.music.tabs.history'
+          key: 'page.music.tabs.history',
+          to: { name: 'music-history' }
        },
        {
-          to: { name: 'music-artists' },
          icon: 'account-music',
-          key: 'page.music.tabs.artists'
+          key: 'page.music.tabs.artists',
+          to: { name: 'music-artists' }
        },
        {
-          to: { name: 'music-albums' },
          icon: 'album',
-          key: 'page.music.tabs.albums'
+          key: 'page.music.tabs.albums',
+          to: { name: 'music-albums' }
        },
        {
-          to: { name: 'music-genres' },
          icon: 'speaker',
-          key: 'page.music.tabs.genres'
+          key: 'page.music.tabs.genres',
+          to: { name: 'music-genres' }
        },
        {
-          to: { name: 'music-composers' },
          icon: 'book-open-page-variant',
-          key: 'page.music.tabs.composers'
+          key: 'page.music.tabs.composers',
+          to: { name: 'music-composers' }
        }
      ]
      if (this.servicesStore.spotify.webapi_token_valid) {
        links.push({
-          to: { name: 'music-spotify' },
          icon: 'spotify',
-          key: 'page.music.tabs.spotify'
+          key: 'page.music.tabs.spotify',
+          to: { name: 'music-spotify' }
        })
      }
      return links
--- a/web-src/src/components/TabsSearch.vue
+++ b/web-src/src/components/TabsSearch.vue
@@ -39,11 +39,9 @@ import { useServicesStore } from '@/stores/services'
 export default {
  name: 'TabsSearch',
  emits: ['search-library', 'search-spotify'],
-
  setup() {
    return { servicesStore: useServicesStore() }
  },
-
  computed: {
    spotify_enabled() {
      return this.servicesStore.spotify.webapi_token_valid