From 938458b56e87d4cc98879cbc1c680ec5f6e0a771 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Thu, 25 Apr 2024 21:33:01 +0200
Subject: [PATCH 01/20] [web] Remove unused arguments

---
 web-src/src/store/index.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web-src/src/store/index.js b/web-src/src/store/index.js
index 29e775f6..b6da6636 100644
--- a/web-src/src/store/index.js
+++ b/web-src/src/store/index.js
@@ -179,7 +179,7 @@ export default createStore({
   },
 
   actions: {
-    add_notification({ commit, state }, notification) {
+    add_notification({ state }, notification) {
       const newNotification = {
         id: state.notifications.next_id++,
         text: notification.text,
@@ -203,7 +203,7 @@ export default createStore({
         }, notification.timeout)
       }
     },
-    add_recent_search({ commit, state }, query) {
+    add_recent_search({ state }, query) {
       const index = state.recent_searches.indexOf(query)
       if (index !== -1) {
         state.recent_searches.splice(index, 1)
@@ -213,19 +213,19 @@ export default createStore({
         state.recent_searches.pop()
       }
     },
-    delete_notification({ commit, state }, notification) {
+    delete_notification({ state }, notification) {
       const index = state.notifications.list.indexOf(notification)
       if (index !== -1) {
         state.notifications.list.splice(index, 1)
       }
     },
-    remove_recent_search({ commit, state }, query) {
+    remove_recent_search({ state }, query) {
       const index = state.recent_searches.indexOf(query)
       if (index !== -1) {
         state.recent_searches.splice(index, 1)
       }
     },
-    update_settings_option({ commit, state }, option) {
+    update_settings_option({ state }, option) {
       const settingCategory = state.settings.categories.find(
           (e) => e.name === option.category
         ),

From 30fc35097ca0a656b28ac0a7ecadc686a02a1448 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Thu, 25 Apr 2024 21:33:38 +0200
Subject: [PATCH 02/20] [web] Avoid useless assignment

---
 web-src/eslint.config.js              |  1 -
 web-src/src/components/LyricsPane.vue | 16 ++++++++--------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/web-src/eslint.config.js b/web-src/eslint.config.js
index e25aed9f..86a16ba6 100644
--- a/web-src/eslint.config.js
+++ b/web-src/eslint.config.js
@@ -32,7 +32,6 @@ export default [
       'no-ternary': 'off',
       'no-undef': 'off',
       'no-unused-vars': ['error', { args: 'none', caughtErrors: 'none' }],
-      'no-useless-assignment': 'off',
       'one-var': 'off',
       'prefer-named-capture-group': 'off',
       'sort-keys': 'off',
diff --git a/web-src/src/components/LyricsPane.vue b/web-src/src/components/LyricsPane.vue
index 2b555cad..8e42a351 100644
--- a/web-src/src/components/LyricsPane.vue
+++ b/web-src/src/components/LyricsPane.vue
@@ -117,25 +117,25 @@ export default {
         }
         // Not found, then start a binary search
         let end = la.length - 1,
-          index = 0,
+          index = -1,
           start = 0
         while (start <= end) {
           index = (start + end) >> 1
-          const currentVerse = la[index]
-          const nextVerse = la[index + 1]
+          const currentVerseTime = la[index].time
+          const nextVerseTime = la[index + 1]?.time
           if (
-            currentVerse.time <= currentTime &&
-            (nextVerse?.time > currentTime || !nextVerse)
+            currentVerseTime <= currentTime &&
+            (nextVerseTime > currentTime || !nextVerseTime)
           ) {
-            return index
+            break
           }
-          if (currentVerse.time < currentTime) {
+          if (currentVerseTime < currentTime) {
             start = index + 1
           } else {
             end = index - 1
           }
         }
-        return -1
+        return index
       }
       this.reset_scrolling()
       return -1

From 73040780b9016afdbd41adca0730f96bf7acb1ac Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Thu, 25 Apr 2024 22:36:04 +0200
Subject: [PATCH 03/20] [web] Remove unnecessary word option

---
 web-src/src/components/ListAlbums.vue         |  2 +-
 web-src/src/components/ListAlbumsSpotify.vue  |  2 +-
 web-src/src/components/NavbarTop.vue          | 26 +++++++------------
 web-src/src/components/SettingsCheckbox.vue   |  4 +--
 web-src/src/components/SettingsIntfield.vue   | 23 ++++------------
 web-src/src/components/SettingsTextfield.vue  | 23 ++++------------
 web-src/src/pages/PageMusicRecentlyAdded.vue  |  2 +-
 web-src/src/pages/PageNowPlaying.vue          | 20 +++++++-------
 .../src/pages/PageSettingsWebinterface.vue    | 10 +++----
 web-src/src/store/index.js                    | 12 ++++-----
 10 files changed, 46 insertions(+), 78 deletions(-)

diff --git a/web-src/src/components/ListAlbums.vue b/web-src/src/components/ListAlbums.vue
index c674b52c..9fee1572 100644
--- a/web-src/src/components/ListAlbums.vue
+++ b/web-src/src/components/ListAlbums.vue
@@ -94,7 +94,7 @@ export default {
       return this.media_kind || this.selected_item.media_kind
     },
     show_artwork() {
-      return this.$store.getters.settings_option(
+      return this.$store.getters.setting(
         'webinterface',
         'show_cover_artwork_in_album_lists'
       ).value
diff --git a/web-src/src/components/ListAlbumsSpotify.vue b/web-src/src/components/ListAlbumsSpotify.vue
index 1684f4d7..08c22044 100644
--- a/web-src/src/components/ListAlbumsSpotify.vue
+++ b/web-src/src/components/ListAlbumsSpotify.vue
@@ -53,7 +53,7 @@ export default {
 
   computed: {
     show_artwork() {
-      return this.$store.getters.settings_option(
+      return this.$store.getters.setting(
         'webinterface',
         'show_cover_artwork_in_album_lists'
       ).value
diff --git a/web-src/src/components/NavbarTop.vue b/web-src/src/components/NavbarTop.vue
index ef7f77c8..42257041 100644
--- a/web-src/src/components/NavbarTop.vue
+++ b/web-src/src/components/NavbarTop.vue
@@ -138,7 +138,7 @@ export default {
       }
     },
     show_audiobooks() {
-      return this.$store.getters.settings_option(
+      return this.$store.getters.setting(
         'webinterface',
         'show_menu_item_audiobooks'
       ).value
@@ -152,40 +152,34 @@ export default {
       }
     },
     show_files() {
-      return this.$store.getters.settings_option(
-        'webinterface',
-        'show_menu_item_files'
-      ).value
+      return this.$store.getters.setting('webinterface', 'show_menu_item_files')
+        .value
     },
     show_music() {
-      return this.$store.getters.settings_option(
-        'webinterface',
-        'show_menu_item_music'
-      ).value
+      return this.$store.getters.setting('webinterface', 'show_menu_item_music')
+        .value
     },
     show_player_menu() {
       return this.$store.state.show_player_menu
     },
     show_playlists() {
-      return this.$store.getters.settings_option(
+      return this.$store.getters.setting(
         'webinterface',
         'show_menu_item_playlists'
       ).value
     },
     show_podcasts() {
-      return this.$store.getters.settings_option(
+      return this.$store.getters.setting(
         'webinterface',
         'show_menu_item_podcasts'
       ).value
     },
     show_radio() {
-      return this.$store.getters.settings_option(
-        'webinterface',
-        'show_menu_item_radio'
-      ).value
+      return this.$store.getters.setting('webinterface', 'show_menu_item_radio')
+        .value
     },
     show_search() {
-      return this.$store.getters.settings_option(
+      return this.$store.getters.setting(
         'webinterface',
         'show_menu_item_search'
       ).value
diff --git a/web-src/src/components/SettingsCheckbox.vue b/web-src/src/components/SettingsCheckbox.vue
index b4f306be..5feb1970 100644
--- a/web-src/src/components/SettingsCheckbox.vue
+++ b/web-src/src/components/SettingsCheckbox.vue
@@ -55,7 +55,7 @@ export default {
       return this.statusUpdate === 'success'
     },
     option() {
-      const option = this.$store.getters.settings_option(
+      const option = this.$store.getters.setting(
         this.category_name,
         this.option_name
       )
@@ -87,7 +87,7 @@ export default {
       webapi
         .settings_update(this.category_name, option)
         .then(() => {
-          this.$store.dispatch('update_settings_option', option)
+          this.$store.dispatch('update_setting', option)
           this.statusUpdate = 'success'
         })
         .catch(() => {
diff --git a/web-src/src/components/SettingsIntfield.vue b/web-src/src/components/SettingsIntfield.vue
index 9e0aec93..b2f83d2f 100644
--- a/web-src/src/components/SettingsIntfield.vue
+++ b/web-src/src/components/SettingsIntfield.vue
@@ -16,7 +16,7 @@
           inputmode="numeric"
           min="0"
           :placeholder="placeholder"
-          :value="value"
+          :value="option.value"
           @input="set_update_timer"
         />
       </div>
@@ -48,11 +48,6 @@ export default {
   },
 
   computed: {
-    category() {
-      return this.$store.state.settings.categories.find(
-        (elem) => elem.name === this.category_name
-      )
-    },
     info() {
       if (this.statusUpdate === 'success') {
         return this.$t('setting.saved')
@@ -68,15 +63,7 @@ export default {
       return this.statusUpdate === 'success'
     },
     option() {
-      if (!this.category) {
-        return {}
-      }
-      return this.category.options.find(
-        (elem) => elem.name === this.option_name
-      )
-    },
-    value() {
-      return this.option.value
+      return this.$store.getters.setting(this.category_name, this.option_name)
     }
   },
 
@@ -101,14 +88,14 @@ export default {
         return
       }
       const option = {
-        category: this.category.name,
+        category: this.category_name,
         name: this.option_name,
         value: newValue
       }
       webapi
-        .settings_update(this.category.name, option)
+        .settings_update(this.category_name, option)
         .then(() => {
-          this.$store.dispatch('update_settings_option', option)
+          this.$store.dispatch('update_setting', option)
           this.statusUpdate = 'success'
         })
         .catch(() => {
diff --git a/web-src/src/components/SettingsTextfield.vue b/web-src/src/components/SettingsTextfield.vue
index cd7618f0..b5a778fe 100644
--- a/web-src/src/components/SettingsTextfield.vue
+++ b/web-src/src/components/SettingsTextfield.vue
@@ -15,7 +15,7 @@
           class="input"
           type="text"
           :placeholder="placeholder"
-          :value="value"
+          :value="option.value"
           @input="set_update_timer"
         />
       </div>
@@ -47,11 +47,6 @@ export default {
   },
 
   computed: {
-    category() {
-      return this.$store.state.settings.categories.find(
-        (elem) => elem.name === this.category_name
-      )
-    },
     info() {
       if (this.statusUpdate === 'success') {
         return this.$t('setting.saved')
@@ -67,15 +62,7 @@ export default {
       return this.statusUpdate === 'success'
     },
     option() {
-      if (!this.category) {
-        return {}
-      }
-      return this.category.options.find(
-        (elem) => elem.name === this.option_name
-      )
-    },
-    value() {
-      return this.option.value
+      return this.$store.getters.setting(this.category_name, this.option_name)
     }
   },
 
@@ -102,14 +89,14 @@ export default {
         return
       }
       const option = {
-        category: this.category.name,
+        category: this.category_name,
         name: this.option_name,
         value: newValue
       }
       webapi
-        .settings_update(this.category.name, option)
+        .settings_update(this.category_name, option)
         .then(() => {
-          this.$store.dispatch('update_settings_option', option)
+          this.$store.dispatch('update_setting', option)
           this.statusUpdate = 'success'
         })
         .catch(() => {
diff --git a/web-src/src/pages/PageMusicRecentlyAdded.vue b/web-src/src/pages/PageMusicRecentlyAdded.vue
index 2de6f9cf..b1563a34 100644
--- a/web-src/src/pages/PageMusicRecentlyAdded.vue
+++ b/web-src/src/pages/PageMusicRecentlyAdded.vue
@@ -22,7 +22,7 @@ import webapi from '@/webapi'
 
 const dataObject = {
   load(to) {
-    const limit = store.getters.settings_option_recently_added_limit
+    const limit = store.getters.setting_recently_added_limit
     return webapi.search({
       expression:
         'media_kind is music having track_count > 3 order by time_added desc',
diff --git a/web-src/src/pages/PageNowPlaying.vue b/web-src/src/pages/PageNowPlaying.vue
index 31d4244f..842fad86 100644
--- a/web-src/src/pages/PageNowPlaying.vue
+++ b/web-src/src/pages/PageNowPlaying.vue
@@ -87,11 +87,11 @@ export default {
 
   computed: {
     composer() {
-      if (this.settings_option_show_composer_now_playing) {
+      if (this.setting_show_composer_now_playing) {
         if (
-          !this.settings_option_show_composer_for_genre ||
+          !this.setting_show_composer_for_genre ||
           (this.track.genre &&
-            this.settings_option_show_composer_for_genre
+            this.setting_show_composer_for_genre
               .toLowerCase()
               .split(',')
               .findIndex(
@@ -105,7 +105,7 @@ export default {
       return null
     },
     filepath() {
-      if (this.settings_option_show_filepath_now_playing) {
+      if (this.setting_show_filepath_now_playing) {
         return this.track.path
       }
       return null
@@ -119,14 +119,14 @@ export default {
     player() {
       return this.$store.state.player
     },
-    settings_option_show_composer_for_genre() {
-      return this.$store.getters.settings_option_show_composer_for_genre
+    setting_show_composer_for_genre() {
+      return this.$store.getters.setting_show_composer_for_genre
     },
-    settings_option_show_composer_now_playing() {
-      return this.$store.getters.settings_option_show_composer_now_playing
+    setting_show_composer_now_playing() {
+      return this.$store.getters.setting_show_composer_now_playing
     },
-    settings_option_show_filepath_now_playing() {
-      return this.$store.getters.settings_option_show_filepath_now_playing
+    setting_show_filepath_now_playing() {
+      return this.$store.getters.setting_show_filepath_now_playing
     },
     track() {
       return this.$store.getters.now_playing
diff --git a/web-src/src/pages/PageSettingsWebinterface.vue b/web-src/src/pages/PageSettingsWebinterface.vue
index 1a507192..79409f7b 100644
--- a/web-src/src/pages/PageSettingsWebinterface.vue
+++ b/web-src/src/pages/PageSettingsWebinterface.vue
@@ -123,7 +123,7 @@
         <settings-textfield
           category_name="webinterface"
           option_name="show_composer_for_genre"
-          :disabled="!settings_option_show_composer_now_playing"
+          :disabled="!setting_show_composer_now_playing"
           :placeholder="$t('page.settings.general.genres')"
         >
           <template #label>
@@ -225,11 +225,11 @@ export default {
         }))
       }
     },
-    settings_option_show_composer_now_playing() {
-      return this.$store.getters.settings_option_show_composer_now_playing
+    setting_show_composer_now_playing() {
+      return this.$store.getters.setting_show_composer_now_playing
     },
-    settings_option_show_filepath_now_playing() {
-      return this.$store.getters.settings_option_show_filepath_now_playing
+    setting_show_filepath_now_playing() {
+      return this.$store.getters.setting_show_filepath_now_playing
     }
   }
 }
diff --git a/web-src/src/store/index.js b/web-src/src/store/index.js
index b6da6636..b45e254c 100644
--- a/web-src/src/store/index.js
+++ b/web-src/src/store/index.js
@@ -71,23 +71,23 @@ export default createStore({
   getters: {
     now_playing: (state) =>
       state.queue.items.find((e) => e.id === state.player.item_id) ?? {},
-    settings_option: (state) => (categoryName, optionName) =>
+    setting: (state) => (categoryName, optionName) =>
       state.settings.categories
         .find((category) => category.name === categoryName)
         ?.options.find((option) => option.name === optionName) ?? {},
-    settings_option_recently_added_limit: (state, getters) =>
+    setting_recently_added_limit: (state, getters) =>
       getters.settings_webinterface?.options.find(
         (option) => option.name === 'recently_added_limit'
       )?.value ?? 100,
-    settings_option_show_composer_for_genre: (state, getters) =>
+    setting_show_composer_for_genre: (state, getters) =>
       getters.settings_webinterface?.options.find(
         (option) => option.name === 'show_composer_for_genre'
       )?.value ?? null,
-    settings_option_show_composer_now_playing: (state, getters) =>
+    setting_show_composer_now_playing: (state, getters) =>
       getters.settings_webinterface?.options.find(
         (option) => option.name === 'show_composer_now_playing'
       )?.value ?? false,
-    settings_option_show_filepath_now_playing: (state, getters) =>
+    setting_show_filepath_now_playing: (state, getters) =>
       getters.settings_webinterface?.options.find(
         (option) => option.name === 'show_filepath_now_playing'
       )?.value ?? false,
@@ -225,7 +225,7 @@ export default createStore({
         state.recent_searches.splice(index, 1)
       }
     },
-    update_settings_option({ state }, option) {
+    update_setting({ state }, option) {
       const settingCategory = state.settings.categories.find(
           (e) => e.name === option.category
         ),

From 0401fb96169f1db308dbc4fc949881dbfe67c4fb Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Fri, 26 Apr 2024 18:10:23 +0200
Subject: [PATCH 04/20] [web] Simplify naming to avoid confusion

---
 web-src/src/pages/PageAlbums.vue         | 12 ++++++------
 web-src/src/pages/PageArtist.vue         | 12 ++++++------
 web-src/src/pages/PageArtistTracks.vue   | 12 ++++++------
 web-src/src/pages/PageArtists.vue        | 12 ++++++------
 web-src/src/pages/PageComposerTracks.vue | 12 ++++++------
 web-src/src/pages/PageGenreTracks.vue    | 12 ++++++------
 6 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/web-src/src/pages/PageAlbums.vue b/web-src/src/pages/PageAlbums.vue
index 6a8a26bd..a3b7b64c 100644
--- a/web-src/src/pages/PageAlbums.vue
+++ b/web-src/src/pages/PageAlbums.vue
@@ -41,8 +41,8 @@
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.albums.sort.title')" />
             <control-dropdown
-              v-model:value="selected_grouping_option_id"
-              :options="grouping_options"
+              v-model:value="selected_grouping_id"
+              :options="groupings"
             />
           </div>
         </div>
@@ -101,7 +101,7 @@ export default {
   data() {
     return {
       albums_list: new GroupedList(),
-      grouping_options: [
+      groupings: [
         {
           id: 1,
           name: this.$t('page.albums.sort.name'),
@@ -151,8 +151,8 @@ export default {
 
   computed: {
     albums() {
-      const grouping = this.grouping_options.find(
-        (o) => o.id === this.selected_grouping_option_id
+      const grouping = this.groupings.find(
+        (grouping) => grouping.id === this.selected_grouping_id
       )
       grouping.options.filters = [
         (album) => !this.hide_singles || album.track_count > 2,
@@ -178,7 +178,7 @@ export default {
         this.$store.commit(types.HIDE_SPOTIFY, value)
       }
     },
-    selected_grouping_option_id: {
+    selected_grouping_id: {
       get() {
         return this.$store.state.albums_sort
       },
diff --git a/web-src/src/pages/PageArtist.vue b/web-src/src/pages/PageArtist.vue
index 3d5597df..51cc03d5 100644
--- a/web-src/src/pages/PageArtist.vue
+++ b/web-src/src/pages/PageArtist.vue
@@ -24,8 +24,8 @@
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.artist.sort.title')" />
             <control-dropdown
-              v-model:value="selected_grouping_option_id"
-              :options="grouping_options"
+              v-model:value="selected_grouping_id"
+              :options="groupings"
             />
           </div>
         </div>
@@ -112,7 +112,7 @@ export default {
     return {
       albums_list: new GroupedList(),
       artist: {},
-      grouping_options: [
+      groupings: [
         {
           id: 1,
           name: this.$t('page.artist.sort.name'),
@@ -130,8 +130,8 @@ export default {
 
   computed: {
     albums() {
-      const grouping = this.grouping_options.find(
-        (o) => o.id === this.selected_grouping_option_id
+      const grouping = this.groupings.find(
+        (grouping) => grouping.id === this.selected_grouping_id
       )
       grouping.options.filters = [
         (album) => !this.hide_spotify || album.data_kind !== 'spotify'
@@ -147,7 +147,7 @@ export default {
         this.$store.commit(types.HIDE_SPOTIFY, value)
       }
     },
-    selected_grouping_option_id: {
+    selected_grouping_id: {
       get() {
         return this.$store.state.artist_albums_sort
       },
diff --git a/web-src/src/pages/PageArtistTracks.vue b/web-src/src/pages/PageArtistTracks.vue
index d0576718..62f352b7 100644
--- a/web-src/src/pages/PageArtistTracks.vue
+++ b/web-src/src/pages/PageArtistTracks.vue
@@ -25,8 +25,8 @@
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.artist.sort.title')" />
             <control-dropdown
-              v-model:value="selected_grouping_option_id"
-              :options="grouping_options"
+              v-model:value="selected_grouping_id"
+              :options="groupings"
             />
           </div>
         </div>
@@ -114,7 +114,7 @@ export default {
   data() {
     return {
       artist: {},
-      grouping_options: [
+      groupings: [
         {
           id: 1,
           name: this.$t('page.artist.sort.name'),
@@ -150,7 +150,7 @@ export default {
         this.$store.commit(types.HIDE_SPOTIFY, value)
       }
     },
-    selected_grouping_option_id: {
+    selected_grouping_id: {
       get() {
         return this.$store.state.artist_tracks_sort
       },
@@ -165,8 +165,8 @@ export default {
       return this.tracks_list.items.map((item) => item.uri).join()
     },
     tracks() {
-      const grouping = this.grouping_options.find(
-        (o) => o.id === this.selected_grouping_option_id
+      const grouping = this.groupings.find(
+        (grouping) => grouping.id === this.selected_grouping_id
       )
       grouping.options.filters = [
         (track) => !this.hide_spotify || track.data_kind !== 'spotify'
diff --git a/web-src/src/pages/PageArtists.vue b/web-src/src/pages/PageArtists.vue
index e2acb071..0b3134d3 100644
--- a/web-src/src/pages/PageArtists.vue
+++ b/web-src/src/pages/PageArtists.vue
@@ -41,8 +41,8 @@
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.artists.sort.title')" />
             <control-dropdown
-              v-model:value="selected_grouping_option_id"
-              :options="grouping_options"
+              v-model:value="selected_grouping_id"
+              :options="groupings"
             />
           </div>
         </div>
@@ -101,7 +101,7 @@ export default {
   data() {
     return {
       artists_list: new GroupedList(),
-      grouping_options: [
+      groupings: [
         {
           id: 1,
           name: this.$t('page.artists.sort.name'),
@@ -125,8 +125,8 @@ export default {
       if (!this.artists_list) {
         return []
       }
-      const grouping = this.grouping_options.find(
-        (o) => o.id === this.selected_grouping_option_id
+      const grouping = this.groupings.find(
+        (grouping) => grouping.id === this.selected_grouping_id
       )
       grouping.options.filters = [
         (artist) =>
@@ -152,7 +152,7 @@ export default {
         this.$store.commit(types.HIDE_SPOTIFY, value)
       }
     },
-    selected_grouping_option_id: {
+    selected_grouping_id: {
       get() {
         return this.$store.state.artists_sort
       },
diff --git a/web-src/src/pages/PageComposerTracks.vue b/web-src/src/pages/PageComposerTracks.vue
index d1361fb1..a9b495b7 100644
--- a/web-src/src/pages/PageComposerTracks.vue
+++ b/web-src/src/pages/PageComposerTracks.vue
@@ -7,8 +7,8 @@
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.artist.sort.title')" />
             <control-dropdown
-              v-model:value="selected_grouping_option_id"
-              :options="grouping_options"
+              v-model:value="selected_grouping_id"
+              :options="groupings"
             />
           </div>
         </div>
@@ -102,7 +102,7 @@ export default {
   data() {
     return {
       composer: {},
-      grouping_options: [
+      groupings: [
         {
           id: 1,
           name: this.$t('page.composer.sort.name'),
@@ -126,7 +126,7 @@ export default {
     expression() {
       return `composer is "${this.composer.name}" and media_kind is music`
     },
-    selected_grouping_option_id: {
+    selected_grouping_id: {
       get() {
         return this.$store.state.composer_tracks_sort
       },
@@ -135,8 +135,8 @@ export default {
       }
     },
     tracks() {
-      const grouping = this.grouping_options.find(
-        (o) => o.id === this.selected_grouping_option_id
+      const grouping = this.groupings.find(
+        (grouping) => grouping.id === this.selected_grouping_id
       )
       this.tracks_list.group(grouping.options)
       return this.tracks_list
diff --git a/web-src/src/pages/PageGenreTracks.vue b/web-src/src/pages/PageGenreTracks.vue
index 784c9c73..27b51ea1 100644
--- a/web-src/src/pages/PageGenreTracks.vue
+++ b/web-src/src/pages/PageGenreTracks.vue
@@ -7,8 +7,8 @@
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.genre.sort.title')" />
             <control-dropdown
-              v-model:value="selected_grouping_option_id"
-              :options="grouping_options"
+              v-model:value="selected_grouping_id"
+              :options="groupings"
             />
           </div>
         </div>
@@ -97,7 +97,7 @@ export default {
   data() {
     return {
       genre: {},
-      grouping_options: [
+      groupings: [
         {
           id: 1,
           name: this.$t('page.genre.sort.name'),
@@ -122,7 +122,7 @@ export default {
     expression() {
       return `genre is "${this.genre.name}" and media_kind is ${this.media_kind}`
     },
-    selected_grouping_option_id: {
+    selected_grouping_id: {
       get() {
         return this.$store.state.genre_tracks_sort
       },
@@ -131,8 +131,8 @@ export default {
       }
     },
     tracks() {
-      const grouping = this.grouping_options.find(
-        (o) => o.id === this.selected_grouping_option_id
+      const grouping = this.groupings.find(
+        (grouping) => grouping.id === this.selected_grouping_id
       )
       this.tracks_list.group(grouping.options)
       return this.tracks_list

From 8fe6cba6efb28ecb44a0b1d5ac4ab5016ee7703e Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Fri, 26 Apr 2024 18:15:35 +0200
Subject: [PATCH 05/20] [web] Rename confusing variable name option

---
 web-src/src/components/SettingsCheckbox.vue   | 39 +++++++-------
 web-src/src/components/SettingsIntfield.vue   | 20 +++----
 web-src/src/components/SettingsTextfield.vue  | 20 +++----
 web-src/src/pages/PageSettingsArtwork.vue     | 13 ++---
 .../src/pages/PageSettingsWebinterface.vue    | 53 +++++++------------
 5 files changed, 62 insertions(+), 83 deletions(-)

diff --git a/web-src/src/components/SettingsCheckbox.vue b/web-src/src/components/SettingsCheckbox.vue
index 5feb1970..1fc4e18c 100644
--- a/web-src/src/components/SettingsCheckbox.vue
+++ b/web-src/src/components/SettingsCheckbox.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="field">
     <input
-      :id="option.name"
-      v-model="option.value"
+      :id="setting.name"
+      v-model="setting.value"
       type="checkbox"
       class="switch is-rounded mr-2"
       @change="update_setting"
     />
-    <label class="pt-0" :for="option.name">
+    <label class="pt-0" :for="setting.name">
       <slot name="label" />
     </label>
     <i
@@ -27,8 +27,8 @@ import webapi from '@/webapi'
 export default {
   name: 'SettingsCheckbox',
   props: {
-    category_name: { required: true, type: String },
-    option_name: { required: true, type: String }
+    category: { required: true, type: String },
+    name: { required: true, type: String }
   },
 
   data() {
@@ -54,40 +54,37 @@ export default {
     is_success() {
       return this.statusUpdate === 'success'
     },
-    option() {
-      const option = this.$store.getters.setting(
-        this.category_name,
-        this.option_name
-      )
-      if (!option) {
+    setting() {
+      const setting = this.$store.getters.setting(this.category, this.name)
+      if (!setting) {
         return {
-          category: this.category_name,
-          name: this.option_name,
+          category: this.category,
+          name: this.name,
           value: false
         }
       }
-      return option
+      return setting
     }
   },
 
   methods: {
     clear_status() {
       if (this.is_error) {
-        this.option.value = !this.option.value
+        this.setting.value = !this.setting.value
       }
       this.statusUpdate = ''
     },
     update_setting() {
       this.timerId = -1
-      const option = {
-        category: this.category_name,
-        name: this.option_name,
-        value: this.option.value
+      const setting = {
+        category: this.category,
+        name: this.name,
+        value: this.setting.value
       }
       webapi
-        .settings_update(this.category_name, option)
+        .settings_update(this.category, setting)
         .then(() => {
-          this.$store.dispatch('update_setting', option)
+          this.$store.dispatch('update_setting', setting)
           this.statusUpdate = 'success'
         })
         .catch(() => {
diff --git a/web-src/src/components/SettingsIntfield.vue b/web-src/src/components/SettingsIntfield.vue
index b2f83d2f..29b2aea9 100644
--- a/web-src/src/components/SettingsIntfield.vue
+++ b/web-src/src/components/SettingsIntfield.vue
@@ -16,7 +16,7 @@
           inputmode="numeric"
           min="0"
           :placeholder="placeholder"
-          :value="option.value"
+          :value="setting.value"
           @input="set_update_timer"
         />
       </div>
@@ -33,9 +33,9 @@ import webapi from '@/webapi'
 export default {
   name: 'SettingsIntfield',
   props: {
-    category_name: { required: true, type: String },
+    category: { required: true, type: String },
     disabled: Boolean,
-    option_name: { required: true, type: String },
+    name: { required: true, type: String },
     placeholder: { default: '', type: String }
   },
 
@@ -62,8 +62,8 @@ export default {
     is_success() {
       return this.statusUpdate === 'success'
     },
-    option() {
-      return this.$store.getters.setting(this.category_name, this.option_name)
+    setting() {
+      return this.$store.getters.setting(this.category, this.name)
     }
   },
 
@@ -87,15 +87,15 @@ export default {
         this.statusUpdate = ''
         return
       }
-      const option = {
-        category: this.category_name,
-        name: this.option_name,
+      const setting = {
+        category: this.category,
+        name: this.name,
         value: newValue
       }
       webapi
-        .settings_update(this.category_name, option)
+        .settings_update(this.category, setting)
         .then(() => {
-          this.$store.dispatch('update_setting', option)
+          this.$store.dispatch('update_setting', setting)
           this.statusUpdate = 'success'
         })
         .catch(() => {
diff --git a/web-src/src/components/SettingsTextfield.vue b/web-src/src/components/SettingsTextfield.vue
index b5a778fe..9d496d20 100644
--- a/web-src/src/components/SettingsTextfield.vue
+++ b/web-src/src/components/SettingsTextfield.vue
@@ -15,7 +15,7 @@
           class="input"
           type="text"
           :placeholder="placeholder"
-          :value="option.value"
+          :value="setting.value"
           @input="set_update_timer"
         />
       </div>
@@ -32,9 +32,9 @@ import webapi from '@/webapi'
 export default {
   name: 'SettingsTextfield',
   props: {
-    category_name: { required: true, type: String },
+    category: { required: true, type: String },
     disabled: Boolean,
-    option_name: { required: true, type: String },
+    name: { required: true, type: String },
     placeholder: { default: '', type: String }
   },
 
@@ -61,8 +61,8 @@ export default {
     is_success() {
       return this.statusUpdate === 'success'
     },
-    option() {
-      return this.$store.getters.setting(this.category_name, this.option_name)
+    setting() {
+      return this.$store.getters.setting(this.category, this.name)
     }
   },
 
@@ -88,15 +88,15 @@ export default {
         this.statusUpdate = ''
         return
       }
-      const option = {
-        category: this.category_name,
-        name: this.option_name,
+      const setting = {
+        category: this.category,
+        name: this.name,
         value: newValue
       }
       webapi
-        .settings_update(this.category_name, option)
+        .settings_update(this.category, setting)
         .then(() => {
-          this.$store.dispatch('update_setting', option)
+          this.$store.dispatch('update_setting', setting)
           this.statusUpdate = 'success'
         })
         .catch(() => {
diff --git a/web-src/src/pages/PageSettingsArtwork.vue b/web-src/src/pages/PageSettingsArtwork.vue
index c1164fc0..72ec56f3 100644
--- a/web-src/src/pages/PageSettingsArtwork.vue
+++ b/web-src/src/pages/PageSettingsArtwork.vue
@@ -16,8 +16,8 @@
         />
         <settings-checkbox
           v-if="spotify.spotify_logged_in"
-          category_name="artwork"
-          option_name="use_artwork_source_spotify"
+          category="artwork"
+          name="use_artwork_source_spotify"
         >
           <template #label>
             <span v-text="$t('page.settings.artwork.spotify')" />
@@ -26,10 +26,7 @@
             </a>
           </template>
         </settings-checkbox>
-        <settings-checkbox
-          category_name="artwork"
-          option_name="use_artwork_source_discogs"
-        >
+        <settings-checkbox category="artwork" name="use_artwork_source_discogs">
           <template #label>
             <span v-text="$t('page.settings.artwork.discogs')" />
             <a href="https://www.discogs.com/" target="_blank">
@@ -38,8 +35,8 @@
           </template>
         </settings-checkbox>
         <settings-checkbox
-          category_name="artwork"
-          option_name="use_artwork_source_coverartarchive"
+          category="artwork"
+          name="use_artwork_source_coverartarchive"
         >
           <template #label>
             <span v-text="$t('page.settings.artwork.coverartarchive')" />
diff --git a/web-src/src/pages/PageSettingsWebinterface.vue b/web-src/src/pages/PageSettingsWebinterface.vue
index 79409f7b..376fcef2 100644
--- a/web-src/src/pages/PageSettingsWebinterface.vue
+++ b/web-src/src/pages/PageSettingsWebinterface.vue
@@ -26,57 +26,45 @@
           v-text="$t('page.settings.general.navigation-item-selection-info')"
         />
         <settings-checkbox
-          category_name="webinterface"
-          option_name="show_menu_item_playlists"
+          category="webinterface"
+          name="show_menu_item_playlists"
         >
           <template #label>
             <span v-text="$t('page.settings.general.playlists')" />
           </template>
         </settings-checkbox>
-        <settings-checkbox
-          category_name="webinterface"
-          option_name="show_menu_item_music"
-        >
+        <settings-checkbox category="webinterface" name="show_menu_item_music">
           <template #label>
             <span v-text="$t('page.settings.general.music')" />
           </template>
         </settings-checkbox>
         <settings-checkbox
-          category_name="webinterface"
-          option_name="show_menu_item_podcasts"
+          category="webinterface"
+          name="show_menu_item_podcasts"
         >
           <template #label>
             <span v-text="$t('page.settings.general.podcasts')" />
           </template>
         </settings-checkbox>
         <settings-checkbox
-          category_name="webinterface"
-          option_name="show_menu_item_audiobooks"
+          category="webinterface"
+          name="show_menu_item_audiobooks"
         >
           <template #label>
             <span v-text="$t('page.settings.general.audiobooks')" />
           </template>
         </settings-checkbox>
-        <settings-checkbox
-          category_name="webinterface"
-          option_name="show_menu_item_radio"
-        >
+        <settings-checkbox category="webinterface" name="show_menu_item_radio">
           <template #label>
             <span v-text="$t('page.settings.general.radio')" />
           </template>
         </settings-checkbox>
-        <settings-checkbox
-          category_name="webinterface"
-          option_name="show_menu_item_files"
-        >
+        <settings-checkbox category="webinterface" name="show_menu_item_files">
           <template #label>
             <span v-text="$t('page.settings.general.files')" />
           </template>
         </settings-checkbox>
-        <settings-checkbox
-          category_name="webinterface"
-          option_name="show_menu_item_search"
-        >
+        <settings-checkbox category="webinterface" name="show_menu_item_search">
           <template #label>
             <span v-text="$t('page.settings.general.search')" />
           </template>
@@ -92,8 +80,8 @@
       </template>
       <template #content>
         <settings-checkbox
-          category_name="webinterface"
-          option_name="show_cover_artwork_in_album_lists"
+          category="webinterface"
+          name="show_cover_artwork_in_album_lists"
         >
           <template #label>
             <span v-text="$t('page.settings.general.show-coverart')" />
@@ -110,8 +98,8 @@
       </template>
       <template #content>
         <settings-checkbox
-          category_name="webinterface"
-          option_name="show_composer_now_playing"
+          category="webinterface"
+          name="show_composer_now_playing"
         >
           <template #label>
             <span v-text="$t('page.settings.general.show-composer')" />
@@ -121,8 +109,8 @@
           </template>
         </settings-checkbox>
         <settings-textfield
-          category_name="webinterface"
-          option_name="show_composer_for_genre"
+          category="webinterface"
+          name="show_composer_for_genre"
           :disabled="!setting_show_composer_now_playing"
           :placeholder="$t('page.settings.general.genres')"
         >
@@ -145,8 +133,8 @@
           </template>
         </settings-textfield>
         <settings-checkbox
-          category_name="webinterface"
-          option_name="show_filepath_now_playing"
+          category="webinterface"
+          name="show_filepath_now_playing"
         >
           <template #label>
             <span v-text="$t('page.settings.general.show-path')" />
@@ -162,10 +150,7 @@
         />
       </template>
       <template #content>
-        <settings-intfield
-          category_name="webinterface"
-          option_name="recently_added_limit"
-        >
+        <settings-intfield category="webinterface" name="recently_added_limit">
           <template #label>
             <span
               v-text="$t('page.settings.general.recently-added-page-info')"

From d246c42a991558632a7d168795f6b6df2b9e8497 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Fri, 26 Apr 2024 18:24:34 +0200
Subject: [PATCH 06/20] [web] Lint too short variable names

---
 web-src/src/components/LyricsPane.vue |  8 +++-----
 web-src/src/lib/Audio.js              | 10 +++++-----
 web-src/src/pages/PageQueue.vue       |  6 +++---
 web-src/src/store/index.js            |  6 +++---
 4 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/web-src/src/components/LyricsPane.vue b/web-src/src/components/LyricsPane.vue
index 8e42a351..4b8dc756 100644
--- a/web-src/src/components/LyricsPane.vue
+++ b/web-src/src/components/LyricsPane.vue
@@ -175,13 +175,11 @@ export default {
           pane.scrollTop
       })
     },
-    start_scrolling(e) {
+    start_scrolling(event) {
       // Consider only user events
-      if (e.screenX || e.screenX !== 0 || e.screenY || e.screenY !== 0) {
+      if (event.screenX ?? event.screenY) {
         this.autoScrolling = false
-        if (this.scrollingTimer) {
-          clearTimeout(this.scrollingTimer)
-        }
+        clearTimeout(this.scrollingTimer)
         // Reenable automatic scrolling after 2 seconds
         this.scrollingTimer = setTimeout((this.autoScrolling = true), 2000)
       }
diff --git a/web-src/src/lib/Audio.js b/web-src/src/lib/Audio.js
index 14bf68df..96e4819d 100644
--- a/web-src/src/lib/Audio.js
+++ b/web-src/src/lib/Audio.js
@@ -29,10 +29,10 @@ export default {
     this.context = new (window.AudioContext || window.webkitAudioContext)()
     const source = this.context.createMediaElementSource(this.audio)
     source.connect(this.context.destination)
-    this.audio.addEventListener('canplaythrough', (e) => {
+    this.audio.addEventListener('canplaythrough', (event) => {
       this.audio.play()
     })
-    this.audio.addEventListener('canplay', (e) => {
+    this.audio.addEventListener('canplay', (event) => {
       this.audio.play()
     })
     return this.audio
@@ -42,17 +42,17 @@ export default {
   stop() {
     try {
       this.audio.pause()
-    } catch (e) {
+    } catch (error) {
       // Continue regardless of error
     }
     try {
       this.audio.stop()
-    } catch (e) {
+    } catch (error) {
       // Continue regardless of error
     }
     try {
       this.audio.close()
-    } catch (e) {
+    } catch (error) {
       // Continue regardless of error
     }
   }
diff --git a/web-src/src/pages/PageQueue.vue b/web-src/src/pages/PageQueue.vue
index a9e88cd9..93d02a0e 100644
--- a/web-src/src/pages/PageQueue.vue
+++ b/web-src/src/pages/PageQueue.vue
@@ -163,11 +163,11 @@ export default {
   },
 
   methods: {
-    move_item(e) {
+    move_item(event) {
       const oldPosition =
-        e.oldIndex + (this.show_only_next_items && this.current_position)
+        event.oldIndex + (this.show_only_next_items && this.current_position)
       const item = this.queue_items[oldPosition]
-      const newPosition = item.position + (e.newIndex - e.oldIndex)
+      const newPosition = item.position + (event.newIndex - event.oldIndex)
       if (newPosition !== oldPosition) {
         webapi.queue_move(item.id, newPosition)
       }
diff --git a/web-src/src/store/index.js b/web-src/src/store/index.js
index b45e254c..5d7ed090 100644
--- a/web-src/src/store/index.js
+++ b/web-src/src/store/index.js
@@ -70,7 +70,7 @@ export default createStore({
 
   getters: {
     now_playing: (state) =>
-      state.queue.items.find((e) => e.id === state.player.item_id) ?? {},
+      state.queue.items.find((item) => item.id === state.player.item_id) ?? {},
     setting: (state) => (categoryName, optionName) =>
       state.settings.categories
         .find((category) => category.name === categoryName)
@@ -227,10 +227,10 @@ export default createStore({
     },
     update_setting({ state }, option) {
       const settingCategory = state.settings.categories.find(
-          (e) => e.name === option.category
+          (category) => category.name === option.category
         ),
         settingOption = settingCategory.options.find(
-          (e) => e.name === option.name
+          (setting) => setting.name === option.name
         )
       settingOption.value = option.value
     }

From 8a303f340b23eac144f934a7624bc05b34f877a1 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Fri, 26 Apr 2024 21:06:51 +0200
Subject: [PATCH 07/20] [web] Return the list itself when group operation is
 done

---
 web-src/src/lib/GroupedList.js           |  1 +
 web-src/src/pages/PageAlbums.vue         |  8 +++-----
 web-src/src/pages/PageArtist.vue         |  7 +++----
 web-src/src/pages/PageArtistTracks.vue   |  7 +++----
 web-src/src/pages/PageArtists.vue        | 10 +++-------
 web-src/src/pages/PageComposerTracks.vue |  5 ++---
 web-src/src/pages/PageGenreTracks.vue    |  5 ++---
 web-src/src/pages/PagePlaylistFolder.vue |  3 +--
 8 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/web-src/src/lib/GroupedList.js b/web-src/src/lib/GroupedList.js
index 3cbedb84..19155398 100644
--- a/web-src/src/lib/GroupedList.js
+++ b/web-src/src/lib/GroupedList.js
@@ -101,6 +101,7 @@ export class GroupedList {
     }, new Map())
     // Create index list
     this.indices = Array.from(this.itemsGrouped.keys())
+    return this
   }
 
   *generate() {
diff --git a/web-src/src/pages/PageAlbums.vue b/web-src/src/pages/PageAlbums.vue
index a3b7b64c..d0a4a7f9 100644
--- a/web-src/src/pages/PageAlbums.vue
+++ b/web-src/src/pages/PageAlbums.vue
@@ -151,16 +151,14 @@ export default {
 
   computed: {
     albums() {
-      const grouping = this.groupings.find(
+      const { options } = this.groupings.find(
         (grouping) => grouping.id === this.selected_grouping_id
       )
-      grouping.options.filters = [
+      options.filters = [
         (album) => !this.hide_singles || album.track_count > 2,
         (album) => !this.hide_spotify || album.data_kind !== 'spotify'
       ]
-      this.albums_list.group(grouping.options)
-
-      return this.albums_list
+      return this.albums_list.group(options)
     },
     hide_singles: {
       get() {
diff --git a/web-src/src/pages/PageArtist.vue b/web-src/src/pages/PageArtist.vue
index 51cc03d5..4a810eb8 100644
--- a/web-src/src/pages/PageArtist.vue
+++ b/web-src/src/pages/PageArtist.vue
@@ -130,14 +130,13 @@ export default {
 
   computed: {
     albums() {
-      const grouping = this.groupings.find(
+      const { options } = this.groupings.find(
         (grouping) => grouping.id === this.selected_grouping_id
       )
-      grouping.options.filters = [
+      options.filters = [
         (album) => !this.hide_spotify || album.data_kind !== 'spotify'
       ]
-      this.albums_list.group(grouping.options)
-      return this.albums_list
+      return this.albums_list.group(options)
     },
     hide_spotify: {
       get() {
diff --git a/web-src/src/pages/PageArtistTracks.vue b/web-src/src/pages/PageArtistTracks.vue
index 62f352b7..c08490dd 100644
--- a/web-src/src/pages/PageArtistTracks.vue
+++ b/web-src/src/pages/PageArtistTracks.vue
@@ -165,14 +165,13 @@ export default {
       return this.tracks_list.items.map((item) => item.uri).join()
     },
     tracks() {
-      const grouping = this.groupings.find(
+      const { options } = this.groupings.find(
         (grouping) => grouping.id === this.selected_grouping_id
       )
-      grouping.options.filters = [
+      options.filters = [
         (track) => !this.hide_spotify || track.data_kind !== 'spotify'
       ]
-      this.tracks_list.group(grouping.options)
-      return this.tracks_list
+      return this.tracks_list.group(options)
     }
   },
 
diff --git a/web-src/src/pages/PageArtists.vue b/web-src/src/pages/PageArtists.vue
index 0b3134d3..5c29e211 100644
--- a/web-src/src/pages/PageArtists.vue
+++ b/web-src/src/pages/PageArtists.vue
@@ -122,19 +122,15 @@ export default {
   computed: {
     // Wraps GroupedList and updates it if filter or sort changes
     artists() {
-      if (!this.artists_list) {
-        return []
-      }
-      const grouping = this.groupings.find(
+      const { options } = this.groupings.find(
         (grouping) => grouping.id === this.selected_grouping_id
       )
-      grouping.options.filters = [
+      options.filters = [
         (artist) =>
           !this.hide_singles || artist.track_count > artist.album_count * 2,
         (artist) => !this.hide_spotify || artist.data_kind !== 'spotify'
       ]
-      this.artists_list.group(grouping.options)
-      return this.artists_list
+      return this.artists_list.group(options)
     },
     hide_singles: {
       get() {
diff --git a/web-src/src/pages/PageComposerTracks.vue b/web-src/src/pages/PageComposerTracks.vue
index a9b495b7..1fe9d021 100644
--- a/web-src/src/pages/PageComposerTracks.vue
+++ b/web-src/src/pages/PageComposerTracks.vue
@@ -135,11 +135,10 @@ export default {
       }
     },
     tracks() {
-      const grouping = this.groupings.find(
+      const { options } = this.groupings.find(
         (grouping) => grouping.id === this.selected_grouping_id
       )
-      this.tracks_list.group(grouping.options)
-      return this.tracks_list
+      return this.tracks_list.group(options)
     }
   },
 
diff --git a/web-src/src/pages/PageGenreTracks.vue b/web-src/src/pages/PageGenreTracks.vue
index 27b51ea1..36e54d7d 100644
--- a/web-src/src/pages/PageGenreTracks.vue
+++ b/web-src/src/pages/PageGenreTracks.vue
@@ -131,11 +131,10 @@ export default {
       }
     },
     tracks() {
-      const grouping = this.groupings.find(
+      const { options } = this.groupings.find(
         (grouping) => grouping.id === this.selected_grouping_id
       )
-      this.tracks_list.group(grouping.options)
-      return this.tracks_list
+      return this.tracks_list.group(options)
     }
   },
 
diff --git a/web-src/src/pages/PagePlaylistFolder.vue b/web-src/src/pages/PagePlaylistFolder.vue
index e2f55a5f..c2aafb08 100644
--- a/web-src/src/pages/PagePlaylistFolder.vue
+++ b/web-src/src/pages/PagePlaylistFolder.vue
@@ -66,7 +66,7 @@ export default {
 
   computed: {
     playlists() {
-      this.playlists_list.group({
+      return this.playlists_list.group({
         filters: [
           (playlist) =>
             playlist.folder ||
@@ -75,7 +75,6 @@ export default {
             playlist.item_count > playlist.stream_count
         ]
       })
-      return this.playlists_list
     },
     radio_playlists() {
       return this.$store.state.config.radio_playlists

From 7826b366349a3faa02b6a5f79444341f0a39bcb3 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Fri, 26 Apr 2024 21:48:07 +0200
Subject: [PATCH 08/20] [web] Fix shadowed variables

---
 web-src/eslint.config.js              |  1 -
 web-src/src/components/ListAlbums.vue |  6 +++---
 web-src/src/components/LyricsPane.vue | 11 +++--------
 web-src/src/lib/GroupedList.js        |  6 +++---
 4 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/web-src/eslint.config.js b/web-src/eslint.config.js
index 86a16ba6..31c88d04 100644
--- a/web-src/eslint.config.js
+++ b/web-src/eslint.config.js
@@ -28,7 +28,6 @@ export default [
       'no-negated-condition': 'off',
       'no-nested-ternary': 'off',
       'no-plusplus': 'off',
-      'no-shadow': 'off',
       'no-ternary': 'off',
       'no-undef': 'off',
       'no-unused-vars': ['error', { args: 'none', caughtErrors: 'none' }],
diff --git a/web-src/src/components/ListAlbums.vue b/web-src/src/components/ListAlbums.vue
index 9fee1572..2333bfa7 100644
--- a/web-src/src/components/ListAlbums.vue
+++ b/web-src/src/components/ListAlbums.vue
@@ -122,10 +122,10 @@ export default {
     open_remove_podcast_dialog() {
       webapi
         .library_album_tracks(this.selected_item.id, { limit: 1 })
-        .then(({ data }) => {
-          webapi.library_track_playlists(data.items[0].id).then(({ data }) => {
+        .then(({ data: album }) => {
+          webapi.library_track_playlists(album.items[0].id).then(({ data }) => {
             ;[this.rss_playlist_to_remove] = data.items.filter(
-              (pl) => pl.type === 'rss'
+              (playlist) => playlist.type === 'rss'
             )
             this.show_remove_podcast_modal = true
             this.show_details_modal = false
diff --git a/web-src/src/components/LyricsPane.vue b/web-src/src/components/LyricsPane.vue
index 4b8dc756..68dc90a5 100644
--- a/web-src/src/components/LyricsPane.vue
+++ b/web-src/src/components/LyricsPane.vue
@@ -68,18 +68,13 @@ export default {
         })
         // Split the verses into words
         parsed.forEach((verse, index, lyrics) => {
-          const duration =
-            index < lyrics.length - 1 ? lyrics[index + 1].time - verse.time : 3
-          const unitDuration = duration / verse.text.length
+          const unitDuration =
+            (lyrics[index + 1].time - verse.time || 3) / verse.text.length
           let delay = 0
           verse.words = verse.text.match(/\S+\s*/gu).map((text) => {
             const duration = text.length * unitDuration
             delay += duration
-            return {
-              duration,
-              delay,
-              text
-            }
+            return { duration, delay, text }
           })
         })
       }
diff --git a/web-src/src/lib/GroupedList.js b/web-src/src/lib/GroupedList.js
index 19155398..284e4b6d 100644
--- a/web-src/src/lib/GroupedList.js
+++ b/web-src/src/lib/GroupedList.js
@@ -80,7 +80,6 @@ export class GroupedList {
   }
 
   group({ criteria = [], filters = [], index } = {}) {
-    const indexer = createIndexer(index)
     const itemsFiltered = this.items.filter((item) =>
       filters.every((filter) => filter(item))
     )
@@ -94,9 +93,10 @@ export class GroupedList {
       )
     )
     // Group item list
+    const indexer = createIndexer(index)
     this.itemsGrouped = itemsSorted.reduce((map, item) => {
-      const index = indexer(item)
-      map.set(index, [...(map.get(index) || []), item])
+      const key = indexer(item)
+      map.set(key, [...(map.get(key) || []), item])
       return map
     }, new Map())
     // Create index list

From ea947df50a7032bfff55d89d9fb103150f2f60b1 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Fri, 26 Apr 2024 22:54:32 +0200
Subject: [PATCH 09/20] [web] Use named capture groups

---
 web-src/eslint.config.js              |  1 -
 web-src/src/components/LyricsPane.vue | 14 ++++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/web-src/eslint.config.js b/web-src/eslint.config.js
index 31c88d04..a4fd5d87 100644
--- a/web-src/eslint.config.js
+++ b/web-src/eslint.config.js
@@ -32,7 +32,6 @@ export default [
       'no-undef': 'off',
       'no-unused-vars': ['error', { args: 'none', caughtErrors: 'none' }],
       'one-var': 'off',
-      'prefer-named-capture-group': 'off',
       'sort-keys': 'off',
       'vue/html-self-closing': 'off',
       'vue/max-attributes-per-line': 'off',
diff --git a/web-src/src/components/LyricsPane.vue b/web-src/src/components/LyricsPane.vue
index 68dc90a5..de468317 100644
--- a/web-src/src/components/LyricsPane.vue
+++ b/web-src/src/components/LyricsPane.vue
@@ -55,13 +55,15 @@ export default {
       const parsed = []
       if (raw) {
         // Parse the lyrics
-        const regex = /(\[(\d+):(\d+)(?:\.\d+)?\] ?)?(.*)/u
-        raw.split('\n').forEach((item, index) => {
-          const matches = regex.exec(item)
-          if (matches && matches[4]) {
+        const regex =
+          /\[(?<minutes>\d+):(?<seconds>\d+)(?:\.(?<hundredths>\d+))?\] ?(?<text>.*)/u
+        raw.split('\n').forEach((item) => {
+          const { text, minutes, seconds, hundredths } = regex.exec(line).groups
+          if (text) {
             const verse = {
-              text: matches[4],
-              time: matches[2] * 60 + Number(matches[3])
+              text,
+              time:
+                minutes * 60 + Number(seconds) + Number(`.${hundredths || 0}`)
             }
             parsed.push(verse)
           }

From de847a671151c51fb5463dff30e650f4aec09b1e Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Fri, 26 Apr 2024 23:09:45 +0200
Subject: [PATCH 10/20] [web] Reorder methods and attributes

---
 web-src/src/App.vue                           | 22 +++++++++----------
 .../components/ModalDialogPlaylistSave.vue    |  4 ++--
 web-src/src/pages/PageFiles.vue               |  2 +-
 web-src/src/pages/PageNowPlaying.vue          |  2 +-
 web-src/vite.config.js                        | 22 +++++++++----------
 5 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/web-src/src/App.vue b/web-src/src/App.vue
index 5fd2c825..25d2ea03 100644
--- a/web-src/src/App.vue
+++ b/web-src/src/App.vue
@@ -265,17 +265,6 @@ export default {
         document.querySelector('html').classList.remove('is-clipped')
       }
     },
-    update_outputs() {
-      webapi.outputs().then(({ data }) => {
-        this.$store.commit(types.UPDATE_OUTPUTS, data.outputs)
-      })
-    },
-    update_player_status() {
-      webapi.player_status().then(({ data }) => {
-        this.$store.commit(types.UPDATE_PLAYER_STATUS, data)
-        this.update_lyrics()
-      })
-    },
     update_lastfm() {
       webapi.lastfm().then(({ data }) => {
         this.$store.commit(types.UPDATE_LASTFM, data)
@@ -299,12 +288,23 @@ export default {
         this.$store.commit(types.UPDATE_LYRICS)
       }
     },
+    update_outputs() {
+      webapi.outputs().then(({ data }) => {
+        this.$store.commit(types.UPDATE_OUTPUTS, data.outputs)
+      })
+    },
     update_pairing() {
       webapi.pairing().then(({ data }) => {
         this.$store.commit(types.UPDATE_PAIRING, data)
         this.pairing_active = data.active
       })
     },
+    update_player_status() {
+      webapi.player_status().then(({ data }) => {
+        this.$store.commit(types.UPDATE_PLAYER_STATUS, data)
+        this.update_lyrics()
+      })
+    },
     update_queue() {
       webapi.queue().then(({ data }) => {
         this.$store.commit(types.UPDATE_QUEUE, data)
diff --git a/web-src/src/components/ModalDialogPlaylistSave.vue b/web-src/src/components/ModalDialogPlaylistSave.vue
index 16d399a3..4d033a10 100644
--- a/web-src/src/components/ModalDialogPlaylistSave.vue
+++ b/web-src/src/components/ModalDialogPlaylistSave.vue
@@ -74,8 +74,8 @@ export default {
   data() {
     return {
       disabled: true,
-      playlist_name: '',
-      loading: false
+      loading: false,
+      playlist_name: ''
     }
   },
 
diff --git a/web-src/src/pages/PageFiles.vue b/web-src/src/pages/PageFiles.vue
index 02e42a72..794fc49a 100644
--- a/web-src/src/pages/PageFiles.vue
+++ b/web-src/src/pages/PageFiles.vue
@@ -125,7 +125,7 @@ export default {
       webapi.player_play_expression(this.play_expression, false)
     },
     transform(path) {
-      return { path, name: path.slice(path.lastIndexOf('/') + 1) }
+      return { name: path.slice(path.lastIndexOf('/') + 1), path }
     }
   }
 }
diff --git a/web-src/src/pages/PageNowPlaying.vue b/web-src/src/pages/PageNowPlaying.vue
index 842fad86..e1012cef 100644
--- a/web-src/src/pages/PageNowPlaying.vue
+++ b/web-src/src/pages/PageNowPlaying.vue
@@ -76,8 +76,8 @@ export default {
 
   data() {
     return {
-      cursor: mdiCancel,
       INTERVAL,
+      cursor: mdiCancel,
       interval_id: 0,
       is_dragged: false,
       selected_item: {},
diff --git a/web-src/vite.config.js b/web-src/vite.config.js
index 87933a3b..ded9fd15 100644
--- a/web-src/vite.config.js
+++ b/web-src/vite.config.js
@@ -12,23 +12,23 @@ import vue from '@vitejs/plugin-vue'
 const owntoneUrl = process.env.VITE_OWNTONE_URL ?? 'http://localhost:3689'
 
 export default defineConfig({
-  resolve: { alias: { '@': '/src' } },
+  build: {
+    outDir: '../htdocs',
+    rollupOptions: {
+      output: {
+        assetFileNames: `assets/[name].[ext]`,
+        chunkFileNames: `assets/[name].js`,
+        entryFileNames: `assets/[name].js`
+      }
+    }
+  },
   plugins: [
     vue(),
     i18n({
       include: path.resolve(__dirname, './src/i18n/**.json')
     })
   ],
-  build: {
-    outDir: '../htdocs',
-    rollupOptions: {
-      output: {
-        entryFileNames: `assets/[name].js`,
-        chunkFileNames: `assets/[name].js`,
-        assetFileNames: `assets/[name].[ext]`
-      }
-    }
-  },
+  resolve: { alias: { '@': '/src' } },
   server: {
     proxy: {
       '/api': {

From 5db55f66c1507b06da229447c89c7944ba9919ce Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Fri, 26 Apr 2024 23:26:56 +0200
Subject: [PATCH 11/20] [web] Enforce single line HTML elements

---
 web-src/eslint.config.js                        | 3 +--
 web-src/src/pages/PageArtistSpotify.vue         | 4 +++-
 web-src/src/pages/PagePlaylistTracksSpotify.vue | 4 +++-
 web-src/src/pages/PagePodcast.vue               | 4 +++-
 web-src/src/pages/PageSearchLibrary.vue         | 6 ++++--
 web-src/src/pages/PageSearchSpotify.vue         | 6 ++++--
 6 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/web-src/eslint.config.js b/web-src/eslint.config.js
index a4fd5d87..d41007df 100644
--- a/web-src/eslint.config.js
+++ b/web-src/eslint.config.js
@@ -35,8 +35,7 @@ export default [
       'sort-keys': 'off',
       'vue/html-self-closing': 'off',
       'vue/max-attributes-per-line': 'off',
-      'vue/prop-name-casing': 'off',
-      'vue/singleline-html-element-content-newline': 'off'
+      'vue/prop-name-casing': 'off'
     }
   }
 ]
diff --git a/web-src/src/pages/PageArtistSpotify.vue b/web-src/src/pages/PageArtistSpotify.vue
index e69718a0..76a19546 100644
--- a/web-src/src/pages/PageArtistSpotify.vue
+++ b/web-src/src/pages/PageArtistSpotify.vue
@@ -32,7 +32,9 @@
               </div>
             </div>
           </template>
-          <template #no-more>&nbsp;</template>
+          <template #no-more>
+            <br />
+          </template>
         </VueEternalLoading>
         <modal-dialog-artist-spotify
           :item="artist"
diff --git a/web-src/src/pages/PagePlaylistTracksSpotify.vue b/web-src/src/pages/PagePlaylistTracksSpotify.vue
index 10d227b7..5917ef78 100644
--- a/web-src/src/pages/PagePlaylistTracksSpotify.vue
+++ b/web-src/src/pages/PagePlaylistTracksSpotify.vue
@@ -34,7 +34,9 @@
               </div>
             </div>
           </template>
-          <template #no-more>&nbsp;</template>
+          <template #no-more>
+            <br />
+          </template>
         </VueEternalLoading>
         <modal-dialog-playlist-spotify
           :item="playlist"
diff --git a/web-src/src/pages/PagePodcast.vue b/web-src/src/pages/PagePodcast.vue
index e851970a..1a1ebd2b 100644
--- a/web-src/src/pages/PagePodcast.vue
+++ b/web-src/src/pages/PagePodcast.vue
@@ -3,7 +3,9 @@
     <content-with-hero>
       <template #heading-left>
         <h1 class="title is-5" v-text="album.name" />
-        <h2 class="subtitle is-6">&nbsp;</h2>
+        <h2 class="subtitle is-6">
+          <br />
+        </h2>
         <div class="buttons fd-is-centered-mobile mt-5">
           <a class="button is-small is-dark is-rounded" @click="play">
             <mdicon class="icon" name="play" size="16" />
diff --git a/web-src/src/pages/PageSearchLibrary.vue b/web-src/src/pages/PageSearchLibrary.vue
index 42ac5aee..c8137746 100644
--- a/web-src/src/pages/PageSearchLibrary.vue
+++ b/web-src/src/pages/PageSearchLibrary.vue
@@ -22,7 +22,9 @@
                 keypath="page.search.help"
                 scope="global"
               >
-                <template #query><code>query:</code></template>
+                <template #query>
+                  <code>query:</code>
+                </template>
                 <template #help>
                   <a
                     href="https://owntone.github.io/owntone-server/smart-playlists/"
@@ -37,7 +39,7 @@
             <div v-for="query in recent_searches" :key="query" class="control">
               <div class="tags has-addons">
                 <a class="tag" @click="open_search(query)" v-text="query" />
-                <a class="tag is-delete" @click="remove_search(query)"></a>
+                <a class="tag is-delete" @click="remove_search(query)" />
               </div>
             </div>
           </div>
diff --git a/web-src/src/pages/PageSearchSpotify.vue b/web-src/src/pages/PageSearchSpotify.vue
index b43ec77a..9bf26762 100644
--- a/web-src/src/pages/PageSearchSpotify.vue
+++ b/web-src/src/pages/PageSearchSpotify.vue
@@ -22,7 +22,7 @@
             <div v-for="query in recent_searches" :key="query" class="control">
               <div class="tags has-addons">
                 <a class="tag" @click="open_search(query)" v-text="query" />
-                <a class="tag is-delete" @click="remove_search(query)"></a>
+                <a class="tag is-delete" @click="remove_search(query)" />
               </div>
             </div>
           </div>
@@ -46,7 +46,9 @@
               </div>
             </div>
           </template>
-          <template #no-more>&nbsp;</template>
+          <template #no-more>
+            <br />
+          </template>
         </VueEternalLoading>
       </template>
       <template v-if="!expanded" #footer>

From 4a1b4575fee7c941353bfa60aa34bcbe734bfef0 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sat, 27 Apr 2024 06:46:02 +0200
Subject: [PATCH 12/20] [web] Fix variable name

---
 web-src/src/components/LyricsPane.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-src/src/components/LyricsPane.vue b/web-src/src/components/LyricsPane.vue
index de468317..72cb50f6 100644
--- a/web-src/src/components/LyricsPane.vue
+++ b/web-src/src/components/LyricsPane.vue
@@ -57,7 +57,7 @@ export default {
         // Parse the lyrics
         const regex =
           /\[(?<minutes>\d+):(?<seconds>\d+)(?:\.(?<hundredths>\d+))?\] ?(?<text>.*)/u
-        raw.split('\n').forEach((item) => {
+        raw.split('\n').forEach((line) => {
           const { text, minutes, seconds, hundredths } = regex.exec(line).groups
           if (text) {
             const verse = {

From 7d59abee4fedb515e1ffc24e4ab1cbb32eb29b38 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sat, 27 Apr 2024 06:49:51 +0200
Subject: [PATCH 13/20] [web] Fix URL for axios

---
 web-src/src/pages/PageAbout.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-src/src/pages/PageAbout.vue b/web-src/src/pages/PageAbout.vue
index d4fc4ff5..3f25719f9 100644
--- a/web-src/src/pages/PageAbout.vue
+++ b/web-src/src/pages/PageAbout.vue
@@ -158,7 +158,7 @@
                   <a href="https://vuejs.org/">Vue.js</a>
                 </template>
                 <template #axios>
-                  <a href="https://github.com/mzabriskie/axios">axios</a>
+                  <a href="https://github.com/axios/axios">axios</a>
                 </template>
                 <template #others>
                   <a

From fc5563fe9dd5ee679944ea3a6d27c077c08c24f9 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sat, 27 Apr 2024 06:59:47 +0200
Subject: [PATCH 14/20] [web] Remove negated conditions

---
 web-src/eslint.config.js       | 1 -
 web-src/src/lib/GroupedList.js | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/web-src/eslint.config.js b/web-src/eslint.config.js
index d41007df..c7235398 100644
--- a/web-src/eslint.config.js
+++ b/web-src/eslint.config.js
@@ -25,7 +25,6 @@ export default [
       'max-statements': 'off',
       'no-bitwise': 'off',
       'no-magic-numbers': 'off',
-      'no-negated-condition': 'off',
       'no-nested-ternary': 'off',
       'no-plusplus': 'off',
       'no-ternary': 'off',
diff --git a/web-src/src/lib/GroupedList.js b/web-src/src/lib/GroupedList.js
index 284e4b6d..c238915d 100644
--- a/web-src/src/lib/GroupedList.js
+++ b/web-src/src/lib/GroupedList.js
@@ -6,7 +6,7 @@ const NO_INDEX = 'NO_INDEX'
 const numberComparator = (a, b) => a - b
 const stringComparator = (a, b) => a.localeCompare(b, locale.value)
 const dateComparator = (a, b) =>
-  new Date(a) - new Date(b) || (!a ? -1 : !b ? 1 : 0)
+  new Date(a) - new Date(b) || (a ? (b ? 0 : 1) : -1)
 
 const createComparators = (criteria) =>
   criteria.map(({ field, type, order = 1 }) => {

From c255b3a10849ebed791fdf53528f511fb7468ade Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sat, 27 Apr 2024 07:00:08 +0200
Subject: [PATCH 15/20] [web] Simplify variable naming

---
 web-src/vite.config.js | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/web-src/vite.config.js b/web-src/vite.config.js
index ded9fd15..cf7a4e9a 100644
--- a/web-src/vite.config.js
+++ b/web-src/vite.config.js
@@ -9,7 +9,7 @@ import vue from '@vitejs/plugin-vue'
  *
  * export VITE_OWNTONE_URL=http://owntone.local:3689; npm run serve
  */
-const owntoneUrl = process.env.VITE_OWNTONE_URL ?? 'http://localhost:3689'
+const target = process.env.VITE_OWNTONE_URL ?? 'http://localhost:3689'
 
 export default defineConfig({
   build: {
@@ -31,15 +31,9 @@ export default defineConfig({
   resolve: { alias: { '@': '/src' } },
   server: {
     proxy: {
-      '/api': {
-        target: owntoneUrl
-      },
-      '/artwork': {
-        target: owntoneUrl
-      },
-      '/stream.mp3': {
-        target: owntoneUrl
-      }
+      '/api': { target },
+      '/artwork': { target },
+      '/stream.mp3': { target }
     }
   }
 })

From 4ae2903b4d9cd8da190eb639059c985a9389b549 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sat, 27 Apr 2024 20:36:04 +0200
Subject: [PATCH 16/20] [web] Simplify variable naming

---
 web-src/src/pages/PageMusic.vue                    | 14 ++++++--------
 web-src/src/pages/PageMusicRecentlyAdded.vue       |  6 +++---
 web-src/src/pages/PageMusicRecentlyPlayed.vue      |  6 +++---
 web-src/src/pages/PageMusicSpotify.vue             | 14 ++++++--------
 .../pages/PageMusicSpotifyFeaturedPlaylists.vue    |  6 +++---
 web-src/src/pages/PageMusicSpotifyNewReleases.vue  |  6 +++---
 6 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/web-src/src/pages/PageMusic.vue b/web-src/src/pages/PageMusic.vue
index dbc3b430..f2547200 100644
--- a/web-src/src/pages/PageMusic.vue
+++ b/web-src/src/pages/PageMusic.vue
@@ -1,13 +1,12 @@
 <template>
   <div class="fd-page-with-tabs">
     <tabs-music />
-    <!-- Recently added -->
     <content-with-heading>
       <template #heading-left>
         <p class="title is-4" v-text="$t('page.music.recently-added.title')" />
       </template>
       <template #content>
-        <list-albums :items="recently_added" />
+        <list-albums :items="albums" />
       </template>
       <template #footer>
         <nav class="level">
@@ -22,13 +21,12 @@
         </nav>
       </template>
     </content-with-heading>
-    <!-- Recently played -->
     <content-with-heading>
       <template #heading-left>
         <p class="title is-4" v-text="$t('page.music.recently-played.title')" />
       </template>
       <template #content>
-        <list-tracks :items="recently_played" />
+        <list-tracks :items="tracks" />
       </template>
       <template #footer>
         <nav class="level">
@@ -73,8 +71,8 @@ const dataObject = {
   },
 
   set(vm, response) {
-    vm.recently_added = new GroupedList(response[0].data.albums)
-    vm.recently_played = new GroupedList(response[1].data.tracks)
+    vm.albums = new GroupedList(response[0].data.albums)
+    vm.tracks = new GroupedList(response[1].data.tracks)
   }
 }
 
@@ -90,8 +88,8 @@ export default {
 
   data() {
     return {
-      recently_added: [],
-      recently_played: { items: [] },
+      albums: [],
+      tracks: { items: [] },
       selected_track: {}
     }
   }
diff --git a/web-src/src/pages/PageMusicRecentlyAdded.vue b/web-src/src/pages/PageMusicRecentlyAdded.vue
index b1563a34..894b304c 100644
--- a/web-src/src/pages/PageMusicRecentlyAdded.vue
+++ b/web-src/src/pages/PageMusicRecentlyAdded.vue
@@ -6,7 +6,7 @@
         <p class="title is-4" v-text="$t('page.music.recently-added.title')" />
       </template>
       <template #content>
-        <list-albums :items="recently_added" />
+        <list-albums :items="albums" />
       </template>
     </content-with-heading>
   </div>
@@ -32,7 +32,7 @@ const dataObject = {
   },
 
   set(vm, response) {
-    vm.recently_added = new GroupedList(response.data.albums, {
+    vm.albums = new GroupedList(response.data.albums, {
       criteria: [{ field: 'time_added', order: -1, type: Date }],
       index: { field: 'time_added', type: Date }
     })
@@ -51,7 +51,7 @@ export default {
 
   data() {
     return {
-      recently_added: new GroupedList()
+      albums: new GroupedList()
     }
   }
 }
diff --git a/web-src/src/pages/PageMusicRecentlyPlayed.vue b/web-src/src/pages/PageMusicRecentlyPlayed.vue
index c2ea5e9b..9fe21929 100644
--- a/web-src/src/pages/PageMusicRecentlyPlayed.vue
+++ b/web-src/src/pages/PageMusicRecentlyPlayed.vue
@@ -6,7 +6,7 @@
         <p class="title is-4" v-text="$t('page.music.recently-played.title')" />
       </template>
       <template #content>
-        <list-tracks :items="recently_played" />
+        <list-tracks :items="tracks" />
       </template>
     </content-with-heading>
   </div>
@@ -30,7 +30,7 @@ const dataObject = {
   },
 
   set(vm, response) {
-    vm.recently_played = new GroupedList(response.data.tracks)
+    vm.tracks = new GroupedList(response.data.tracks)
   }
 }
 
@@ -46,7 +46,7 @@ export default {
 
   data() {
     return {
-      recently_played: {}
+      tracks: {}
     }
   }
 }
diff --git a/web-src/src/pages/PageMusicSpotify.vue b/web-src/src/pages/PageMusicSpotify.vue
index f5485dd8..8e46abfd 100644
--- a/web-src/src/pages/PageMusicSpotify.vue
+++ b/web-src/src/pages/PageMusicSpotify.vue
@@ -1,13 +1,12 @@
 <template>
   <div class="fd-page-with-tabs">
     <tabs-music />
-    <!-- New Releases -->
     <content-with-heading>
       <template #heading-left>
         <p class="title is-4" v-text="$t('page.spotify.music.new-releases')" />
       </template>
       <template #content>
-        <list-albums-spotify :items="new_releases" />
+        <list-albums-spotify :items="albums" />
       </template>
       <template #footer>
         <nav class="level">
@@ -22,7 +21,6 @@
         </nav>
       </template>
     </content-with-heading>
-    <!-- Featured Playlists -->
     <content-with-heading>
       <template #heading-left>
         <p
@@ -31,7 +29,7 @@
         />
       </template>
       <template #content>
-        <list-playlists-spotify :items="featured_playlists" />
+        <list-playlists-spotify :items="playlists" />
       </template>
       <template #footer>
         <nav class="level">
@@ -76,8 +74,8 @@ const dataObject = {
   },
 
   set(vm, response) {
-    vm.new_releases = response[0].albums.items
-    vm.featured_playlists = response[1].playlists.items
+    vm.albums = response[0].albums.items
+    vm.playlists = response[1].playlists.items
   }
 }
 
@@ -98,8 +96,8 @@ export default {
 
   data() {
     return {
-      featured_playlists: [],
-      new_releases: []
+      playlists: [],
+      albums: []
     }
   }
 }
diff --git a/web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue b/web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue
index b7e18dc9..a4fe8900 100644
--- a/web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue
+++ b/web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue
@@ -9,7 +9,7 @@
         />
       </template>
       <template #content>
-        <list-playlists-spotify :items="featured_playlists" />
+        <list-playlists-spotify :items="playlists" />
       </template>
     </content-with-heading>
   </div>
@@ -35,7 +35,7 @@ const dataObject = {
   },
 
   set(vm, response) {
-    vm.featured_playlists = response.playlists.items
+    vm.playlists = response.playlists.items
   }
 }
 
@@ -55,7 +55,7 @@ export default {
 
   data() {
     return {
-      featured_playlists: []
+      playlists: []
     }
   }
 }
diff --git a/web-src/src/pages/PageMusicSpotifyNewReleases.vue b/web-src/src/pages/PageMusicSpotifyNewReleases.vue
index 897b356d..05767726 100644
--- a/web-src/src/pages/PageMusicSpotifyNewReleases.vue
+++ b/web-src/src/pages/PageMusicSpotifyNewReleases.vue
@@ -6,7 +6,7 @@
         <p class="title is-4" v-text="$t('page.spotify.music.new-releases')" />
       </template>
       <template #content>
-        <list-albums-spotify :items="new_releases" />
+        <list-albums-spotify :items="albums" />
       </template>
     </content-with-heading>
   </div>
@@ -32,7 +32,7 @@ const dataObject = {
   },
 
   set(vm, response) {
-    vm.new_releases = response.albums.items
+    vm.albums = response.albums.items
   }
 }
 
@@ -52,7 +52,7 @@ export default {
 
   data() {
     return {
-      new_releases: []
+      albums: []
     }
   }
 }

From 7edce914747361b7f5bb4453703e30c7d22a707f Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sat, 27 Apr 2024 21:13:13 +0200
Subject: [PATCH 17/20] [web] Make hover style of buttons identical everywhere

---
 web-src/src/components/NavbarBottom.vue   |  2 +-
 web-src/src/components/NavbarItemLink.vue | 43 ++++-------------------
 web-src/src/components/NavbarTop.vue      |  2 +-
 3 files changed, 8 insertions(+), 39 deletions(-)

diff --git a/web-src/src/components/NavbarBottom.vue b/web-src/src/components/NavbarBottom.vue
index fa60e6bc..00b00261 100644
--- a/web-src/src/components/NavbarBottom.vue
+++ b/web-src/src/components/NavbarBottom.vue
@@ -103,7 +103,7 @@
       </div>
     </div>
     <div class="navbar-brand is-flex-grow-1">
-      <navbar-item-link :to="{ name: 'queue' }" exact class="mr-auto">
+      <navbar-item-link :to="{ name: 'queue' }" class="mr-auto">
         <mdicon class="icon" name="playlist-play" size="24" />
       </navbar-item-link>
       <navbar-item-link
diff --git a/web-src/src/components/NavbarItemLink.vue b/web-src/src/components/NavbarItemLink.vue
index b3c45f40..620efb23 100644
--- a/web-src/src/components/NavbarItemLink.vue
+++ b/web-src/src/components/NavbarItemLink.vue
@@ -1,10 +1,5 @@
 <template>
-  <a
-    class="navbar-item"
-    :class="{ 'is-active': is_active }"
-    :href="full_path()"
-    @click.stop.prevent="open_link()"
-  >
+  <a class="navbar-item" :href="href" @click.stop.prevent="open">
     <slot />
   </a>
 </template>
@@ -15,47 +10,21 @@ import * as types from '@/store/mutation_types'
 export default {
   name: 'NavbarItemLink',
   props: {
-    exact: Boolean,
     to: { required: true, type: Object }
   },
 
   computed: {
-    is_active() {
-      if (this.exact) {
-        return this.$route.path === this.to
-      }
-      return this.$route.path.startsWith(this.to)
-    },
-
-    show_burger_menu: {
-      get() {
-        return this.$store.state.show_burger_menu
-      },
-      set(value) {
-        this.$store.commit(types.SHOW_BURGER_MENU, value)
-      }
-    },
-
-    show_player_menu: {
-      get() {
-        return this.$store.state.show_player_menu
-      },
-      set(value) {
-        this.$store.commit(types.SHOW_PLAYER_MENU, value)
-      }
+    href() {
+      return this.$router.resolve(this.to).href
     }
   },
 
   methods: {
-    full_path() {
-      const resolved = this.$router.resolve(this.to)
-      return resolved.href
-    },
-    open_link() {
-      if (this.show_burger_menu) {
+    open() {
+      if (this.$store.state.show_burger_menu) {
         this.$store.commit(types.SHOW_BURGER_MENU, false)
       }
-      if (this.show_player_menu) {
+      if (this.$store.state.show_player_menu) {
         this.$store.commit(types.SHOW_PLAYER_MENU, false)
       }
       this.$router.push(this.to)
diff --git a/web-src/src/components/NavbarTop.vue b/web-src/src/components/NavbarTop.vue
index 42257041..bc3392a2 100644
--- a/web-src/src/components/NavbarTop.vue
+++ b/web-src/src/components/NavbarTop.vue
@@ -54,7 +54,7 @@
               <mdicon class="icon" name="music-box-multiple" size="16" />
               <b v-text="$t('navigation.playlists')" />
             </navbar-item-link>
-            <navbar-item-link :to="{ name: 'music' }" exact>
+            <navbar-item-link :to="{ name: 'music' }">
               <mdicon class="icon" name="music" size="16" />
               <b v-text="$t('navigation.music')" />
             </navbar-item-link>

From 2c58351beca6909dfae0e690500c3f28f531856a Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sat, 27 Apr 2024 21:14:31 +0200
Subject: [PATCH 18/20] [web] Simplify variable naming

---
 web-src/src/pages/PagePodcasts.vue | 15 +++++++--------
 web-src/src/router/index.js        | 11 ++++-------
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/web-src/src/pages/PagePodcasts.vue b/web-src/src/pages/PagePodcasts.vue
index b8633431..c36d11f4 100644
--- a/web-src/src/pages/PagePodcasts.vue
+++ b/web-src/src/pages/PagePodcasts.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <content-with-heading v-if="new_episodes.items.length > 0">
+    <content-with-heading v-if="tracks.items.length > 0">
       <template #heading-left>
         <p class="title is-4" v-text="$t('page.podcasts.new-episodes')" />
       </template>
@@ -14,7 +14,7 @@
       </template>
       <template #content>
         <list-tracks
-          :items="new_episodes"
+          :items="tracks"
           :show_progress="true"
           @play-count-changed="reload_new_episodes"
         />
@@ -75,7 +75,7 @@ const dataObject = {
 
   set(vm, response) {
     vm.albums = new GroupedList(response[0].data)
-    vm.new_episodes = new GroupedList(response[1].data.tracks)
+    vm.tracks = new GroupedList(response[1].data.tracks)
   }
 }
 
@@ -97,8 +97,7 @@ export default {
   data() {
     return {
       albums: [],
-      new_episodes: { items: [] },
-
+      tracks: { items: [] },
       show_url_modal: false
     }
   },
@@ -111,10 +110,10 @@ export default {
 
   methods: {
     mark_all_played() {
-      this.new_episodes.items.forEach((ep) => {
+      this.tracks.items.forEach((ep) => {
         webapi.library_track_update(ep.id, { play_count: 'increment' })
       })
-      this.new_episodes.items = {}
+      this.tracks.items = {}
     },
 
     open_add_podcast_dialog() {
@@ -123,7 +122,7 @@ export default {
 
     reload_new_episodes() {
       webapi.library_podcasts_new_episodes().then(({ data }) => {
-        this.new_episodes = new GroupedList(data.tracks)
+        this.tracks = new GroupedList(data.tracks)
       })
     },
 
diff --git a/web-src/src/router/index.js b/web-src/src/router/index.js
index 2f61942b..6657c345 100644
--- a/web-src/src/router/index.js
+++ b/web-src/src/router/index.js
@@ -300,16 +300,15 @@ export const router = createRouter({
     }
   ],
   scrollBehavior(to, from, savedPosition) {
-    const wait_ms = 0
+    const delay = 0
     if (savedPosition) {
       // Use the saved scroll position (browser back/forward navigation)
       return new Promise((resolve, reject) => {
         setTimeout(() => {
           resolve(savedPosition)
-        }, wait_ms)
+        }, delay)
       })
     }
-
     if (to.path === from.path && to.hash) {
       /*
        * Staying on the same page and jumping to an anchor (e. g. index nav)
@@ -318,16 +317,14 @@ export const router = createRouter({
       const top = to.meta.has_tabs ? TOP_WITH_TABS : TOP_WITHOUT_TABS
       return { behavior: 'smooth', el: to.hash, top }
     }
-
     if (to.hash) {
       // We are navigating to an anchor of a new page, add a timeout to let the transition effect finish before scrolling
       return new Promise((resolve, reject) => {
         setTimeout(() => {
           resolve({ el: to.hash, top: 120 })
-        }, wait_ms)
+        }, delay)
       })
     }
-
     if (to.meta.has_index) {
       /*
        * Navigate to a page with index nav that should be hidden automatically
@@ -337,7 +334,7 @@ export const router = createRouter({
         const top = to.meta.has_tabs ? TOP_WITH_TABS : TOP_WITHOUT_TABS
         setTimeout(() => {
           resolve({ el: '#top', top })
-        }, wait_ms)
+        }, delay)
       })
     }
 

From 2d7776619f350ad8db36d80b5acea3013e6b7b32 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sat, 27 Apr 2024 21:18:28 +0200
Subject: [PATCH 19/20] [web] Remove unused variables

---
 web-src/src/lib/Audio.js        | 4 ++--
 web-src/src/lib/GroupedList.js  | 4 ++--
 web-src/src/pages/PageQueue.vue | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/web-src/src/lib/Audio.js b/web-src/src/lib/Audio.js
index 96e4819d..6dc858ba 100644
--- a/web-src/src/lib/Audio.js
+++ b/web-src/src/lib/Audio.js
@@ -29,10 +29,10 @@ export default {
     this.context = new (window.AudioContext || window.webkitAudioContext)()
     const source = this.context.createMediaElementSource(this.audio)
     source.connect(this.context.destination)
-    this.audio.addEventListener('canplaythrough', (event) => {
+    this.audio.addEventListener('canplaythrough', () => {
       this.audio.play()
     })
-    this.audio.addEventListener('canplay', (event) => {
+    this.audio.addEventListener('canplay', () => {
       this.audio.play()
     })
     return this.audio
diff --git a/web-src/src/lib/GroupedList.js b/web-src/src/lib/GroupedList.js
index c238915d..bbe08e70 100644
--- a/web-src/src/lib/GroupedList.js
+++ b/web-src/src/lib/GroupedList.js
@@ -18,7 +18,7 @@ const createComparators = (criteria) =>
       case Date:
         return (a, b) => dateComparator(a[field], b[field]) * order
       default:
-        return (a, b) => 0
+        return () => 0
     }
   })
 
@@ -61,7 +61,7 @@ const createIndexer = ({ field, type } = {}) => {
     case 'Digits':
       return (item) => numberIndex(item[field])
     default:
-      return (item) => NO_INDEX
+      return () => NO_INDEX
   }
 }
 
diff --git a/web-src/src/pages/PageQueue.vue b/web-src/src/pages/PageQueue.vue
index 93d02a0e..24e7f021 100644
--- a/web-src/src/pages/PageQueue.vue
+++ b/web-src/src/pages/PageQueue.vue
@@ -150,7 +150,7 @@ export default {
       get() {
         return this.$store.state.queue.items
       },
-      set(value) {
+      set() {
         /* Do nothing? Send move request in @end event */
       }
     },

From 93191181901091f467eaf971deb13d35b26cbfd6 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sat, 27 Apr 2024 21:34:16 +0200
Subject: [PATCH 20/20] [web] Simplify variable naming

---
 web-src/src/filter/index.js                  | 10 +++++-----
 web-src/src/templates/ContentWithHeading.vue |  6 +++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/web-src/src/filter/index.js b/web-src/src/filter/index.js
index 517608d2..89df3c48 100644
--- a/web-src/src/filter/index.js
+++ b/web-src/src/filter/index.js
@@ -31,8 +31,8 @@ export const filters = {
       .setLocale(locale.value)
       .toLocaleString(DateTime.DATETIME_MED)
   },
-  durationInDays(value_ms) {
-    const minutes = Math.floor(value_ms / 60000)
+  durationInDays(value) {
+    const minutes = Math.floor(value / 60000)
     if (minutes > 1440) {
       return Duration.fromObject({ minutes })
         .shiftTo('days', 'hours', 'minutes')
@@ -44,9 +44,9 @@ export const filters = {
     }
     return Duration.fromObject({ minutes }).shiftTo('minutes').toHuman()
   },
-  durationInHours(value_ms) {
-    const format = value_ms >= 3600000 ? 'h:mm:ss' : 'm:ss'
-    return Duration.fromMillis(value_ms).toFormat(format)
+  durationInHours(value) {
+    const format = value >= 3600000 ? 'h:mm:ss' : 'm:ss'
+    return Duration.fromMillis(value).toFormat(format)
   },
   number(value) {
     return value.toLocaleString(locale.value)
diff --git a/web-src/src/templates/ContentWithHeading.vue b/web-src/src/templates/ContentWithHeading.vue
index 85d1d621..06eeae84 100644
--- a/web-src/src/templates/ContentWithHeading.vue
+++ b/web-src/src/templates/ContentWithHeading.vue
@@ -4,7 +4,7 @@
       <div class="columns is-centered">
         <div class="column is-four-fifths">
           <section v-if="$slots.options">
-            <div ref="options_ref" style="height: 1px" />
+            <div ref="options" style="height: 1px" />
             <slot name="options" />
             <nav class="buttons is-centered mt-4 mb-2">
               <router-link class="button is-small is-white" :to="position">
@@ -65,12 +65,12 @@ export default {
         rootMargin: '-82px 0px 0px 0px',
         threshold: 1.0
       })
-      this.observer.observe(this.$refs.options_ref)
+      this.observer.observe(this.$refs.options)
     }
   },
   methods: {
     onElementObserved(entries) {
-      entries.forEach(({ target, isIntersecting }) => {
+      entries.forEach(({ isIntersecting }) => {
         this.options_visible = isIntersecting
       })
     },