[web] Lint code

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) {

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) {

web-src/src/components/ControlUrlField.vue

@@ -22,16 +22,16 @@
 export default {
   name: 'ControlUrlField',
   props: {
-    placeholder: { type: String, required: true },
+    help: { default: '', type: String },
-    icon: { type: String, required: true },
+    icon: { required: true, type: String },
-    help: { type: String, default: '' },
+    loading: { default: false, type: Boolean },
-    loading: { type: Boolean, default: false }
+    placeholder: { required: true, type: String }
   },
   emits: ['url-changed'],
   data() {
     return {
-      url: '',
+      disabled: true,
-      disabled: true
+      url: ''
     }
   },
   mounted() {

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' },
+        { handler: 'cancel', icon: 'cancel', key: 'page.podcast.cancel' },
-        { key: 'page.podcast.remove', handler: 'remove', icon: 'delete' }
+        { 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

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 }
           })
         })
       }

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: {

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
     }
   }
 }

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

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 },
+            { handler: this.mark_played, key: 'actions.mark-as-played' },
-            { key: 'actions.remove-podcast', handler: this.remove_podcast }
+            { 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,
+            value: this.item.artist
-            handler: this.open_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
       }
     }
   },

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,
+            value: this.item?.artists?.[0]?.name
-            handler: this.open_artist
           },
           {
             key: 'property.release-date',
             value: this.$filters.toDate(this.item.release_date)
           },
           { key: 'property.type', value: this.item.album_type }
-        ]
+        ],
+        uri: this.item.uri
       }
     }
   },

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
       }
     }
   },

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
       }
     }
   },

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,
+            value: this.item.album_count
-            handler: this.open_albums
           },
           {
+            handler: this.open_tracks,
             key: 'property.tracks',
-            value: this.item.track_count,
+            value: this.item.track_count
-            handler: this.open_tracks
           },
           {
             key: 'property.duration',

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
       }
     }
   }

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 },

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' }
       ]
     }
   },

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,
+        name: this.item.name,
-        uris: this.uris,
         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
       }
     }
   },

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'
         }
       ]
     }

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
       }
     }
   },

web-src/src/components/ModalDialogQueueItem.vue

@@ -29,31 +29,30 @@ export default {
   computed: {
     actions() {
       return [
-        { key: 'actions.remove', handler: this.remove, icon: 'delete' },
+        { handler: this.remove, icon: 'delete', key: 'actions.remove' },
-        { key: 'actions.play', handler: this.play, icon: 'play' }
+        { 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,
+            value: this.item.album
-            handler: this.open_album
           },
           {
+            handler: this.open_album_artist,
             key: 'property.album-artist',
-            value: this.item.album_artist,
+            value: this.item.album_artist
-            handler: this.open_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,
+            value: this.item.genre
-            handler: this.open_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
       }
     }
   },

web-src/src/components/ModalDialogRemotePairing.vue

@@ -46,8 +46,8 @@ export default {
   computed: {
     actions() {
       return [
-        { key: 'actions.cancel', handler: this.cancel, icon: 'cancel' },
+        { handler: this.cancel, icon: 'cancel', key: 'actions.cancel' },
-        { key: 'actions.pair', handler: this.pair, icon: 'cellphone' }
+        { handler: this.pair, icon: 'cellphone', key: 'actions.pair' }
       ]
     },
     pairing() {

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 }]
+        ? [{ handler: this.mark_new, key: 'actions.mark-as-new' }]
-        : [{ key: 'actions.mark-as-played', handler: this.mark_played }]
+        : [{ 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,
+            value: this.item.album
-            handler: this.open_album
           },
           {
+            handler: this.open_artist,
             key: 'property.album-artist',
-            value: this.item.album_artist,
+            value: this.item.album_artist
-            handler: this.open_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
       }
     }
   },

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,
+            value: this.item.album.name
-            handler: this.open_album
           },
           {
+            handler: this.open_artist,
             key: 'property.album-artist',
-            value: this.item.artists[0]?.name,
+            value: this.item.artists[0]?.name
-            handler: this.open_artist
           },
           {
             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
       }
     }
   },

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 = ''
     }
   }
 }

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: {

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() {

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' }
         }
       ]
     }

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

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

web-src/src/filter/index.js

@@ -35,10 +35,9 @@ export const filters = {
     return this.toDuration(duration)
   },
   toRelativeDuration(value) {
-    return DateTime.fromISO(value).toRelative({ unit, locale: locale.value })
+    return DateTime.fromISO(value).toRelative({ locale: locale.value, unit })
   },
   toTimecode(value) {
-    const format = value >= 3600000 ? 'h:mm:ss' : 'm:ss'
+    return Duration.fromMillis(value).toFormat('h:mm:ss').replace(/^0:/u, '')
-    return Duration.fromMillis(value).toFormat(format)
   }
 }

web-src/src/i18n/de.json

@@ -131,6 +131,25 @@
     "spotify": "Spotify",
     "update-library": "Bibliothek neu einlesen"
   },
