diff --git a/web-src/src/App.vue b/web-src/src/App.vue
index 74706467..2a420aa9 100644
--- a/web-src/src/App.vue
+++ b/web-src/src/App.vue
@@ -141,7 +141,7 @@ export default {
           this.configurationStore.$state = data
           this.uiStore.hide_singles = data.hide_singles
           document.title = data.library_name
-          this.open_websocket()
+          this.openWebsocket()
           this.$Progress.finish()
         })
         .catch(() => {
@@ -152,7 +152,7 @@ export default {
           })
         })
     },
-    open_websocket() {
+    openWebsocket() {
       const socket = this.create_websocket()
       const vm = this
       socket.onopen = () => {
diff --git a/web-src/src/components/ControlPlayerLyrics.vue b/web-src/src/components/ControlPlayerLyrics.vue
index 97d0285b..393cb191 100644
--- a/web-src/src/components/ControlPlayerLyrics.vue
+++ b/web-src/src/components/ControlPlayerLyrics.vue
@@ -1,5 +1,5 @@
 <template>
-  <a :class="{ 'is-dark': is_active }" @click="toggle">
+  <a :class="{ 'is-dark': isActive }" @click="toggle">
     <mdicon
       class="icon"
       :name="icon"
@@ -14,22 +14,19 @@ import { useLyricsStore } from '@/stores/lyrics'
 
 export default {
   name: 'ControlPlayerLyrics',
-
   setup() {
     return {
       lyricsStore: useLyricsStore()
     }
   },
-
   computed: {
     icon() {
-      return this.is_active ? 'script-text-play' : 'script-text-outline'
+      return this.isActive ? 'script-text-play' : 'script-text-outline'
     },
-    is_active() {
+    isActive() {
       return this.lyricsStore.pane
     }
   },
-
   methods: {
     toggle() {
       this.lyricsStore.pane = !this.lyricsStore.pane
diff --git a/web-src/src/components/ControlPlayerPrevious.vue b/web-src/src/components/ControlPlayerPrevious.vue
index 89893733..151f011a 100644
--- a/web-src/src/components/ControlPlayerPrevious.vue
+++ b/web-src/src/components/ControlPlayerPrevious.vue
@@ -1,5 +1,5 @@
 <template>
-  <a :disabled="disabled" @click="play_previous">
+  <a :disabled="disabled" @click="playPrevious">
     <mdicon
       class="icon"
       name="skip-backward"
@@ -14,21 +14,18 @@ import webapi from '@/webapi'
 
 export default {
   name: 'ControlPlayerPrevious',
-
   setup() {
     return {
       queueStore: useQueueStore()
     }
   },
-
   computed: {
     disabled() {
       return this.queueStore.count <= 0
     }
   },
-
   methods: {
-    play_previous() {
+    playPrevious() {
       if (this.disabled) {
         return
       }
diff --git a/web-src/src/components/ControlPlayerShuffle.vue b/web-src/src/components/ControlPlayerShuffle.vue
index 3b1a7f59..d104f054 100644
--- a/web-src/src/components/ControlPlayerShuffle.vue
+++ b/web-src/src/components/ControlPlayerShuffle.vue
@@ -1,5 +1,5 @@
 <template>
-  <a :class="{ 'is-dark': is_shuffle }" @click="toggle">
+  <a :class="{ 'is-dark': isShuffle }" @click="toggle">
     <mdicon
       class="icon"
       :name="icon"
@@ -22,12 +22,12 @@ export default {
   },
   computed: {
     icon() {
-      if (this.is_shuffle) {
+      if (this.isShuffle) {
         return 'shuffle'
       }
       return 'shuffle-disabled'
     },
-    is_shuffle() {
+    isShuffle() {
       return this.playerStore.shuffle
     }
   },
diff --git a/web-src/src/components/ListAlbums.vue b/web-src/src/components/ListAlbums.vue
index 607768dd..26fe69e6 100644
--- a/web-src/src/components/ListAlbums.vue
+++ b/web-src/src/components/ListAlbums.vue
@@ -32,7 +32,7 @@
         />
       </div>
       <div class="media-right">
-        <a @click.prevent.stop="open_dialog(item.item)">
+        <a @click.prevent.stop="openDialog(item.item)">
           <mdicon class="icon has-text-grey" name="dots-vertical" size="16" />
         </a>
       </div>
@@ -44,15 +44,15 @@
       :media_kind="media_kind"
       :show="show_details_modal"
       @close="show_details_modal = false"
-      @remove-podcast="open_remove_podcast_dialog()"
-      @play-count-changed="play_count_changed()"
+      @remove-podcast="openRemovePodcastDialog()"
+      @play-count-changed="onPlayCountChange()"
     />
     <modal-dialog
       :actions="actions"
       :show="show_remove_podcast_modal"
       :title="$t('page.podcast.remove-podcast')"
       @cancel="show_remove_podcast_modal = false"
-      @remove="remove_podcast"
+      @remove="removePodcast"
     >
       <template #content>
         <i18n-t keypath="list.albums.info" tag="p" scope="global">
@@ -119,11 +119,11 @@ export default {
         this.$router.push({ name: 'music-album', params: { id: item.id } })
       }
     },
-    open_dialog(item) {
+    openDialog(item) {
       this.selected_item = item
       this.show_details_modal = true
     },
-    open_remove_podcast_dialog() {
+    openRemovePodcastDialog() {
       webapi
         .library_album_tracks(this.selected_item.id, { limit: 1 })
         .then(({ data: album }) => {
@@ -136,10 +136,10 @@ export default {
           })
         })
     },
-    play_count_changed() {
+    onPlayCountChange() {
       this.$emit('play-count-changed')
     },
-    remove_podcast() {
+    removePodcast() {
       this.show_remove_podcast_modal = false
       webapi
         .library_playlist_delete(this.rss_playlist_to_remove.id)
diff --git a/web-src/src/components/ListAlbumsSpotify.vue b/web-src/src/components/ListAlbumsSpotify.vue
index 0ca9b0d6..7bb0df3f 100644
--- a/web-src/src/components/ListAlbumsSpotify.vue
+++ b/web-src/src/components/ListAlbumsSpotify.vue
@@ -23,7 +23,7 @@
         />
       </div>
       <div class="media-right">
-        <a @click.prevent.stop="open_dialog(item)">
+        <a @click.prevent.stop="openDialog(item)">
           <mdicon class="icon has-text-grey" name="dots-vertical" size="16" />
         </a>
       </div>
@@ -60,7 +60,7 @@ export default {
         params: { id: item.id }
       })
     },
-    open_dialog(item) {
+    openDialog(item) {
       this.selected_item = item
       this.show_details_modal = true
     }
diff --git a/web-src/src/components/ListArtists.vue b/web-src/src/components/ListArtists.vue
index 2d215bab..45b5ed6f 100644
--- a/web-src/src/components/ListArtists.vue
+++ b/web-src/src/components/ListArtists.vue
@@ -16,7 +16,7 @@
         <p class="is-size-6 has-text-weight-bold" v-text="item.item.name" />
       </div>
       <div class="media-right">
-        <a @click.prevent.stop="open_dialog(item.item)">
+        <a @click.prevent.stop="openDialog(item.item)">
           <mdicon class="icon has-text-grey" name="dots-vertical" size="16" />
         </a>
       </div>
@@ -50,7 +50,7 @@ export default {
         item.media_kind === 'audiobook' ? 'audiobooks-artist' : 'music-artist'
       this.$router.push({ name: route, params: { id: item.id } })
     },
-    open_dialog(item) {
+    openDialog(item) {
       this.selected_item = item
       this.show_details_modal = true
     }
diff --git a/web-src/src/components/ListArtistsSpotify.vue b/web-src/src/components/ListArtistsSpotify.vue
index c3586c69..e42c7b9e 100644
--- a/web-src/src/components/ListArtistsSpotify.vue
+++ b/web-src/src/components/ListArtistsSpotify.vue
@@ -5,7 +5,7 @@
         <p class="is-size-6 has-text-weight-bold" v-text="item.name" />
       </div>
       <div class="media-right">
-        <a @click.prevent.stop="open_dialog(item)">
+        <a @click.prevent.stop="openDialog(item)">
           <mdicon class="icon has-text-grey" name="dots-vertical" size="16" />
         </a>
       </div>
@@ -38,7 +38,7 @@ export default {
         params: { id: item.id }
       })
     },
-    open_dialog(item) {
+    openDialog(item) {
       this.selected_item = item
       this.show_details_modal = true
     }
diff --git a/web-src/src/components/ListComposers.vue b/web-src/src/components/ListComposers.vue
index 8ced837f..af713207 100644
--- a/web-src/src/components/ListComposers.vue
+++ b/web-src/src/components/ListComposers.vue
@@ -18,7 +18,7 @@
         <p class="is-size-6 has-text-weight-bold" v-text="item.item.name" />
       </div>
       <div class="media-right">
-        <a @click.prevent.stop="open_dialog(item.item)">
+        <a @click.prevent.stop="openDialog(item.item)">
           <mdicon class="icon has-text-grey" name="dots-vertical" size="16" />
         </a>
       </div>
@@ -54,7 +54,7 @@ export default {
       })
     },
 
-    open_dialog(item) {
+    openDialog(item) {
       this.selected_item = item
       this.show_details_modal = true
     }
diff --git a/web-src/src/components/ListDirectories.vue b/web-src/src/components/ListDirectories.vue
index 789ad7c4..d70133f1 100644
--- a/web-src/src/components/ListDirectories.vue
+++ b/web-src/src/components/ListDirectories.vue
@@ -3,7 +3,7 @@
     <mdicon
       class="icon media-left is-clickable"
       name="chevron-left"
-      @click="open_parent"
+      @click="openParent"
     />
     <div class="media-content">
       <nav class="breadcrumb">
@@ -30,7 +30,7 @@
         <p class="is-size-6 has-text-weight-bold" v-text="item.name" />
       </div>
       <div class="media-right">
-        <a @click.prevent.stop="open_dialog(item)">
+        <a @click.prevent.stop="openDialog(item)">
           <mdicon class="icon has-text-grey" name="dots-vertical" size="16" />
         </a>
       </div>
@@ -80,11 +80,11 @@ export default {
       }
       this.$router.push(route)
     },
-    open_dialog(item) {
+    openDialog(item) {
       this.selected_item = item.path
       this.show_details_modal = true
     },
-    open_parent() {
+    openParent() {
       this.open(this.directories.slice(-1).pop())
     }
   }
diff --git a/web-src/src/components/ListGenres.vue b/web-src/src/components/ListGenres.vue
index 15784136..a1fb3184 100644
--- a/web-src/src/components/ListGenres.vue
+++ b/web-src/src/components/ListGenres.vue
@@ -18,7 +18,7 @@
         <p class="is-size-6 has-text-weight-bold" v-text="item.item.name" />
       </div>
       <div class="media-right">
-        <a @click.prevent.stop="open_dialog(item.item)">
+        <a @click.prevent.stop="openDialog(item.item)">
           <mdicon class="icon has-text-grey" name="dots-vertical" size="16" />
         </a>
       </div>
@@ -55,7 +55,7 @@ export default {
         query: { media_kind: this.media_kind }
       })
     },
-    open_dialog(item) {
+    openDialog(item) {
       this.selected_item = item
       this.show_details_modal = true
     }
diff --git a/web-src/src/components/ListItemQueueItem.vue b/web-src/src/components/ListItemQueueItem.vue
index 7427cd3a..f81209ff 100644
--- a/web-src/src/components/ListItemQueueItem.vue
+++ b/web-src/src/components/ListItemQueueItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="is_next || !show_only_next_items"
+    v-if="isNext || !show_only_next_items"
     class="media is-align-items-center is-clickable mb-0"
     @click="play"
   >
@@ -15,26 +15,26 @@
       <div
         class="is-size-6 has-text-weight-bold"
         :class="{
-          'has-text-primary': item.id === player.item_id,
-          'has-text-grey-light': !is_next
+          'has-text-primary': isCurrent,
+          'has-text-grey-light': !isNext
         }"
         v-text="item.title"
       />
       <div
         class="is-size-7 has-text-weight-bold"
         :class="{
-          'has-text-primary': item.id === player.item_id,
-          'has-text-grey-light': !is_next,
-          'has-text-grey': is_next && item.id !== player.item_id
+          'has-text-primary': isCurrent,
+          'has-text-grey-light': !isNext,
+          'has-text-grey': isNext && !isCurrent
         }"
         v-text="item.artist"
       />
       <div
         class="is-size-7"
         :class="{
-          'has-text-primary': item.id === player.item_id,
-          'has-text-grey-light': !is_next,
-          'has-text-grey': is_next && item.id !== player.item_id
+          'has-text-primary': isCurrent,
+          'has-text-grey-light': !isNext,
+          'has-text-grey': isNext && isCurrent
         }"
         v-text="item.album"
       />
@@ -58,20 +58,17 @@ export default {
     position: { required: true, type: Number },
     show_only_next_items: Boolean
   },
-
   setup() {
     return { playerStore: usePlayerStore() }
   },
-
   computed: {
-    is_next() {
-      return this.current_position < 0 || this.position >= this.current_position
+    isCurrent() {
+      return this.item.id === this.playerStore.item_id
     },
-    player() {
-      return this.playerStore
+    isNext() {
+      return this.current_position < 0 || this.position >= this.current_position
     }
   },
-
   methods: {
     play() {
       webapi.player_play({ item_id: this.item.id })
diff --git a/web-src/src/components/ListPlaylists.vue b/web-src/src/components/ListPlaylists.vue
index ee14f693..59d777f9 100644
--- a/web-src/src/components/ListPlaylists.vue
+++ b/web-src/src/components/ListPlaylists.vue
@@ -9,7 +9,7 @@
         <p class="is-size-6 has-text-weight-bold" v-text="item.item.name" />
       </div>
       <div class="media-right">
-        <a @click.prevent.stop="open_dialog(item.item)">
+        <a @click.prevent.stop="openDialog(item.item)">
           <mdicon class="icon has-text-grey" name="dots-vertical" size="16" />
         </a>
       </div>
@@ -17,7 +17,7 @@
   </template>
   <teleport to="#app">
     <modal-dialog-playlist
-      :item="selected_item"
+      :item="selectedItem"
       :show="show_details_modal"
       @close="show_details_modal = false"
     />
@@ -33,7 +33,7 @@ export default {
   props: { items: { required: true, type: Object } },
 
   data() {
-    return { selected_item: {}, show_details_modal: false }
+    return { selectedItem: {}, show_details_modal: false }
   },
 
   methods: {
@@ -52,8 +52,8 @@ export default {
         this.$router.push({ name: 'playlist', params: { id: item.id } })
       }
     },
-    open_dialog(item) {
-      this.selected_item = item
+    openDialog(item) {
+      this.selectedItem = item
       this.show_details_modal = true
     }
   }
diff --git a/web-src/src/components/ListPlaylistsSpotify.vue b/web-src/src/components/ListPlaylistsSpotify.vue
index 65a95cde..ec64b5b7 100644
--- a/web-src/src/components/ListPlaylistsSpotify.vue
+++ b/web-src/src/components/ListPlaylistsSpotify.vue
@@ -12,7 +12,7 @@
         />
       </div>
       <div class="media-right">
-        <a @click.prevent.stop="open_dialog(item)">
+        <a @click.prevent.stop="openDialog(item)">
           <mdicon class="icon has-text-grey" name="dots-vertical" size="16" />
         </a>
       </div>
@@ -45,7 +45,7 @@ export default {
     open(item) {
       this.$router.push({ name: 'playlist-spotify', params: { id: item.id } })
     },
-    open_dialog(item) {
+    openDialog(item) {
       this.selected_item = item
       this.show_details_modal = true
     }
diff --git a/web-src/src/components/ListTracks.vue b/web-src/src/components/ListTracks.vue
index 7062a53b..58422aa2 100644
--- a/web-src/src/components/ListTracks.vue
+++ b/web-src/src/components/ListTracks.vue
@@ -40,7 +40,7 @@
         />
       </div>
       <div class="media-right">
-        <a @click.prevent.stop="open_dialog(item.item)">
+        <a @click.prevent.stop="openDialog(item.item)">
           <mdicon class="icon has-text-grey" name="dots-vertical" size="16" />
         </a>
       </div>
@@ -77,7 +77,7 @@ export default {
   },
 
   methods: {
-    open_dialog(item) {
+    openDialog(item) {
       this.selected_item = item
       this.show_details_modal = true
     },
diff --git a/web-src/src/components/ListTracksSpotify.vue b/web-src/src/components/ListTracksSpotify.vue
index 0d1e6523..25c7a401 100644
--- a/web-src/src/components/ListTracksSpotify.vue
+++ b/web-src/src/components/ListTracksSpotify.vue
@@ -36,7 +36,7 @@
         </div>
       </div>
       <div class="media-right">
-        <a @click.prevent.stop="open_dialog(item)">
+        <a @click.prevent.stop="openDialog(item)">
           <mdicon class="icon has-text-grey" name="dots-vertical" size="16" />
         </a>
       </div>
@@ -66,7 +66,7 @@ export default {
     return { selected_item: {}, show_details_modal: false }
   },
   methods: {
-    open_dialog(item) {
+    openDialog(item) {
       this.selected_item = item
       this.show_details_modal = true
     },
diff --git a/web-src/src/components/ModalDialogAlbum.vue b/web-src/src/components/ModalDialogAlbum.vue
index 9b4565ab..f1b394a7 100644
--- a/web-src/src/components/ModalDialogAlbum.vue
+++ b/web-src/src/components/ModalDialogAlbum.vue
@@ -43,7 +43,7 @@ export default {
         name: this.item.name,
         properties: [
           {
-            handler: this.open_artist,
+            handler: this.openArtist,
             key: 'property.artist',
             value: this.item.artist
           },
@@ -95,7 +95,7 @@ export default {
         })
       }
     },
-    open_artist() {
+    openArtist() {
       this.$emit('close')
       if (this.media_kind_resolved === 'audiobook') {
         this.$router.push({
diff --git a/web-src/src/components/ModalDialogAlbumSpotify.vue b/web-src/src/components/ModalDialogAlbumSpotify.vue
index 28939531..8f9c5e85 100644
--- a/web-src/src/components/ModalDialogAlbumSpotify.vue
+++ b/web-src/src/components/ModalDialogAlbumSpotify.vue
@@ -22,7 +22,7 @@ export default {
         name: this.item.name || '',
         properties: [
           {
-            handler: this.open_artist,
+            handler: this.openArtist,
             key: 'property.artist',
             value: this.item?.artists?.[0]?.name
           },
@@ -44,7 +44,7 @@ export default {
         params: { id: this.item.id }
       })
     },
-    open_artist() {
+    openArtist() {
       this.$emit('close')
       this.$router.push({
         name: 'music-spotify-artist',
diff --git a/web-src/src/components/ModalDialogComposer.vue b/web-src/src/components/ModalDialogComposer.vue
index 3e1c161e..8e5f90a1 100644
--- a/web-src/src/components/ModalDialogComposer.vue
+++ b/web-src/src/components/ModalDialogComposer.vue
@@ -18,16 +18,16 @@ export default {
     playable() {
       return {
         expression: `composer is "${this.item.name}" and media_kind is music`,
-        handler: this.open_albums,
+        handler: this.openAlbums,
         name: this.item.name,
         properties: [
           {
-            handler: this.open_albums,
+            handler: this.openAlbums,
             key: 'property.albums',
             value: this.item.album_count
           },
           {
-            handler: this.open_tracks,
+            handler: this.openTracks,
             key: 'property.tracks',
             value: this.item.track_count
           },
@@ -40,14 +40,14 @@ export default {
     }
   },
   methods: {
-    open_albums() {
+    openAlbums() {
       this.$emit('close')
       this.$router.push({
         name: 'music-composer-albums',
         params: { name: this.item.name }
       })
     },
-    open_tracks() {
+    openTracks() {
       this.$emit('close')
       this.$router.push({
         name: 'music-composer-tracks',
diff --git a/web-src/src/components/ModalDialogPlayable.vue b/web-src/src/components/ModalDialogPlayable.vue
index 092d50c4..ffd5999f 100644
--- a/web-src/src/components/ModalDialogPlayable.vue
+++ b/web-src/src/components/ModalDialogPlayable.vue
@@ -34,9 +34,9 @@ export default {
   computed: {
     actions() {
       return [
-        { handler: this.queue_add, icon: 'playlist-plus', key: 'actions.add' },
+        { handler: this.addToQueue, icon: 'playlist-plus', key: 'actions.add' },
         {
-          handler: this.queue_add_next,
+          handler: this.addNextToQueue,
           icon: 'playlist-play',
           key: 'actions.add-next'
         },
@@ -53,7 +53,7 @@ export default {
         webapi.player_play_uri(this.item.uris || this.item.uri, false)
       }
     },
-    queue_add() {
+    addToQueue() {
       this.$emit('close')
       if (this.item.expression) {
         webapi.queue_expression_add(this.item.expression)
@@ -61,7 +61,7 @@ export default {
         webapi.queue_add(this.item.uris || this.item.uri)
       }
     },
-    queue_add_next() {
+    addNextToQueue() {
       this.$emit('close')
       if (this.item.expression) {
         webapi.queue_expression_add_next(this.item.expression)
diff --git a/web-src/src/components/ModalDialogQueueItem.vue b/web-src/src/components/ModalDialogQueueItem.vue
index a616a415..09583b4f 100644
--- a/web-src/src/components/ModalDialogQueueItem.vue
+++ b/web-src/src/components/ModalDialogQueueItem.vue
@@ -38,19 +38,19 @@ export default {
         name: this.item.title,
         properties: [
           {
-            handler: this.open_album,
+            handler: this.openAlbum,
             key: 'property.album',
             value: this.item.album
           },
           {
-            handler: this.open_album_artist,
+            handler: this.openAlbumArtist,
             key: 'property.album-artist',
             value: this.item.album_artist
           },
           { key: 'property.composer', value: this.item.composer },
           { key: 'property.year', value: this.item.year },
           {
-            handler: this.open_genre,
+            handler: this.openGenre,
             key: 'property.genre',
             value: this.item.genre
           },
@@ -97,7 +97,7 @@ export default {
     }
   },
   methods: {
-    open_album() {
+    openAlbum() {
       this.$emit('close')
       if (this.item.data_kind === 'spotify') {
         this.$router.push({
@@ -121,7 +121,7 @@ export default {
         })
       }
     },
-    open_album_artist() {
+    openAlbumArtist() {
       this.$emit('close')
       if (this.item.data_kind === 'spotify') {
         this.$router.push({
@@ -143,7 +143,7 @@ export default {
         })
       }
     },
-    open_genre() {
+    openGenre() {
       this.$emit('close')
       this.$router.push({
         name: 'genre-albums',
diff --git a/web-src/src/components/ModalDialogTrack.vue b/web-src/src/components/ModalDialogTrack.vue
index 3e3ff1f9..652a9994 100644
--- a/web-src/src/components/ModalDialogTrack.vue
+++ b/web-src/src/components/ModalDialogTrack.vue
@@ -22,20 +22,20 @@ export default {
         return []
       }
       return this.item.play_count > 0
-        ? [{ handler: this.mark_new, key: 'actions.mark-as-new' }]
-        : [{ handler: this.mark_played, key: 'actions.mark-as-played' }]
+        ? [{ handler: this.markAsNew, key: 'actions.mark-as-new' }]
+        : [{ handler: this.markAsPlayed, key: 'actions.mark-as-played' }]
     },
     playable() {
       return {
         name: this.item.title,
         properties: [
           {
-            handler: this.open_album,
+            handler: this.openAlbum,
             key: 'property.album',
             value: this.item.album
           },
           {
-            handler: this.open_artist,
+            handler: this.openArtist,
             key: 'property.album-artist',
             value: this.item.album_artist
           },
@@ -91,7 +91,7 @@ export default {
     }
   },
   methods: {
-    mark_new() {
+    markAsNew() {
       webapi
         .library_track_update(this.item.id, { play_count: 'reset' })
         .then(() => {
@@ -99,7 +99,7 @@ export default {
           this.$emit('close')
         })
     },
-    mark_played() {
+    markAsPlayed() {
       webapi
         .library_track_update(this.item.id, { play_count: 'increment' })
         .then(() => {
@@ -107,7 +107,7 @@ export default {
           this.$emit('close')
         })
     },
-    open_album() {
+    openAlbum() {
       this.$emit('close')
       if (this.item.media_kind === 'podcast') {
         this.$router.push({
@@ -126,7 +126,7 @@ export default {
         })
       }
     },
-    open_artist() {
+    openArtist() {
       this.$emit('close')
       if (
         this.item.media_kind === 'music' ||
@@ -143,7 +143,7 @@ export default {
         })
       }
     },
-    open_genre() {
+    openGenre() {
       this.$emit('close')
       this.$router.push({
         name: 'genre-albums',
diff --git a/web-src/src/components/ModalDialogTrackSpotify.vue b/web-src/src/components/ModalDialogTrackSpotify.vue
index d483052e..f1854b02 100644
--- a/web-src/src/components/ModalDialogTrackSpotify.vue
+++ b/web-src/src/components/ModalDialogTrackSpotify.vue
@@ -23,12 +23,12 @@ export default {
         name: this.item.name,
         properties: [
           {
-            handler: this.open_album,
+            handler: this.openAlbum,
             key: 'property.album',
             value: this.item.album.name
           },
           {
-            handler: this.open_artist,
+            handler: this.openArtist,
             key: 'property.album-artist',
             value: this.item.artists[0]?.name
           },
@@ -51,14 +51,14 @@ export default {
     }
   },
   methods: {
-    open_album() {
+    openAlbum() {
       this.$emit('close')
       this.$router.push({
         name: 'music-spotify-album',
         params: { id: this.item.album.id }
       })
     },
-    open_artist() {
+    openArtist() {
       this.$emit('close')
       this.$router.push({
         name: 'music-spotify-artist',
diff --git a/web-src/src/components/NavbarTop.vue b/web-src/src/components/NavbarTop.vue
index 6d2c00a8..c262a85a 100644
--- a/web-src/src/components/NavbarTop.vue
+++ b/web-src/src/components/NavbarTop.vue
@@ -143,7 +143,7 @@ export default {
         {
           icon: 'magnify',
           key: 'navigation.search',
-          name: this.searchStore.search_source,
+          name: this.searchStore.source,
           show: this.settingsStore.show_menu_item_search
         },
         { separator: true, show: true },
@@ -153,7 +153,7 @@ export default {
           show: true
         },
         {
-          action: this.open_update_dialog,
+          action: this.openUpdateDialog,
           key: 'navigation.update-library',
           show: true
         },
@@ -168,7 +168,7 @@ export default {
     }
   },
   methods: {
-    open_update_dialog() {
+    openUpdateDialog() {
       this.uiStore.show_update_dialog = true
       this.uiStore.show_burger_menu = false
     }
diff --git a/web-src/src/pages/PageAlbum.vue b/web-src/src/pages/PageAlbum.vue
index 48048eaa..af8e9985 100644
--- a/web-src/src/pages/PageAlbum.vue
+++ b/web-src/src/pages/PageAlbum.vue
@@ -4,7 +4,7 @@
       <template #heading-left>
         <div class="title is-5" v-text="album.name" />
         <div class="subtitle is-6">
-          <a @click="open_artist" v-text="album.artist" />
+          <a @click="openArtist" v-text="album.artist" />
         </div>
         <div
           class="is-size-7 is-uppercase has-text-centered-mobile"
@@ -91,7 +91,7 @@ export default {
     }
   },
   methods: {
-    open_artist() {
+    openArtist() {
       this.show_details_modal = false
       this.$router.push({
         name: 'music-artist',
diff --git a/web-src/src/pages/PageAlbumSpotify.vue b/web-src/src/pages/PageAlbumSpotify.vue
index 1bfc0171..1d9c6788 100644
--- a/web-src/src/pages/PageAlbumSpotify.vue
+++ b/web-src/src/pages/PageAlbumSpotify.vue
@@ -4,7 +4,7 @@
       <template #heading-left>
         <div class="title is-5" v-text="album.name" />
         <div class="subtitle is-6">
-          <a @click="open_artist" v-text="album.artists[0].name" />
+          <a @click="openArtist" v-text="album.artists[0].name" />
         </div>
         <div
           class="is-size-7 is-uppercase has-text-centered-mobile"
@@ -96,7 +96,7 @@ export default {
     }
   },
   methods: {
-    open_artist() {
+    openArtist() {
       this.$router.push({
         name: 'music-spotify-artist',
         params: { id: this.album.artists[0].id }
diff --git a/web-src/src/pages/PageArtist.vue b/web-src/src/pages/PageArtist.vue
index 01b1ad29..977fa8b4 100644
--- a/web-src/src/pages/PageArtist.vue
+++ b/web-src/src/pages/PageArtist.vue
@@ -137,7 +137,7 @@ export default {
           { count: this.albums.count, key: 'count.albums' },
           {
             count: this.track_count,
-            handler: this.open_tracks,
+            handler: this.openTracks,
             key: 'count.tracks'
           }
         ],
@@ -156,7 +156,7 @@ export default {
     }
   },
   methods: {
-    open_tracks() {
+    openTracks() {
       this.$router.push({
         name: 'music-artist-tracks',
         params: { id: this.artist.id }
diff --git a/web-src/src/pages/PageComposerAlbums.vue b/web-src/src/pages/PageComposerAlbums.vue
index 97253954..617c30ad 100644
--- a/web-src/src/pages/PageComposerAlbums.vue
+++ b/web-src/src/pages/PageComposerAlbums.vue
@@ -78,7 +78,7 @@ export default {
             { count: this.composer.album_count, key: 'count.albums' },
             {
               count: this.composer.track_count,
-              handler: this.open_tracks,
+              handler: this.openTracks,
               key: 'count.tracks'
             }
           ],
@@ -89,7 +89,7 @@ export default {
     }
   },
   methods: {
-    open_tracks() {
+    openTracks() {
       this.$router.push({
         name: 'music-composer-tracks',
         params: { name: this.composer.name }
diff --git a/web-src/src/pages/PageComposerTracks.vue b/web-src/src/pages/PageComposerTracks.vue
index cfe81d4f..cce575d8 100644
--- a/web-src/src/pages/PageComposerTracks.vue
+++ b/web-src/src/pages/PageComposerTracks.vue
@@ -117,7 +117,7 @@ export default {
           subtitle: [
             {
               count: this.composer.album_count,
-              handler: this.open_albums,
+              handler: this.openAlbums,
               key: 'count.albums'
             },
             { count: this.composer.track_count, key: 'count.tracks' }
@@ -135,7 +135,7 @@ export default {
     }
   },
   methods: {
-    open_albums() {
+    openAlbums() {
       this.$router.push({
         name: 'music-composer-albums',
         params: { name: this.composer.name }
diff --git a/web-src/src/pages/PageGenreAlbums.vue b/web-src/src/pages/PageGenreAlbums.vue
index b157b6de..ad1df797 100644
--- a/web-src/src/pages/PageGenreAlbums.vue
+++ b/web-src/src/pages/PageGenreAlbums.vue
@@ -84,7 +84,7 @@ export default {
             { count: this.genre.album_count, key: 'count.albums' },
             {
               count: this.genre.track_count,
-              handler: this.open_tracks,
+              handler: this.openTracks,
               key: 'count.tracks'
             }
           ],
@@ -95,7 +95,7 @@ export default {
     }
   },
   methods: {
-    open_tracks() {
+    openTracks() {
       this.show_details_modal = false
       this.$router.push({
         name: 'genre-tracks',
diff --git a/web-src/src/pages/PageNowPlaying.vue b/web-src/src/pages/PageNowPlaying.vue
index 0d7abe43..c4a4360b 100644
--- a/web-src/src/pages/PageNowPlaying.vue
+++ b/web-src/src/pages/PageNowPlaying.vue
@@ -9,7 +9,7 @@
         :album="track.album"
         class="is-clickable is-big"
         :class="{ 'is-masked': lyricsStore.pane }"
-        @click="open_dialog(track)"
+        @click="openDialog(track)"
       />
       <lyrics-pane v-if="lyricsStore.pane" />
       <control-slider
@@ -164,7 +164,7 @@ export default {
     end_dragging() {
       this.is_dragged = false
     },
-    open_dialog(item) {
+    openDialog(item) {
       this.selected_item = item
       this.show_details_modal = true
     },
diff --git a/web-src/src/pages/PagePodcast.vue b/web-src/src/pages/PagePodcast.vue
index a7f070f7..89bf6349 100644
--- a/web-src/src/pages/PagePodcast.vue
+++ b/web-src/src/pages/PagePodcast.vue
@@ -32,22 +32,22 @@
         <list-tracks
           :items="tracks"
           :show_progress="true"
-          @play-count-changed="reload_tracks"
+          @play-count-changed="reloadTracks"
         />
         <modal-dialog-album
           :item="album"
           :show="show_details_modal"
           :media_kind="'podcast'"
           @close="show_details_modal = false"
-          @play-count-changed="reload_tracks"
-          @remove-podcast="open_remove_podcast_dialog"
+          @play-count-changed="reloadTracks"
+          @remove-podcast="openRemovePodcastDialog"
         />
         <modal-dialog
           :actions="actions"
           :show="show_remove_podcast_modal"
           :title="$t('page.podcast.remove-podcast')"
           @cancel="show_remove_podcast_modal = false"
-          @remove="remove_podcast"
+          @remove="removePodcast"
         >
           <template #content>
             <i18n-t keypath="page.podcast.remove-info" tag="p" scope="global">
@@ -129,7 +129,7 @@ export default {
     }
   },
   methods: {
-    open_remove_podcast_dialog() {
+    openRemovePodcastDialog() {
       webapi
         .library_track_playlists(this.tracks.items[0].id)
         .then(({ data }) => {
@@ -143,12 +143,12 @@ export default {
     play() {
       webapi.player_play_uri(this.album.uri, false)
     },
-    reload_tracks() {
+    reloadTracks() {
       webapi.library_podcast_episodes(this.album.id).then(({ data }) => {
         this.tracks = new GroupedList(data.tracks)
       })
     },
-    remove_podcast() {
+    removePodcast() {
       this.show_remove_podcast_modal = false
       webapi
         .library_playlist_delete(this.rss_playlist_to_remove.id)
diff --git a/web-src/src/pages/PageQueue.vue b/web-src/src/pages/PageQueue.vue
index 3d79d146..dd055d3b 100644
--- a/web-src/src/pages/PageQueue.vue
+++ b/web-src/src/pages/PageQueue.vue
@@ -7,7 +7,7 @@
       <template #heading-right>
         <control-button
           :button="{
-            handler: update_show_next_items,
+            handler: toggleHideReadItems,
             icon: 'eye-off-outline',
             key: 'actions.hide-previous'
           }"
@@ -15,7 +15,7 @@
         />
         <control-button
           :button="{
-            handler: open_add_stream_dialog,
+            handler: openAddStreamDialog,
             icon: 'web',
             key: 'actions.add-stream'
           }"
@@ -31,7 +31,7 @@
         />
         <control-button
           :button="{
-            handler: queue_clear,
+            handler: clearQueue,
             icon: 'delete-empty',
             key: 'actions.clear'
           }"
@@ -40,7 +40,7 @@
         <control-button
           v-if="is_queue_save_allowed"
           :button="{
-            handler: save_dialog,
+            handler: showSaveDialog,
             icon: 'download',
             key: 'actions.save'
           }"
@@ -58,7 +58,7 @@
               :edit_mode="edit_mode"
             >
               <template #actions>
-                <a v-if="!edit_mode" @click.prevent.stop="open_dialog(element)">
+                <a v-if="!edit_mode" @click.prevent.stop="openDialog(element)">
                   <mdicon
                     class="icon has-text-grey"
                     name="dots-vertical"
@@ -180,20 +180,20 @@ export default {
         webapi.queue_move(item.id, newPosition)
       }
     },
-    open_add_stream_dialog() {
+    openAddStreamDialog() {
       this.show_url_modal = true
     },
-    open_dialog(item) {
+    openDialog(item) {
       this.selected_item = item
       this.show_details_modal = true
     },
-    queue_clear() {
+    clearQueue() {
       webapi.queue_clear()
     },
     remove(item) {
       webapi.queue_remove(item.id)
     },
-    save_dialog() {
+    showSaveDialog() {
       if (this.queue_items.length > 0) {
         this.show_pls_save_modal = true
       }
@@ -201,7 +201,7 @@ export default {
     toggleEdit() {
       this.edit_mode = !this.edit_mode
     },
-    update_show_next_items() {
+    toggleHideReadItems() {
       this.uiStore.show_only_next_items = !this.uiStore.show_only_next_items
     }
   }
diff --git a/web-src/src/pages/PageSearchLibrary.vue b/web-src/src/pages/PageSearchLibrary.vue
index c4d541e8..aee2a185 100644
--- a/web-src/src/pages/PageSearchLibrary.vue
+++ b/web-src/src/pages/PageSearchLibrary.vue
@@ -8,7 +8,7 @@
               <p class="control has-icons-left">
                 <input
                   ref="search_field"
-                  v-model="search_query"
+                  v-model="query"
                   class="input is-rounded"
                   type="text"
                   :placeholder="$t('page.search.placeholder')"
@@ -36,10 +36,10 @@
             </div>
           </form>
           <div class="field is-grouped is-grouped-multiline mt-4">
-            <div v-for="query in recent_searches" :key="query" class="control">
+            <div v-for="query in history" :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 class="tag" @click="openSearch(query)" v-text="query" />
+                <a class="tag is-delete" @click="removeSearch(query)" />
               </div>
             </div>
           </div>
@@ -47,7 +47,7 @@
       </div>
     </div>
   </section>
-  <tabs-search @search-library="search" @search-spotify="search_spotify" />
+  <tabs-search @search-library="search" @search-spotify="searchSpotify" />
   <template v-for="[type, items] in results" :key="type">
     <content-with-heading>
       <template #heading-left>
@@ -57,7 +57,7 @@
         <component :is="components[type]" :items="items" />
       </template>
       <template v-if="!expanded" #footer>
-        <nav v-if="show_all_button(items)" class="level">
+        <nav v-if="showAllButton(items)" class="level">
           <p class="level-item">
             <a
               class="button is-small is-rounded"
@@ -116,11 +116,9 @@ export default {
     ListTracks,
     TabsSearch
   },
-
   setup() {
     return { searchStore: useSearchStore() }
   },
-
   data() {
     return {
       components: {
@@ -134,47 +132,43 @@ export default {
       },
       results: new Map(),
       search_limit: {},
-      search_query: '',
+      query: '',
       search_types: SEARCH_TYPES
     }
   },
-
   computed: {
     expanded() {
       return this.search_types.length === 1
     },
-    recent_searches() {
-      return this.searchStore.recent_searches
+    history() {
+      return this.searchStore.history
     }
   },
-
   watch: {
-    search_query() {
-      this.searchStore.search_query = this.search_query
+    query() {
+      this.searchStore.query = this.query
     }
   },
-
   mounted() {
-    this.searchStore.search_source = this.$route.name
-    this.search_query = this.searchStore.search_query
+    this.searchStore.source = this.$route.name
+    this.query = this.searchStore.query
     this.search_limit = PAGE_SIZE
     this.search()
   },
-
   methods: {
     expand(type) {
-      this.search_query = this.searchStore.search_query
+      this.query = this.searchStore.query
       this.search_types = [type]
       this.search_limit = -1
       this.search()
     },
-    open_search(query) {
-      this.search_query = query
+    openSearch(query) {
+      this.query = query
       this.search_types = SEARCH_TYPES
       this.search_limit = PAGE_SIZE
       this.search()
     },
-    remove_search(query) {
+    removeSearch(query) {
       this.searchStore.remove(query)
     },
     reset() {
@@ -188,43 +182,43 @@ export default {
         this.search_types = SEARCH_TYPES
         this.search_limit = PAGE_SIZE
       }
-      this.search_query = this.search_query.trim()
-      if (!this.search_query || !this.search_query.replace(/^query:/u, '')) {
+      this.query = this.query.trim()
+      if (!this.query || !this.query.replace(/^query:/u, '')) {
         this.$refs.search_field.focus()
         return
       }
       this.reset()
       this.search_types.forEach((type) => {
-        this.search_items(type)
+        this.searchItems(type)
       })
-      this.searchStore.add(this.search_query)
+      this.searchStore.add(this.query)
     },
-    search_items(type) {
+    searchItems(type) {
       const music = type !== 'audiobook' && type !== 'podcast'
       const kind = music ? 'music' : type
       const parameters = {
         limit: this.search_limit,
         type: music ? type : 'album'
       }
-      if (this.search_query.startsWith('query:')) {
-        parameters.expression = `(${this.search_query.replace(/^query:/u, '').trim()}) and media_kind is ${kind}`
+      if (this.query.startsWith('query:')) {
+        parameters.expression = `(${this.query.replace(/^query:/u, '').trim()}) and media_kind is ${kind}`
       } else if (music) {
-        parameters.query = this.search_query
+        parameters.query = this.query
         parameters.media_kind = kind
       } else {
-        parameters.expression = `(album includes "${this.search_query}" or artist includes "${this.search_query}") and media_kind is ${kind}`
+        parameters.expression = `(album includes "${this.query}" or artist includes "${this.query}") and media_kind is ${kind}`
       }
       webapi.search(parameters).then(({ data }) => {
         this.results.set(type, new GroupedList(data[`${parameters.type}s`]))
       })
     },
-    search_spotify() {
+    searchSpotify() {
       this.$router.push({ name: 'search-spotify' })
     },
     show(type) {
       return this.search_types.includes(type)
     },
-    show_all_button(items) {
+    showAllButton(items) {
       return items.total > items.items.length
     }
   }
diff --git a/web-src/src/pages/PageSearchSpotify.vue b/web-src/src/pages/PageSearchSpotify.vue
index a343c4e6..a6df96c1 100644
--- a/web-src/src/pages/PageSearchSpotify.vue
+++ b/web-src/src/pages/PageSearchSpotify.vue
@@ -8,7 +8,7 @@
               <p class="control has-icons-left">
                 <input
                   ref="search_field"
-                  v-model="search_query"
+                  v-model="query"
                   class="input is-rounded"
                   type="text"
                   :placeholder="$t('page.spotify.search.placeholder')"
@@ -19,10 +19,10 @@
             </div>
           </form>
           <div class="field is-grouped is-grouped-multiline mt-4">
-            <div v-for="query in recent_searches" :key="query" class="control">
+            <div v-for="query in history" :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 class="tag" @click="openSearch(query)" v-text="query" />
+                <a class="tag is-delete" @click="removeSearch(query)" />
               </div>
             </div>
           </div>
@@ -30,7 +30,7 @@
       </div>
     </div>
   </section>
-  <tabs-search @search-library="search_library" @search-spotify="search" />
+  <tabs-search @search-library="searchLibrary" @search-spotify="search" />
   <template v-for="[type, items] in results" :key="type">
     <content-with-heading>
       <template #heading-left>
@@ -40,7 +40,7 @@
       </template>
       <template #content>
         <component :is="components[type]" :items="items.items" />
-        <vue-eternal-loading v-if="expanded" :load="search_next">
+        <vue-eternal-loading v-if="expanded" :load="searchNext">
           <template #loading>
             <div class="columns is-centered">
               <div class="column has-text-centered">
@@ -54,7 +54,7 @@
         </vue-eternal-loading>
       </template>
       <template v-if="!expanded" #footer>
-        <nav v-if="show_all_button(items)" class="level">
+        <nav v-if="showAllButton(items)" class="level">
           <p class="level-item">
             <a
               class="button is-small is-rounded"
@@ -119,7 +119,7 @@ export default {
       },
       results: new Map(),
       search_parameters: {},
-      search_query: '',
+      query: '',
       search_types: SEARCH_TYPES
     }
   },
@@ -127,39 +127,39 @@ export default {
     expanded() {
       return this.search_types.length === 1
     },
-    recent_searches() {
-      return this.searchStore.recent_searches.filter(
+    history() {
+      return this.searchStore.history.filter(
         (query) => !query.startsWith('query:')
       )
     }
   },
   watch: {
-    search_query() {
-      this.searchStore.search_query = this.search_query
+    query() {
+      this.searchStore.query = this.query
     }
   },
   mounted() {
-    this.searchStore.search_source = this.$route.name
-    this.search_query = this.searchStore.search_query
+    this.searchStore.source = this.$route.name
+    this.query = this.searchStore.query
     this.search_parameters.limit = PAGE_SIZE
     this.search()
   },
   methods: {
     expand(type) {
-      this.search_query = this.searchStore.search_query
+      this.query = this.searchStore.query
       this.search_types = [type]
       this.search_parameters.limit = PAGE_SIZE_EXPANDED
       this.search_parameters.offset = 0
       this.search()
     },
-    open_search(query) {
-      this.search_query = query
+    openSearch(query) {
+      this.query = query
       this.search_types = SEARCH_TYPES
       this.search_parameters.limit = PAGE_SIZE
       this.search_parameters.offset = 0
       this.search()
     },
-    remove_search(query) {
+    removeSearch(query) {
       this.searchStore.remove(query)
     },
     reset() {
@@ -173,41 +173,41 @@ export default {
         this.search_types = SEARCH_TYPES
         this.search_parameters.limit = PAGE_SIZE
       }
-      this.search_query = this.search_query.trim()
-      if (!this.search_query) {
+      this.query = this.query.trim()
+      if (!this.query) {
         this.$refs.search_field.focus()
         return
       }
       this.reset()
-      this.search_items().then((data) => {
+      this.searchItems().then((data) => {
         this.search_types.forEach((type) => {
           this.results.set(type, data[`${type}s`])
         })
       })
-      this.searchStore.add(this.search_query)
+      this.searchStore.add(this.query)
     },
-    search_items() {
+    searchItems() {
       return webapi.spotify().then(({ data }) => {
         this.search_parameters.market = data.webapi_country
         const spotifyApi = new SpotifyWebApi()
         spotifyApi.setAccessToken(data.webapi_token)
         return spotifyApi.search(
-          this.search_query,
+          this.query,
           this.search_types,
           this.search_parameters
         )
       })
     },
-    search_library() {
+    searchLibrary() {
       this.$router.push({
         name: 'search-library'
       })
     },
-    search_next({ loaded }) {
+    searchNext({ loaded }) {
       const [type] = this.search_types,
         items = this.results.get(type)
       this.search_parameters.limit = PAGE_SIZE_EXPANDED
-      this.search_items().then((data) => {
+      this.searchItems().then((data) => {
         const [next] = Object.values(data)
         items.items.push(...next.items)
         items.total = next.total
@@ -221,7 +221,7 @@ export default {
     show(type) {
       return this.search_types.includes(type)
     },
-    show_all_button(items) {
+    showAllButton(items) {
       return items.total > items.items.length
     }
   }
diff --git a/web-src/src/stores/search.js b/web-src/src/stores/search.js
index bb4a03ab..e22dc522 100644
--- a/web-src/src/stores/search.js
+++ b/web-src/src/stores/search.js
@@ -3,25 +3,25 @@ import { defineStore } from 'pinia'
 export const useSearchStore = defineStore('SearchStore', {
   actions: {
     add(query) {
-      const index = this.recent_searches.indexOf(query)
+      const index = this.history.indexOf(query)
       if (index !== -1) {
-        this.recent_searches.splice(index, 1)
+        this.history.splice(index, 1)
       }
-      this.recent_searches.unshift(query)
-      if (this.recent_searches.length > 5) {
-        this.recent_searches.pop()
+      this.history.unshift(query)
+      if (this.history.length > 5) {
+        this.history.pop()
       }
     },
     remove(query) {
-      const index = this.recent_searches.indexOf(query)
+      const index = this.history.indexOf(query)
       if (index !== -1) {
-        this.recent_searches.splice(index, 1)
+        this.history.splice(index, 1)
       }
     }
   },
   state: () => ({
-    recent_searches: [],
-    search_query: '',
-    search_source: 'search-library'
+    history: [],
+    query: '',
+    source: 'search-library'
   })
 })