[web] Change to camel case.

web-src/src/components/ControlLink.vue

@@ -17,8 +17,7 @@ export default {
   },
   methods: {
     open() {
-      this.uiStore.show_burger_menu = false
-      this.uiStore.show_player_menu = false
+      this.uiStore.hideMenus()
       this.$router.push(this.to)
     }
   }

web-src/src/components/ControlPlayerBack.vue

@@ -18,36 +18,26 @@ export default {
   props: {
     offset: { required: true, type: Number }
   },
-
   setup() {
     return {
       playerStore: usePlayerStore(),
       queueStore: useQueueStore()
     }
   },
-
   computed: {
     disabled() {
       return (
         this.queueStore?.count <= 0 ||
-        this.is_stopped ||
-        this.current.data_kind === 'pipe'
+        this.playerStore.isStopped ||
+        this.queueStore.current.data_kind === 'pipe'
       )
     },
-    is_stopped() {
-      return this.player.state === 'stop'
-    },
-    current() {
-      return this.queueStore.current
-    },
-    player() {
-      return this.playerStore
-    },
     visible() {
-      return ['podcast', 'audiobook'].includes(this.current.media_kind)
+      return ['podcast', 'audiobook'].includes(
+        this.queueStore.current.media_kind
+      )
     }
   },
-
   methods: {
     seek() {
       if (!this.disabled) {

web-src/src/components/ControlPlayerConsume.vue

@@ -1,5 +1,5 @@
 <template>
-  <a :class="{ 'is-dark': is_consume }" @click="toggle">
+  <a :class="{ 'is-dark': playerStore.consume }" @click="toggle">
     <mdicon
       class="icon"
       name="fire"
@@ -15,22 +15,14 @@ import webapi from '@/webapi'
 
 export default {
   name: 'ControlPlayerConsume',
-
   setup() {
     return {
       playerStore: usePlayerStore()
     }
   },
-
-  computed: {
-    is_consume() {
-      return this.playerStore.consume
-    }
-  },
-
   methods: {
     toggle() {
-      webapi.player_consume(!this.is_consume)
+      webapi.player_consume(!this.playerStore.consume)
     }
   }
 }

web-src/src/components/ControlPlayerForward.vue

@@ -25,24 +25,17 @@ export default {
     }
   },
   computed: {
-    current() {
-      return this.queueStore.current
-    },
     disabled() {
       return (
         this.queueStore?.count <= 0 ||
-        this.is_stopped ||
-        this.current.data_kind === 'pipe'
+        this.playerStore.isStopped ||
+        this.queueStore.current.data_kind === 'pipe'
       )
     },
-    is_stopped() {
-      return this.player.state === 'stop'
-    },
-    player() {
-      return this.playerStore
-    },
     visible() {
-      return ['podcast', 'audiobook'].includes(this.current.media_kind)
+      return ['podcast', 'audiobook'].includes(
+        this.queueStore.current.media_kind
+      )
     }
   },
   methods: {

web-src/src/components/ControlPlayerLyrics.vue

@@ -1,5 +1,5 @@
 <template>
-  <a :class="{ 'is-dark': isActive }" @click="toggle">
+  <a :class="{ 'is-dark': lyricsStore.active }" @click="lyricsStore.toggle">
     <mdicon
       class="icon"
       :name="icon"
@@ -21,15 +21,9 @@ export default {
   },
   computed: {
     icon() {
-      return this.isActive ? 'script-text-play' : 'script-text-outline'
-    },
-    isActive() {
-      return this.lyricsStore.pane
-    }
-  },
-  methods: {
-    toggle() {
-      this.lyricsStore.pane = !this.lyricsStore.pane
+      return this.lyricsStore.active
+        ? 'script-text-play'
+        : 'script-text-outline'
     }
   }
 }

web-src/src/components/ControlPlayerNext.vue

@@ -1,5 +1,5 @@
 <template>
-  <a :disabled="disabled" @click="play_next">
+  <a :disabled="disabled" @click="next">
     <mdicon
       class="icon"
       name="skip-forward"
@@ -14,15 +14,16 @@ import webapi from '@/webapi'
 
 export default {
   name: 'ControlPlayerNext',
-
+  setup() {
+    return { queueStore: useQueueStore() }
+  },
   computed: {
     disabled() {
-      return useQueueStore()?.count <= 0
+      return this.queueStore.count <= 0
     }
   },
-
   methods: {
-    play_next() {
+    next() {
       if (this.disabled) {
         return
       }

web-src/src/components/ControlPlayerPlay.vue

@@ -27,19 +27,12 @@ export default {
       return this.queueStore?.count <= 0
     },
     icon() {
-      if (!this.is_playing) {
+      if (!this.playerStore.isPlaying) {
         return 'play'
-      } else if (this.is_pause_allowed) {
+      } else if (this.queueStore.isPauseAllowed) {
         return 'pause'
       }
       return 'stop'
-    },
-    is_pause_allowed() {
-      const { current } = this.queueStore
-      return current && current.data_kind !== 'pipe'
-    },
-    is_playing() {
-      return this.playerStore.state === 'play'
     }
   },
   methods: {
@@ -55,9 +48,12 @@ export default {
         }
         return
       }
-      if (this.is_playing && this.is_pause_allowed) {
+      if (this.playerStore.isPlaying && this.queueStore.isPauseAllowed) {
         webapi.player_pause()
-      } else if (this.is_playing && !this.is_pause_allowed) {
+      } else if (
+        this.playerStore.isPlaying &&
+        !this.queueStore.isPauseAllowed
+      ) {
         webapi.player_stop()
       } else {
         webapi.player_play()

web-src/src/components/ControlPlayerPrevious.vue

@@ -15,9 +15,7 @@ import webapi from '@/webapi'
 export default {
   name: 'ControlPlayerPrevious',
   setup() {
-    return {
-      queueStore: useQueueStore()
-    }
+    return { queueStore: useQueueStore() }
   },
   computed: {
     disabled() {

web-src/src/components/ControlPlayerRepeat.vue

@@ -1,5 +1,5 @@
 <template>
-  <a :class="{ 'is-dark': !is_repeat_off }" @click="toggle">
+  <a :class="{ 'is-dark': !playerStore.isRepeatOff }" @click="toggle">
     <mdicon
       class="icon"
       :name="icon"
@@ -16,35 +16,23 @@ import webapi from '@/webapi'
 export default {
   name: 'ControlPlayerRepeat',
   setup() {
-    return {
-      playerStore: usePlayerStore()
-    }
+    return { playerStore: usePlayerStore() }
   },
   computed: {
     icon() {
-      if (this.is_repeat_all) {
+      if (this.playerStore.isRepeatAll) {
         return 'repeat'
-      } else if (this.is_repeat_single) {
+      } else if (this.playerStore.isRepeatSingle) {
         return 'repeat-once'
       }
       return 'repeat-off'
-    },
-    is_repeat_all() {
-      return this.playerStore.repeat === 'all'
-    },
-    is_repeat_off() {
-      return !this.is_repeat_all && !this.is_repeat_single
-    },
-    is_repeat_single() {
-      return this.playerStore.repeat === 'single'
     }
   },
-
   methods: {
     toggle() {
-      if (this.is_repeat_all) {
+      if (this.playerStore.isRepeatAll) {
         webapi.player_repeat('single')
-      } else if (this.is_repeat_single) {
+      } else if (this.playerStore.isRepeatSingle) {
         webapi.player_repeat('off')
       } else {
         webapi.player_repeat('all')

web-src/src/components/ControlPlayerShuffle.vue

@@ -1,5 +1,5 @@
 <template>
-  <a :class="{ 'is-dark': isShuffle }" @click="toggle">
+  <a :class="{ 'is-dark': playerStore.shuffle }" @click="toggle">
     <mdicon
       class="icon"
       :name="icon"
@@ -16,24 +16,19 @@ import webapi from '@/webapi'
 export default {
   name: 'ControlPlayerShuffle',
   setup() {
-    return {
-      playerStore: usePlayerStore()
-    }
+    return { playerStore: usePlayerStore() }
   },
   computed: {
     icon() {
-      if (this.isShuffle) {
+      if (this.playerStore.shuffle) {
         return 'shuffle'
       }
       return 'shuffle-disabled'
-    },
-    isShuffle() {
-      return this.playerStore.shuffle
     }
   },
   methods: {
     toggle() {
-      webapi.player_shuffle(!this.is_shuffle)
+      webapi.player_shuffle(!this.playerStore.shuffle)
     }
   }
 }

web-src/src/components/ListAlbums.vue

@@ -40,18 +40,18 @@
   </template>
   <teleport to="#app">
     <modal-dialog-album
-      :item="selected_item"
+      :item="selectedItem"
       :media_kind="media_kind"
-      :show="show_details_modal"
-      @close="show_details_modal = false"
+      :show="showDetailsModal"
+      @close="showDetailsModal = false"
       @remove-podcast="openRemovePodcastDialog()"
       @play-count-changed="onPlayCountChange()"
     />
     <modal-dialog
       :actions="actions"
-      :show="show_remove_podcast_modal"
+      :show="showRemovePodcastModal"
       :title="$t('page.podcast.remove-podcast')"
-      @cancel="show_remove_podcast_modal = false"
+      @cancel="showRemovePodcastModal = false"
       @remove="removePodcast"
     >
       <template #content>
@@ -89,9 +89,9 @@ export default {
   data() {
     return {
       rss_playlist_to_remove: {},
-      selected_item: {},
-      show_details_modal: false,
-      show_remove_podcast_modal: false
+      selectedItem: {},
+      showDetailsModal: false,
+      showRemovePodcastModal: false
     }
   },
   computed: {
@@ -102,12 +102,12 @@ export default {
       ]
     },
     media_kind_resolved() {
-      return this.media_kind || this.selected_item.media_kind
+      return this.media_kind || this.selectedItem.media_kind
     }
   },
   methods: {
     open(item) {
-      this.selected_item = item
+      this.selectedItem = item
       if (this.media_kind_resolved === 'podcast') {
         this.$router.push({ name: 'podcast', params: { id: item.id } })
       } else if (this.media_kind_resolved === 'audiobook') {
@@ -120,19 +120,19 @@ export default {
       }
     },
     openDialog(item) {
-      this.selected_item = item
-      this.show_details_modal = true
+      this.selectedItem = item
+      this.showDetailsModal = true
     },
     openRemovePodcastDialog() {
       webapi
-        .library_album_tracks(this.selected_item.id, { limit: 1 })
+        .library_album_tracks(this.selectedItem.id, { limit: 1 })
         .then(({ data: album }) => {
           webapi.library_track_playlists(album.items[0].id).then(({ data }) => {
             ;[this.rss_playlist_to_remove] = data.items.filter(
               (playlist) => playlist.type === 'rss'
             )
-            this.show_remove_podcast_modal = true
-            this.show_details_modal = false
+            this.showRemovePodcastModal = true
+            this.showDetailsModal = false
           })
         })
     },
@@ -140,7 +140,7 @@ export default {
       this.$emit('play-count-changed')
     },
     removePodcast() {
-      this.show_remove_podcast_modal = false
+      this.showRemovePodcastModal = false
       webapi
         .library_playlist_delete(this.rss_playlist_to_remove.id)
         .then(() => {

web-src/src/components/ListAlbumsSpotify.vue

@@ -31,9 +31,9 @@
   </template>
   <teleport to="#app">
     <modal-dialog-album-spotify
-      :item="selected_item"
-      :show="show_details_modal"
-      @close="show_details_modal = false"
+      :item="selectedItem"
+      :show="showDetailsModal"
+      @close="showDetailsModal = false"
     />
   </teleport>
 </template>
@@ -51,7 +51,7 @@ export default {
     return { settingsStore: useSettingsStore() }
   },
   data() {
-    return { selected_item: {}, show_details_modal: false }
+    return { selectedItem: {}, showDetailsModal: false }
   },
   methods: {
     open(item) {
@@ -61,8 +61,8 @@ export default {
       })
     },
     openDialog(item) {
-      this.selected_item = item
-      this.show_details_modal = true
+      this.selectedItem = item
+      this.showDetailsModal = true
     }
   }
 }

web-src/src/components/ListArtists.vue

@@ -24,9 +24,9 @@
   </template>
   <teleport to="#app">
     <modal-dialog-artist
-      :item="selected_item"
-      :show="show_details_modal"
-      @close="show_details_modal = false"
+      :item="selectedItem"
+      :show="showDetailsModal"
+      @close="showDetailsModal = false"
     />
   </teleport>
 </template>
@@ -40,19 +40,19 @@ export default {
   props: { items: { required: true, type: Object } },
 
   data() {
-    return { selected_item: {}, show_details_modal: false }
+    return { selectedItem: {}, showDetailsModal: false }
   },
 
   methods: {
     open(item) {
-      this.selected_item = item
+      this.selectedItem = item
       const route =
         item.media_kind === 'audiobook' ? 'audiobooks-artist' : 'music-artist'
       this.$router.push({ name: route, params: { id: item.id } })
     },
     openDialog(item) {
-      this.selected_item = item
-      this.show_details_modal = true
+      this.selectedItem = item
+      this.showDetailsModal = true
     }
   }
 }

web-src/src/components/ListArtistsSpotify.vue

@@ -13,9 +13,9 @@
   </template>
   <teleport to="#app">
     <modal-dialog-artist-spotify
-      :item="selected_item"
-      :show="show_details_modal"
-      @close="show_details_modal = false"
+      :item="selectedItem"
+      :show="showDetailsModal"
+      @close="showDetailsModal = false"
     />
   </teleport>
 </template>
@@ -29,7 +29,7 @@ export default {
   props: { items: { required: true, type: Object } },
 
   data() {
-    return { selected_item: {}, show_details_modal: false }
+    return { selectedItem: {}, showDetailsModal: false }
   },
   methods: {
     open(item) {
@@ -39,8 +39,8 @@ export default {
       })
     },
     openDialog(item) {
-      this.selected_item = item
-      this.show_details_modal = true
+      this.selectedItem = item
+      this.showDetailsModal = true
     }
   }
 }

web-src/src/components/ListComposers.vue

@@ -26,9 +26,9 @@
   </template>
   <teleport to="#app">
     <modal-dialog-composer
-      :item="selected_item"
-      :show="show_details_modal"
-      @close="show_details_modal = false"
+      :item="selectedItem"
+      :show="showDetailsModal"
+      @close="showDetailsModal = false"
     />
   </teleport>
 </template>
@@ -42,12 +42,12 @@ export default {
   props: { items: { required: true, type: Object } },
 
   data() {
-    return { selected_item: {}, show_details_modal: false }
+    return { selectedItem: {}, showDetailsModal: false }
   },
 
   methods: {
     open(item) {
-      this.selected_item = item
+      this.selectedItem = item
       this.$router.push({
         name: 'music-composer-albums',
         params: { name: item.name }
@@ -55,8 +55,8 @@ export default {
     },
 
     openDialog(item) {
-      this.selected_item = item
-      this.show_details_modal = true
+      this.selectedItem = item
+      this.showDetailsModal = true
     }
   }
 }

web-src/src/components/ListDirectories.vue

@@ -38,9 +38,9 @@
   </template>
   <teleport to="#app">
     <modal-dialog-directory
-      :item="selected_item"
-      :show="show_details_modal"
-      @close="show_details_modal = false"
+      :item="selectedItem"
+      :show="showDetailsModal"
+      @close="showDetailsModal = false"
     />
   </teleport>
 </template>
@@ -54,7 +54,7 @@ export default {
   props: { items: { required: true, type: Array } },
 
   data() {
-    return { selected_item: '', show_details_modal: false }
+    return { selectedItem: '', showDetailsModal: false }
   },
 
   computed: {
@@ -81,8 +81,8 @@ export default {
       this.$router.push(route)
     },
     openDialog(item) {
-      this.selected_item = item.path
-      this.show_details_modal = true
+      this.selectedItem = item.path
+      this.showDetailsModal = true
     },
     openParent() {
       this.open(this.directories.slice(-1).pop())

web-src/src/components/ListGenres.vue

@@ -26,10 +26,10 @@
   </template>
   <teleport to="#app">
     <modal-dialog-genre
-      :item="selected_item"
+      :item="selectedItem"
       :media_kind="media_kind"
-      :show="show_details_modal"
-      @close="show_details_modal = false"
+      :show="showDetailsModal"
+      @close="showDetailsModal = false"
     />
   </teleport>
 </template>
@@ -45,7 +45,7 @@ export default {
     media_kind: { required: true, type: String }
   },
   data() {
-    return { selected_item: {}, show_details_modal: false }
+    return { selectedItem: {}, showDetailsModal: false }
   },
   methods: {
     open(item) {
@@ -56,8 +56,8 @@ export default {
       })
     },
     openDialog(item) {
-      this.selected_item = item
-      this.show_details_modal = true
+      this.selectedItem = item
+      this.showDetailsModal = true
     }
   }
 }

web-src/src/components/ListItemQueueItem.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    v-if="isNext || !show_only_next_items"
+    v-if="isNext || !hideReadItems"
     class="media is-align-items-center is-clickable mb-0"
     @click="play"
   >
-    <div v-if="edit_mode" class="media-left">
+    <div v-if="editing" class="media-left">
       <mdicon
         class="icon has-text-grey is-movable"
         name="drag-horizontal"
@@ -53,10 +53,10 @@ export default {
   name: 'ListItemQueueItem',
   props: {
     current_position: { required: true, type: Number },
-    edit_mode: Boolean,
+    editing: Boolean,
     item: { required: true, type: Object },
     position: { required: true, type: Number },
-    show_only_next_items: Boolean
+    hideReadItems: Boolean
   },
   setup() {
     return { playerStore: usePlayerStore() }

web-src/src/components/ListPlaylists.vue

@@ -18,8 +18,8 @@
   <teleport to="#app">
     <modal-dialog-playlist
       :item="selectedItem"
-      :show="show_details_modal"
-      @close="show_details_modal = false"
+      :show="showDetailsModal"
+      @close="showDetailsModal = false"
     />
   </teleport>
 </template>
@@ -33,7 +33,7 @@ export default {
   props: { items: { required: true, type: Object } },
 
   data() {
-    return { selectedItem: {}, show_details_modal: false }
+    return { selectedItem: {}, showDetailsModal: false }
   },
 
   methods: {
@@ -54,7 +54,7 @@ export default {
     },
     openDialog(item) {
       this.selectedItem = item
-      this.show_details_modal = true
+      this.showDetailsModal = true
     }
   }
 }

web-src/src/components/ListPlaylistsSpotify.vue

@@ -20,9 +20,9 @@
   </template>
   <teleport to="#app">
     <modal-dialog-playlist-spotify
-      :item="selected_item"
-      :show="show_details_modal"
-      @close="show_details_modal = false"
+      :item="selectedItem"
+      :show="showDetailsModal"
+      @close="showDetailsModal = false"
     />
   </teleport>
 </template>
@@ -38,7 +38,7 @@ export default {
   props: { items: { required: true, type: Object } },
 
   data() {
-    return { selected_item: {}, show_details_modal: false }
+    return { selectedItem: {}, showDetailsModal: false }
   },
 
   methods: {
@@ -46,8 +46,8 @@ export default {
       this.$router.push({ name: 'playlist-spotify', params: { id: item.id } })
     },
     openDialog(item) {
-      this.selected_item = item
-      this.show_details_modal = true
+      this.selectedItem = item
+      this.showDetailsModal = true
     }
   }
 }

web-src/src/components/ListTracks.vue

@@ -10,11 +10,11 @@
     <div
       v-else
       class="media is-align-items-center is-clickable mb-0"
-      :class="{ 'with-progress': show_progress }"
+      :class="{ 'with-progress': showProgress }"
       @click="play(item.item)"
     >
       <mdicon
-        v-if="show_icon"
+        v-if="showIcon"
         class="media-left icon"
         name="file-music-outline"
       />
@@ -33,7 +33,7 @@
         />
         <div class="is-size-7 has-text-grey" v-text="item.item.album" />
         <progress
-          v-if="show_progress && item.item.seek_ms > 0"
+          v-if="showProgress && item.item.seek_ms > 0"
           class="progress is-dark"
           :max="item.item.length_ms"
           :value="item.item.seek_ms"
@@ -48,9 +48,9 @@
   </template>
   <teleport to="#app">
     <modal-dialog-track
-      :item="selected_item"
-      :show="show_details_modal"
-      @close="show_details_modal = false"
+      :item="selectedItem"
+      :show="showDetailsModal"
+      @close="showDetailsModal = false"
       @play-count-changed="$emit('play-count-changed')"
     />
   </teleport>
@@ -66,20 +66,18 @@ export default {
   props: {
     expression: { default: '', type: String },
     items: { required: true, type: Object },
-    show_icon: Boolean,
-    show_progress: Boolean,
+    showIcon: Boolean,
+    showProgress: Boolean,
     uris: { default: '', type: String }
   },
   emits: ['play-count-changed'],
-
   data() {
-    return { selected_item: {}, show_details_modal: false }
+    return { selectedItem: {}, showDetailsModal: false }
   },
-
   methods: {
     openDialog(item) {
-      this.selected_item = item
-      this.show_details_modal = true
+      this.selectedItem = item
+      this.showDetailsModal = true
     },
     play(item) {
       if (this.uris) {

web-src/src/components/ListTracksSpotify.vue

@@ -44,9 +44,9 @@
   </template>
   <teleport to="#app">
     <modal-dialog-track-spotify
-      :item="selected_item"
-      :show="show_details_modal"
-      @close="show_details_modal = false"
+      :item="selectedItem"
+      :show="showDetailsModal"
+      @close="showDetailsModal = false"
     />
   </teleport>
 </template>
@@ -63,12 +63,12 @@ export default {
     items: { required: true, type: Object }
   },
   data() {
-    return { selected_item: {}, show_details_modal: false }
+    return { selectedItem: {}, showDetailsModal: false }
   },
   methods: {
     openDialog(item) {
-      this.selected_item = item
-      this.show_details_modal = true
+      this.selectedItem = item
+      this.showDetailsModal = true
     },
     play(item) {
       if (item.is_playable) {

web-src/src/components/LyricsPane.vue

@@ -10,7 +10,7 @@
     <template v-for="(verse, index) in lyrics" :key="index">
       <div
         v-if="index === verse_index"
-        :class="{ 'is-highlighted': is_playing }"
+        :class="{ 'is-highlighted': playerStore.isPlaying }"
       >
         <span
           v-for="word in verse.words"
@@ -53,9 +53,6 @@ export default {
     }
   },
   computed: {
-    is_playing() {
-      return this.playerStore.state === 'play'
-    },
     lyrics() {
       const raw = this.lyricsStore.content
       const parsed = []

web-src/src/components/ModalDialogAlbum.vue

@@ -25,11 +25,11 @@ export default {
       if (this.media_kind_resolved === 'podcast') {
         if (this.item.data_kind === 'url') {
           return [
-            { handler: this.mark_played, key: 'actions.mark-as-played' },
-            { handler: this.remove_podcast, key: 'actions.remove-podcast' }
+            { handler: this.markAsPlayed, key: 'actions.mark-as-played' },
+            { handler: this.removePodcast, key: 'actions.remove-podcast' }
           ]
         }
-        return [{ handler: this.mark_played, key: 'actions.mark-as-played' }]
+        return [{ handler: this.markAsPlayed, key: 'actions.mark-as-played' }]
       }
       return []
     },
@@ -71,7 +71,7 @@ export default {
     }
   },
   methods: {
-    mark_played() {
+    markAsPlayed() {
       webapi
         .library_album_track_update(this.item.id, { play_count: 'played' })
         .then(() => {
@@ -109,7 +109,7 @@ export default {
         })
       }
     },
-    remove_podcast() {
+    removePodcast() {
       this.$emit('remove-podcast')
     }
   }

web-src/src/components/ModalDialogUpdate.vue

@@ -7,7 +7,10 @@
   >
     <template #content>
       <div v-if="!libraryStore.updating">
-        <div v-if="spotify_enabled || rss.tracks > 0" class="field">
+        <div
+          v-if="servicesStore.isSpotifyEnabled || rss.tracks > 0"
+          class="field"
+        >
           <label class="label" v-text="$t('dialog.update.info')" />
           <div class="control">
             <div class="select is-small">
@@ -15,7 +18,7 @@
                 <option value="" v-text="$t('dialog.update.all')" />
                 <option value="files" v-text="$t('dialog.update.local')" />
                 <option
-                  v-if="spotify_enabled"
+                  v-if="servicesStore.isSpotifyEnabled"
                   value="spotify"
                   v-text="$t('dialog.update.spotify')"
                 />
@@ -80,9 +83,6 @@ export default {
     },
     rss() {
       return this.libraryStore.rss
-    },
-    spotify_enabled() {
-      return this.servicesStore.spotify.webapi_token_valid
     }
   },
   methods: {

web-src/src/components/NavbarBottom.vue

@@ -1,13 +1,10 @@
 <template>
-  <nav
-    class="navbar is-fixed-bottom"
-    :class="{ 'is-dark': !is_now_playing_page }"
-  >
+  <nav class="navbar is-fixed-bottom" :class="{ 'is-dark': !isNowPlayingPage }">
     <div class="navbar-brand is-flex-grow-1">
       <control-link class="navbar-item" :to="{ name: 'queue' }">
         <mdicon class="icon" name="playlist-play" />
       </control-link>
-      <template v-if="is_now_playing_page">
+      <template v-if="isNowPlayingPage">
         <control-player-previous class="navbar-item ml-auto" />
         <control-player-back class="navbar-item" :offset="10000" />
         <control-player-play class="navbar-item" show_disabled_message />
@@ -21,26 +18,30 @@
           class="navbar-item is-justify-content-flex-start is-expanded is-clipped is-size-7"
         >
           <div class="is-text-clipped">
-            <strong v-text="current.title" />
+            <strong v-text="queueStore.current.title" />
             <br />
-            <span v-text="current.artist" />
+            <span v-text="queueStore.current.artist" />
             <span
-              v-if="current.album"
-              v-text="$t('navigation.now-playing', { album: current.album })"
+              v-if="queueStore.current.album"
+              v-text="
+                $t('navigation.now-playing', {
+                  album: queueStore.current.album
+                })
+              "
             />
           </div>
         </control-link>
         <control-player-play class="navbar-item" show_disabled_message />
       </template>
-      <a class="navbar-item" @click="toggle">
+      <a class="navbar-item" @click="uiStore.togglePlayerMenu">
         <mdicon
           class="icon"
-          :name="uiStore.show_player_menu ? 'chevron-down' : 'chevron-up'"
+          :name="uiStore.showPlayerMenu ? 'chevron-down' : 'chevron-up'"
         />
       </a>
       <div
         class="dropdown is-up is-right"
-        :class="{ 'is-active': uiStore.show_player_menu }"
+        :class="{ 'is-active': uiStore.showPlayerMenu }"
       >
         <div class="dropdown-menu is-mobile">
           <div class="dropdown-content">
@@ -105,7 +106,6 @@ export default {
     ControlPlayerShuffle,
     ControlStreamVolume
   },
-
   setup() {
     return {
       notificationsStore: useNotificationsStore(),
@@ -114,20 +114,10 @@ export default {
       uiStore: useUIStore()
     }
   },
-
   computed: {
-    current() {
-      return this.queueStore.current
-    },
-    is_now_playing_page() {
+    isNowPlayingPage() {
       return this.$route.name === 'now-playing'
     }
-  },
-  methods: {
-    toggle() {
-      this.uiStore.show_player_menu = !this.uiStore.show_player_menu
-      this.uiStore.show_burger_menu = false
-    }
   }
 }
 </script>

web-src/src/components/NavbarTop.vue

@@ -9,18 +9,15 @@
       >
         <mdicon class="icon" :name="menu.icon" size="16" />
       </control-link>
-      <a
-        class="navbar-item ml-auto"
-        @click="uiStore.show_burger_menu = !uiStore.show_burger_menu"
-      >
+      <a class="navbar-item ml-auto" @click="uiStore.toggleBurgerMenu">
         <mdicon
           class="icon"
-          :name="uiStore.show_burger_menu ? 'close' : 'menu'"
+          :name="uiStore.showBurgerMenu ? 'close' : 'menu'"
         />
       </a>
       <div
         class="dropdown is-right"
-        :class="{ 'is-active': uiStore.show_burger_menu }"
+        :class="{ 'is-active': uiStore.showBurgerMenu }"
       >
         <div class="dropdown-menu is-mobile">
           <div class="dropdown-content">
@@ -161,7 +158,7 @@ export default {
       ]
     },
     zindex() {
-      if (this.uiStore.show_player_menu) {
+      if (this.uiStore.showPlayerMenu) {
         return 'z-index: 21'
       }
       return ''
@@ -169,8 +166,8 @@ export default {
   },
   methods: {
     openUpdateDialog() {
-      this.uiStore.show_update_dialog = true
-      this.uiStore.show_burger_menu = false
+      this.uiStore.showUpdateDialog = true
+      this.uiStore.hideMenus()
     }
   }
 }

web-src/src/components/TabsSearch.vue

@@ -1,5 +1,5 @@
 <template>
-  <section v-if="spotify_enabled">
+  <section v-if="servicesStore.isSpotifyEnabled">
     <div class="container">
       <div class="columns is-centered">
         <div class="column is-four-fifths">
@@ -41,11 +41,6 @@ export default {
   emits: ['search-library', 'search-spotify'],
   setup() {
     return { servicesStore: useServicesStore() }
-  },
-  computed: {
-    spotify_enabled() {
-      return this.servicesStore.spotify.webapi_token_valid
-    }
   }
 }
 </script>