+  "options": {
+    "filter": {
+      "hide-singles": "Verbirgt Singles",
+      "hide-singles-help": "Wenn aktiv, blendet Singles und alles, was mit ihnen verbunden ist, aus.",
+      "hide-spotify": "Verbirgt Spotify-Inhalt",
+      "hide-spotify-help": "Wenn aktiv, blendet Inhalte aus, die von Spotify stammen.",
+      "title": "Filtern"
+    },
+    "sort": {
+      "artist-name": "Künstler › Name",
+      "artist-date": "Künstler › Erscheinungsdatum",
+      "name": "Namen",
+      "rating": "Bewertung",
+      "recently-added": "Kürzlich hinzugefügt",
+      "recently-released": "Kürzlich erschienen",
+      "release-date": "Erscheinungsdatum",
+      "title": "Sortieren"
+    }
+  },
   "page": {
     "about": {
       "built-with": "Oberfläche erstellt mit {bulma}, {mdi}, {vuejs}, {axios} und {others}.",
@@ -141,49 +160,9 @@
       "version": "Version {version}"
     },
     "albums": {
-      "filter": {
-        "hide-singles": "Nach Aktivierung werden keine Singles angezeigt",
-        "hide-singles-help": "Nach Aktivierung werden keine Singles und Alben angezeigt, die nur in Playlisten enthalten sind.",
-        "hide-spotify": "Verbirgt Spotify-Alben",
-        "hide-spotify-help": "Nach Aktivierung werden keine Alben angezeigt, die nur in der Spotify-Bibliothek enthalten sind.",
-        "title": "Filtern"
-      },
-      "sort": {
-        "artist-name": "Künstler › Name",
-        "artist-date": "Künstler › Erscheinungsdatum",
-        "name": "Name",
-        "recently-added": "Kürzlich hinzugefügt",
-        "recently-released": "Kürzlich erschienen",
-        "title": "Sortieren"
-      },
       "title": "Alben"
     },
-    "artist": {
-      "filter": {
-        "hide-spotify": "Verbirgt Spotify-Inhalt",
-        "hide-spotify-help": "Nach Aktivierung wird kein Inhalt angezeigt, der nur in der Spotify-Bibliothek enthalten ist.",
-        "title": "Filtern"
-      },
-      "sort": {
-        "name": "Name",
-        "rating": "Bewertung",
-        "release-date": "Erscheinungsdatum",
-        "title": "Sortieren"
-      }
-    },
     "artists": {
-      "filter": {
-        "hide-singles": "Nach Aktivierung werden keine Singles angezeigt",
-        "hide-singles-help": "Nach Aktivierung werden keine Singles und Alben angezeigt, die nur in Playlisten enthalten sind.",
-        "hide-spotify": "Verbirgt Künstler auf Spotify",
-        "hide-spotify-help": "Nach Aktivierung werden keine Alben angezeigt, die nur in der Spotify-Bibliothek enthalten sind.",
-        "title": "Filtern"
-      },
-      "sort": {
-        "name": "Namen",
-        "recently-added": "Kürzlich hinzugefügt",
-        "title": "Sortieren"
-      },
       "title": "Künstler"
     },
     "audiobooks": {
@@ -199,26 +178,12 @@
         "genres": "Genres"
       }
     },
-    "composer": {
-      "sort": {
-        "name": "Name",
-        "rating": "Bewertung",
-        "title": "Sortieren"
-      }
-    },
     "composers": {
       "title": "Komponisten"
     },
     "files": {
       "title": "Dateien"
     },
-    "genre": {
-      "sort": {
-        "name": "Name",
-        "rating": "Bewertung",
-        "title": "Sortieren"
-      }
-    },
     "genres": {
       "title": "Genres"
     },

web-src/src/i18n/en.json

@@ -131,6 +131,25 @@
     "spotify": "Spotify",
     "update-library": "Update Library"
   },
+  "options": {
+    "filter": {
+      "hide-singles": "Hide singles",
+      "hide-singles-help": "If active, hides singles and anything associated with them.",
+      "hide-spotify": "Hide Spotify content",
+      "hide-spotify-help": "If active, hides content from Spotify.",
+      "title": "Filter"
+    },
+    "sort": {
+      "artist-name": "Artist › Name",
+      "artist-date": "Artist › Release date",
+      "name": "Name",
+      "rating": "Rating",
+      "recently-added": "Recently added",
+      "recently-released": "Recently released",
+      "release-date": "Release date",
+      "title": "Sort"
+    }
+  },
   "page": {
     "about": {
       "built-with": "Web interface built with {bulma}, {mdi}, {vuejs}, {axios} and {others}.",
@@ -141,49 +160,9 @@
       "version": "Version {version}"
     },
     "albums": {
-      "filter": {
-        "hide-singles": "Hide singles",
-        "hide-singles-help": "If active, hides singles and albums with tracks that only appear in playlists.",
-        "hide-spotify": "Hide albums from Spotify",
-        "hide-spotify-help": "If active, hides albums that only appear in your Spotify library.",
-        "title": "Filter"
-      },
-      "sort": {
-        "artist-name": "Artist › Name",
-        "artist-date": "Artist › Release date",
-        "name": "Name",
-        "recently-added": "Recently added",
-        "recently-released": "Recently released",
-        "title": "Sort"
-      },
       "title": "Albums"
     },
-    "artist": {
-      "filter": {
-        "hide-spotify": "Hide the content from Spotify",
-        "hide-spotify-help": "If active, hides the content only appearing in your Spotify library.",
-        "title": "Filter"
-      },
-      "sort": {
-        "name": "Name",
-        "rating": "Rating",
-        "release-date": "Release date",
-        "title": "Sort"
-      }
-    },
     "artists": {
-      "filter": {
-        "hide-singles": "Hide singles",
-        "hide-singles-help": "If active, hides artists that only appear on singles or playlists.",
-        "hide-spotify": "Hide artists from Spotify",
-        "hide-spotify-help": "If active, hides artists that only appear in your Spotify library.",
-        "title": "Filter"
-      },
-      "sort": {
-        "name": "Name",
-        "recently-added": "Recently added",
-        "title": "Sort"
-      },
       "title": "Artists"
     },
     "audiobooks": {
@@ -199,26 +178,12 @@
         "genres": "Genres"
       }
     },
-    "composer": {
-      "sort": {
-        "name": "Name",
-        "rating": "Rating",
-        "title": "Sort"
-      }
-    },
     "composers": {
       "title": "Composers"
     },
     "files": {
       "title": "Files"
     },
-    "genre": {
-      "sort": {
-        "name": "Name",
-        "rating": "Rating",
-        "title": "Sort"
-      }
-    },
     "genres": {
       "title": "Genres"
     },

web-src/src/i18n/fr.json

@@ -131,6 +131,25 @@
     "spotify": "Spotify",
     "update-library": "Actualiser la bibliothèque"
   },
+  "options": {
+    "filter": {
+      "hide-singles": "Masquer les singles",
+      "hide-singles-help": "Si actif, masque les singles et tout ce qui leur est associé.",
+      "hide-spotify": "Masquer le contenu de Spotify",
+      "hide-spotify-help": "Si actif, masque le contenu qui provient de Spotify.",
+      "title": "Filtrer"
+    },
+    "sort": {
+      "artist-name": "Artiste › Nom",
+      "artist-date": "Artiste › Date de sortie",
+      "name": "Nom",
+      "rating": "Classement",
+      "recently-added": "Ajouts récents",
+      "recently-released": "Sorties récentes",
+      "release-date": "Date de sortie",
+      "title": "Trier"
+    }
+  },
   "page": {
     "about": {
       "built-with": "Interface utilisateur construite avec {bulma}, {mdi}, {vuejs}, {axios} et {others}.",
@@ -141,49 +160,9 @@
       "version": "Version {version}"
     },
     "albums": {
-      "filter": {
-        "hide-singles": "Masquer les singles",
-        "hide-singles-help": "Si actif, masque les singles et les albums dont les pistes n’apparaissent que dans les listes de lecture.",
-        "hide-spotify": "Masquer les albums de Spotify",
-        "hide-spotify-help": "Si actif, masque les albums qui n’apparaissent que dans votre bibliothèque Spotify.",
-        "title": "Filtrer"
-      },
-      "sort": {
-        "artist-name": "Artiste › Nom",
-        "artist-date": "Artiste › Date de sortie",
-        "name": "Nom",
-        "recently-added": "Ajouts récents",
-        "recently-released": "Sorties récentes",
-        "title": "Trier"
-      },
       "title": "Albums"
     },
-    "artist": {
-      "filter": {
-        "hide-spotify": "Masquer le contenu de Spotify",
-        "hide-spotify-help": "Si actif, masque le contenu qui n’apparaît que dans votre bibliothèque Spotify.",
-        "title": "Filtrer"
-      },
-      "sort": {
-        "name": "Nom",
-        "rating": "Classement",
-        "release-date": "Date de sortie",
-        "title": "Trier"
-      }
-    },
     "artists": {
-      "filter": {
-        "hide-singles": "Masquer les singles",
-        "hide-singles-help": "Si actif, masque les artistes qui n’apparaissent que dans des singles ou des listes de lecture.",
-        "hide-spotify": "Masquer les artistes de Spotify",
-        "hide-spotify-help": "Si actif, masque les artistes qui n’apparaissent que dans votre bibliothèque Spotify.",
-        "title": "Filtrer"
-      },
-      "sort": {
-        "name": "Nom",
-        "recently-added": "Ajouts récents",
-        "title": "Trier"
-      },
       "title": "Artistes"
     },
     "audiobooks": {
@@ -199,26 +178,12 @@
         "genres": "Genres"
       }
     },
-    "composer": {
-      "sort": {
-        "name": "Nom",
-        "rating": "Classement",
-        "title": "Trier"
-      }
-    },
     "composers": {
       "title": "Compositeurs"
     },
     "files": {
       "title": "Fichiers"
     },
-    "genre": {
-      "sort": {
-        "name": "Nom",
-        "rating": "Classement",
-        "title": "Trier"
-      }
-    },
     "genres": {
       "title": "Genres"
     },

web-src/src/i18n/index.js

@@ -1,9 +1,5 @@
 import { createI18n } from 'vue-i18n'
 
-/*
- * All i18n resources specified in the plugin `include` option can be loaded
- * at once using the import syntax.
- */
 import messages from '@intlify/unplugin-vue-i18n/messages'
 
 export default createI18n({

web-src/src/i18n/zh-CN.json

@@ -131,6 +131,25 @@
     "spotify": "Spotify",
     "update-library": "更新资料库"
   },
+  "options": {
+    "filter": {
+      "hide-singles": "隐藏单曲",
+      "hide-singles-help": "如果处于活动状态，则隐藏单曲和与其关联的任何内容",
+      "hide-spotify": "隐藏来自Spotify的内容",
+      "hide-spotify-help": "如果处于活动状态，则隐藏 Spotify 中的内容",
+      "title": "专辑"
+    },
+    "sort": {
+      "artist-name": "艺人 › 名称",
+      "artist-date": "艺人 › 发行日期",
+      "name": "名称",
+      "rating": "评级",
+      "recently-added": "最近添加",
+      "recently-released": "最近发行",
+      "release-date": "发行日期",
+      "title": "分类"
+    }
+  },
   "page": {
     "about": {
       "built-with": "界面贡献者包括 {bulma}，{mdi}，{vuejs}，{axios} 和 {others}",
@@ -141,49 +160,9 @@
       "version": "版本 {version}"
     },
     "albums": {
-      "filter": {
-        "hide-singles": "隐藏单曲",
-        "hide-singles-help": "如果激活，将隐藏仅在播放列表出现的单曲和专辑",
-        "hide-spotify": "隐藏来自Spotify的专辑",
-        "hide-spotify-help": "如果激活，将隐藏仅在Spotify资料库出现的专辑",
-        "title": "专辑"
-      },
-      "sort": {
-        "artist-name": "艺人 › 名称",
-        "artist-date": "艺人 › 发行日期",
-        "name": "名称",
-        "recently-added": "最近添加",
-        "recently-released": "最近发行",
-        "title": "分类"
-      },
       "title": "张专辑"
     },
-    "artist": {
-      "filter": {
-        "hide-spotify": "隐藏来自Spotify的内容",
-        "hide-spotify-help": "如果激活，将隐藏只出现在Spotify库中的内容",
-        "title": "专辑"
-      },
-      "sort": {
-        "name": "名称",
-        "rating": "评级",
-        "release-date": "发行日期",
-        "title": "分类"
-      }
-    },
     "artists": {
-      "filter": {
-        "hide-singles": "隐藏单曲",
-        "hide-singles-help": "如果激活，将隐藏仅在播放列表出现的单曲和专辑",
-        "hide-spotify": "隐藏来自Spotify的艺人",
-        "hide-spotify-help": "如果激活，将隐藏仅在Spotify资料库出现的专辑",
-        "title": "专辑"
-      },
-      "sort": {
-        "name": "名称",
-        "recently-added": "最近添加",
-        "title": "分类"
-      },
       "title": "艺人"
     },
     "audiobooks": {
@@ -199,26 +178,12 @@
         "genres": "流派"
       }
     },
-    "composer": {
-      "sort": {
-        "name": "名称",
-        "rating": "评级",
-        "title": "分类"
-      }
-    },
     "composers": {
       "title": "作曲家"
     },
     "files": {
       "title": "文件"
     },
-    "genre": {
-      "sort": {
-        "name": "名称",
-        "rating": "评级",
-        "title": "分类"
-      }
-    },
     "genres": {
       "title": "流派"
     },

web-src/src/i18n/zh-TW.json

@@ -131,6 +131,25 @@
     "spotify": "Spotify",
     "update-library": "更新資料庫"
   },
+  "options": {
+    "filter": {
+      "hide-singles": "隱藏單曲",
+      "hide-singles-help": "如果處於活動狀態，則隱藏單曲和與其關聯的任何內容",
+      "hide-spotify": "隱藏來自Spotify的內容",
+      "hide-spotify-help": "如果處於活動狀態，則隱藏 Spotify 中的內容",
+      "title": "篩選"
+    },
+    "sort": {
+      "artist-name": "藝人 › 名稱",
+      "artist-date": "藝人 › 發行日期",
+      "name": "名稱",
+      "rating": "評級",
+      "recently-added": "最近新增",
+      "recently-released": "最近發行",
+      "release-date": "發行日期",
+      "title": "分類"
+    }
+  },
   "page": {
     "about": {
       "built-with": "界面貢獻者包括 {bulma}，{mdi}，{vuejs}，{axios} 和 {others}",
@@ -141,49 +160,9 @@
       "version": "版本 {version}"
     },
     "albums": {
-      "filter": {
-        "hide-singles": "隱藏單曲",
-        "hide-singles-help": "如果啓用，將隱藏僅在播放列表出現的單曲和專輯",
-        "hide-spotify": "隱藏來自Spotify的專輯",
-        "hide-spotify-help": "如果啓用，將隱藏僅在Spotify資料庫出現的專輯",
-        "title": "篩選"
-      },
-      "sort": {
-        "artist-name": "藝人 › 名稱",
-        "artist-date": "藝人 › 發行日期",
-        "name": "名稱",
-        "recently-added": "最近新增",
-        "recently-released": "最近發行",
-        "title": "分類"
-      },
       "title": "專輯"
     },
-    "artist": {
-      "filter": {
-        "hide-spotify": "隱藏來自Spotify的內容",
-        "hide-spotify-help": "如果啓用，將隱藏只出現在Spotify庫中的內容",
-        "title": "篩選"
-      },
-      "sort": {
-        "name": "名稱",
-        "rating": "評級",
-        "release-date": "發行日期",
-        "title": "分類"
-      }
-    },
     "artists": {
-      "filter": {
-        "hide-singles": "隱藏單曲",
-        "hide-singles-help": "如果啓用，將隱藏僅在播放列表出現的單曲和專輯",
-        "hide-spotify": "隱藏來自Spotify的藝人",
-        "hide-spotify-help": "如果啓用，將隱藏僅在Spotify資料庫出現的專輯",
-        "title": "篩選"
-      },
-      "sort": {
-        "name": "名稱",
-        "recently-added": "最近新增",
-        "title": "分類"
-      },
       "title": "藝人"
     },
     "audiobooks": {
@@ -199,26 +178,12 @@
         "genres": "音樂類型"
       }
     },
-    "composer": {
-      "sort": {
-        "name": "名稱",
-        "rating": "評級",
-        "title": "分類"
-      }
-    },
     "composers": {
       "title": "作曲家"
     },
     "files": {
       "title": "文件"
     },
-    "genre": {
-      "sort": {
-        "name": "名稱",
-        "rating": "評級",
-        "title": "分類"
-      }
-    },
     "genres": {
       "title": "音樂類型"
     },

web-src/src/pages/PageAbout.vue

@@ -126,14 +126,14 @@ export default {
           value: this.$filters.toDuration(this.libraryStore.db_playtime)
         },
         {
+          alternate: this.$filters.toDateTime(this.libraryStore.updated_at),
           key: 'property.updated',
-          value: this.$filters.toRelativeDuration(this.libraryStore.updated_at),
+          value: this.$filters.toRelativeDuration(this.libraryStore.updated_at)
-          alternate: this.$filters.toDateTime(this.libraryStore.updated_at)
         },
         {
+          alternate: this.$filters.toDateTime(this.libraryStore.started_at),
           key: 'property.uptime',
-          value: this.$filters.toDurationToNow(this.libraryStore.started_at),
+          value: this.$filters.toDurationToNow(this.libraryStore.started_at)
-          alternate: this.$filters.toDateTime(this.libraryStore.started_at)
         }
       ]
     }

web-src/src/pages/PageAlbums.vue

@@ -8,14 +8,14 @@
           <div class="column">
             <div
               class="is-size-7 is-uppercase"
-              v-text="$t('page.albums.filter.title')"
+              v-text="$t('options.filter.title')"
             />
             <control-switch v-model="uiStore.hide_singles">
               <template #label>
-                <span v-text="$t('page.albums.filter.hide-singles')" />
+                <span v-text="$t('options.filter.hide-singles')" />
               </template>
               <template #help>
-                <span v-text="$t('page.albums.filter.hide-singles-help')" />
+                <span v-text="$t('options.filter.hide-singles-help')" />
               </template>
             </control-switch>
             <control-switch
@@ -23,17 +23,17 @@
               v-model="uiStore.hide_spotify"
             >
               <template #label>
-                <span v-text="$t('page.albums.filter.hide-spotify')" />
+                <span v-text="$t('options.filter.hide-spotify')" />
               </template>
               <template #help>
-                <span v-text="$t('page.albums.filter.hide-spotify-help')" />
+                <span v-text="$t('options.filter.hide-spotify-help')" />
               </template>
             </control-switch>
           </div>
           <div class="column">
             <div
               class="is-size-7 is-uppercase"
-              v-text="$t('page.albums.sort.title')"
+              v-text="$t('options.sort.title')"
             />
             <control-dropdown
               v-model:value="uiStore.albums_sort"
@@ -91,7 +91,7 @@ export default {
     })
   },
   setup() {
-    return { uiStore: useUIStore(), servicesStore: useServicesStore() }
+    return { servicesStore: useServicesStore(), uiStore: useUIStore() }
   },
   data() {
     return {
@@ -113,12 +113,12 @@ export default {
       return [
         {
           id: 1,
-          name: this.$t('page.albums.sort.name'),
+          name: this.$t('options.sort.name'),
           options: { index: { field: 'name_sort', type: String } }
         },
         {
           id: 2,
-          name: this.$t('page.albums.sort.recently-added'),
+          name: this.$t('options.sort.recently-added'),
           options: {
             criteria: [{ field: 'time_added', order: -1, type: Date }],
             index: { field: 'time_added', type: Date }
@@ -126,7 +126,7 @@ export default {
         },
         {
           id: 3,
-          name: this.$t('page.albums.sort.recently-released'),
+          name: this.$t('options.sort.recently-released'),
           options: {
             criteria: [{ field: 'date_released', order: -1, type: Date }],
             index: { field: 'date_released', type: Date }
@@ -134,7 +134,7 @@ export default {
         },
         {
           id: 4,
-          name: this.$t('page.albums.sort.artist-name'),
+          name: this.$t('options.sort.artist-name'),
           options: {
             criteria: [
               { field: 'artist', type: String },
@@ -145,7 +145,7 @@ export default {
         },
         {
           id: 5,
-          name: this.$t('page.albums.sort.artist-date'),
+          name: this.$t('options.sort.artist-date'),
           options: {
             criteria: [
               { field: 'artist', type: String },
@@ -158,8 +158,8 @@ export default {
     },
     heading() {
       return {
-        title: this.$t('page.albums.title'),
+        subtitle: [{ count: this.albums.count, key: 'count.albums' }],
-        subtitle: [{ key: 'count.albums', count: this.albums.count }]
+        title: this.$t('page.albums.title')
       }
     },
     spotify_enabled() {

web-src/src/pages/PageArtist.vue

@@ -133,15 +133,15 @@ export default {
     },
     heading() {
       return {
-        title: this.artist.name,
         subtitle: [
-          { key: 'count.albums', count: this.albums.count },
+          { count: this.albums.count, key: 'count.albums' },
           {
+            count: this.track_count,
             handler: this.open_tracks,
-            key: 'count.tracks',
+            key: 'count.tracks'
-            count: this.track_count
           }
-        ]
+        ],
+        title: this.artist.name
       }
     },
     spotify_enabled() {

web-src/src/pages/PageArtistSpotify.vue

@@ -105,8 +105,8 @@ export default {
   computed: {
     heading() {
       return {
-        title: this.$t('artist.name'),
+        subtitle: [{ count: this.total, key: 'count.albums' }],
-        subtitle: [{ key: 'count.albums', count: this.total }]
+        title: this.$t('artist.name')
       }
     }
   },

web-src/src/pages/PageArtistTracks.vue

@@ -7,24 +7,24 @@
           <div class="column">
             <p
               class="is-size-7 is-uppercase"
-              v-text="$t('page.artist.filter.title')"
+              v-text="$t('options.filter.title')"
             />
             <control-switch
               v-if="spotify_enabled"
               v-model="uiStore.hide_spotify"
             >
               <template #label>
-                <span v-text="$t('page.artist.filter.hide-spotify')" />
+                <span v-text="$t('options.filter.hide-spotify')" />
               </template>
               <template #help>
-                <span v-text="$t('page.artist.filter.hide-spotify-help')" />
+                <span v-text="$t('options.filter.hide-spotify-help')" />
               </template>
             </control-switch>
           </div>
           <div class="column">
             <p
               class="is-size-7 is-uppercase"
-              v-text="$t('page.artist.sort.title')"
+              v-text="$t('options.sort.title')"
             />
             <control-dropdown
               v-model:value="uiStore.artist_tracks_sort"
@@ -122,12 +122,12 @@ export default {
       return [
         {
           id: 1,
-          name: this.$t('page.artist.sort.name'),
+          name: this.$t('options.sort.name'),
           options: { index: { field: 'title_sort', type: String } }
         },
         {
           id: 2,
-          name: this.$t('page.artist.sort.rating'),
+          name: this.$t('options.sort.rating'),
           options: {
             criteria: [{ field: 'rating', order: -1, type: Number }],
             index: { field: 'rating', type: 'Digits' }
@@ -137,15 +137,15 @@ export default {
     },
     heading() {
       return {
-        title: this.artist.name,
         subtitle: [
           {
+            count: this.album_count,
             handler: this.openArtist,
-            key: 'count.albums',
+            key: 'count.albums'
-            count: this.album_count
           },
-          { key: 'count.tracks', count: this.tracks.count }
+          { count: this.tracks.count, key: 'count.tracks' }
-        ]
+        ],
+        title: this.artist.name
       }
     },
     spotify_enabled() {

web-src/src/pages/PageArtists.vue

@@ -8,23 +8,23 @@
           <div class="column">
             <div
               class="is-size-7 is-uppercase"
-              v-text="$t('page.artists.filter.title')"
+              v-text="$t('options.filter.title')"
             />
             <control-switch v-model="uiStore.hide_singles">
               <template #label>
-                <span v-text="$t('page.artists.filter.hide-singles')" />
+                <span v-text="$t('options.filter.hide-singles')" />
               </template>
               <template #help>
-                <span v-text="$t('page.artists.filter.hide-singles-help')" />
+                <span v-text="$t('options.filter.hide-singles-help')" />
               </template>
             </control-switch>
             <div v-if="spotify_enabled" class="field">
               <control-switch v-model="uiStore.hide_spotify">
                 <template #label>
-                  <span v-text="$t('page.artists.filter.hide-spotify')" />
+                  <span v-text="$t('options.filter.hide-spotify')" />
                 </template>
                 <template #help>
-                  <span v-text="$t('page.artists.filter.hide-spotify-help')" />
+                  <span v-text="$t('options.filter.hide-spotify-help')" />
                 </template>
               </control-switch>
             </div>
@@ -32,7 +32,7 @@
           <div class="column">
             <div
               class="is-size-7 is-uppercase"
-              v-text="$t('page.artists.sort.title')"
+              v-text="$t('options.sort.title')"
             />
             <control-dropdown
               v-model:value="uiStore.artists_sort"
@@ -114,12 +114,12 @@ export default {
       return [
         {
           id: 1,
-          name: this.$t('page.artists.sort.name'),
+          name: this.$t('options.sort.name'),
           options: { index: { field: 'name_sort', type: String } }
         },
         {
           id: 2,
-          name: this.$t('page.artists.sort.recently-added'),
+          name: this.$t('options.sort.recently-added'),
           options: {
             criteria: [{ field: 'time_added', order: -1, type: Date }],
             index: { field: 'time_added', type: Date }
@@ -129,8 +129,8 @@ export default {
     },
     heading() {
       return {
-        title: this.$t('page.artists.title'),
+        subtitle: [{ count: this.artists.count, key: 'count.artists' }],
-        subtitle: [{ key: 'count.artists', count: this.artists.count }]
+        title: this.$t('page.artists.title')
       }
     },
     spotify_enabled() {

web-src/src/pages/PageAudiobooksAlbums.vue

@@ -39,10 +39,10 @@ export default {
   name: 'PageAudiobooksAlbums',
   components: {
     ContentWithHeading,
+    HeadingTitle,
     IndexButtonList,
     ListAlbums,
-    TabsAudiobooks,
+    TabsAudiobooks
-    HeadingTitle
   },
   beforeRouteEnter(to, from, next) {
     dataObject.load(to).then((response) => {
@@ -57,8 +57,8 @@ export default {
   computed: {
     heading() {
       return {
-        title: this.$t('page.audiobooks.albums.title'),
+        subtitle: [{ count: this.albums.count, key: 'count.audiobooks' }],
-        subtitle: [{ key: 'count.audiobooks', count: this.albums.count }]
+        title: this.$t('page.audiobooks.albums.title')
       }
     }
   }

web-src/src/pages/PageAudiobooksArtist.vue

@@ -75,10 +75,10 @@ export default {
     heading() {
       if (this.artist.name) {
         return {
-          title: this.artist.name,
           subtitle: [
-            { key: 'count.audiobooks', count: this.artist.album_count }
+            { count: this.artist.album_count, key: 'count.audiobooks' }
-          ]
+          ],
+          title: this.artist.name
         }
       }
       return {}

web-src/src/pages/PageAudiobooksArtists.vue

@@ -57,8 +57,8 @@ export default {
   computed: {
     heading() {
       return {
-        title: this.$t('page.audiobooks.artists.title'),
+        subtitle: [{ count: this.artists.count, key: 'count.authors' }],
-        subtitle: [{ key: 'count.authors', count: this.artists.count }]
+        title: this.$t('page.audiobooks.artists.title')
       }
     }
   }

web-src/src/pages/PageAudiobooksGenres.vue

@@ -57,8 +57,8 @@ export default {
   computed: {
     heading() {
       return {
-        title: this.$t('page.genres.title'),
+        subtitle: [{ count: this.genres.total, key: 'count.genres' }],
-        subtitle: [{ key: 'count.genres', count: this.genres.total }]
+        title: this.$t('page.genres.title')
       }
     }
   }

web-src/src/pages/PageComposerAlbums.vue

@@ -74,15 +74,15 @@ export default {
     heading() {
       if (this.composer.name) {
         return {
-          title: this.composer.name,
           subtitle: [
-            { key: 'count.albums', count: this.composer.album_count },
+            { count: this.composer.album_count, key: 'count.albums' },
             {
+              count: this.composer.track_count,
               handler: this.open_tracks,
-              key: 'count.tracks',
+              key: 'count.tracks'
-              count: this.composer.track_count
             }
-          ]
+          ],
+          title: this.composer.name
         }
       }
       return {}

web-src/src/pages/PageComposerTracks.vue

@@ -7,7 +7,7 @@
           <div class="column">
             <div
               class="is-size-7 is-uppercase"
-              v-text="$t('page.artist.sort.title')"
+              v-text="$t('options.sort.title')"
             />
             <control-dropdown
               v-model:value="uiStore.composer_tracks_sort"
@@ -94,18 +94,35 @@ export default {
     expression() {
       return `composer is "${this.composer.name}" and media_kind is music`
     },
+    groupings() {
+      return [
+        {
+          id: 1,
+          name: this.$t('options.sort.name'),
+          options: { index: { field: 'title_sort', type: String } }
+        },
+        {
+          id: 2,
+          name: this.$t('options.sort.rating'),
+          options: {
+            criteria: [{ field: 'rating', order: -1, type: Number }],
+            index: { field: 'rating', type: 'Digits' }
+          }
+        }
+      ]
+    },
     heading() {
       if (this.composer.name) {
         return {
-          title: this.composer.name,
           subtitle: [
             {
+              count: this.composer.album_count,
               handler: this.open_albums,
-              key: 'count.albums',
+              key: 'count.albums'
-              count: this.composer.album_count
             },
-            { key: 'count.tracks', count: this.composer.track_count }
+            { count: this.composer.track_count, key: 'count.tracks' }
-          ]
+          ],
+          title: this.composer.name
         }
       }
       return {}
@@ -118,23 +135,6 @@ export default {
     }
   },
   methods: {
-    groupings() {
-      return [
-        {
-          id: 1,
-          name: this.$t('page.composer.sort.name'),
-          options: { index: { field: 'title_sort', type: String } }
-        },
-        {
-          id: 2,
-          name: this.$t('page.composer.sort.rating'),
-          options: {
-            criteria: [{ field: 'rating', order: -1, type: Number }],
-            index: { field: 'rating', type: 'Digits' }
-          }
-        }
-      ]
-    },
     open_albums() {
       this.$router.push({
         name: 'music-composer-albums',

web-src/src/pages/PageComposers.vue

@@ -57,8 +57,8 @@ export default {
   computed: {
     heading() {
       return {
-        title: this.$t('page.composers.title'),
+        subtitle: [{ count: this.composers.total, key: 'count.composers' }],
-        subtitle: [{ key: 'count.composers', count: this.composers.total }]
+        title: this.$t('page.composers.title')
       }
     }
   }

web-src/src/pages/PageGenreAlbums.vue

@@ -80,15 +80,15 @@ export default {
     heading() {
       if (this.genre.name) {
         return {
-          title: this.genre.name,
           subtitle: [
-            { key: 'count.albums', count: this.genre.album_count },
+            { count: this.genre.album_count, key: 'count.albums' },
             {
+              count: this.genre.track_count,
               handler: this.open_tracks,
-              key: 'count.tracks',
+              key: 'count.tracks'
-              count: this.genre.track_count
             }
-          ]
+          ],
+          title: this.genre.name
         }
       }
       return {}

web-src/src/pages/PageGenreTracks.vue

@@ -7,7 +7,7 @@
           <div class="column">
             <div
               class="is-size-7 is-uppercase"
-              v-text="$t('page.genre.sort.title')"
+              v-text="$t('options.sort.title')"
             />
             <control-dropdown
               v-model:value="uiStore.genre_tracks_sort"
@@ -100,12 +100,12 @@ export default {
       return [
         {
           id: 1,
-          name: this.$t('page.genre.sort.name'),
+          name: this.$t('options.sort.name'),
           options: { index: { field: 'title_sort', type: String } }
         },
         {
           id: 2,
-          name: this.$t('page.genre.sort.rating'),
+          name: this.$t('options.sort.rating'),
           options: {
             criteria: [{ field: 'rating', order: -1, type: Number }],
             index: { field: 'rating', type: 'Digits' }
@@ -116,15 +116,15 @@ export default {
     heading() {
       if (this.genre.name) {
         return {
-          title: this.genre.name,
           subtitle: [
             {
+              count: this.genre.album_count,
               handler: this.openGenre,
-              key: 'count.albums',
+              key: 'count.albums'
-              count: this.genre.album_count
             },
-            { key: 'count.tracks', count: this.genre.track_count }
+            { count: this.genre.track_count, key: 'count.tracks' }
-          ]
+          ],
+          title: this.genre.name
         }
       }
       return {}

web-src/src/pages/PageGenres.vue

@@ -57,8 +57,8 @@ export default {
   computed: {
     heading() {
       return {
-        title: this.$t('page.genres.title'),
+        subtitle: [{ count: this.genres.total, key: 'count.genres' }],
-        subtitle: [{ key: 'count.genres', count: this.genres.total }]
+        title: this.$t('page.genres.title')
       }
     }
   }

web-src/src/pages/PageMusic.vue

@@ -89,8 +89,8 @@ export default {
   data() {
     return {
       albums: [],
-      tracks: { items: [] },
+      selected_track: {},
-      selected_track: {}
+      tracks: { items: [] }
     }
   }
 }

web-src/src/pages/PageMusicSpotify.vue

@@ -88,8 +88,8 @@ export default {
   },
   data() {
     return {
-      playlists: [],
+      albums: [],
-      albums: []
+      playlists: []
     }
   }
 }

web-src/src/pages/PageNowPlaying.vue

@@ -67,8 +67,8 @@ const INTERVAL = 1000
 export default {
   name: 'PageNowPlaying',
   components: {
-    ControlSlider,
     ControlImage,
+    ControlSlider,
     LyricsPane,
     ModalDialogQueueItem
   },

web-src/src/pages/PagePlaylistFolder.vue

@@ -34,7 +34,7 @@ const dataObject = {
 
 export default {
   name: 'PagePlaylistFolder',
-  components: { ContentWithHeading, ListPlaylists, HeadingTitle },
+  components: { ContentWithHeading, HeadingTitle, ListPlaylists },
   beforeRouteEnter(to, from, next) {
     dataObject.load(to).then((response) => {
       next((vm) => dataObject.set(vm, response))
@@ -60,11 +60,11 @@ export default {
   computed: {
     heading() {
       return {
+        subtitle: [{ count: this.playlists.count, key: 'count.playlists' }],
         title:
           this.playlists.count === 0
             ? this.$t('page.playlists.title')
-            : this.playlist.name,
+            : this.playlist.name
-        subtitle: [{ key: 'count.playlists', count: this.playlists.count }]
       }
     },
     playlists() {

web-src/src/pages/PagePlaylistTracks.vue

@@ -76,8 +76,8 @@ export default {
   computed: {
     heading() {
       return {
-        title: this.playlist.name,
+        subtitle: [{ count: this.tracks.count, key: 'count.tracks' }],
-        subtitle: [{ key: 'count.tracks', count: this.tracks.count }]
+        title: this.playlist.name
       }
     },
     uris() {

web-src/src/pages/PagePlaylistTracksSpotify.vue

@@ -81,9 +81,9 @@ export default {
   components: {
     ContentWithHeading,
     ControlButton,
+    HeadingTitle,
     ListTracksSpotify,
     ModalDialogPlaylistSpotify,
-    HeadingTitle,
     VueEternalLoading
   },
   beforeRouteEnter(to, from, next) {
@@ -106,10 +106,10 @@ export default {
   computed: {
     heading() {
       return {
-        title: this.playlist.name,
         subtitle: [
-          { key: 'count.playlists', count: this.playlist.tracks.total }
+          { count: this.playlist.tracks.total, key: 'count.playlists' }
-        ]
+        ],
+        title: this.playlist.name
       }
     }
   },

web-src/src/pages/PagePodcast.vue

@@ -82,7 +82,6 @@ const dataObject = {
       webapi.library_podcast_episodes(to.params.id)
     ])
   },
-
   set(vm, response) {
     vm.album = response[0].data
     vm.tracks = new GroupedList(response[1].data.tracks)
@@ -99,13 +98,11 @@ export default {
     ModalDialog,
     ModalDialogAlbum
   },
-
   beforeRouteEnter(to, from, next) {
     dataObject.load(to).then((response) => {
       next((vm) => dataObject.set(vm, response))
     })
   },
-
   data() {
     return {
       album: {},
@@ -119,14 +116,14 @@ export default {
     actions() {
       return [
         {
-          key: this.$t('page.podcast.cancel'),
           handler: 'cancel',
-          icon: 'cancel'
+          icon: 'cancel',
+          key: this.$t('page.podcast.cancel')
         },
         {
-          key: this.$t('page.podcast.remove'),
           handler: 'remove',
-          icon: 'delete'
+          icon: 'delete',
+          key: this.$t('page.podcast.remove')
         }
       ]
     }

web-src/src/pages/PagePodcasts.vue

@@ -104,16 +104,16 @@ export default {
   data() {
     return {
       albums: [],
-      tracks: { items: [] },
+      show_url_modal: false,
-      show_url_modal: false
+      tracks: { items: [] }
     }
   },
   computed: {
     heading() {
       if (this.albums.total) {
         return {
-          title: this.$t('page.podcasts.title'),
+          subtitle: [{ count: this.albums.count, key: 'count.podcasts' }],
-          subtitle: [{ key: 'count.podcasts', count: this.albums.count }]
+          title: this.$t('page.podcasts.title')
         }
       }
       return {}

web-src/src/pages/PageQueue.vue

@@ -114,11 +114,11 @@ export default {
   components: {
     ContentWithHeading,
     ControlButton,
+    HeadingTitle,
     ListItemQueueItem,
     ModalDialogAddStream,
     ModalDialogPlaylistSave,
     ModalDialogQueueItem,
-    HeadingTitle,
     draggable
   },
   setup() {
@@ -144,8 +144,8 @@ export default {
     },
     heading() {
       return {
-        title: this.$t('page.queue.title'),
+        subtitle: [{ count: this.queue.count, key: 'count.tracks' }],
-        subtitle: [{ key: 'count.tracks', count: this.queue.count }]
+        title: this.$t('page.queue.title')
       }
     },
     is_queue_save_allowed() {
@@ -154,6 +154,9 @@ export default {
         this.configurationStore.default_playlist_directory
       )
     },
+    player() {
+      return this.playerStore
+    },
     queue() {
       return this.queueStore
     },
@@ -164,9 +167,6 @@ export default {
       set() {
         /* Do nothing? Send move request in @end event */
       }
-    },
-    player() {
-      return this.playerStore
     }
   },
   methods: {

web-src/src/pages/PageRadioStreams.vue

@@ -29,7 +29,7 @@ const dataObject = {
 
 export default {
   name: 'PageRadioStreams',
-  components: { ContentWithHeading, ListTracks, HeadingTitle },
+  components: { ContentWithHeading, HeadingTitle, ListTracks },
   beforeRouteEnter(to, from, next) {
     dataObject.load(to).then((response) => {
       next((vm) => dataObject.set(vm, response))
@@ -43,8 +43,8 @@ export default {
   computed: {
     heading() {
       return {
-        title: this.$t('page.radio.title'),
+        subtitle: [{ count: this.tracks.total, key: 'count.stations' }],
-        subtitle: [{ key: 'count.stations', count: this.tracks.total }]
+        title: this.$t('page.radio.title')
       }
     }
   }

web-src/src/pages/PageSettingsWebinterface.vue

@@ -175,11 +175,9 @@ export default {
     HeadingTitle,
     TabsSettings
   },
-
   setup() {
     return { settingsStore: useSettingsStore() }
   },
-
   computed: {
     locale: {
       get() {

web-src/src/stores/configuration.js

@@ -2,11 +2,11 @@ import { defineStore } from 'pinia'
 
 export const useConfigurationStore = defineStore('ConfigurationStore', {
   state: () => ({
+    allow_modifying_stored_playlists: false,
     buildoptions: [],
+    default_playlist_directory: '',
     library_name: '',
     version: '',
-    websocket_port: 0,
+    websocket_port: 0
-    allow_modifying_stored_playlists: false,
-    default_playlist_directory: ''
   })
 })

web-src/src/stores/library.js

@@ -5,11 +5,11 @@ export const useLibraryStore = defineStore('LibraryStore', {
     albums: 0,
     artists: 0,
     db_playtime: 0,
-    songs: 0,
     rss: {},
+    songs: 0,
     started_at: '01',
-    updated_at: '01',
     update_dialog_scan_kind: '',
+    updated_at: '01',
     updating: false
   })
 })

web-src/src/stores/notifications.js

@@ -1,10 +1,6 @@
 import { defineStore } from 'pinia'
 
 export const useNotificationsStore = defineStore('NotificationsStore', {
-  state: () => ({
-    list: [],
-    next_id: 1
-  }),
   actions: {
     add(notification) {
       const newNotification = {
@@ -36,5 +32,9 @@ export const useNotificationsStore = defineStore('NotificationsStore', {
         this.list.splice(index, 1)
       }
     }
-  }
+  },
+  state: () => ({
+    list: [],
+    next_id: 1
+  })
 })

web-src/src/stores/queue.js

@@ -2,15 +2,15 @@ import { defineStore } from 'pinia'
 import { usePlayerStore } from '@/stores/player'
 
 export const useQueueStore = defineStore('QueueStore', {
-  state: () => ({
-    count: 0,
-    items: [],
-    version: 0
-  }),
   getters: {
     current(state) {
       const player = usePlayerStore()
       return state.items.find((item) => item.id === player.item_id) ?? {}
     }
-  }
+  },
+  state: () => ({
+    count: 0,
+    items: [],
+    version: 0
+  })
 })

web-src/src/stores/search.js

@@ -1,11 +1,6 @@
 import { defineStore } from 'pinia'
 
 export const useSearchStore = defineStore('SearchStore', {
-  state: () => ({
-    recent_searches: [],
-    search_query: '',
-    search_source: 'search-library'
-  }),
   actions: {
     add(query) {
       const index = this.recent_searches.indexOf(query)
@@ -23,5 +18,10 @@ export const useSearchStore = defineStore('SearchStore', {
         this.recent_searches.splice(index, 1)
       }
     }
-  }
+  },
+  state: () => ({
+    recent_searches: [],
+    search_query: '',
+    search_source: 'search-library'
+  })
 })

web-src/src/stores/settings.js

@@ -1,9 +1,29 @@
 import { defineStore } from 'pinia'
 
 export const useSettingsStore = defineStore('SettingsStore', {
-  state: () => ({
+  actions: {
-    categories: []
+    setting(categoryName, optionName) {
-  }),
+      return (
+        this.categories
+          .find((category) => category.name === categoryName)
+          ?.options.find((option) => option.name === optionName) ?? {}
+      )
+    },
+    update(option) {
+      const settingCategory = this.categories.find(
+        (category) => category.name === option.category
+      )
+      if (!settingCategory) {
+        return
+      }
+      const settingOption = settingCategory.options.find(
+        (setting) => setting.name === option.name
+      )
+      if (settingOption) {
+        settingOption.value = option.value
+      }
+    }
+  },
   getters: {
     recently_added_limit: (state) =>
       state.setting('webinterface', 'recently_added_limit')?.value ?? 100,
@@ -34,27 +54,7 @@ export const useSettingsStore = defineStore('SettingsStore', {
     show_menu_item_search: (state) =>
       state.setting('webinterface', 'show_menu_item_search')?.value ?? false
   },
-  actions: {
+  state: () => ({
-    update(option) {
+    categories: []
-      const settingCategory = this.categories.find(
+  })
-        (category) => category.name === option.category
-      )
-      if (!settingCategory) {
-        return
-      }
-      const settingOption = settingCategory.options.find(
-        (setting) => setting.name === option.name
-      )
-      if (settingOption) {
-        settingOption.value = option.value
-      }
-    },
-    setting(categoryName, optionName) {
-      return (
-        this.categories
-          .find((category) => category.name === categoryName)
-          ?.options.find((option) => option.name === optionName) ?? {}
-      )
-    }
-  }
 })

web-src/vite.config.js

@@ -39,9 +39,9 @@ export default defineConfig({
   server: {
     proxy: {
       '/api': { target },
-      '/ws': { target, ws: true },
       '/artwork': { target },
-      '/stream.mp3': { target }
+      '/stream.mp3': { target },
+      '/ws': { target, ws: true }
     }
   }
 })