From 4b8ae1a78e2cf00ee7224e2b5d2e49f3176b5abe Mon Sep 17 00:00:00 2001
From: Phan An <me@phanan.net>
Date: Fri, 2 Dec 2022 17:17:37 +0100
Subject: [PATCH] chore: code style and some minor fixes

---
 .eslintrc                                     |  4 +-
 resources/assets/js/App.vue                   | 38 ++++++++--------
 .../js/__tests__/factory/albumInfoFactory.ts  |  2 +-
 .../factory/smartPlaylistRuleGroupFactory.ts  |  2 +-
 resources/assets/js/__tests__/stubs.ts        | 12 ++---
 .../assets/js/components/album/AlbumCard.vue  |  2 -
 .../js/components/album/AlbumContextMenu.vue  |  8 ++--
 .../assets/js/components/album/AlbumInfo.vue  | 10 ++---
 .../js/components/album/AlbumTrackList.vue    |  3 +-
 .../components/album/AlbumTrackListItem.vue   |  2 +-
 .../__snapshots__/AlbumCard.spec.ts.snap      |  2 +-
 .../js/components/artist/ArtistCard.vue       |  2 -
 .../components/artist/ArtistContextMenu.vue   |  8 ++--
 .../js/components/artist/ArtistInfo.vue       |  8 ++--
 .../__snapshots__/ArtistCard.spec.ts.snap     |  2 +-
 .../js/components/auth/LoginForm.spec.ts      |  4 +-
 .../js/components/layout/ModalWrapper.vue     |  6 +--
 .../layout/app-footer/AudioPlayer.vue         |  2 +-
 .../layout/app-footer/FooterExtraControls.vue |  6 +--
 .../app-footer/FooterPlaybackControls.spec.ts |  4 +-
 .../app-footer/FooterPlaybackControls.vue     | 12 ++---
 .../layout/app-footer/FooterSongInfo.spec.ts  |  6 +--
 .../layout/app-footer/FooterSongInfo.vue      |  4 +-
 .../js/components/layout/app-footer/index.vue |  8 ++--
 .../layout/main-wrapper/ExtraPanel.vue        | 32 +++++++-------
 .../layout/main-wrapper/MainContent.vue       | 44 +++++++++----------
 .../layout/main-wrapper/Sidebar.vue           | 26 +++++------
 .../components/layout/main-wrapper/index.vue  | 10 ++---
 .../js/components/meta/AboutKoelModal.vue     |  5 ++-
 .../assets/js/components/meta/SupportKoel.vue |  2 +-
 .../CreateNewPlaylistContextMenu.spec.ts      |  2 +-
 .../playlist/CreatePlaylistFolderForm.spec.ts |  2 +-
 .../playlist/CreatePlaylistForm.vue           |  4 +-
 .../components/playlist/EditPlaylistForm.vue  |  4 +-
 .../playlist/PlaylistContextMenu.spec.ts      |  4 +-
 .../playlist/PlaylistContextMenu.vue          | 12 ++---
 .../PlaylistFolderContextMenu.spec.ts         |  4 +-
 .../playlist/PlaylistFolderContextMenu.vue    | 16 +++----
 .../playlist/PlaylistFolderSidebarItem.vue    |  6 +--
 .../playlist/PlaylistSidebarList.vue          |  8 ++--
 .../CreateSmartPlaylistForm.vue               |  8 ++--
 .../smart-playlist/EditSmartPlaylistForm.vue  | 12 +++--
 .../smart-playlist/SmartPlaylistFormBase.vue  |  2 +-
 .../smart-playlist/SmartPlaylistRule.vue      | 14 +++---
 .../smart-playlist/SmartPlaylistRuleGroup.vue |  8 ++--
 .../smart-playlist/SmartPlaylistRuleInput.vue |  2 +-
 .../profile-preferences/LastfmIntegration.vue |  2 +-
 .../profile-preferences/PreferencesForm.vue   | 14 +++---
 .../profile-preferences/ProfileForm.vue       |  6 +--
 .../profile-preferences/ThemeCard.vue         |  2 +
 .../profile-preferences/ThemeList.vue         |  2 +-
 .../js/components/screens/AlbumListScreen.vue | 10 ++---
 .../js/components/screens/AlbumScreen.vue     | 41 +++++++++--------
 .../js/components/screens/AllSongsScreen.vue  | 16 +++----
 .../components/screens/ArtistListScreen.vue   | 10 ++---
 .../js/components/screens/ArtistScreen.vue    | 35 +++++++--------
 .../js/components/screens/FavoritesScreen.vue | 23 +++++-----
 .../js/components/screens/GenreListScreen.vue |  8 ++--
 .../js/components/screens/GenreScreen.vue     | 24 +++++-----
 .../js/components/screens/HomeScreen.vue      | 18 ++++----
 .../js/components/screens/NotFoundScreen.vue  |  4 +-
 .../js/components/screens/PlaylistScreen.vue  | 27 ++++++------
 .../js/components/screens/ProfileScreen.vue   | 11 ++---
 .../js/components/screens/QueueScreen.vue     | 22 +++++-----
 .../screens/RecentlyPlayedScreen.vue          | 22 +++++-----
 .../js/components/screens/UploadScreen.vue    | 24 +++++-----
 .../js/components/screens/UserListScreen.vue  | 10 ++---
 .../components/screens/VisualizerScreen.vue   |  8 ++--
 .../js/components/screens/YouTubeScreen.vue   |  4 +-
 .../screens/home/MostPlayedAlbums.vue         |  4 +-
 .../screens/home/MostPlayedArtists.vue        |  4 +-
 .../screens/home/MostPlayedSongs.vue          |  4 +-
 .../screens/home/RecentlyAddedAlbums.vue      |  4 +-
 .../screens/home/RecentlyAddedSongs.vue       |  4 +-
 .../screens/home/RecentlyPlayedSongs.vue      |  4 +-
 .../screens/search/SearchExcerptsScreen.vue   | 16 +++----
 .../search/SearchSongResultsScreen.vue        | 18 ++++----
 .../js/components/song/EditSongForm.vue       | 18 ++++----
 .../assets/js/components/song/SongCard.vue    |  4 +-
 .../js/components/song/SongContextMenu.vue    | 20 ++++-----
 .../js/components/song/SongLikeButton.vue     |  4 +-
 .../assets/js/components/song/SongList.vue    | 26 +++++------
 .../js/components/song/SongListControls.vue   | 18 ++++----
 .../js/components/song/SongListItem.vue       |  6 +--
 .../js/components/song/SongListSorter.vue     | 15 ++++---
 .../js/components/song/SongThumbnail.vue      |  4 +-
 .../js/components/ui/AlbumArtOverlay.vue      |  2 +-
 .../js/components/ui/AlbumArtistThumbnail.vue |  7 ++-
 .../js/components/ui/AppleMusicButton.vue     |  4 +-
 .../js/components/ui/ArtistAlbumCard.vue      |  6 +--
 .../components/ui/ArtistAlbumScreenTabs.vue   |  4 +-
 resources/assets/js/components/ui/Btn.vue     |  2 +-
 .../assets/js/components/ui/BtnCloseModal.vue |  2 +-
 .../assets/js/components/ui/BtnGroup.vue      |  2 +-
 .../js/components/ui/BtnScrollToTop.vue       |  2 +-
 .../assets/js/components/ui/CheckBox.vue      |  4 +-
 .../js/components/ui/ContextMenuBase.vue      |  6 +--
 .../assets/js/components/ui/Equalizer.vue     |  6 +--
 .../js/components/ui/ExtraPanelTabHeader.vue  | 18 ++++----
 .../js/components/ui/FooterPlayButton.spec.ts |  6 ++-
 .../js/components/ui/FooterPlayButton.vue     |  4 +-
 .../assets/js/components/ui/LyricsPane.vue    |  2 +-
 .../assets/js/components/ui/Magnifier.vue     |  4 +-
 .../assets/js/components/ui/MessageToast.vue  |  8 ++--
 .../js/components/ui/MessageToaster.vue       |  2 +-
 .../js/components/ui/OfflineNotification.vue  |  7 +--
 resources/assets/js/components/ui/Overlay.vue | 14 +++---
 .../assets/js/components/ui/ProfileAvatar.vue |  2 +-
 .../js/components/ui/RepeatModeSwitch.vue     |  4 +-
 .../js/components/ui/ScreenControlsToggle.vue |  4 +-
 .../assets/js/components/ui/ScreenHeader.vue  |  8 ++--
 .../assets/js/components/ui/SearchForm.vue    |  4 +-
 .../components/ui/SidebarMenuToggleButton.vue |  2 +-
 .../assets/js/components/ui/SoundBars.vue     |  6 +--
 .../assets/js/components/ui/TooltipIcon.vue   |  2 +-
 .../js/components/ui/ViewModeSwitch.vue       |  4 +-
 .../js/components/ui/VirtualScroller.vue      |  2 +-
 resources/assets/js/components/ui/Volume.vue  |  8 ++--
 .../js/components/ui/YouTubeVideoList.vue     |  4 +-
 .../AlbumArtistThumbnail.spec.ts.snap         |  4 +-
 .../ui/skeletons/ArtistAlbumCardSkeleton.vue  |  8 ++--
 .../ui/skeletons/GenreItemSkeleton.vue        |  4 +-
 .../ui/skeletons/ScreenHeaderSkeleton.vue     |  8 ++--
 .../ui/skeletons/SongCardSkeleton.vue         |  6 +--
 .../ui/skeletons/SongListSkeleton.vue         | 26 +++++------
 .../js/components/ui/upload/DropZone.vue      |  2 +-
 .../js/components/ui/upload/UploadItem.vue    |  6 +--
 .../assets/js/components/user/AddUserForm.vue |  4 +-
 .../js/components/user/EditUserForm.vue       |  4 +-
 .../assets/js/components/user/UserBadge.vue   |  7 ++-
 .../assets/js/components/user/UserCard.vue    |  2 +-
 .../user/__snapshots__/UserBadge.spec.ts.snap |  2 +-
 .../assets/js/composables/useContextMenu.ts   | 11 +----
 .../assets/js/composables/useFloatingUi.ts    | 38 +++++++++-------
 .../js/composables/useInfiniteScroll.ts       |  4 +-
 .../js/composables/useSmartPlaylistForm.ts    |  2 +-
 .../assets/js/composables/useSongList.ts      |  2 +-
 resources/assets/js/composables/useUpload.ts  |  4 +-
 resources/assets/js/config/events.ts          |  5 +--
 resources/assets/js/directives/focus.ts       |  3 --
 resources/assets/js/remote/App.vue            | 26 +++++------
 resources/assets/js/stores/playlistStore.ts   |  5 ++-
 resources/assets/js/stores/queueStore.spec.ts |  2 +-
 resources/assets/js/types.d.ts                | 15 ++++---
 resources/assets/js/utils/floatingUi.ts       |  6 +--
 resources/assets/js/utils/logger.ts           |  8 ++--
 146 files changed, 642 insertions(+), 634 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 1044ba11..e7d1ba9a 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -45,6 +45,8 @@
     "vue/valid-v-on": 0,
     "vue/no-side-effects-in-computed-properties": 0,
     "vue/max-attributes-per-line": 0,
-    "vue/no-v-html": 0
+    "vue/no-v-html": 0,
+    "vue/singleline-html-element-content-newline": 0,
+    "vue/multi-word-component-names": 0
   }
 }
diff --git a/resources/assets/js/App.vue b/resources/assets/js/App.vue
index fedc01bb..f21cc9f7 100644
--- a/resources/assets/js/App.vue
+++ b/resources/assets/js/App.vue
@@ -1,26 +1,26 @@
 <template>
-  <Overlay ref="overlay"/>
-  <DialogBox ref="dialog"/>
-  <MessageToaster ref="toaster"/>
-  <GlobalEventListeners/>
-  <OfflineNotification v-if="offline"/>
+  <Overlay ref="overlay" />
+  <DialogBox ref="dialog" />
+  <MessageToaster ref="toaster" />
+  <GlobalEventListeners />
+  <OfflineNotification v-if="offline" />
 
   <div v-if="authenticated" id="main" @dragend="onDragEnd" @dragover="onDragOver" @drop="onDrop">
-    <Hotkeys/>
-    <MainWrapper/>
-    <AppFooter/>
-    <SupportKoel/>
-    <SongContextMenu/>
-    <AlbumContextMenu/>
-    <ArtistContextMenu/>
-    <PlaylistContextMenu/>
-    <PlaylistFolderContextMenu/>
-    <CreateNewPlaylistContextMenu/>
-    <DropZone v-show="showDropZone"/>
+    <Hotkeys />
+    <MainWrapper />
+    <AppFooter />
+    <SupportKoel />
+    <SongContextMenu />
+    <AlbumContextMenu />
+    <ArtistContextMenu />
+    <PlaylistContextMenu />
+    <PlaylistFolderContextMenu />
+    <CreateNewPlaylistContextMenu />
+    <DropZone v-show="showDropZone" />
   </div>
 
   <div v-else class="login-wrapper">
-    <LoginForm @loggedin="onUserLoggedIn"/>
+    <LoginForm @loggedin="onUserLoggedIn" />
   </div>
 </template>
 
@@ -92,7 +92,7 @@ onMounted(async () => {
 })
 
 const init = async () => {
-  overlay.value.show({ message: 'Just a little patience…' })
+  overlay.value!.show({ message: 'Just a little patience…' })
 
   try {
     await commonStore.init()
@@ -108,7 +108,7 @@ const init = async () => {
     })
 
     await socketService.init() && socketListener.listen()
-    overlay.value.hide()
+    overlay.value!.hide()
   } catch (err) {
     authenticated.value = false
     throw err
diff --git a/resources/assets/js/__tests__/factory/albumInfoFactory.ts b/resources/assets/js/__tests__/factory/albumInfoFactory.ts
index c356177e..85745cbb 100644
--- a/resources/assets/js/__tests__/factory/albumInfoFactory.ts
+++ b/resources/assets/js/__tests__/factory/albumInfoFactory.ts
@@ -7,6 +7,6 @@ export default (faker: Faker): AlbumInfo => ({
     summary: faker.lorem.sentence(),
     full: faker.lorem.sentences(4)
   },
-  tracks: factory<AlbumTrack[]>('album-track', 8),
+  tracks: factory<AlbumTrack>('album-track', 8),
   url: faker.internet.url()
 })
diff --git a/resources/assets/js/__tests__/factory/smartPlaylistRuleGroupFactory.ts b/resources/assets/js/__tests__/factory/smartPlaylistRuleGroupFactory.ts
index 9c38e3c0..b0f4683f 100644
--- a/resources/assets/js/__tests__/factory/smartPlaylistRuleGroupFactory.ts
+++ b/resources/assets/js/__tests__/factory/smartPlaylistRuleGroupFactory.ts
@@ -3,5 +3,5 @@ import factory from 'factoria'
 
 export default (faker: Faker): SmartPlaylistRuleGroup => ({
   id: faker.datatype.number(),
-  rules: factory<SmartPlaylistRule[]>('smart-playlist-rule', 3)
+  rules: factory<SmartPlaylistRule>('smart-playlist-rule', 3)
 })
diff --git a/resources/assets/js/__tests__/stubs.ts b/resources/assets/js/__tests__/stubs.ts
index 8a657a05..3e931f81 100644
--- a/resources/assets/js/__tests__/stubs.ts
+++ b/resources/assets/js/__tests__/stubs.ts
@@ -5,22 +5,22 @@ import MessageToaster from '@/components/ui/MessageToaster.vue'
 import DialogBox from '@/components/ui/DialogBox.vue'
 import Overlay from '@/components/ui/Overlay.vue'
 
-export const MessageToasterStub: Ref<InstanceType<typeof MessageToaster>> = ref({
+export const MessageToasterStub = ref({
   info: noop,
   success: noop,
   warning: noop,
   error: noop
-})
+}) as unknown as Ref<InstanceType<typeof MessageToaster>>
 
-export const DialogBoxStub: Ref<InstanceType<typeof DialogBox>> = ref({
+export const DialogBoxStub = ref({
   info: noop,
   success: noop,
   warning: noop,
   error: noop,
   confirm: noop
-})
+}) as unknown as Ref<InstanceType<typeof DialogBox>>
 
-export const OverlayStub: Ref<InstanceType<typeof Overlay>> = ref({
+export const OverlayStub = ref({
   show: noop,
   hide: noop
-})
+}) as unknown as Ref<InstanceType<typeof Overlay>>
diff --git a/resources/assets/js/components/album/AlbumCard.vue b/resources/assets/js/components/album/AlbumCard.vue
index eaa9781e..3478c2d1 100644
--- a/resources/assets/js/components/album/AlbumCard.vue
+++ b/resources/assets/js/components/album/AlbumCard.vue
@@ -18,7 +18,6 @@
       <a
         :title="`Shuffle all songs in the album ${album.name}`"
         class="shuffle-album"
-        href
         role="button"
         @click.prevent="shuffle"
       >
@@ -28,7 +27,6 @@
         v-if="allowDownload"
         :title="`Download all songs in the album ${album.name}`"
         class="download-album"
-        href
         role="button"
         @click.prevent="download"
       >
diff --git a/resources/assets/js/components/album/AlbumContextMenu.vue b/resources/assets/js/components/album/AlbumContextMenu.vue
index be61e590..a1826084 100644
--- a/resources/assets/js/components/album/AlbumContextMenu.vue
+++ b/resources/assets/js/components/album/AlbumContextMenu.vue
@@ -3,11 +3,11 @@
     <template v-if="album">
       <li @click="play">Play All</li>
       <li @click="shuffle">Shuffle All</li>
-      <li class="separator"></li>
+      <li class="separator" />
       <li v-if="isStandardAlbum" @click="viewAlbumDetails">Go to Album</li>
       <li v-if="isStandardArtist" @click="viewArtistDetails">Go to Artist</li>
       <template v-if="isStandardAlbum && allowDownload">
-        <li class="separator"></li>
+        <li class="separator" />
         <li @click="download">Download</li>
       </template>
     </template>
@@ -22,7 +22,7 @@ import { useContextMenu, useRouter } from '@/composables'
 import { eventBus } from '@/utils'
 
 const { go } = useRouter()
-const { context, base, ContextMenuBase, open, trigger } = useContextMenu()
+const { base, ContextMenuBase, open, trigger } = useContextMenu()
 
 const album = ref<Album>()
 const allowDownload = toRef(commonStore.state, 'allow_download')
@@ -49,6 +49,6 @@ const download = () => trigger(() => downloadService.fromAlbum(album.value!))
 
 eventBus.on('ALBUM_CONTEXT_MENU_REQUESTED', async (e, _album) => {
   album.value = _album
-  await open(e.pageY, e.pageX, { album })
+  await open(e.pageY, e.pageX)
 })
 </script>
diff --git a/resources/assets/js/components/album/AlbumInfo.vue b/resources/assets/js/components/album/AlbumInfo.vue
index 1a1aed85..9d37601d 100644
--- a/resources/assets/js/components/album/AlbumInfo.vue
+++ b/resources/assets/js/components/album/AlbumInfo.vue
@@ -3,24 +3,24 @@
     <h1 v-if="mode === 'aside'" class="name">
       <span>{{ album.name }}</span>
       <button :title="`Play all songs in ${album.name}`" class="control" type="button" @click.prevent="play">
-        <icon :icon="faCirclePlay" size="xl"/>
+        <icon :icon="faCirclePlay" size="xl" />
       </button>
     </h1>
 
     <main>
-      <AlbumThumbnail v-if="mode === 'aside'" :entity="album"/>
+      <AlbumThumbnail v-if="mode === 'aside'" :entity="album" />
 
       <template v-if="info">
         <div v-if="info.wiki?.summary" class="wiki">
-          <div v-if="showSummary" class="summary" data-testid="summary" v-html="info.wiki.summary"/>
-          <div v-if="showFull" class="full" data-testid="full" v-html="info.wiki.full"/>
+          <div v-if="showSummary" class="summary" data-testid="summary" v-html="info.wiki.summary" />
+          <div v-if="showFull" class="full" data-testid="full" v-html="info.wiki.full" />
 
           <button v-if="showSummary" class="more" @click.prevent="showingFullWiki = true">
             Full Wiki
           </button>
         </div>
 
-        <TrackList v-if="info.tracks?.length" :album="album" :tracks="info.tracks" data-testid="album-info-tracks"/>
+        <TrackList v-if="info.tracks?.length" :album="album" :tracks="info.tracks" data-testid="album-info-tracks" />
 
         <footer>
           Data &copy;
diff --git a/resources/assets/js/components/album/AlbumTrackList.vue b/resources/assets/js/components/album/AlbumTrackList.vue
index 0346dbc0..f4e60415 100644
--- a/resources/assets/js/components/album/AlbumTrackList.vue
+++ b/resources/assets/js/components/album/AlbumTrackList.vue
@@ -4,7 +4,7 @@
 
     <ul class="tracks">
       <li v-for="(track, index) in tracks" :key="index" data-testid="album-track-item">
-        <TrackListItem :album="album" :track="track"/>
+        <TrackListItem :album="album" :track="track" />
       </li>
     </ul>
   </section>
@@ -22,6 +22,7 @@ const { album, tracks } = toRefs(props)
 
 const songs = ref<Song[]>([])
 
+// @ts-ignore
 provide(SongsKey, songs)
 
 onMounted(async () => songs.value = await songStore.fetchForAlbum(album.value))
diff --git a/resources/assets/js/components/album/AlbumTrackListItem.vue b/resources/assets/js/components/album/AlbumTrackListItem.vue
index bfcc9ca5..d6ac5987 100644
--- a/resources/assets/js/components/album/AlbumTrackListItem.vue
+++ b/resources/assets/js/components/album/AlbumTrackListItem.vue
@@ -7,7 +7,7 @@
     @click="play"
   >
     <span class="title">{{ track.title }}</span>
-    <AppleMusicButton v-if="useAppleMusic && !matchedSong" :url="iTunesUrl"/>
+    <AppleMusicButton v-if="useAppleMusic && !matchedSong" :url="iTunesUrl" />
     <span class="length">{{ fmtLength }}</span>
   </div>
 </template>
diff --git a/resources/assets/js/components/album/__snapshots__/AlbumCard.spec.ts.snap b/resources/assets/js/components/album/__snapshots__/AlbumCard.spec.ts.snap
index 1199b2b4..2bf0943e 100644
--- a/resources/assets/js/components/album/__snapshots__/AlbumCard.spec.ts.snap
+++ b/resources/assets/js/components/album/__snapshots__/AlbumCard.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`renders 1`] = `
 <article class="item full" draggable="true" tabindex="0" title="IV by Led Zeppelin" data-v-f01bdc56=""><br data-testid="thumbnail" entity="[object Object]" data-v-f01bdc56="">
   <footer data-v-f01bdc56="">
     <div class="name" data-v-f01bdc56=""><a href="#/album/42" class="text-normal" data-testid="name">IV</a><a href="#/artist/17">Led Zeppelin</a></div>
-    <p class="meta" data-v-f01bdc56=""><a title="Shuffle all songs in the album IV" class="shuffle-album" href="" role="button"> Shuffle </a><a title="Download all songs in the album IV" class="download-album" href="" role="button"> Download </a></p>
+    <p class="meta" data-v-f01bdc56=""><a title="Shuffle all songs in the album IV" class="shuffle-album" role="button"> Shuffle </a><a title="Download all songs in the album IV" class="download-album" role="button"> Download </a></p>
   </footer>
 </article>
 `;
diff --git a/resources/assets/js/components/artist/ArtistCard.vue b/resources/assets/js/components/artist/ArtistCard.vue
index 443b7fa4..496e3448 100644
--- a/resources/assets/js/components/artist/ArtistCard.vue
+++ b/resources/assets/js/components/artist/ArtistCard.vue
@@ -15,7 +15,6 @@
       <a
         :title="`Shuffle all songs by ${artist.name}`"
         class="shuffle-artist"
-        href
         role="button"
         @click.prevent="shuffle"
       >
@@ -25,7 +24,6 @@
         v-if="allowDownload"
         :title="`Download all songs by ${artist.name}`"
         class="download-artist"
-        href
         role="button"
         @click.prevent="download"
       >
diff --git a/resources/assets/js/components/artist/ArtistContextMenu.vue b/resources/assets/js/components/artist/ArtistContextMenu.vue
index 2ad0d7bc..7456da7e 100644
--- a/resources/assets/js/components/artist/ArtistContextMenu.vue
+++ b/resources/assets/js/components/artist/ArtistContextMenu.vue
@@ -4,11 +4,11 @@
       <li @click="play">Play All</li>
       <li @click="shuffle">Shuffle All</li>
       <template v-if="isStandardArtist">
-        <li class="separator"></li>
+        <li class="separator" />
         <li @click="viewArtistDetails">Go to Artist</li>
       </template>
       <template v-if="isStandardArtist && allowDownload">
-        <li class="separator"></li>
+        <li class="separator" />
         <li @click="download">Download</li>
       </template>
     </template>
@@ -23,7 +23,7 @@ import { useContextMenu, useRouter } from '@/composables'
 import { eventBus } from '@/utils'
 
 const { go } = useRouter()
-const { context, base, ContextMenuBase, open, trigger } = useContextMenu()
+const { base, ContextMenuBase, open, trigger } = useContextMenu()
 
 const artist = ref<Artist>()
 const allowDownload = toRef(commonStore.state, 'allow_download')
@@ -48,6 +48,6 @@ const download = () => trigger(() => downloadService.fromArtist(artist.value!))
 
 eventBus.on('ARTIST_CONTEXT_MENU_REQUESTED', async (e, _artist) => {
   artist.value = _artist
-  await open(e.pageY, e.pageX, { _artist })
+  await open(e.pageY, e.pageX)
 })
 </script>
diff --git a/resources/assets/js/components/artist/ArtistInfo.vue b/resources/assets/js/components/artist/ArtistInfo.vue
index a59e7581..73d5cb8e 100644
--- a/resources/assets/js/components/artist/ArtistInfo.vue
+++ b/resources/assets/js/components/artist/ArtistInfo.vue
@@ -3,17 +3,17 @@
     <h1 v-if="mode === 'aside'" class="name">
       <span>{{ artist.name }}</span>
       <button :title="`Play all songs by ${artist.name}`" class="control" type="button" @click.prevent="play">
-        <icon :icon="faCirclePlay" size="xl"/>
+        <icon :icon="faCirclePlay" size="xl" />
       </button>
     </h1>
 
     <main>
-      <ArtistThumbnail v-if="mode === 'aside'" :entity="artist"/>
+      <ArtistThumbnail v-if="mode === 'aside'" :entity="artist" />
 
       <template v-if="info">
         <div v-if="info.bio?.summary" class="bio">
-          <div v-if="showSummary" class="summary" data-testid="summary" v-html="info.bio.summary"/>
-          <div v-if="showFull" class="full" data-testid="full" v-html="info.bio.full"/>
+          <div v-if="showSummary" class="summary" data-testid="summary" v-html="info.bio.summary" />
+          <div v-if="showFull" class="full" data-testid="full" v-html="info.bio.full" />
 
           <button v-if="showSummary" class="more" @click.prevent="showingFullBio = true">
             Full Bio
diff --git a/resources/assets/js/components/artist/__snapshots__/ArtistCard.spec.ts.snap b/resources/assets/js/components/artist/__snapshots__/ArtistCard.spec.ts.snap
index 2e58d8f0..8bc73ea9 100644
--- a/resources/assets/js/components/artist/__snapshots__/ArtistCard.spec.ts.snap
+++ b/resources/assets/js/components/artist/__snapshots__/ArtistCard.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`renders 1`] = `
 <article class="item full" draggable="true" tabindex="0" title="Led Zeppelin" data-v-f01bdc56=""><br data-testid="thumbnail" entity="[object Object]" data-v-f01bdc56="">
   <footer data-v-f01bdc56="">
     <div class="name" data-v-f01bdc56=""><a href="#/artist/42" class="text-normal" data-testid="name">Led Zeppelin</a></div>
-    <p class="meta" data-v-f01bdc56=""><a title="Shuffle all songs by Led Zeppelin" class="shuffle-artist" href="" role="button"> Shuffle </a><a title="Download all songs by Led Zeppelin" class="download-artist" href="" role="button"> Download </a></p>
+    <p class="meta" data-v-f01bdc56=""><a title="Shuffle all songs by Led Zeppelin" class="shuffle-artist" role="button"> Shuffle </a><a title="Download all songs by Led Zeppelin" class="download-artist" role="button"> Download </a></p>
   </footer>
 </article>
 `;
diff --git a/resources/assets/js/components/auth/LoginForm.spec.ts b/resources/assets/js/components/auth/LoginForm.spec.ts
index bf7c1e46..d5504339 100644
--- a/resources/assets/js/components/auth/LoginForm.spec.ts
+++ b/resources/assets/js/components/auth/LoginForm.spec.ts
@@ -1,11 +1,11 @@
 import { screen } from '@testing-library/vue'
-import { expect, it } from 'vitest'
+import { expect, it, Mock } from 'vitest'
 import { userStore } from '@/stores'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import LoginFrom from './LoginForm.vue'
 
 new class extends UnitTestCase {
-  private async submitForm (loginMock: SpyInstanceFn) {
+  private async submitForm (loginMock: Mock) {
     const rendered = this.render(LoginFrom)
 
     await this.type(screen.getByPlaceholderText('Email Address'), 'john@doe.com')
diff --git a/resources/assets/js/components/layout/ModalWrapper.vue b/resources/assets/js/components/layout/ModalWrapper.vue
index 7e083178..f90c741d 100644
--- a/resources/assets/js/components/layout/ModalWrapper.vue
+++ b/resources/assets/js/components/layout/ModalWrapper.vue
@@ -1,15 +1,15 @@
 <template>
   <dialog ref="dialog" class="text-primary bg-primary" @cancel.prevent>
-    <Component :is="modalNameToComponentMap[activeModalName]" v-if="activeModalName" @close="close"/>
+    <Component :is="modalNameToComponentMap[activeModalName]" v-if="activeModalName" @close="close" />
   </dialog>
 </template>
 
 <script lang="ts" setup>
-import { ComponentPublicInstance, defineAsyncComponent, ref, watch } from 'vue'
+import { defineAsyncComponent, ref, watch } from 'vue'
 import { arrayify, eventBus, provideReadonly } from '@/utils'
 import { ModalContextKey } from '@/symbols'
 
-const modalNameToComponentMap: Record<string, ComponentPublicInstance> = {
+const modalNameToComponentMap = {
   'create-playlist-form': defineAsyncComponent(() => import('@/components/playlist/CreatePlaylistForm.vue')),
   'edit-playlist-form': defineAsyncComponent(() => import('@/components/playlist/EditPlaylistForm.vue')),
   'create-smart-playlist-form': defineAsyncComponent(() => import('@/components/playlist/smart-playlist/CreateSmartPlaylistForm.vue')),
diff --git a/resources/assets/js/components/layout/app-footer/AudioPlayer.vue b/resources/assets/js/components/layout/app-footer/AudioPlayer.vue
index 925aabda..463dd99d 100644
--- a/resources/assets/js/components/layout/app-footer/AudioPlayer.vue
+++ b/resources/assets/js/components/layout/app-footer/AudioPlayer.vue
@@ -3,7 +3,7 @@
     A very thin wrapper around Plyr, extracted as a standalone component for easier styling and to work better with HMR.
   -->
   <div class="plyr">
-    <audio controls crossorigin="anonymous"></audio>
+    <audio controls crossorigin="anonymous" />
   </div>
 </template>
 
diff --git a/resources/assets/js/components/layout/app-footer/FooterExtraControls.vue b/resources/assets/js/components/layout/app-footer/FooterExtraControls.vue
index 29a0c8d9..19fdcd0a 100644
--- a/resources/assets/js/components/layout/app-footer/FooterExtraControls.vue
+++ b/resources/assets/js/components/layout/app-footer/FooterExtraControls.vue
@@ -8,7 +8,7 @@
         href="/#/visualizer"
         title="Show the visualizer"
       >
-        <icon :icon="faBolt"/>
+        <icon :icon="faBolt" />
       </a>
 
       <button
@@ -20,10 +20,10 @@
         type="button"
         @click.prevent="showEqualizer"
       >
-        <icon :icon="faSliders"/>
+        <icon :icon="faSliders" />
       </button>
 
-      <Volume/>
+      <Volume />
     </div>
   </div>
 </template>
diff --git a/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.spec.ts b/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.spec.ts
index 8196409d..f7e00fe9 100644
--- a/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.spec.ts
+++ b/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.spec.ts
@@ -4,14 +4,14 @@ import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import { CurrentSongKey } from '@/symbols'
 import { playbackService } from '@/services'
-import FooterPlaybackControls from './FooterPlaybackControls.vue'
 import { screen } from '@testing-library/vue'
+import FooterPlaybackControls from './FooterPlaybackControls.vue'
 
 new class extends UnitTestCase {
   private renderComponent (song?: Song | null) {
     if (song === undefined) {
       song = factory<Song>('song', {
-        id: 42,
+        id: '00000000-0000-0000-0000-000000000000',
         title: 'Fahrstuhl to Heaven',
         artist_name: 'Led Zeppelin',
         artist_id: 3,
diff --git a/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue b/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue
index 474f3dd6..de6a3ca4 100644
--- a/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue
+++ b/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="playback-controls" data-testid="footer-middle-pane">
     <div class="buttons">
-      <LikeButton v-if="song" :song="song" class="like-btn"/>
-      <button type="button" v-else/> <!-- a placeholder to maintain the flex layout -->
+      <LikeButton v-if="song" :song="song" class="like-btn" />
+      <button v-else type="button" /> <!-- a placeholder to maintain the flex layout -->
 
       <button type="button" title="Play previous song" @click.prevent="playPrev">
-        <icon :icon="faStepBackward"/>
+        <icon :icon="faStepBackward" />
       </button>
 
-      <PlayButton/>
+      <PlayButton />
 
       <button type="button" title="Play next song" @click.prevent="playNext">
-        <icon :icon="faStepForward"/>
+        <icon :icon="faStepForward" />
       </button>
 
-      <RepeatModeSwitch class="repeat-mode-btn"/>
+      <RepeatModeSwitch class="repeat-mode-btn" />
     </div>
   </div>
 </template>
diff --git a/resources/assets/js/components/layout/app-footer/FooterSongInfo.spec.ts b/resources/assets/js/components/layout/app-footer/FooterSongInfo.spec.ts
index 424848eb..8d273a80 100644
--- a/resources/assets/js/components/layout/app-footer/FooterSongInfo.spec.ts
+++ b/resources/assets/js/components/layout/app-footer/FooterSongInfo.spec.ts
@@ -1,9 +1,9 @@
 import { expect, it } from 'vitest'
+import { ref } from 'vue'
 import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import FooterSongInfo from './FooterSongInfo.vue'
-import { ref } from 'vue'
 import { CurrentSongKey } from '@/symbols'
+import FooterSongInfo from './FooterSongInfo.vue'
 
 new class extends UnitTestCase {
   protected test () {
@@ -21,7 +21,7 @@ new class extends UnitTestCase {
       expect(this.render(FooterSongInfo, {
         global: {
           provide: {
-            [CurrentSongKey]: ref(song)
+            [<symbol>CurrentSongKey]: ref(song)
           }
         }
       }).html()).toMatchSnapshot()
diff --git a/resources/assets/js/components/layout/app-footer/FooterSongInfo.vue b/resources/assets/js/components/layout/app-footer/FooterSongInfo.vue
index 796d8bbe..340d4a83 100644
--- a/resources/assets/js/components/layout/app-footer/FooterSongInfo.vue
+++ b/resources/assets/js/components/layout/app-footer/FooterSongInfo.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="song-info" :class="{ playing: song?.playback_state === 'Playing' }">
-    <span :style="{ backgroundImage: `url('${cover}')` }" class="album-thumb"/>
-    <div class="meta" v-if="song">
+    <span :style="{ backgroundImage: `url('${cover}')` }" class="album-thumb" />
+    <div v-if="song" class="meta">
       <h3 class="title">{{ song.title }}</h3>
       <a :href="`/#/artist/${song.artist_id}`" class="artist">{{ song.artist_name }}</a>
     </div>
diff --git a/resources/assets/js/components/layout/app-footer/index.vue b/resources/assets/js/components/layout/app-footer/index.vue
index 741b1943..0c53ccd5 100644
--- a/resources/assets/js/components/layout/app-footer/index.vue
+++ b/resources/assets/js/components/layout/app-footer/index.vue
@@ -1,11 +1,11 @@
 <template>
   <footer id="mainFooter" @contextmenu.prevent="requestContextMenu">
-    <AudioPlayer/>
+    <AudioPlayer />
 
     <div class="wrapper">
-      <SongInfo/>
-      <PlaybackControls/>
-      <ExtraControls/>
+      <SongInfo />
+      <PlaybackControls />
+      <ExtraControls />
     </div>
   </footer>
 </template>
diff --git a/resources/assets/js/components/layout/main-wrapper/ExtraPanel.vue b/resources/assets/js/components/layout/main-wrapper/ExtraPanel.vue
index ea53cddb..04fcc9c5 100644
--- a/resources/assets/js/components/layout/main-wrapper/ExtraPanel.vue
+++ b/resources/assets/js/components/layout/main-wrapper/ExtraPanel.vue
@@ -2,8 +2,8 @@
   <div id="extraPanel" :class="{ 'showing-pane': activeTab }">
     <div class="controls">
       <div class="top">
-        <SidebarMenuToggleButton class="burger"/>
-        <ExtraPanelTabHeader v-if="song" v-model="activeTab"/>
+        <SidebarMenuToggleButton class="burger" />
+        <ExtraPanelTabHeader v-if="song" v-model="activeTab" />
       </div>
 
       <div class="bottom">
@@ -13,19 +13,19 @@
           type="button"
           @click.prevent="openAboutKoelModal"
         >
-          <icon :icon="faInfoCircle"/>
-          <span v-if="shouldNotifyNewVersion" class="new-version-notification"/>
+          <icon :icon="faInfoCircle" />
+          <span v-if="shouldNotifyNewVersion" class="new-version-notification" />
         </button>
 
         <button v-koel-tooltip.left title="Log out" type="button" @click.prevent="logout">
-          <icon :icon="faArrowRightFromBracket"/>
+          <icon :icon="faArrowRightFromBracket" />
         </button>
 
-        <ProfileAvatar @click="onProfileLinkClick"/>
+        <ProfileAvatar @click="onProfileLinkClick" />
       </div>
     </div>
 
-    <div class="panes" v-if="song" v-show="activeTab">
+    <div v-if="song" v-show="activeTab" class="panes">
       <div
         v-show="activeTab === 'Lyrics'"
         id="extraPanelLyrics"
@@ -33,7 +33,7 @@
         role="tabpanel"
         tabindex="0"
       >
-        <LyricsPane :song="song"/>
+        <LyricsPane :song="song" />
       </div>
 
       <div
@@ -43,7 +43,7 @@
         role="tabpanel"
         tabindex="0"
       >
-        <ArtistInfo v-if="artist" :artist="artist" mode="aside"/>
+        <ArtistInfo v-if="artist" :artist="artist" mode="aside" />
         <span v-else>Loading…</span>
       </div>
 
@@ -54,19 +54,19 @@
         role="tabpanel"
         tabindex="0"
       >
-        <AlbumInfo v-if="album" :album="album" mode="aside"/>
+        <AlbumInfo v-if="album" :album="album" mode="aside" />
         <span v-else>Loading…</span>
       </div>
 
       <div
         v-show="activeTab === 'YouTube'"
-        data-testid="extra-panel-youtube"
         id="extraPanelYouTube"
+        data-testid="extra-panel-youtube"
         aria-labelledby="extraTabYouTube"
         role="tabpanel"
         tabindex="0"
       >
-        <YouTubeVideoList v-if="useYouTube && song" :song="song"/>
+        <YouTubeVideoList v-if="useYouTube && song" :song="song" />
       </div>
     </div>
   </div>
@@ -97,16 +97,16 @@ const { shouldNotifyNewVersion } = useNewVersionNotification()
 const song = requireInjection(CurrentSongKey, ref(null))
 const activeTab = ref<ExtraPanelTab | null>(null)
 
-const artist = ref<Artist | null>(null)
-const album = ref<Album | null>(null)
+const artist = ref<Artist>()
+const album = ref<Album>()
 
 watch(song, song => song && fetchSongInfo(song))
 watch(activeTab, tab => (preferenceStore.activeExtraPanelTab = tab))
 
 const fetchSongInfo = async (_song: Song) => {
   song.value = _song
-  artist.value = null
-  album.value = null
+  artist.value = undefined
+  album.value = undefined
 
   try {
     artist.value = await artistStore.resolve(_song.artist_id)
diff --git a/resources/assets/js/components/layout/main-wrapper/MainContent.vue b/resources/assets/js/components/layout/main-wrapper/MainContent.vue
index 9d79a0ae..5e9250c2 100644
--- a/resources/assets/js/components/layout/main-wrapper/MainContent.vue
+++ b/resources/assets/js/components/layout/main-wrapper/MainContent.vue
@@ -5,30 +5,30 @@
       lists), so we use v-show.
       For those that don't need to maintain their own UI state, we use v-if and enjoy some code-splitting juice.
     -->
-    <VisualizerScreen v-if="screen === 'Visualizer'"/>
-    <AlbumArtOverlay v-if="showAlbumArtOverlay && currentSong" :album="currentSong?.album_id"/>
+    <VisualizerScreen v-if="screen === 'Visualizer'" />
+    <AlbumArtOverlay v-if="showAlbumArtOverlay && currentSong" :album="currentSong?.album_id" />
 
-    <HomeScreen v-show="screen === 'Home'"/>
-    <QueueScreen v-show="screen === 'Queue'"/>
-    <AllSongsScreen v-show="screen === 'Songs'"/>
-    <AlbumListScreen v-show="screen === 'Albums'"/>
-    <ArtistListScreen v-show="screen === 'Artists'"/>
-    <PlaylistScreen v-show="screen === 'Playlist'"/>
-    <FavoritesScreen v-show="screen === 'Favorites'"/>
-    <RecentlyPlayedScreen v-show="screen === 'RecentlyPlayed'"/>
-    <UploadScreen v-show="screen === 'Upload'"/>
-    <SearchExcerptsScreen v-show="screen === 'Search.Excerpt'"/>
-    <GenreScreen v-show="screen === 'Genre'"/>
+    <HomeScreen v-show="screen === 'Home'" />
+    <QueueScreen v-show="screen === 'Queue'" />
+    <AllSongsScreen v-show="screen === 'Songs'" />
+    <AlbumListScreen v-show="screen === 'Albums'" />
+    <ArtistListScreen v-show="screen === 'Artists'" />
+    <PlaylistScreen v-show="screen === 'Playlist'" />
+    <FavoritesScreen v-show="screen === 'Favorites'" />
+    <RecentlyPlayedScreen v-show="screen === 'RecentlyPlayed'" />
+    <UploadScreen v-show="screen === 'Upload'" />
+    <SearchExcerptsScreen v-show="screen === 'Search.Excerpt'" />
+    <GenreScreen v-show="screen === 'Genre'" />
 
-    <GenreListScreen v-if="screen === 'Genres'"/>
-    <SearchSongResultsScreen v-if="screen === 'Search.Songs'"/>
-    <AlbumScreen v-if="screen === 'Album'"/>
-    <ArtistScreen v-if="screen === 'Artist'"/>
-    <SettingsScreen v-if="screen === 'Settings'"/>
-    <ProfileScreen v-if="screen === 'Profile'"/>
-    <UserListScreen v-if="screen === 'Users'"/>
-    <YoutubeScreen v-if="useYouTube" v-show="screen === 'YouTube'"/>
-    <NotFoundScreen v-if="screen === '404'"/>
+    <GenreListScreen v-if="screen === 'Genres'" />
+    <SearchSongResultsScreen v-if="screen === 'Search.Songs'" />
+    <AlbumScreen v-if="screen === 'Album'" />
+    <ArtistScreen v-if="screen === 'Artist'" />
+    <SettingsScreen v-if="screen === 'Settings'" />
+    <ProfileScreen v-if="screen === 'Profile'" />
+    <UserListScreen v-if="screen === 'Users'" />
+    <YoutubeScreen v-if="useYouTube" v-show="screen === 'YouTube'" />
+    <NotFoundScreen v-if="screen === '404'" />
   </section>
 </template>
 
diff --git a/resources/assets/js/components/layout/main-wrapper/Sidebar.vue b/resources/assets/js/components/layout/main-wrapper/Sidebar.vue
index 5e36473f..553d8304 100644
--- a/resources/assets/js/components/layout/main-wrapper/Sidebar.vue
+++ b/resources/assets/js/components/layout/main-wrapper/Sidebar.vue
@@ -1,13 +1,13 @@
 <template>
-  <nav id="sidebar" :class="{ showing: mobileShowing }" class="side side-nav" v-koel-clickaway="closeIfMobile">
-    <SearchForm/>
+  <nav id="sidebar" v-koel-clickaway="closeIfMobile" :class="{ showing: mobileShowing }" class="side side-nav">
+    <SearchForm />
     <section class="music">
       <h1>Your Music</h1>
 
       <ul class="menu">
         <li>
           <a :class="['home', activeScreen === 'Home' ? 'active' : '']" href="#/home">
-            <icon :icon="faHome" fixed-width/>
+            <icon :icon="faHome" fixed-width />
             Home
           </a>
         </li>
@@ -18,44 +18,44 @@
           @drop="onQueueDrop"
         >
           <a :class="['queue', activeScreen === 'Queue' ? 'active' : '']" href="#/queue">
-            <icon :icon="faListOl" fixed-width/>
+            <icon :icon="faListOl" fixed-width />
             Current Queue
           </a>
         </li>
         <li>
           <a :class="['songs', activeScreen === 'Songs' ? 'active' : '']" href="#/songs">
-            <icon :icon="faMusic" fixed-width/>
+            <icon :icon="faMusic" fixed-width />
             All Songs
           </a>
         </li>
         <li>
           <a :class="['albums', activeScreen === 'Albums' ? 'active' : '']" href="#/albums">
-            <icon :icon="faCompactDisc" fixed-width/>
+            <icon :icon="faCompactDisc" fixed-width />
             Albums
           </a>
         </li>
         <li>
           <a :class="['artists', activeScreen === 'Artists' ? 'active' : '']" href="#/artists">
-            <icon :icon="faMicrophone" fixed-width/>
+            <icon :icon="faMicrophone" fixed-width />
             Artists
           </a>
         </li>
         <li>
           <a :class="['genres', activeScreen === 'Genres' ? 'active' : '']" href="#/genres">
-            <icon :icon="faTags" fixed-width/>
+            <icon :icon="faTags" fixed-width />
             Genres
           </a>
         </li>
         <li v-if="useYouTube">
           <a :class="['youtube', activeScreen === 'YouTube' ? 'active' : '']" href="#/youtube">
-            <icon :icon="faYoutube" fixed-width/>
+            <icon :icon="faYoutube" fixed-width />
             YouTube Video
           </a>
         </li>
       </ul>
     </section>
 
-    <PlaylistList/>
+    <PlaylistList />
 
     <section v-if="isAdmin" class="manage">
       <h1>Manage</h1>
@@ -63,19 +63,19 @@
       <ul class="menu">
         <li>
           <a :class="['settings', activeScreen === 'Settings' ? 'active' : '']" href="#/settings">
-            <icon :icon="faTools" fixed-width/>
+            <icon :icon="faTools" fixed-width />
             Settings
           </a>
         </li>
         <li>
           <a :class="['upload', activeScreen === 'Upload' ? 'active' : '']" href="#/upload">
-            <icon :icon="faUpload" fixed-width/>
+            <icon :icon="faUpload" fixed-width />
             Upload
           </a>
         </li>
         <li>
           <a :class="['users', activeScreen === 'Users' ? 'active' : '']" href="#/users">
-            <icon :icon="faUsers" fixed-width/>
+            <icon :icon="faUsers" fixed-width />
             Users
           </a>
         </li>
diff --git a/resources/assets/js/components/layout/main-wrapper/index.vue b/resources/assets/js/components/layout/main-wrapper/index.vue
index bd2cb621..32d7c156 100644
--- a/resources/assets/js/components/layout/main-wrapper/index.vue
+++ b/resources/assets/js/components/layout/main-wrapper/index.vue
@@ -1,16 +1,16 @@
 <template>
   <div id="mainWrapper">
-    <Sidebar/>
-    <MainContent/>
-    <ExtraPanel/>
-    <ModalWrapper/>
+    <SideBar />
+    <MainContent />
+    <ExtraPanel />
+    <ModalWrapper />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { defineAsyncComponent } from 'vue'
 
-import Sidebar from '@/components/layout/main-wrapper/Sidebar.vue'
+import SideBar from '@/components/layout/main-wrapper/SideBar.vue'
 import MainContent from '@/components/layout/main-wrapper/MainContent.vue'
 import ExtraPanel from '@/components/layout/main-wrapper/ExtraPanel.vue'
 
diff --git a/resources/assets/js/components/meta/AboutKoelModal.vue b/resources/assets/js/components/meta/AboutKoelModal.vue
index 6b06f932..4adefef6 100644
--- a/resources/assets/js/components/meta/AboutKoelModal.vue
+++ b/resources/assets/js/components/meta/AboutKoelModal.vue
@@ -18,7 +18,8 @@
         <a href="https://github.com/phanan" rel="noopener" target="_blank">Phan An</a>
         and quite a few
         <a href="https://github.com/koel/core/graphs/contributors" rel="noopener" target="_blank">awesome</a>&nbsp;<a
-        href="https://github.com/koel/koel/graphs/contributors" rel="noopener" target="_blank">contributors</a>.
+          href="https://github.com/koel/koel/graphs/contributors" rel="noopener" target="_blank"
+        >contributors</a>.
       </p>
 
       <div v-if="credits" class="credit-wrapper" data-testid="demo-credits">
@@ -30,7 +31,7 @@
         </ul>
       </div>
 
-      <SponsorList/>
+      <SponsorList />
 
       <p>
         Loving Koel? Please consider supporting its development via
diff --git a/resources/assets/js/components/meta/SupportKoel.vue b/resources/assets/js/components/meta/SupportKoel.vue
index 2600e4db..780ca4de 100644
--- a/resources/assets/js/components/meta/SupportKoel.vue
+++ b/resources/assets/js/components/meta/SupportKoel.vue
@@ -7,7 +7,7 @@
       <a href="https://opencollective.com/koel" rel="noopener" target="_blank">OpenCollective</a>.
     </p>
     <button type="button" @click.prevent="close">Hide</button>
-    <span class="sep"></span>
+    <span class="sep" />
     <button type="button" @click.prevent="stopBugging">
       Don't bug me again
     </button>
diff --git a/resources/assets/js/components/playlist/CreateNewPlaylistContextMenu.spec.ts b/resources/assets/js/components/playlist/CreateNewPlaylistContextMenu.spec.ts
index bed70c24..beb86888 100644
--- a/resources/assets/js/components/playlist/CreateNewPlaylistContextMenu.spec.ts
+++ b/resources/assets/js/components/playlist/CreateNewPlaylistContextMenu.spec.ts
@@ -7,7 +7,7 @@ import CreateNewPlaylistContextMenu from './CreateNewPlaylistContextMenu.vue'
 
 new class extends UnitTestCase {
   private async renderComponent () {
-    await this.render(CreateNewPlaylistContextMenu)
+    this.render(CreateNewPlaylistContextMenu)
     eventBus.emit('CREATE_NEW_PLAYLIST_CONTEXT_MENU_REQUESTED', { pageX: 420, pageY: 42 } as MouseEvent)
     await this.tick(2)
   }
diff --git a/resources/assets/js/components/playlist/CreatePlaylistFolderForm.spec.ts b/resources/assets/js/components/playlist/CreatePlaylistFolderForm.spec.ts
index bb496015..05e12085 100644
--- a/resources/assets/js/components/playlist/CreatePlaylistFolderForm.spec.ts
+++ b/resources/assets/js/components/playlist/CreatePlaylistFolderForm.spec.ts
@@ -11,7 +11,7 @@ new class extends UnitTestCase {
       const storeMock = this.mock(playlistFolderStore, 'store')
         .mockResolvedValue(factory<PlaylistFolder>('playlist-folder'))
 
-      await this.render(CreatePlaylistFolderForm)
+      this.render(CreatePlaylistFolderForm)
 
       await this.type(screen.getByPlaceholderText('Folder name'), 'My folder')
       await this.user.click(screen.getByRole('button', { name: 'Save' }))
diff --git a/resources/assets/js/components/playlist/CreatePlaylistForm.vue b/resources/assets/js/components/playlist/CreatePlaylistForm.vue
index 51581a74..08f740ab 100644
--- a/resources/assets/js/components/playlist/CreatePlaylistForm.vue
+++ b/resources/assets/js/components/playlist/CreatePlaylistForm.vue
@@ -20,8 +20,8 @@
         <label class="folder">
           Folder
           <select v-model="folderId">
-            <option :value="null"></option>
-            <option v-for="folder in folders" :value="folder.id">{{ folder.name }}</option>
+            <option :value="null" />
+            <option v-for="folder in folders" :key="folder.id" :value="folder.id">{{ folder.name }}</option>
           </select>
         </label>
       </div>
diff --git a/resources/assets/js/components/playlist/EditPlaylistForm.vue b/resources/assets/js/components/playlist/EditPlaylistForm.vue
index 1265e635..eac730a7 100644
--- a/resources/assets/js/components/playlist/EditPlaylistForm.vue
+++ b/resources/assets/js/components/playlist/EditPlaylistForm.vue
@@ -21,8 +21,8 @@
         <label class="folder">
           Folder
           <select v-model="folderId">
-            <option :value="null"></option>
-            <option v-for="folder in folders" :value="folder.id">{{ folder.name }}</option>
+            <option :value="null" />
+            <option v-for="folder in folders" :key="folder.id" :value="folder.id">{{ folder.name }}</option>
           </select>
         </label>
       </div>
diff --git a/resources/assets/js/components/playlist/PlaylistContextMenu.spec.ts b/resources/assets/js/components/playlist/PlaylistContextMenu.spec.ts
index f58a96e9..685acb22 100644
--- a/resources/assets/js/components/playlist/PlaylistContextMenu.spec.ts
+++ b/resources/assets/js/components/playlist/PlaylistContextMenu.spec.ts
@@ -7,8 +7,8 @@ import PlaylistContextMenu from './PlaylistContextMenu.vue'
 
 new class extends UnitTestCase {
   private async renderComponent (playlist: Playlist) {
-    await this.render(PlaylistContextMenu)
-    eventBus.emit('PLAYLIST_CONTEXT_MENU_REQUESTED', { pageX: 420, pageY: 42 }, playlist)
+    this.render(PlaylistContextMenu)
+    eventBus.emit('PLAYLIST_CONTEXT_MENU_REQUESTED', { pageX: 420, pageY: 42 } as MouseEvent, playlist)
     await this.tick(2)
   }
 
diff --git a/resources/assets/js/components/playlist/PlaylistContextMenu.vue b/resources/assets/js/components/playlist/PlaylistContextMenu.vue
index 1f3dd8d8..432ef23b 100644
--- a/resources/assets/js/components/playlist/PlaylistContextMenu.vue
+++ b/resources/assets/js/components/playlist/PlaylistContextMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <ContextMenuBase ref="base">
-    <li :data-testid="`playlist-context-menu-edit-${playlist.id}`" @click="editPlaylist">Edit</li>
-    <li :data-testid="`playlist-context-menu-delete-${playlist.id}`" @click="deletePlaylist">Delete</li>
+    <li @click="editPlaylist">Edit</li>
+    <li @click="deletePlaylist">Delete</li>
   </ContextMenuBase>
 </template>
 
@@ -10,14 +10,14 @@ import { ref } from 'vue'
 import { eventBus } from '@/utils'
 import { useContextMenu } from '@/composables'
 
-const { context, base, ContextMenuBase, open, trigger } = useContextMenu()
+const { base, ContextMenuBase, open, trigger } = useContextMenu()
 const playlist = ref<Playlist>()
 
-const editPlaylist = () => trigger(() => eventBus.emit('MODAL_SHOW_EDIT_PLAYLIST_FORM', playlist.value))
-const deletePlaylist = () => trigger(() => eventBus.emit('PLAYLIST_DELETE', playlist.value))
+const editPlaylist = () => trigger(() => eventBus.emit('MODAL_SHOW_EDIT_PLAYLIST_FORM', playlist.value!))
+const deletePlaylist = () => trigger(() => eventBus.emit('PLAYLIST_DELETE', playlist.value!))
 
 eventBus.on('PLAYLIST_CONTEXT_MENU_REQUESTED', async (event, _playlist) => {
   playlist.value = _playlist
-  await open(event.pageY, event.pageX, { playlist })
+  await open(event.pageY, event.pageX)
 })
 </script>
diff --git a/resources/assets/js/components/playlist/PlaylistFolderContextMenu.spec.ts b/resources/assets/js/components/playlist/PlaylistFolderContextMenu.spec.ts
index 19c40d89..786152cc 100644
--- a/resources/assets/js/components/playlist/PlaylistFolderContextMenu.spec.ts
+++ b/resources/assets/js/components/playlist/PlaylistFolderContextMenu.spec.ts
@@ -9,8 +9,8 @@ import PlaylistFolderContextMenu from './PlaylistFolderContextMenu.vue'
 
 new class extends UnitTestCase {
   private async renderComponent (folder: PlaylistFolder) {
-    await this.render(PlaylistFolderContextMenu)
-    eventBus.emit('PLAYLIST_FOLDER_CONTEXT_MENU_REQUESTED', { pageX: 420, pageY: 42 }, folder)
+    this.render(PlaylistFolderContextMenu)
+    eventBus.emit('PLAYLIST_FOLDER_CONTEXT_MENU_REQUESTED', { pageX: 420, pageY: 42 } as MouseEvent, folder)
     await this.tick(2)
   }
 
diff --git a/resources/assets/js/components/playlist/PlaylistFolderContextMenu.vue b/resources/assets/js/components/playlist/PlaylistFolderContextMenu.vue
index 0aede9f0..ec615c53 100644
--- a/resources/assets/js/components/playlist/PlaylistFolderContextMenu.vue
+++ b/resources/assets/js/components/playlist/PlaylistFolderContextMenu.vue
@@ -4,11 +4,11 @@
       <template v-if="playable">
         <li @click="play">Play All</li>
         <li @click="shuffle">Shuffle All</li>
-        <li class="separator"/>
+        <li class="separator" />
       </template>
       <li @click="createPlaylist">Create Playlist</li>
       <li @click="createSmartPlaylist">Create Smart Playlist</li>
-      <li class="separator"/>
+      <li class="separator" />
       <li @click="rename">Rename</li>
       <li @click="destroy">Delete</li>
     </template>
@@ -23,7 +23,7 @@ import { playbackService } from '@/services'
 import { useContextMenu, useRouter } from '@/composables'
 
 const { go } = useRouter()
-const { context, base, ContextMenuBase, open, trigger } = useContextMenu()
+const { base, ContextMenuBase, open, trigger } = useContextMenu()
 
 const folder = ref<PlaylistFolder>()
 
@@ -40,13 +40,13 @@ const shuffle = () => trigger(async () => {
   go('queue')
 })
 
-const createPlaylist = () => trigger(() => eventBus.emit('MODAL_SHOW_CREATE_PLAYLIST_FORM', folder.value))
-const createSmartPlaylist = () => trigger(() => eventBus.emit('MODAL_SHOW_CREATE_SMART_PLAYLIST_FORM', folder.value))
-const rename = () => trigger(() => eventBus.emit('MODAL_SHOW_EDIT_PLAYLIST_FOLDER_FORM', folder.value))
-const destroy = () => trigger(() => eventBus.emit('PLAYLIST_FOLDER_DELETE', folder.value))
+const createPlaylist = () => trigger(() => eventBus.emit('MODAL_SHOW_CREATE_PLAYLIST_FORM', folder.value!))
+const createSmartPlaylist = () => trigger(() => eventBus.emit('MODAL_SHOW_CREATE_SMART_PLAYLIST_FORM', folder.value!))
+const rename = () => trigger(() => eventBus.emit('MODAL_SHOW_EDIT_PLAYLIST_FOLDER_FORM', folder.value!))
+const destroy = () => trigger(() => eventBus.emit('PLAYLIST_FOLDER_DELETE', folder.value!))
 
 eventBus.on('PLAYLIST_FOLDER_CONTEXT_MENU_REQUESTED', async (e, _folder) => {
   folder.value = _folder
-  await open(e.pageY, e.pageX, { folder })
+  await open(e.pageY, e.pageX)
 })
 </script>
diff --git a/resources/assets/js/components/playlist/PlaylistFolderSidebarItem.vue b/resources/assets/js/components/playlist/PlaylistFolderSidebarItem.vue
index 2767621e..52e1044a 100644
--- a/resources/assets/js/components/playlist/PlaylistFolderSidebarItem.vue
+++ b/resources/assets/js/components/playlist/PlaylistFolderSidebarItem.vue
@@ -2,18 +2,18 @@
   <li
     class="playlist-folder"
     :class="{ droppable }"
+    tabindex="0"
     @dragleave="onDragLeave"
     @dragover="onDragOver"
     @drop="onDrop"
-    tabindex="0"
   >
     <a @click.prevent="toggle" @contextmenu.prevent="onContextMenu">
-      <icon :icon="opened ? faFolderOpen : faFolder" fixed-width/>
+      <icon :icon="opened ? faFolderOpen : faFolder" fixed-width />
       {{ folder.name }}
     </a>
 
     <ul v-if="playlistsInFolder.length" v-show="opened">
-      <PlaylistSidebarItem v-for="playlist in playlistsInFolder" :key="playlist.id" :list="playlist" class="sub-item"/>
+      <PlaylistSidebarItem v-for="playlist in playlistsInFolder" :key="playlist.id" :list="playlist" class="sub-item" />
     </ul>
 
     <div
diff --git a/resources/assets/js/components/playlist/PlaylistSidebarList.vue b/resources/assets/js/components/playlist/PlaylistSidebarList.vue
index 0bd1b7dc..bf74d58a 100644
--- a/resources/assets/js/components/playlist/PlaylistSidebarList.vue
+++ b/resources/assets/js/components/playlist/PlaylistSidebarList.vue
@@ -13,10 +13,10 @@
     </h1>
 
     <ul>
-      <PlaylistSidebarItem :list="{ name: 'Favorites', songs: favorites }"/>
-      <PlaylistSidebarItem :list="{ name: 'Recently Played', songs: [] }"/>
-      <PlaylistFolderSidebarItem v-for="folder in folders" :key="folder.id" :folder="folder"/>
-      <PlaylistSidebarItem v-for="playlist in orphanPlaylists" :key="playlist.id" :list="playlist"/>
+      <PlaylistSidebarItem :list="{ name: 'Favorites', songs: favorites }" />
+      <PlaylistSidebarItem :list="{ name: 'Recently Played', songs: [] }" />
+      <PlaylistFolderSidebarItem v-for="folder in folders" :key="folder.id" :folder="folder" />
+      <PlaylistSidebarItem v-for="playlist in orphanPlaylists" :key="playlist.id" :list="playlist" />
     </ul>
   </section>
 </template>
diff --git a/resources/assets/js/components/playlist/smart-playlist/CreateSmartPlaylistForm.vue b/resources/assets/js/components/playlist/smart-playlist/CreateSmartPlaylistForm.vue
index 66945a88..89ab31ce 100644
--- a/resources/assets/js/components/playlist/smart-playlist/CreateSmartPlaylistForm.vue
+++ b/resources/assets/js/components/playlist/smart-playlist/CreateSmartPlaylistForm.vue
@@ -14,8 +14,8 @@
           <label class="folder">
             Folder
             <select v-model="folderId">
-              <option :value="null"></option>
-              <option v-for="folder in folders" :value="folder.id">{{ folder.name }}</option>
+              <option :value="null" />
+              <option v-for="folder in folders" :key="folder.id" :value="folder.id">{{ folder.name }}</option>
             </select>
           </label>
         </div>
@@ -25,11 +25,11 @@
             v-for="(group, index) in collectedRuleGroups"
             :key="group.id"
             :group="group"
-            :isFirstGroup="index === 0"
+            :is-first-group="index === 0"
             @input="onGroupChanged"
           />
           <Btn class="btn-add-group" green small title="Add a new group" uppercase @click.prevent="addGroup">
-            <icon :icon="faPlus"/>
+            <icon :icon="faPlus" />
             Group
           </Btn>
         </div>
diff --git a/resources/assets/js/components/playlist/smart-playlist/EditSmartPlaylistForm.vue b/resources/assets/js/components/playlist/smart-playlist/EditSmartPlaylistForm.vue
index 22a04d4c..eb46f650 100644
--- a/resources/assets/js/components/playlist/smart-playlist/EditSmartPlaylistForm.vue
+++ b/resources/assets/js/components/playlist/smart-playlist/EditSmartPlaylistForm.vue
@@ -20,8 +20,8 @@
           <label class="folder">
             Folder
             <select v-model="mutablePlaylist.folder_id">
-              <option :value="null"></option>
-              <option v-for="folder in folders" :value="folder.id">{{ folder.name }}</option>
+              <option :value="null" />
+              <option v-for="folder in folders" :key="folder.id" :value="folder.id">{{ folder.name }}</option>
             </select>
           </label>
         </div>
@@ -31,11 +31,11 @@
             v-for="(group, index) in mutablePlaylist.rules"
             :key="group.id"
             :group="group"
-            :isFirstGroup="index === 0"
+            :is-first-group="index === 0"
             @input="onGroupChanged"
           />
           <Btn class="btn-add-group" green small title="Add a new group" uppercase @click.prevent="addGroup">
-            <icon :icon="faPlus"/>
+            <icon :icon="faPlus" />
           </Btn>
         </div>
       </main>
@@ -63,9 +63,7 @@ const playlist = useModal().getFromContext<Playlist>('playlist')
 
 const folders = toRef(playlistFolderStore.state, 'folders')
 
-let mutablePlaylist: Playlist
-
-watch(playlist, () => (mutablePlaylist = reactive(cloneDeep(playlist))), { immediate: true })
+const mutablePlaylist = reactive(cloneDeep(playlist))
 
 const isPristine = () => isEqual(mutablePlaylist.rules, playlist.rules)
   && mutablePlaylist.name.trim() === playlist.name
diff --git a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistFormBase.vue b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistFormBase.vue
index 7789423b..df663d6f 100644
--- a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistFormBase.vue
+++ b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistFormBase.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="smart-playlist-form">
-    <slot/>
+    <slot />
   </div>
 </template>
 
diff --git a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRule.vue b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRule.vue
index 077c19bc..dcac5ec6 100644
--- a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRule.vue
+++ b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRule.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="row" data-testid="smart-playlist-rule-row">
     <Btn class="remove-rule" red title="Remove this rule" @click.prevent="removeRule">
-      <icon :icon="faTrashCan"/>
+      <icon :icon="faTrashCan" />
     </Btn>
 
     <select v-model="selectedModel" name="model[]">
-      <option v-for="model in models" :key="model.name" :value="model">{{ model.label }}</option>
+      <option v-for="m in models" :key="m.name" :value="m">{{ model.label }}</option>
     </select>
 
     <select v-model="selectedOperator" name="operator[]">
@@ -17,9 +17,9 @@
         v-for="input in availableInputs"
         :key="input.id"
         v-model="input.value"
-        :type="selectedOperator?.type || selectedModel?.type"
+        :type="(selectedOperator?.type || selectedModel?.type)!"
         :value="input.value"
-        @update:modelValue="onInput"
+        @update:model-value="onInput"
       />
 
       <span v-if="valueSuffix" class="suffix">{{ valueSuffix }}</span>
@@ -39,7 +39,7 @@ const RuleInput = defineAsyncComponent(() => import('@/components/playlist/smart
 const props = defineProps<{ rule: SmartPlaylistRule }>()
 const { rule } = toRefs(props)
 
-const mutatedRule = Object.assign({}, rule.value)
+const mutatedRule = Object.assign({}, rule.value) as SmartPlaylistRule
 
 const selectedModel = ref<SmartPlaylistModel>()
 const selectedOperator = ref<SmartPlaylistOperator>()
@@ -104,8 +104,8 @@ const emit = defineEmits<{
 const onInput = () => {
   emit('input', {
     id: mutatedRule.id,
-    model: selectedModel.value,
-    operator: selectedOperator.value?.operator,
+    model: selectedModel.value!,
+    operator: selectedOperator.value?.operator!,
     value: availableInputs.value.map(input => input.value)
   })
 }
diff --git a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleGroup.vue b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleGroup.vue
index 9aa07a15..722f7f0a 100644
--- a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleGroup.vue
+++ b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleGroup.vue
@@ -10,15 +10,15 @@
     </div>
 
     <Rule
+      v-for="rule in mutatedGroup.rules"
       :key="rule.id"
       :rule="rule"
       @input="onRuleChanged"
       @remove="removeRule(rule)"
-      v-for="rule in mutatedGroup.rules"
     />
 
-    <Btn @click.prevent="addRule" class="btn-add-rule" green small uppercase>
-      <icon :icon="faPlus"/>
+    <Btn class="btn-add-rule" green small uppercase @click.prevent="addRule">
+      <icon :icon="faPlus" />
       Rule
     </Btn>
   </div>
@@ -44,7 +44,7 @@ const notifyParentForUpdate = () => emit('input', mutatedGroup)
 const addRule = () => mutatedGroup.rules.push(playlistStore.createEmptySmartPlaylistRule())
 
 const onRuleChanged = (data: SmartPlaylistRule) => {
-  Object.assign(mutatedGroup.rules.find(r => r.id === data.id), data)
+  Object.assign(mutatedGroup.rules.find(r => r.id === data.id)!, data)
   notifyParentForUpdate()
 }
 
diff --git a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleInput.vue b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleInput.vue
index 63d49c7b..310cd703 100644
--- a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleInput.vue
+++ b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleInput.vue
@@ -6,7 +6,7 @@
 import { computed, toRefs } from 'vue'
 import inputTypes from '@/config/smart-playlist/inputTypes'
 
-const props = withDefaults(defineProps<{ type?: keyof typeof inputTypes, value?: any }>(), { value: undefined })
+const props = withDefaults(defineProps<{ type: keyof typeof inputTypes, value?: any }>(), { value: undefined })
 const { type } = toRefs(props)
 
 const emit = defineEmits<{ (e: 'update:modelValue', value: any): void }>()
diff --git a/resources/assets/js/components/profile-preferences/LastfmIntegration.vue b/resources/assets/js/components/profile-preferences/LastfmIntegration.vue
index 26205653..7a88328b 100644
--- a/resources/assets/js/components/profile-preferences/LastfmIntegration.vue
+++ b/resources/assets/js/components/profile-preferences/LastfmIntegration.vue
@@ -21,7 +21,7 @@
       </p>
       <div class="buttons">
         <Btn class="connect" @click.prevent="connect">
-          <icon :icon="faLastfm"/>
+          <icon :icon="faLastfm" />
           {{ connected ? 'Reconnect' : 'Connect' }}
         </Btn>
 
diff --git a/resources/assets/js/components/profile-preferences/PreferencesForm.vue b/resources/assets/js/components/profile-preferences/PreferencesForm.vue
index 294e1397..4672b34c 100644
--- a/resources/assets/js/components/profile-preferences/PreferencesForm.vue
+++ b/resources/assets/js/components/profile-preferences/PreferencesForm.vue
@@ -1,26 +1,26 @@
 <template>
   <div>
-    <div class="form-row" v-if="!isPhone">
+    <div v-if="!isPhone" class="form-row">
       <label>
-        <CheckBox name="notify" v-model="preferences.notify"/>
+        <CheckBox v-model="preferences.notify" name="notify" />
         Show “Now Playing” song notification
       </label>
     </div>
-    <div class="form-row" v-if="!isPhone">
+    <div v-if="!isPhone" class="form-row">
       <label>
-        <CheckBox name="confirm_closing" v-model="preferences.confirmClosing"/>
+        <CheckBox v-model="preferences.confirmClosing" name="confirm_closing" />
         Confirm before closing Koel
       </label>
     </div>
-    <div class="form-row" v-if="isPhone">
+    <div v-if="isPhone" class="form-row">
       <label>
-        <CheckBox name="transcode_on_mobile" v-model="preferences.transcodeOnMobile"/>
+        <CheckBox v-model="preferences.transcodeOnMobile" name="transcode_on_mobile" />
         Convert and play media at 128kbps on mobile
       </label>
     </div>
     <div class="form-row">
       <label>
-        <CheckBox name="show_album_art_overlay" v-model="preferences.showAlbumArtOverlay"/>
+        <CheckBox v-model="preferences.showAlbumArtOverlay" name="show_album_art_overlay" />
         Show a translucent, blurred overlay of the current album’s art
       </label>
     </div>
diff --git a/resources/assets/js/components/profile-preferences/ProfileForm.vue b/resources/assets/js/components/profile-preferences/ProfileForm.vue
index e52549e7..7f7843dd 100644
--- a/resources/assets/js/components/profile-preferences/ProfileForm.vue
+++ b/resources/assets/js/components/profile-preferences/ProfileForm.vue
@@ -40,14 +40,14 @@
           type="password"
         >
         <span class="password-rules help">
-            Min. 10 characters. Should be a mix of characters, numbers, and symbols.
-          </span>
+          Min. 10 characters. Should be a mix of characters, numbers, and symbols.
+        </span>
       </label>
     </div>
 
     <div class="form-row">
       <Btn class="btn-submit" type="submit">Save</Btn>
-      <span v-if="isDemo" class="demo-notice">
+      <span v-if="isDemo()" class="demo-notice">
         Changes will not be saved in the demo version.
       </span>
     </div>
diff --git a/resources/assets/js/components/profile-preferences/ThemeCard.vue b/resources/assets/js/components/profile-preferences/ThemeCard.vue
index 28081645..846f9916 100644
--- a/resources/assets/js/components/profile-preferences/ThemeCard.vue
+++ b/resources/assets/js/components/profile-preferences/ThemeCard.vue
@@ -18,6 +18,8 @@ import { slugToTitle } from '@/utils'
 const props = defineProps<{ theme: Theme }>()
 const { theme } = toRefs(props)
 
+const emit = defineEmits<{ (e: 'selected', theme: Theme): void }>()
+
 const name = theme.value.name ? theme.value.name : slugToTitle(theme.value.id)
 
 const thumbnailStyles: Record<string, string> = {
diff --git a/resources/assets/js/components/profile-preferences/ThemeList.vue b/resources/assets/js/components/profile-preferences/ThemeList.vue
index 730fe1d9..9886c6a4 100644
--- a/resources/assets/js/components/profile-preferences/ThemeList.vue
+++ b/resources/assets/js/components/profile-preferences/ThemeList.vue
@@ -3,7 +3,7 @@
     <h1>Theme</h1>
     <ul class="themes">
       <li v-for="theme in themes" :key="theme.id" data-testid="theme-card">
-        <ThemeCard :key="theme.id" :theme="theme" @selected="setTheme"/>
+        <ThemeCard :key="theme.id" :theme="theme" @selected="setTheme" />
       </li>
     </ul>
   </section>
diff --git a/resources/assets/js/components/screens/AlbumListScreen.vue b/resources/assets/js/components/screens/AlbumListScreen.vue
index 0a581668..7089f1e4 100644
--- a/resources/assets/js/components/screens/AlbumListScreen.vue
+++ b/resources/assets/js/components/screens/AlbumListScreen.vue
@@ -2,8 +2,8 @@
   <section id="albumsWrapper">
     <ScreenHeader layout="collapsed">
       Albums
-      <template v-slot:controls>
-        <ViewModeSwitch v-model="viewMode"/>
+      <template #controls>
+        <ViewModeSwitch v-model="viewMode" />
       </template>
     </ScreenHeader>
 
@@ -15,11 +15,11 @@
       @scroll="scrolling"
     >
       <template v-if="showSkeletons">
-        <AlbumCardSkeleton v-for="i in 10" :key="i" :layout="itemLayout"/>
+        <AlbumCardSkeleton v-for="i in 10" :key="i" :layout="itemLayout" />
       </template>
       <template v-else>
-        <AlbumCard v-for="album in albums" :key="album.id" :album="album" :layout="itemLayout"/>
-        <ToTopButton/>
+        <AlbumCard v-for="album in albums" :key="album.id" :album="album" :layout="itemLayout" />
+        <ToTopButton />
       </template>
     </div>
   </section>
diff --git a/resources/assets/js/components/screens/AlbumScreen.vue b/resources/assets/js/components/screens/AlbumScreen.vue
index 53c535a1..dc37abb7 100644
--- a/resources/assets/js/components/screens/AlbumScreen.vue
+++ b/resources/assets/js/components/screens/AlbumScreen.vue
@@ -1,16 +1,16 @@
 <template>
-  <section id="albumWrapper">
-    <ScreenHeaderSkeleton v-if="loading"/>
+  <section v-if="album" id="albumWrapper">
+    <ScreenHeaderSkeleton v-if="loading" />
 
     <ScreenHeader v-if="!loading && album" :layout="songs.length === 0 ? 'collapsed' : headerLayout">
       {{ album.name }}
-      <ControlsToggle v-model="showingControls"/>
+      <ControlsToggle v-model="showingControls" />
 
-      <template v-slot:thumbnail>
-        <AlbumThumbnail :entity="album"/>
+      <template #thumbnail>
+        <AlbumThumbnail :entity="album" />
       </template>
 
-      <template v-slot:meta>
+      <template #meta>
         <a v-if="isNormalArtist" :href="`#/artist/${album.artist_id}`" class="artist">{{ album.artist_name }}</a>
         <span v-else class="nope">{{ album.artist_name }}</span>
         <span>{{ pluralize(songs, 'song') }}</span>
@@ -19,7 +19,6 @@
         <a
           v-if="allowDownload"
           class="download"
-          href
           role="button"
           title="Download all songs in album"
           @click.prevent="download"
@@ -28,11 +27,11 @@
         </a>
       </template>
 
-      <template v-slot:controls>
+      <template #controls>
         <SongListControls
           v-if="songs.length && (!isPhone || showingControls)"
-          @playAll="playAll"
-          @playSelected="playSelected"
+          @play-all="playAll"
+          @play-selected="playSelected"
         />
       </template>
     </ScreenHeader>
@@ -41,20 +40,20 @@
       <template #header>
         <label :class="{ active: activeTab === 'Songs' }">
           Songs
-          <input type="radio" name="tab" value="Songs" v-model="activeTab"/>
+          <input v-model="activeTab" type="radio" name="tab" value="Songs">
         </label>
         <label :class="{ active: activeTab === 'OtherAlbums' }">
           Other Albums
-          <input type="radio" name="tab" value="OtherAlbums" v-model="activeTab"/>
+          <input v-model="activeTab" type="radio" name="tab" value="OtherAlbums">
         </label>
-        <label :class="{ active: activeTab === 'Info' }" v-if="useLastfm">
+        <label v-if="useLastfm" :class="{ active: activeTab === 'Info' }">
           Information
-          <input type="radio" name="tab" value="Info" v-model="activeTab"/>
+          <input v-model="activeTab" type="radio" name="tab" value="Info">
         </label>
       </template>
 
       <div v-show="activeTab === 'Songs'">
-        <SongListSkeleton v-if="loading"/>
+        <SongListSkeleton v-if="loading" />
         <SongList
           v-else
           ref="songList"
@@ -67,21 +66,21 @@
       <div v-show="activeTab === 'OtherAlbums'" class="albums-pane" data-testid="albums-pane">
         <template v-if="otherAlbums">
           <ul v-if="otherAlbums.length" class="as-list">
-            <li v-for="album in otherAlbums" :key="album.id">
-              <AlbumCard :album="album" layout="compact"/>
+            <li v-for="a in otherAlbums" :key="a.id">
+              <AlbumCard :album="a" layout="compact" />
             </li>
           </ul>
           <p v-else class="text-secondary">No other albums by {{ album.artist_name }} found in the library.</p>
         </template>
         <ul v-else class="as-list">
           <li v-for="i in 12" :key="i">
-            <AlbumCardSkeleton layout="compact"/>
+            <AlbumCardSkeleton layout="compact" />
           </li>
         </ul>
       </div>
 
-      <div v-show="activeTab === 'Info'" class="info-pane" v-if="useLastfm && album">
-        <AlbumInfo :album="album" mode="full"/>
+      <div v-show="activeTab === 'Info'" v-if="useLastfm && album" class="info-pane">
+        <AlbumInfo :album="album" mode="full" />
       </div>
     </ScreenTabs>
   </section>
@@ -180,7 +179,7 @@ onMounted(async () => (albumId.value = parseInt(getRouteParam('id')!)))
 onRouteChanged(route => route.screen === 'Album' && (albumId.value = parseInt(getRouteParam('id')!)))
 
 // if the current album has been deleted, go back to the list
-eventBus.on('SONGS_UPDATED', () => albumStore.byId(albumId.value) || go('albums'))
+eventBus.on('SONGS_UPDATED', () => albumStore.byId(albumId.value!) || go('albums'))
 </script>
 
 <style lang="scss" scoped>
diff --git a/resources/assets/js/components/screens/AllSongsScreen.vue b/resources/assets/js/components/screens/AllSongsScreen.vue
index bbf25923..799066c0 100644
--- a/resources/assets/js/components/screens/AllSongsScreen.vue
+++ b/resources/assets/js/components/screens/AllSongsScreen.vue
@@ -2,27 +2,27 @@
   <section id="songsWrapper">
     <ScreenHeader :layout="headerLayout">
       All Songs
-      <ControlsToggle v-model="showingControls"/>
+      <ControlsToggle v-model="showingControls" />
 
-      <template v-slot:thumbnail>
-        <ThumbnailStack :thumbnails="thumbnails"/>
+      <template #thumbnail>
+        <ThumbnailStack :thumbnails="thumbnails" />
       </template>
 
-      <template v-if="totalSongCount" v-slot:meta>
+      <template v-if="totalSongCount" #meta>
         <span>{{ pluralize(totalSongCount, 'song') }}</span>
         <span>{{ totalDuration }}</span>
       </template>
 
-      <template v-slot:controls>
+      <template #controls>
         <SongListControls
           v-if="totalSongCount && (!isPhone || showingControls)"
-          @playAll="playAll"
-          @playSelected="playSelected"
+          @play-all="playAll"
+          @playselected="playSelected"
         />
       </template>
     </ScreenHeader>
 
-    <SongListSkeleton v-if="showSkeletons"/>
+    <SongListSkeleton v-if="showSkeletons" />
     <SongList
       v-else
       ref="songList"
diff --git a/resources/assets/js/components/screens/ArtistListScreen.vue b/resources/assets/js/components/screens/ArtistListScreen.vue
index b66a0f66..83ebc522 100644
--- a/resources/assets/js/components/screens/ArtistListScreen.vue
+++ b/resources/assets/js/components/screens/ArtistListScreen.vue
@@ -2,8 +2,8 @@
   <section id="artistsWrapper">
     <ScreenHeader layout="collapsed">
       Artists
-      <template v-slot:controls>
-        <ViewModeSwitch v-model="viewMode"/>
+      <template #controls>
+        <ViewModeSwitch v-model="viewMode" />
       </template>
     </ScreenHeader>
 
@@ -15,11 +15,11 @@
       @scroll="scrolling"
     >
       <template v-if="showSkeletons">
-        <ArtistCardSkeleton v-for="i in 10" :key="i" :layout="itemLayout"/>
+        <ArtistCardSkeleton v-for="i in 10" :key="i" :layout="itemLayout" />
       </template>
       <template v-else>
-        <ArtistCard v-for="artist in artists" :key="artist.id" :artist="artist" :layout="itemLayout"/>
-        <ToTopButton/>
+        <ArtistCard v-for="artist in artists" :key="artist.id" :artist="artist" :layout="itemLayout" />
+        <ToTopButton />
       </template>
     </div>
   </section>
diff --git a/resources/assets/js/components/screens/ArtistScreen.vue b/resources/assets/js/components/screens/ArtistScreen.vue
index 1bf6f94d..71c44164 100644
--- a/resources/assets/js/components/screens/ArtistScreen.vue
+++ b/resources/assets/js/components/screens/ArtistScreen.vue
@@ -1,16 +1,16 @@
 <template>
   <section id="artistWrapper">
-    <ScreenHeaderSkeleton v-if="loading"/>
+    <ScreenHeaderSkeleton v-if="loading" />
 
     <ScreenHeader v-if="!loading && artist" :layout="songs.length === 0 ? 'collapsed' : headerLayout">
       {{ artist.name }}
-      <ControlsToggle v-model="showingControls"/>
+      <ControlsToggle v-model="showingControls" />
 
-      <template v-slot:thumbnail>
-        <ArtistThumbnail :entity="artist"/>
+      <template #thumbnail>
+        <ArtistThumbnail :entity="artist" />
       </template>
 
-      <template v-slot:meta>
+      <template #meta>
         <span>{{ pluralize(albumCount, 'album') }}</span>
         <span>{{ pluralize(songs, 'song') }}</span>
         <span>{{ duration }}</span>
@@ -18,7 +18,6 @@
         <a
           v-if="allowDownload"
           class="download"
-          href
           role="button"
           title="Download all songs by this artist"
           @click.prevent="download"
@@ -27,11 +26,11 @@
         </a>
       </template>
 
-      <template v-slot:controls>
+      <template #controls>
         <SongListControls
           v-if="songs.length && (!isPhone || showingControls)"
-          @playAll="playAll"
-          @playSelected="playSelected"
+          @play-all="playAll"
+          @play-selected="playSelected"
         />
       </template>
     </ScreenHeader>
@@ -40,20 +39,20 @@
       <template #header>
         <label :class="{ active: activeTab === 'Songs' }">
           Songs
-          <input type="radio" name="tab" value="Songs" v-model="activeTab"/>
+          <input v-model="activeTab" type="radio" name="tab" value="Songs">
         </label>
         <label :class="{ active: activeTab === 'Albums' }">
           Albums
-          <input type="radio" name="tab" value="Albums" v-model="activeTab"/>
+          <input v-model="activeTab" type="radio" name="tab" value="Albums">
         </label>
-        <label :class="{ active: activeTab === 'Info' }" v-if="useLastfm">
+        <label v-if="useLastfm" :class="{ active: activeTab === 'Info' }">
           Information
-          <input type="radio" name="tab" value="Info" v-model="activeTab"/>
+          <input v-model="activeTab" type="radio" name="tab" value="Info">
         </label>
       </template>
 
       <div v-show="activeTab === 'Songs'" class="songs-pane">
-        <SongListSkeleton v-if="loading"/>
+        <SongListSkeleton v-if="loading" />
         <SongList
           v-else
           ref="songList"
@@ -66,18 +65,18 @@
       <div v-show="activeTab === 'Albums'" class="albums-pane">
         <ul v-if="albums" class="as-list">
           <li v-for="album in albums" :key="album.id">
-            <AlbumCard :album="album" layout="compact"/>
+            <AlbumCard :album="album" layout="compact" />
           </li>
         </ul>
         <ul v-else class="as-list">
           <li v-for="i in 12" :key="i">
-            <AlbumCardSkeleton layout="compact"/>
+            <AlbumCardSkeleton layout="compact" />
           </li>
         </ul>
       </div>
 
-      <div v-show="activeTab === 'Info'" class="info-pane" v-if="useLastfm && artist">
-        <ArtistInfo :artist="artist" mode="full"/>
+      <div v-show="activeTab === 'Info'" v-if="useLastfm && artist" class="info-pane">
+        <ArtistInfo :artist="artist" mode="full" />
       </div>
     </ScreenTabs>
   </section>
diff --git a/resources/assets/js/components/screens/FavoritesScreen.vue b/resources/assets/js/components/screens/FavoritesScreen.vue
index bd99d3a6..b929a79c 100644
--- a/resources/assets/js/components/screens/FavoritesScreen.vue
+++ b/resources/assets/js/components/screens/FavoritesScreen.vue
@@ -2,20 +2,19 @@
   <section id="favoritesWrapper">
     <ScreenHeader :layout="songs.length === 0 ? 'collapsed' : headerLayout">
       Songs You Love
-      <ControlsToggle v-model="showingControls"/>
+      <ControlsToggle v-model="showingControls" />
 
-      <template v-slot:thumbnail>
-        <ThumbnailStack :thumbnails="thumbnails"/>
+      <template #thumbnail>
+        <ThumbnailStack :thumbnails="thumbnails" />
       </template>
 
-      <template v-slot:meta v-if="songs.length">
+      <template v-if="songs.length" #meta>
         <span>{{ pluralize(songs, 'song') }}</span>
         <span>{{ duration }}</span>
 
         <a
           v-if="allowDownload"
           class="download"
-          href
           role="button"
           title="Download all songs in playlist"
           @click.prevent="download"
@@ -24,16 +23,16 @@
         </a>
       </template>
 
-      <template v-slot:controls>
+      <template #controls>
         <SongListControls
           v-if="songs.length && (!isPhone || showingControls)"
-          @playAll="playAll"
-          @playSelected="playSelected"
+          @play-all="playAll"
+          @play-selected="playSelected"
         />
       </template>
     </ScreenHeader>
 
-    <SongListSkeleton v-if="loading"/>
+    <SongListSkeleton v-if="loading" />
     <SongList
       v-if="songs.length"
       ref="songList"
@@ -44,13 +43,13 @@
     />
 
     <ScreenEmptyState v-else>
-      <template v-slot:icon>
-        <icon :icon="faHeartBroken"/>
+      <template #icon>
+        <icon :icon="faHeartBroken" />
       </template>
       No favorites yet.
       <span class="secondary d-block">
         Click the&nbsp;
-        <icon :icon="faHeart"/>&nbsp;
+        <icon :icon="faHeart" />&nbsp;
         icon to mark a song as favorite.
       </span>
     </ScreenEmptyState>
diff --git a/resources/assets/js/components/screens/GenreListScreen.vue b/resources/assets/js/components/screens/GenreListScreen.vue
index e14cc585..bcbd20b2 100644
--- a/resources/assets/js/components/screens/GenreListScreen.vue
+++ b/resources/assets/js/components/screens/GenreListScreen.vue
@@ -1,10 +1,10 @@
 <template>
   <section id="genresWrapper">
-    <ScreenHeader layout="compact">
+    <ScreenHeader layout="collapsed">
       Genres
     </ScreenHeader>
     <div class="main-scroll-wrap">
-      <ul class="genres" v-if="genres">
+      <ul v-if="genres" class="genres">
         <li v-for="genre in genres" :key="genre.name" :class="`level-${getLevel(genre)}`">
           <a
             :href="`/#/genres/${encodeURIComponent(genre.name)}`"
@@ -15,9 +15,9 @@
           </a>
         </li>
       </ul>
-      <ul class="genres" v-else>
+      <ul v-else class="genres">
         <li v-for="i in 20" :key="i">
-          <GenreItemSkeleton/>
+          <GenreItemSkeleton />
         </li>
       </ul>
     </div>
diff --git a/resources/assets/js/components/screens/GenreScreen.vue b/resources/assets/js/components/screens/GenreScreen.vue
index 6cf43ddf..d4ad31dc 100644
--- a/resources/assets/js/components/screens/GenreScreen.vue
+++ b/resources/assets/js/components/screens/GenreScreen.vue
@@ -1,25 +1,25 @@
 <template>
   <section id="genreWrapper">
-    <ScreenHeader :layout="headerLayout" v-if="genre">
-      Genre: <span class="text-thin">{{ decodeURIComponent(name) }}</span>
-      <ControlsToggle v-if="songs.length" v-model="showingControls"/>
+    <ScreenHeader v-if="genre" :layout="headerLayout">
+      Genre: <span class="text-thin">{{ decodeURIComponent(name!) }}</span>
+      <ControlsToggle v-if="songs.length" v-model="showingControls" />
 
-      <template v-slot:thumbnail>
-        <ThumbnailStack :thumbnails="thumbnails"/>
+      <template #thumbnail>
+        <ThumbnailStack :thumbnails="thumbnails" />
       </template>
 
-      <template v-if="genre" v-slot:meta>
+      <template v-if="genre" #meta>
         <span>{{ pluralize(genre.song_count, 'song') }}</span>
         <span>{{ duration }}</span>
       </template>
 
-      <template v-slot:controls>
-        <SongListControls v-if="!isPhone || showingControls" @playAll="playAll" @playSelected="playSelected"/>
+      <template #controls>
+        <SongListControls v-if="!isPhone || showingControls" @play-all="playAll" @play-selected="playSelected" />
       </template>
     </ScreenHeader>
-    <ScreenHeaderSkeleton v-else/>
+    <ScreenHeaderSkeleton v-else />
 
-    <SongListSkeleton v-if="showSkeletons"/>
+    <SongListSkeleton v-if="showSkeletons" />
     <SongList
       v-else
       ref="songList"
@@ -30,8 +30,8 @@
     />
 
     <ScreenEmptyState v-if="!songs.length && !loading">
-      <template v-slot:icon>
-        <icon :icon="faTags"/>
+      <template #icon>
+        <icon :icon="faTags" />
       </template>
 
       No songs in this genre.
diff --git a/resources/assets/js/components/screens/HomeScreen.vue b/resources/assets/js/components/screens/HomeScreen.vue
index 7d1755da..1f7a4512 100644
--- a/resources/assets/js/components/screens/HomeScreen.vue
+++ b/resources/assets/js/components/screens/HomeScreen.vue
@@ -4,8 +4,8 @@
 
     <div class="main-scroll-wrap" @scroll="scrolling">
       <ScreenEmptyState v-if="libraryEmpty">
-        <template v-slot:icon>
-          <icon :icon="faVolumeOff"/>
+        <template #icon>
+          <icon :icon="faVolumeOff" />
         </template>
         No songs found.
         <span class="secondary d-block">
@@ -15,19 +15,19 @@
 
       <template v-else>
         <div class="two-cols">
-          <MostPlayedSongs data-testid="most-played-songs" :loading="loading"/>
-          <RecentlyPlayedSongs data-testid="recently-played-songs" :loading="loading"/>
+          <MostPlayedSongs data-testid="most-played-songs" :loading="loading" />
+          <RecentlyPlayedSongs data-testid="recently-played-songs" :loading="loading" />
         </div>
 
         <div class="two-cols">
-          <RecentlyAddedAlbums data-testid="recently-added-albums" :loading="loading"/>
-          <RecentlyAddedSongs data-testid="recently-added-songs" :loading="loading"/>
+          <RecentlyAddedAlbums data-testid="recently-added-albums" :loading="loading" />
+          <RecentlyAddedSongs data-testid="recently-added-songs" :loading="loading" />
         </div>
 
-        <MostPlayedArtists data-testid="most-played-artists" :loading="loading"/>
-        <MostPlayedAlbums data-testid="most-played-albums" :loading="loading"/>
+        <MostPlayedArtists data-testid="most-played-artists" :loading="loading" />
+        <MostPlayedAlbums data-testid="most-played-albums" :loading="loading" />
 
-        <ToTopButton/>
+        <ToTopButton />
       </template>
     </div>
   </section>
diff --git a/resources/assets/js/components/screens/NotFoundScreen.vue b/resources/assets/js/components/screens/NotFoundScreen.vue
index 03a29b7c..4a2e1379 100644
--- a/resources/assets/js/components/screens/NotFoundScreen.vue
+++ b/resources/assets/js/components/screens/NotFoundScreen.vue
@@ -4,8 +4,8 @@
 
     <div class="main-scroll-wrap">
       <ScreenEmptyState>
-        <template v-slot:icon>
-          <icon :icon="faKiwiBird" :mask="faMap" transform="shrink-12"/>
+        <template #icon>
+          <icon :icon="faKiwiBird" :mask="faMap" transform="shrink-12" />
         </template>
 
         The requested content cannot be found.
diff --git a/resources/assets/js/components/screens/PlaylistScreen.vue b/resources/assets/js/components/screens/PlaylistScreen.vue
index f4fa22b0..c791c8de 100644
--- a/resources/assets/js/components/screens/PlaylistScreen.vue
+++ b/resources/assets/js/components/screens/PlaylistScreen.vue
@@ -2,18 +2,17 @@
   <section v-if="playlist" id="playlistWrapper">
     <ScreenHeader :layout="songs.length === 0 ? 'collapsed' : headerLayout" :disabled="loading">
       {{ playlist.name }}
-      <ControlsToggle v-if="songs.length" v-model="showingControls"/>
+      <ControlsToggle v-if="songs.length" v-model="showingControls" />
 
-      <template v-slot:thumbnail>
-        <ThumbnailStack :thumbnails="thumbnails"/>
+      <template #thumbnail>
+        <ThumbnailStack :thumbnails="thumbnails" />
       </template>
 
-      <template v-if="songs.length" v-slot:meta>
+      <template v-if="songs.length" #meta>
         <span>{{ pluralize(songs, 'song') }}</span>
         <span>{{ duration }}</span>
         <a
           v-if="allowDownload"
-          href
           role="button"
           title="Download all songs in playlist"
           @click.prevent="download"
@@ -22,19 +21,19 @@
         </a>
       </template>
 
-      <template v-slot:controls>
+      <template #controls>
         <SongListControls
           v-if="!isPhone || showingControls"
           :config="controlsConfig"
-          @deletePlaylist="destroy"
-          @playAll="playAll"
-          @playSelected="playSelected"
+          @delete-playlist="destroy"
+          @play-all="playAll"
+          @play-selected="playSelected"
           @refresh="fetchSongs(true)"
         />
       </template>
     </ScreenHeader>
 
-    <SongListSkeleton v-show="loading"/>
+    <SongListSkeleton v-show="loading" />
     <SongList
       v-if="!loading && songs.length"
       ref="songList"
@@ -45,8 +44,8 @@
     />
 
     <ScreenEmptyState v-if="!songs.length && !loading">
-      <template v-slot:icon>
-        <icon :icon="faFile"/>
+      <template #icon>
+        <icon :icon="faFile" />
       </template>
 
       <template v-if="playlist?.is_smart">
@@ -111,9 +110,9 @@ const { removeSongsFromPlaylist } = usePlaylistManagement()
 
 const allowDownload = toRef(commonStore.state, 'allow_download')
 
-const destroy = () => eventBus.emit('PLAYLIST_DELETE', playlist.value)
+const destroy = () => eventBus.emit('PLAYLIST_DELETE', playlist.value!)
 const download = () => downloadService.fromPlaylist(playlist.value!)
-const editPlaylist = () => eventBus.emit('MODAL_SHOW_EDIT_PLAYLIST_FORM', playlist.value)
+const editPlaylist = () => eventBus.emit('MODAL_SHOW_EDIT_PLAYLIST_FORM', playlist.value!)
 
 const removeSelected = async () => await removeSongsFromPlaylist(playlist.value!, selectedSongs.value)
 
diff --git a/resources/assets/js/components/screens/ProfileScreen.vue b/resources/assets/js/components/screens/ProfileScreen.vue
index 5f73e4e5..1e5dfff2 100644
--- a/resources/assets/js/components/screens/ProfileScreen.vue
+++ b/resources/assets/js/components/screens/ProfileScreen.vue
@@ -3,10 +3,10 @@
     <ScreenHeader>Profile &amp; Preferences</ScreenHeader>
 
     <div class="main-scroll-wrap">
-      <ProfileForm/>
-      <ThemeList/>
-      <PreferencesForm/>
-      <LastfmIntegration/>
+      <ProfileForm />
+      <ThemeList />
+      <PreferencesForm />
+      <LastfmIntegration />
     </div>
   </section>
 </template>
@@ -16,7 +16,8 @@ import ScreenHeader from '@/components/ui/ScreenHeader.vue'
 import ProfileForm from '@/components/profile-preferences/ProfileForm.vue'
 import LastfmIntegration from '@/components/profile-preferences/LastfmIntegration.vue'
 import PreferencesForm from '@/components/profile-preferences/PreferencesForm.vue'
-import ThemeList from '@/components/profile-preferences/ThemeList.vue'</script>
+import ThemeList from '@/components/profile-preferences/ThemeList.vue'
+</script>
 
 <style lang="scss">
 #profileWrapper {
diff --git a/resources/assets/js/components/screens/QueueScreen.vue b/resources/assets/js/components/screens/QueueScreen.vue
index 2c1155a0..aff9b4b5 100644
--- a/resources/assets/js/components/screens/QueueScreen.vue
+++ b/resources/assets/js/components/screens/QueueScreen.vue
@@ -2,29 +2,29 @@
   <section id="queueWrapper">
     <ScreenHeader :layout="songs.length === 0 ? 'collapsed' : headerLayout">
       Current Queue
-      <ControlsToggle v-model="showingControls"/>
+      <ControlsToggle v-model="showingControls" />
 
-      <template v-slot:thumbnail>
-        <ThumbnailStack :thumbnails="thumbnails"/>
+      <template #thumbnail>
+        <ThumbnailStack :thumbnails="thumbnails" />
       </template>
 
-      <template v-if="songs.length" v-slot:meta>
+      <template v-if="songs.length" #meta>
         <span>{{ pluralize(songs, 'song') }}</span>
         <span>{{ duration }}</span>
       </template>
 
-      <template v-slot:controls>
+      <template #controls>
         <SongListControls
           v-if="songs.length && (!isPhone || showingControls)"
           :config="controlConfig"
-          @clearQueue="clearQueue"
-          @playAll="playAll"
-          @playSelected="playSelected"
+          @clear-queue="clearQueue"
+          @play-all="playAll"
+          @play-selected="playSelected"
         />
       </template>
     </ScreenHeader>
 
-    <SongListSkeleton v-if="loading"/>
+    <SongListSkeleton v-if="loading" />
     <SongList
       v-if="songs.length"
       ref="songList"
@@ -35,8 +35,8 @@
     />
 
     <ScreenEmptyState v-else>
-      <template v-slot:icon>
-        <icon :icon="faCoffee"/>
+      <template #icon>
+        <icon :icon="faCoffee" />
       </template>
 
       No songs queued.
diff --git a/resources/assets/js/components/screens/RecentlyPlayedScreen.vue b/resources/assets/js/components/screens/RecentlyPlayedScreen.vue
index 9a4b074e..955251ef 100644
--- a/resources/assets/js/components/screens/RecentlyPlayedScreen.vue
+++ b/resources/assets/js/components/screens/RecentlyPlayedScreen.vue
@@ -2,33 +2,33 @@
   <section id="recentlyPlayedWrapper">
     <ScreenHeader :layout="songs.length === 0 ? 'collapsed' : headerLayout">
       Recently Played
-      <ControlsToggle v-model="showingControls"/>
+      <ControlsToggle v-model="showingControls" />
 
-      <template v-slot:thumbnail>
-        <ThumbnailStack :thumbnails="thumbnails"/>
+      <template #thumbnail>
+        <ThumbnailStack :thumbnails="thumbnails" />
       </template>
 
-      <template v-slot:meta v-if="songs.length">
+      <template v-if="songs.length" #meta>
         <span>{{ pluralize(songs, 'song') }}</span>
         <span>{{ duration }}</span>
       </template>
 
-      <template v-slot:controls>
+      <template #controls>
         <SongListControls
           v-if="songs.length && (!isPhone || showingControls)"
-          @playAll="playAll"
-          @playSelected="playSelected"
+          @play-all="playAll"
+          @play-selected="playSelected"
         />
       </template>
     </ScreenHeader>
 
-    <SongListSkeleton v-if="loading"/>
+    <SongListSkeleton v-if="loading" />
 
-    <SongList v-if="songs.length" ref="songList" @press:enter="onPressEnter" @scroll-breakpoint="onScrollBreakpoint"/>
+    <SongList v-if="songs.length" ref="songList" @press:enter="onPressEnter" @scroll-breakpoint="onScrollBreakpoint" />
 
     <ScreenEmptyState v-else>
-      <template v-slot:icon>
-        <icon :icon="faClock"/>
+      <template #icon>
+        <icon :icon="faClock" />
       </template>
       No songs recently played.
       <span class="secondary d-block">Start playing to populate this playlist.</span>
diff --git a/resources/assets/js/components/screens/UploadScreen.vue b/resources/assets/js/components/screens/UploadScreen.vue
index ceaf1078..b1820678 100644
--- a/resources/assets/js/components/screens/UploadScreen.vue
+++ b/resources/assets/js/components/screens/UploadScreen.vue
@@ -3,14 +3,14 @@
     <ScreenHeader layout="collapsed">
       Upload Media
 
-      <template v-slot:controls>
-        <BtnGroup uppercased v-if="hasUploadFailures">
+      <template #controls>
+        <BtnGroup v-if="hasUploadFailures" uppercased>
           <Btn data-testid="upload-retry-all-btn" green @click="retryAll">
-            <icon :icon="faRotateRight"/>
+            <icon :icon="faRotateRight" />
             Retry All
           </Btn>
           <Btn data-testid="upload-remove-all-btn" orange @click="removeFailedEntries">
-            <icon :icon="faTrashCan"/>
+            <icon :icon="faTrashCan" />
             Remove Failed
           </Btn>
         </BtnGroup>
@@ -27,13 +27,13 @@
         @drop.prevent="onDrop"
         @dragover.prevent
       >
-        <div class="upload-files" v-if="files.length">
-          <UploadItem v-for="file in files" :key="file.id" :file="file" data-testid="upload-item"/>
+        <div v-if="files.length" class="upload-files">
+          <UploadItem v-for="file in files" :key="file.id" :file="file" data-testid="upload-item" />
         </div>
 
         <ScreenEmptyState v-else>
-          <template v-slot:icon>
-            <icon :icon="faUpload"/>
+          <template #icon>
+            <icon :icon="faUpload" />
           </template>
 
           {{ canDropFolders ? 'Drop files or folders to upload' : 'Drop files to upload' }}
@@ -41,15 +41,15 @@
           <span class="secondary d-block">
             <a class="or-click d-block" role="button">
               or click here to select songs
-              <input :accept="acceptAttribute" multiple name="file[]" type="file" @change="onFileInputChange"/>
+              <input :accept="acceptAttribute" multiple name="file[]" type="file" @change="onFileInputChange">
             </a>
           </span>
         </ScreenEmptyState>
       </div>
 
       <ScreenEmptyState v-else>
-        <template v-slot:icon>
-          <icon :icon="faWarning"/>
+        <template #icon>
+          <icon :icon="faWarning" />
         </template>
         No media path set.
       </ScreenEmptyState>
@@ -85,7 +85,7 @@ const hasUploadFailures = computed(() => files.value.filter((file) => file.statu
 const onDragEnter = () => (droppable.value = allowsUpload.value)
 const onDragLeave = () => (droppable.value = false)
 
-const onFileInputChange = (event: InputEvent) => {
+const onFileInputChange = (event: Event) => {
   const selectedFileList = (event.target as HTMLInputElement).files
 
   if (selectedFileList?.length) {
diff --git a/resources/assets/js/components/screens/UserListScreen.vue b/resources/assets/js/components/screens/UserListScreen.vue
index 89f916b8..2b4ab88d 100644
--- a/resources/assets/js/components/screens/UserListScreen.vue
+++ b/resources/assets/js/components/screens/UserListScreen.vue
@@ -2,12 +2,12 @@
   <section id="usersWrapper">
     <ScreenHeader layout="collapsed">
       Users
-      <ControlsToggle v-model="showingControls"/>
+      <ControlsToggle v-model="showingControls" />
 
-      <template v-slot:controls>
-        <BtnGroup uppercased v-if="showingControls || !isPhone">
+      <template #controls>
+        <BtnGroup v-if="showingControls || !isPhone" uppercased>
           <Btn class="btn-add" green @click="showAddUserForm">
-            <icon :icon="faPlus"/>
+            <icon :icon="faPlus" />
             Add
           </Btn>
         </BtnGroup>
@@ -17,7 +17,7 @@
     <div class="main-scroll-wrap">
       <ul class="users">
         <li v-for="user in users" :key="user.id">
-          <UserCard :user="user"/>
+          <UserCard :user="user" />
         </li>
       </ul>
     </div>
diff --git a/resources/assets/js/components/screens/VisualizerScreen.vue b/resources/assets/js/components/screens/VisualizerScreen.vue
index e2749351..42a1531d 100644
--- a/resources/assets/js/components/screens/VisualizerScreen.vue
+++ b/resources/assets/js/components/screens/VisualizerScreen.vue
@@ -1,12 +1,12 @@
 <template>
   <section id="vizContainer" :class="{ fullscreen: isFullscreen }" @dblclick="toggleFullscreen">
     <div class="artifacts">
-      <div class="credits" v-if="selectedVisualizer">
+      <div v-if="selectedVisualizer" class="credits">
         <h3>{{ selectedVisualizer.name }}</h3>
-        <p class="text-secondary" v-if="selectedVisualizer.credits">
+        <p v-if="selectedVisualizer.credits" class="text-secondary">
           by {{ selectedVisualizer.credits.author }}
           <a :href="selectedVisualizer.credits.url" target="_blank">
-            <icon :icon="faUpRightFromSquare"/>
+            <icon :icon="faUpRightFromSquare" />
           </a>
         </p>
       </div>
@@ -16,7 +16,7 @@
         <option v-for="v in visualizers" :key="v.id" :value="v.id">{{ v.name }}</option>
       </select>
     </div>
-    <div ref="el" class="viz"/>
+    <div ref="el" class="viz" />
   </section>
 </template>
 
diff --git a/resources/assets/js/components/screens/YouTubeScreen.vue b/resources/assets/js/components/screens/YouTubeScreen.vue
index 59e1deb0..9f185401 100644
--- a/resources/assets/js/components/screens/YouTubeScreen.vue
+++ b/resources/assets/js/components/screens/YouTubeScreen.vue
@@ -4,8 +4,8 @@
 
     <div id="player">
       <ScreenEmptyState data-testid="youtube-placeholder">
-        <template v-slot:icon>
-          <icon :icon="faYoutube"/>
+        <template #icon>
+          <icon :icon="faYoutube" />
         </template>
         YouTube videos will be played here.
         <span class="d-block instruction">Start a video playback from the right sidebar.</span>
diff --git a/resources/assets/js/components/screens/home/MostPlayedAlbums.vue b/resources/assets/js/components/screens/home/MostPlayedAlbums.vue
index 96d31d9d..b7a7fda6 100644
--- a/resources/assets/js/components/screens/home/MostPlayedAlbums.vue
+++ b/resources/assets/js/components/screens/home/MostPlayedAlbums.vue
@@ -4,13 +4,13 @@
 
     <ol v-if="loading" class="two-cols top-album-list">
       <li v-for="i in 4" :key="i">
-        <AlbumCardSkeleton layout="compact"/>
+        <AlbumCardSkeleton layout="compact" />
       </li>
     </ol>
     <template v-else>
       <ol v-if="albums.length" class="two-cols top-album-list">
         <li v-for="album in albums" :key="album.id">
-          <AlbumCard :album="album" layout="compact"/>
+          <AlbumCard :album="album" layout="compact" />
         </li>
       </ol>
       <p v-else class="text-secondary">No albums found.</p>
diff --git a/resources/assets/js/components/screens/home/MostPlayedArtists.vue b/resources/assets/js/components/screens/home/MostPlayedArtists.vue
index 1cce6769..42741dd7 100644
--- a/resources/assets/js/components/screens/home/MostPlayedArtists.vue
+++ b/resources/assets/js/components/screens/home/MostPlayedArtists.vue
@@ -4,13 +4,13 @@
 
     <ol v-if="loading" class="two-cols top-album-list">
       <li v-for="i in 4" :key="i">
-        <ArtistCardSkeleton layout="compact"/>
+        <ArtistCardSkeleton layout="compact" />
       </li>
     </ol>
     <template v-else>
       <ol v-if="artists.length" class="two-cols top-artist-list">
         <li v-for="artist in artists" :key="artist.id">
-          <ArtistCard :artist="artist" layout="compact"/>
+          <ArtistCard :artist="artist" layout="compact" />
         </li>
       </ol>
       <p v-else class="text-secondary">No artists found.</p>
diff --git a/resources/assets/js/components/screens/home/MostPlayedSongs.vue b/resources/assets/js/components/screens/home/MostPlayedSongs.vue
index 24bdd8ba..4a2ea6e4 100644
--- a/resources/assets/js/components/screens/home/MostPlayedSongs.vue
+++ b/resources/assets/js/components/screens/home/MostPlayedSongs.vue
@@ -3,13 +3,13 @@
     <h1>Most Played</h1>
     <ol v-if="loading" class="top-song-list">
       <li v-for="i in 3" :key="i">
-        <SongCardSkeleton/>
+        <SongCardSkeleton />
       </li>
     </ol>
     <template v-else>
       <ol v-if="songs.length" class="top-song-list">
         <li v-for="song in songs" :key="song.id">
-          <SongCard :song="song"/>
+          <SongCard :song="song" />
         </li>
       </ol>
       <p v-else class="text-secondary">You don’t seem to have been playing.</p>
diff --git a/resources/assets/js/components/screens/home/RecentlyAddedAlbums.vue b/resources/assets/js/components/screens/home/RecentlyAddedAlbums.vue
index c43b9ef2..540dc0cc 100644
--- a/resources/assets/js/components/screens/home/RecentlyAddedAlbums.vue
+++ b/resources/assets/js/components/screens/home/RecentlyAddedAlbums.vue
@@ -4,13 +4,13 @@
 
     <ol v-if="loading" class="recently-added-album-list">
       <li v-for="i in 2" :key="i">
-        <AlbumCardSkeleton layout="compact"/>
+        <AlbumCardSkeleton layout="compact" />
       </li>
     </ol>
     <template v-else>
       <ol v-if="albums.length" class="recently-added-album-list">
         <li v-for="album in albums" :key="album.id">
-          <AlbumCard :album="album" layout="compact"/>
+          <AlbumCard :album="album" layout="compact" />
         </li>
       </ol>
       <p v-else class="text-secondary">No albums added yet.</p>
diff --git a/resources/assets/js/components/screens/home/RecentlyAddedSongs.vue b/resources/assets/js/components/screens/home/RecentlyAddedSongs.vue
index bbc9cc0b..bc9e9fd3 100644
--- a/resources/assets/js/components/screens/home/RecentlyAddedSongs.vue
+++ b/resources/assets/js/components/screens/home/RecentlyAddedSongs.vue
@@ -3,13 +3,13 @@
     <h1>New Songs</h1>
     <ol v-if="loading" class="recently-added-song-list">
       <li v-for="i in 3" :key="i">
-        <SongCardSkeleton/>
+        <SongCardSkeleton />
       </li>
     </ol>
     <template v-else>
       <ol v-if="songs.length" class="recently-added-song-list">
         <li v-for="song in songs" :key="song.id">
-          <SongCard :song="song"/>
+          <SongCard :song="song" />
         </li>
       </ol>
       <p v-else class="text-secondary">No songs added so far.</p>
diff --git a/resources/assets/js/components/screens/home/RecentlyPlayedSongs.vue b/resources/assets/js/components/screens/home/RecentlyPlayedSongs.vue
index 616e59dc..5b610777 100644
--- a/resources/assets/js/components/screens/home/RecentlyPlayedSongs.vue
+++ b/resources/assets/js/components/screens/home/RecentlyPlayedSongs.vue
@@ -15,13 +15,13 @@
 
     <ol v-if="loading" class="recent-song-list">
       <li v-for="i in 3" :key="i">
-        <SongCardSkeleton/>
+        <SongCardSkeleton />
       </li>
     </ol>
     <template v-else>
       <ol v-if="songs.length" class="recent-song-list">
         <li v-for="song in songs" :key="song.id">
-          <SongCard :song="song"/>
+          <SongCard :song="song" />
         </li>
       </ol>
       <p v-else class="text-secondary">No songs played as of late.</p>
diff --git a/resources/assets/js/components/screens/search/SearchExcerptsScreen.vue b/resources/assets/js/components/screens/search/SearchExcerptsScreen.vue
index 6e2ed49b..e1c95403 100644
--- a/resources/assets/js/components/screens/search/SearchExcerptsScreen.vue
+++ b/resources/assets/js/components/screens/search/SearchExcerptsScreen.vue
@@ -23,13 +23,13 @@
           </h1>
           <ul v-if="searching">
             <li v-for="i in 6" :key="i">
-              <SongCardSkeleton/>
+              <SongCardSkeleton />
             </li>
           </ul>
           <template v-else>
             <ul v-if="excerpt.songs.length">
               <li v-for="song in excerpt.songs" :key="song.id">
-                <SongCard :song="song"/>
+                <SongCard :song="song" />
               </li>
             </ul>
             <p v-else>None found.</p>
@@ -40,13 +40,13 @@
           <h1>Artists</h1>
           <ul v-if="searching">
             <li v-for="i in 6" :key="i">
-              <ArtistAlbumCardSkeleton layout="compact"/>
+              <ArtistAlbumCardSkeleton layout="compact" />
             </li>
           </ul>
           <template v-else>
             <ul v-if="excerpt.artists.length">
               <li v-for="artist in excerpt.artists" :key="artist.id">
-                <ArtistCard :artist="artist" layout="compact"/>
+                <ArtistCard :artist="artist" layout="compact" />
               </li>
             </ul>
             <p v-else>None found.</p>
@@ -57,13 +57,13 @@
           <h1>Albums</h1>
           <ul v-if="searching">
             <li v-for="i in 6" :key="i">
-              <ArtistAlbumCardSkeleton layout="compact"/>
+              <ArtistAlbumCardSkeleton layout="compact" />
             </li>
           </ul>
           <template v-else>
             <ul v-if="excerpt.albums.length">
               <li v-for="album in excerpt.albums" :key="album.id">
-                <AlbumCard :album="album" layout="compact"/>
+                <AlbumCard :album="album" layout="compact" />
               </li>
             </ul>
             <p v-else>None found.</p>
@@ -72,8 +72,8 @@
       </div>
 
       <ScreenEmptyState v-else>
-        <template v-slot:icon>
-          <icon :icon="faSearch"/>
+        <template #icon>
+          <icon :icon="faSearch" />
         </template>
         Find songs, artists, and albums,
         <span class="secondary d-block">all in one place.</span>
diff --git a/resources/assets/js/components/screens/search/SearchSongResultsScreen.vue b/resources/assets/js/components/screens/search/SearchSongResultsScreen.vue
index 75101a0d..08cec99a 100644
--- a/resources/assets/js/components/screens/search/SearchSongResultsScreen.vue
+++ b/resources/assets/js/components/screens/search/SearchSongResultsScreen.vue
@@ -2,28 +2,28 @@
   <section id="songResultsWrapper">
     <ScreenHeader :layout="songs.length === 0 ? 'collapsed' : headerLayout">
       Songs for <span class="text-thin">{{ decodedQ }}</span>
-      <ControlsToggle v-model="showingControls"/>
+      <ControlsToggle v-model="showingControls" />
 
-      <template v-slot:thumbnail>
-        <ThumbnailStack :thumbnails="thumbnails"/>
+      <template #thumbnail>
+        <ThumbnailStack :thumbnails="thumbnails" />
       </template>
 
-      <template v-if="songs.length" v-slot:meta>
+      <template v-if="songs.length" #meta>
         <span>{{ pluralize(songs, 'song') }}</span>
         <span>{{ duration }}</span>
       </template>
 
-      <template v-slot:controls>
+      <template #controls>
         <SongListControls
           v-if="songs.length && (!isPhone || showingControls)"
-          @playAll="playAll"
-          @playSelected="playSelected"
+          @play-all="playAll"
+          @play-selected="playSelected"
         />
       </template>
     </ScreenHeader>
 
-    <SongListSkeleton v-if="loading"/>
-    <SongList v-else ref="songList" @sort="sort" @press:enter="onPressEnter" @scroll-breakpoint="onScrollBreakpoint"/>
+    <SongListSkeleton v-if="loading" />
+    <SongList v-else ref="songList" @sort="sort" @press:enter="onPressEnter" @scroll-breakpoint="onScrollBreakpoint" />
   </section>
 </template>
 
diff --git a/resources/assets/js/components/song/EditSongForm.vue b/resources/assets/js/components/song/EditSongForm.vue
index e092c929..243ff1d9 100644
--- a/resources/assets/js/components/song/EditSongForm.vue
+++ b/resources/assets/js/components/song/EditSongForm.vue
@@ -1,7 +1,7 @@
 <template>
   <form @submit.prevent="submit" @keydown.esc="maybeClose">
     <header>
-      <span class="cover" :style="{ backgroundImage: `url(${coverUrl})` }"/>
+      <span class="cover" :style="{ backgroundImage: `url(${coverUrl})` }" />
       <div class="meta">
         <h1 :class="{ mixed: !editingOnlyOneSong }">{{ displayedTitle }}</h1>
         <h2
@@ -140,7 +140,7 @@
                 list="genres"
               >
               <datalist id="genres">
-                <option v-for="genre in genres" :key="genre" :value="genre"/>
+                <option v-for="genre in genres" :key="genre" :value="genre" />
               </datalist>
             </label>
             <label>
@@ -165,13 +165,13 @@
           tabindex="0"
         >
           <div class="form-row">
-              <textarea
-                v-model="formData.lyrics"
-                v-koel-focus
-                data-testid="lyrics-input"
-                name="lyrics"
-                title="Lyrics"
-              />
+            <textarea
+              v-model="formData.lyrics"
+              v-koel-focus
+              data-testid="lyrics-input"
+              name="lyrics"
+              title="Lyrics"
+            />
           </div>
         </div>
       </div>
diff --git a/resources/assets/js/components/song/SongCard.vue b/resources/assets/js/components/song/SongCard.vue
index b340afad..7f07d9fe 100644
--- a/resources/assets/js/components/song/SongCard.vue
+++ b/resources/assets/js/components/song/SongCard.vue
@@ -7,7 +7,7 @@
     @contextmenu.prevent="requestContextMenu"
     @dblclick.prevent="play"
   >
-    <SongThumbnail :song="song"/>
+    <SongThumbnail :song="song" />
     <main>
       <div class="details">
         <h3>{{ song.title }}</h3>
@@ -16,7 +16,7 @@
           - {{ pluralize(song.play_count, 'play') }}
         </p>
       </div>
-      <LikeButton :song="song"/>
+      <LikeButton :song="song" />
     </main>
   </article>
 </template>
diff --git a/resources/assets/js/components/song/SongContextMenu.vue b/resources/assets/js/components/song/SongContextMenu.vue
index 95108762..e75dc831 100644
--- a/resources/assets/js/components/song/SongContextMenu.vue
+++ b/resources/assets/js/components/song/SongContextMenu.vue
@@ -18,24 +18,24 @@
         </template>
         <li v-else @click="queueSongsToBottom">Queue</li>
         <template v-if="!isFavoritesScreen">
-          <li class="separator"/>
+          <li class="separator" />
           <li @click="addSongsToFavorite">Favorites</li>
         </template>
-        <li v-if="normalPlaylists.length" class="separator"/>
+        <li v-if="normalPlaylists.length" class="separator" />
         <li v-for="p in normalPlaylists" :key="p.id" @click="addSongsToExistingPlaylist(p)">{{ p.name }}</li>
       </ul>
     </li>
 
     <template v-if="isQueueScreen">
-      <li class="separator"/>
+      <li class="separator" />
       <li @click="removeFromQueue">Remove from Queue</li>
-      <li class="separator"/>
+      <li class="separator" />
     </template>
 
     <template v-if="isFavoritesScreen">
-      <li class="separator"/>
+      <li class="separator" />
       <li @click="removeFromFavorites">Remove from Favorites</li>
-      <li class="separator"/>
+      <li class="separator" />
     </template>
 
     <li v-if="isAdmin" @click="openEditForm">Edit</li>
@@ -43,12 +43,12 @@
     <li v-if="onlyOneSongSelected" @click="copyUrl">Copy Shareable URL</li>
 
     <template v-if="canBeRemovedFromPlaylist">
-      <li class="separator"/>
+      <li class="separator" />
       <li @click="removeFromPlaylist">Remove from Playlist</li>
     </template>
 
     <template v-if="isAdmin">
-      <li class="separator"/>
+      <li class="separator" />
       <li @click="deleteFromFilesystem">Delete from Filesystem</li>
     </template>
   </ContextMenuBase>
@@ -73,7 +73,7 @@ const { toastSuccess } = useMessageToaster()
 const { showConfirmDialog } = useDialogBox()
 const { go, getRouteParam, isCurrentScreen } = useRouter()
 const { isAdmin } = useAuthorization()
-const { context, base, ContextMenuBase, open, close, trigger } = useContextMenu()
+const { base, ContextMenuBase, open, close, trigger } = useContextMenu()
 const { removeSongsFromPlaylist } = usePlaylistManagement()
 
 const songs = ref<Song[]>([])
@@ -154,6 +154,6 @@ const deleteFromFilesystem = () => trigger(async () => {
 
 eventBus.on('SONG_CONTEXT_MENU_REQUESTED', async (e, _songs) => {
   songs.value = arrayify(_songs)
-  await open(e.pageY, e.pageX, { songs: songs.value })
+  await open(e.pageY, e.pageX)
 })
 </script>
diff --git a/resources/assets/js/components/song/SongLikeButton.vue b/resources/assets/js/components/song/SongLikeButton.vue
index d3599b20..9d95af5a 100644
--- a/resources/assets/js/components/song/SongLikeButton.vue
+++ b/resources/assets/js/components/song/SongLikeButton.vue
@@ -1,7 +1,7 @@
 <template>
   <button :title="title" type="button" @click.stop="toggleLike">
-    <icon v-if="song.liked" :icon="faHeart"/>
-    <icon v-else :icon="faEmptyHeart"/>
+    <icon v-if="song.liked" :icon="faHeart" />
+    <icon v-else :icon="faEmptyHeart" />
   </button>
 </template>
 
diff --git a/resources/assets/js/components/song/SongList.vue b/resources/assets/js/components/song/SongList.vue
index a4fcabf2..e9b9cad1 100644
--- a/resources/assets/js/components/song/SongList.vue
+++ b/resources/assets/js/components/song/SongList.vue
@@ -18,8 +18,8 @@
       >
         #
         <template v-if="config.sortable">
-          <icon v-if="sortField === 'track' && sortOrder === 'asc'" :icon="faCaretDown" class="text-highlight"/>
-          <icon v-if="sortField === 'track' && sortOrder === 'desc'" :icon="faCaretUp" class="text-highlight"/>
+          <icon v-if="sortField === 'track' && sortOrder === 'asc'" :icon="faCaretDown" class="text-highlight" />
+          <icon v-if="sortField === 'track' && sortOrder === 'desc'" :icon="faCaretUp" class="text-highlight" />
         </template>
       </span>
       <span
@@ -31,8 +31,8 @@
       >
         Title
         <template v-if="config.sortable">
-          <icon v-if="sortField === 'title' && sortOrder === 'asc'" :icon="faCaretDown" class="text-highlight"/>
-          <icon v-if="sortField === 'title' && sortOrder === 'desc'" :icon="faCaretUp" class="text-highlight"/>
+          <icon v-if="sortField === 'title' && sortOrder === 'asc'" :icon="faCaretDown" class="text-highlight" />
+          <icon v-if="sortField === 'title' && sortOrder === 'desc'" :icon="faCaretUp" class="text-highlight" />
         </template>
       </span>
       <span
@@ -44,8 +44,8 @@
       >
         Album
         <template v-if="config.sortable">
-          <icon v-if="sortField === 'album_name' && sortOrder === 'asc'" :icon="faCaretDown" class="text-highlight"/>
-          <icon v-if="sortField === 'album_name' && sortOrder === 'desc'" :icon="faCaretUp" class="text-highlight"/>
+          <icon v-if="sortField === 'album_name' && sortOrder === 'asc'" :icon="faCaretDown" class="text-highlight" />
+          <icon v-if="sortField === 'album_name' && sortOrder === 'desc'" :icon="faCaretUp" class="text-highlight" />
         </template>
       </span>
       <span
@@ -57,12 +57,12 @@
       >
         Time
         <template v-if="config.sortable">
-          <icon v-if="sortField === 'length' && sortOrder === 'asc'" :icon="faCaretDown" class="text-highlight"/>
-          <icon v-if="sortField === 'length' && sortOrder === 'desc'" :icon="faCaretUp" class="text-highlight"/>
+          <icon v-if="sortField === 'length' && sortOrder === 'asc'" :icon="faCaretDown" class="text-highlight" />
+          <icon v-if="sortField === 'length' && sortOrder === 'desc'" :icon="faCaretUp" class="text-highlight" />
         </template>
       </span>
       <span class="extra">
-        <SongListSorter v-if="config.sortable" :field="sortField" :order="sortOrder" @sort="sort"/>
+        <SongListSorter v-if="config.sortable" :field="sortField" :order="sortOrder" @sort="sort" />
       </span>
     </div>
 
@@ -243,7 +243,7 @@ const onDragStart = (row: SongRow, event: DragEvent) => {
 
   // Add "dragging" class to the wrapper so that we can disable pointer events on child elements.
   // This prevents dragleave events from firing when the user drags the mouse over the child elements.
-  wrapper.value.classList.add('dragging')
+  wrapper.value?.classList.add('dragging')
 
   startDragging(event, selectedSongs.value)
 }
@@ -261,11 +261,11 @@ const onDragEnter = (event: DragEvent) => {
 
 const onDrop = (item: SongRow, event: DragEvent) => {
   if (!config.reorderable || !getDroppedData(event) || !selectedSongs.value.length) {
-    wrapper.value.classList.remove('dragging')
+    wrapper.value?.classList.remove('dragging')
     return onDragLeave(event)
   }
 
-  wrapper.value.classList.remove('dragging')
+  wrapper.value?.classList.remove('dragging')
 
   emit('reorder', item.song)
   return onDragLeave(event)
@@ -276,7 +276,7 @@ const onDragLeave = (event: DragEvent) => {
   return false
 }
 
-const onDragEnd = () => wrapper.value.classList.remove('dragging')
+const onDragEnd = () => wrapper.value?.classList.remove('dragging')
 
 const openContextMenu = async (row: SongRow, event: MouseEvent) => {
   if (!row.selected) {
diff --git a/resources/assets/js/components/song/SongListControls.vue b/resources/assets/js/components/song/SongListControls.vue
index 634dbba3..1de524db 100644
--- a/resources/assets/js/components/song/SongListControls.vue
+++ b/resources/assets/js/components/song/SongListControls.vue
@@ -11,7 +11,7 @@
               title="Play all songs"
               @click.prevent="playAll"
             >
-              <icon :icon="faPlay" fixed-width/>
+              <icon :icon="faPlay" fixed-width />
               All
             </Btn>
 
@@ -22,7 +22,7 @@
               title="Play selected songs"
               @click.prevent="playSelected"
             >
-              <icon :icon="faPlay" fixed-width/>
+              <icon :icon="faPlay" fixed-width />
               Selected
             </Btn>
           </template>
@@ -36,7 +36,7 @@
               title="Shuffle all songs"
               @click.prevent="shuffle"
             >
-              <icon :icon="faRandom" fixed-width/>
+              <icon :icon="faRandom" fixed-width />
               All
             </Btn>
 
@@ -48,7 +48,7 @@
               title="Shuffle selected songs"
               @click.prevent="shuffleSelected"
             >
-              <icon :icon="faRandom" fixed-width/>
+              <icon :icon="faRandom" fixed-width />
               Selected
             </Btn>
           </template>
@@ -63,7 +63,7 @@
 
       <BtnGroup>
         <Btn v-if="config.refresh" v-koel-tooltip green title="Refresh" @click.prevent="refresh">
-          <icon :icon="faRotateRight" fixed-width/>
+          <icon :icon="faRotateRight" fixed-width />
         </Btn>
 
         <Btn
@@ -74,13 +74,13 @@
           title="Delete this playlist"
           @click.prevent="deletePlaylist"
         >
-          <icon :icon="faTrashCan"/>
+          <icon :icon="faTrashCan" />
         </Btn>
       </BtnGroup>
     </div>
 
     <div ref="addToMenu" v-koel-clickaway="closeAddToMenu" class="menu-wrapper">
-      <AddToMenu :config="mergedConfig.addTo" :songs="selectedSongs" @closing="closeAddToMenu"/>
+      <AddToMenu :config="mergedConfig.addTo" :songs="selectedSongs" @closing="closeAddToMenu" />
     </div>
   </div>
 </template>
@@ -103,7 +103,7 @@ const [songs] = requireInjection<[Ref<Song[]>]>(SongsKey)
 const [selectedSongs] = requireInjection(SelectedSongsKey)
 
 const el = ref<HTMLElement>()
-const addToButton = ref<InstanceType<Btn>>()
+const addToButton = ref<InstanceType<typeof Btn>>()
 const addToMenu = ref<HTMLDivElement>()
 const showingAddToMenu = ref(false)
 const altPressed = ref(false)
@@ -147,7 +147,7 @@ watch(showAddToButton, async showingButton => {
   await nextTick()
 
   if (showingButton) {
-    usedFloatingUi = useFloatingUi(addToButton.value.button, addToMenu, { autoTrigger: false })
+    usedFloatingUi = useFloatingUi(addToButton.value!.button!, addToMenu, { autoTrigger: false })
     usedFloatingUi.setup()
   } else {
     usedFloatingUi?.teardown()
diff --git a/resources/assets/js/components/song/SongListItem.vue b/resources/assets/js/components/song/SongListItem.vue
index 2e54a622..ae7277d7 100644
--- a/resources/assets/js/components/song/SongListItem.vue
+++ b/resources/assets/js/components/song/SongListItem.vue
@@ -7,11 +7,11 @@
     @dblclick.prevent.stop="play"
   >
     <span class="track-number">
-      <SoundBars v-if="song.playback_state === 'Playing'"/>
+      <SoundBars v-if="song.playback_state === 'Playing'" />
       <span v-else class="text-secondary">{{ song.track || '' }}</span>
     </span>
     <span class="thumbnail">
-      <SongThumbnail :song="song"/>
+      <SongThumbnail :song="song" />
     </span>
     <span class="title-artist">
       <span class="title text-primary">{{ song.title }}</span>
@@ -22,7 +22,7 @@
     <span class="album">{{ song.album_name }}</span>
     <span class="time">{{ fmtLength }}</span>
     <span class="extra">
-      <LikeButton :song="song"/>
+      <LikeButton :song="song" />
     </span>
   </div>
 </template>
diff --git a/resources/assets/js/components/song/SongListSorter.vue b/resources/assets/js/components/song/SongListSorter.vue
index 9c1f6b5d..fd6f7475 100644
--- a/resources/assets/js/components/song/SongListSorter.vue
+++ b/resources/assets/js/components/song/SongListSorter.vue
@@ -1,15 +1,20 @@
 <template>
   <div>
     <button ref="button" title="Sort" @click.stop="trigger">
-      <icon :icon="faSort"/>
+      <icon :icon="faSort" />
     </button>
     <menu ref="menu" v-koel-clickaway="hide">
-      <li v-for="item in menuItems" :class="item.field === field && 'active'" @click="sort(item.field)">
+      <li
+        v-for="item in menuItems"
+        :key="item.label"
+        :class="item.field === field && 'active'"
+        @click="sort(item.field)"
+      >
         <span>{{ item.label }}</span>
         <span class="icon">
-            <icon v-if="order === 'asc'" :icon="faArrowDown"/>
-            <icon v-else :icon="faArrowUp"/>
-          </span>
+          <icon v-if="order === 'asc'" :icon="faArrowDown" />
+          <icon v-else :icon="faArrowUp" />
+        </span>
       </li>
     </menu>
   </div>
diff --git a/resources/assets/js/components/song/SongThumbnail.vue b/resources/assets/js/components/song/SongThumbnail.vue
index 52f38208..a8526ea4 100644
--- a/resources/assets/js/components/song/SongThumbnail.vue
+++ b/resources/assets/js/components/song/SongThumbnail.vue
@@ -1,8 +1,8 @@
 <template>
   <div :style="{ backgroundImage: `url(${defaultCover})` }" class="cover">
-    <img v-koel-hide-broken-icon :alt="song.album_name" :src="song.album_cover" loading="lazy"/>
+    <img v-koel-hide-broken-icon :alt="song.album_name" :src="song.album_cover" loading="lazy">
     <a :title="title" class="control" role="button" @click.prevent="changeSongState">
-      <icon :icon="song.playback_state === 'Playing' ? faPause : faPlay" class="text-highlight"/>
+      <icon :icon="song.playback_state === 'Playing' ? faPause : faPlay" class="text-highlight" />
     </a>
   </div>
 </template>
diff --git a/resources/assets/js/components/ui/AlbumArtOverlay.vue b/resources/assets/js/components/ui/AlbumArtOverlay.vue
index 5c102309..4f7dbd32 100644
--- a/resources/assets/js/components/ui/AlbumArtOverlay.vue
+++ b/resources/assets/js/components/ui/AlbumArtOverlay.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{ backgroundImage: thumbnailUrl ? `url(${thumbnailUrl})` : 'none' }" data-testid="album-art-overlay"/>
+  <div :style="{ backgroundImage: thumbnailUrl ? `url(${thumbnailUrl})` : 'none' }" data-testid="album-art-overlay" />
 </template>
 
 <script lang="ts" setup>
diff --git a/resources/assets/js/components/ui/AlbumArtistThumbnail.vue b/resources/assets/js/components/ui/AlbumArtistThumbnail.vue
index 8c27b59f..5ffa8ab5 100644
--- a/resources/assets/js/components/ui/AlbumArtistThumbnail.vue
+++ b/resources/assets/js/components/ui/AlbumArtistThumbnail.vue
@@ -5,10 +5,9 @@
     class="cover"
     data-testid="album-artist-thumbnail"
   >
-    <img v-koel-hide-broken-icon :alt="entity.name" :src="image" loading="lazy"/>
+    <img v-koel-hide-broken-icon :alt="entity.name" :src="image" loading="lazy">
     <a
       class="control control-play"
-      href
       role="button"
       @click.prevent="playOrQueue"
       @dragenter.prevent="onDragEnter"
@@ -17,7 +16,7 @@
       @dragover.prevent
     >
       <span class="hidden">{{ buttonLabel }}</span>
-      <span class="icon"/>
+      <span class="icon" />
     </a>
   </span>
 </template>
@@ -57,7 +56,7 @@ const buttonLabel = computed(() => forAlbum.value
 
 const { isAdmin: allowsUpload } = useAuthorization()
 
-const playOrQueue = async (event: KeyboardEvent) => {
+const playOrQueue = async (event: MouseEvent) => {
   const songs = forAlbum.value
     ? await songStore.fetchForAlbum(entity.value as Album)
     : await songStore.fetchForArtist(entity.value as Artist)
diff --git a/resources/assets/js/components/ui/AppleMusicButton.vue b/resources/assets/js/components/ui/AppleMusicButton.vue
index 7658cfa5..1c6fe96c 100644
--- a/resources/assets/js/components/ui/AppleMusicButton.vue
+++ b/resources/assets/js/components/ui/AppleMusicButton.vue
@@ -12,7 +12,7 @@
         fill-rule="nonzero"
         stroke="none"
         stroke-width="1"
-      ></path>
+      />
     </svg>
   </a>
 </template>
@@ -20,7 +20,7 @@
 <script lang="ts" setup>
 import { toRefs } from 'vue'
 
-const props = defineProps({ url: String })
+const props = defineProps<{ url: string }>()
 const { url } = toRefs(props)
 </script>
 
diff --git a/resources/assets/js/components/ui/ArtistAlbumCard.vue b/resources/assets/js/components/ui/ArtistAlbumCard.vue
index 3ccab82a..80994a58 100644
--- a/resources/assets/js/components/ui/ArtistAlbumCard.vue
+++ b/resources/assets/js/components/ui/ArtistAlbumCard.vue
@@ -8,13 +8,13 @@
     @dragstart="onDragStart"
     @contextmenu.prevent="onContextMenu"
   >
-    <AlbumArtistThumbnail :entity="entity"/>
+    <AlbumArtistThumbnail :entity="entity" />
     <footer>
       <div class="name">
-        <slot name="name"/>
+        <slot name="name" />
       </div>
       <p class="meta">
-        <slot name="meta"/>
+        <slot name="meta" />
       </p>
     </footer>
   </article>
diff --git a/resources/assets/js/components/ui/ArtistAlbumScreenTabs.vue b/resources/assets/js/components/ui/ArtistAlbumScreenTabs.vue
index f31818b4..8ac1629f 100644
--- a/resources/assets/js/components/ui/ArtistAlbumScreenTabs.vue
+++ b/resources/assets/js/components/ui/ArtistAlbumScreenTabs.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="tabs">
     <header>
-      <slot name="header"/>
+      <slot name="header" />
     </header>
     <main>
-      <slot/>
+      <slot />
     </main>
   </div>
 </template>
diff --git a/resources/assets/js/components/ui/Btn.vue b/resources/assets/js/components/ui/Btn.vue
index 6f6af9d0..6a137ef9 100644
--- a/resources/assets/js/components/ui/Btn.vue
+++ b/resources/assets/js/components/ui/Btn.vue
@@ -1,5 +1,5 @@
 <template>
-  <button type="button" ref="button">
+  <button ref="button" type="button">
     <slot>Click me</slot>
   </button>
 </template>
diff --git a/resources/assets/js/components/ui/BtnCloseModal.vue b/resources/assets/js/components/ui/BtnCloseModal.vue
index c3502ab6..8aa6f91c 100644
--- a/resources/assets/js/components/ui/BtnCloseModal.vue
+++ b/resources/assets/js/components/ui/BtnCloseModal.vue
@@ -1,6 +1,6 @@
 <template>
   <button data-testid="close-modal-btn" title="Dismiss" type="button" @click.prevent="$emit('click')">
-    <icon :icon="faTimes"/>
+    <icon :icon="faTimes" />
   </button>
 </template>
 
diff --git a/resources/assets/js/components/ui/BtnGroup.vue b/resources/assets/js/components/ui/BtnGroup.vue
index ea8aa8a2..000d5db8 100644
--- a/resources/assets/js/components/ui/BtnGroup.vue
+++ b/resources/assets/js/components/ui/BtnGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <span class="btn-group">
-    <slot></slot>
+    <slot />
   </span>
 </template>
 
diff --git a/resources/assets/js/components/ui/BtnScrollToTop.vue b/resources/assets/js/components/ui/BtnScrollToTop.vue
index 143552db..03e26209 100644
--- a/resources/assets/js/components/ui/BtnScrollToTop.vue
+++ b/resources/assets/js/components/ui/BtnScrollToTop.vue
@@ -1,7 +1,7 @@
 <template>
   <Transition name="fade">
     <button v-show="showing" ref="el" title="Scroll to top" type="button" @click="scrollToTop">
-      <icon :icon="faCircleUp"/>&nbsp;
+      <icon :icon="faCircleUp" />&nbsp;
       Top
     </button>
   </Transition>
diff --git a/resources/assets/js/components/ui/CheckBox.vue b/resources/assets/js/components/ui/CheckBox.vue
index 4a584c2e..e6f77481 100644
--- a/resources/assets/js/components/ui/CheckBox.vue
+++ b/resources/assets/js/components/ui/CheckBox.vue
@@ -1,7 +1,7 @@
 <template>
   <span>
     <input :checked="checked" type="checkbox" v-bind="$attrs" @input="onInput">
-    <icon :icon="faCheck" v-if="checked"/>
+    <icon v-if="checked" :icon="faCheck" />
   </span>
 </template>
 
@@ -17,7 +17,7 @@ const checked = ref(props.modelValue)
 
 const emit = defineEmits<{ (e: 'update:modelValue', value: boolean): void }>()
 
-const onInput = (event: InputEvent) => {
+const onInput = (event: Event) => {
   checked.value = (event.target as HTMLInputElement).checked
   emit('update:modelValue', checked.value)
 }
diff --git a/resources/assets/js/components/ui/ContextMenuBase.vue b/resources/assets/js/components/ui/ContextMenuBase.vue
index f4420cec..2df0f1d9 100644
--- a/resources/assets/js/components/ui/ContextMenuBase.vue
+++ b/resources/assets/js/components/ui/ContextMenuBase.vue
@@ -78,20 +78,20 @@ const open = async (_top = 0, _left = 0) => {
 
   try {
     await preventOffScreen(el.value!)
-    await initSubmenus()
+    initSubmenus()
   } catch (e) {
     logger.error(e)
     // in a non-browser environment (e.g., unit testing), these two functions are broken due to calls to
     // getBoundingClientRect() and querySelectorAll()
   }
 
-  eventBus.emit('CONTEXT_MENU_OPENED', el)
+  eventBus.emit('CONTEXT_MENU_OPENED', el.value!)
 }
 
 const close = () => (shown.value = false)
 
 // ensure there's only one context menu at any time
-eventBus.on('CONTEXT_MENU_OPENED', target => target === el || close())
+eventBus.on('CONTEXT_MENU_OPENED', target => target === el.value || close())
 
 defineExpose({ open, close, shown })
 </script>
diff --git a/resources/assets/js/components/ui/Equalizer.vue b/resources/assets/js/components/ui/Equalizer.vue
index e31e40e1..440ea0ad 100644
--- a/resources/assets/js/components/ui/Equalizer.vue
+++ b/resources/assets/js/components/ui/Equalizer.vue
@@ -6,14 +6,14 @@
           <option disabled value="-1">Preset</option>
           <option v-for="preset in presets" :key="preset.id" :value="preset.id">{{ preset.name }}</option>
         </select>
-        <icon :icon="faCaretDown" class="arrow text-highlight" size="sm"/>
+        <icon :icon="faCaretDown" class="arrow text-highlight" size="sm" />
       </label>
     </header>
 
     <main>
       <div class="bands">
         <span class="band">
-          <span class="slider"/>
+          <span class="slider" />
           <label>Preamp</label>
         </span>
 
@@ -24,7 +24,7 @@
         </span>
 
         <span v-for="band in bands" :key="band.label" class="band">
-          <span class="slider"/>
+          <span class="slider" />
           <label>{{ band.label }}</label>
         </span>
       </div>
diff --git a/resources/assets/js/components/ui/ExtraPanelTabHeader.vue b/resources/assets/js/components/ui/ExtraPanelTabHeader.vue
index 00291d6f..31bf33aa 100644
--- a/resources/assets/js/components/ui/ExtraPanelTabHeader.vue
+++ b/resources/assets/js/components/ui/ExtraPanelTabHeader.vue
@@ -7,7 +7,7 @@
     type="button"
     @click.prevent="toggleTab('Lyrics')"
   >
-    <icon :icon="faFileLines" fixed-width/>
+    <icon :icon="faFileLines" fixed-width />
   </button>
   <button
     id="extraTabArtist"
@@ -17,7 +17,7 @@
     type="button"
     @click.prevent="toggleTab('Artist')"
   >
-    <icon :icon="faMicrophone" fixed-width/>
+    <icon :icon="faMicrophone" fixed-width />
   </button>
   <button
     id="extraTabAlbum"
@@ -27,18 +27,18 @@
     type="button"
     @click.prevent="toggleTab('Album')"
   >
-    <icon :icon="faCompactDisc" fixed-width/>
+    <icon :icon="faCompactDisc" fixed-width />
   </button>
   <button
     v-if="useYouTube"
-    v-koel-tooltip.left
     id="extraTabYouTube"
+    v-koel-tooltip.left
     :class="{ active: value === 'YouTube' }"
     title="Related YouTube videos"
     type="button"
     @click.prevent="toggleTab('YouTube')"
   >
-    <icon :icon="faYoutube" fixed-width/>
+    <icon :icon="faYoutube" fixed-width />
   </button>
 </template>
 
@@ -48,9 +48,11 @@ import { faYoutube } from '@fortawesome/free-brands-svg-icons'
 import { computed } from 'vue'
 import { useThirdPartyServices } from '@/composables'
 
-const props = defineProps<{ modelValue?: ExtraPanelTab }>()
+const props = withDefaults(defineProps<{ modelValue?: ExtraPanelTab | null }>(), {
+  modelValue: null
+})
 
-const emit = defineEmits<{ (e: 'update:modelValue', value: ExtraPanelTab): void }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: ExtraPanelTab | null): void }>()
 
 const { useYouTube } = useThirdPartyServices()
 
@@ -59,7 +61,7 @@ const value = computed({
   set: value => emit('update:modelValue', value)
 })
 
-const toggleTab = (tab: ExtraPanelTab) => (value.value = value.value === tab ? undefined : tab)
+const toggleTab = (tab: ExtraPanelTab) => (value.value = value.value === tab ? null : tab)
 </script>
 
 <style scoped>
diff --git a/resources/assets/js/components/ui/FooterPlayButton.spec.ts b/resources/assets/js/components/ui/FooterPlayButton.spec.ts
index a7eb9663..d478199b 100644
--- a/resources/assets/js/components/ui/FooterPlayButton.spec.ts
+++ b/resources/assets/js/components/ui/FooterPlayButton.spec.ts
@@ -55,7 +55,11 @@ new class extends UnitTestCase {
       })
     })
 
-    it.each<[ScreenName, object, string]>([
+    it.each<[
+      ScreenName,
+      typeof favoriteStore | typeof recentlyPlayedStore,
+      MethodOf<typeof favoriteStore | typeof recentlyPlayedStore>
+    ]>([
       ['Favorites', favoriteStore, 'fetch'],
       ['RecentlyPlayed', recentlyPlayedStore, 'fetch']
     ])('initiates playback for %s screen', async (screenName, store, fetchMethod) => {
diff --git a/resources/assets/js/components/ui/FooterPlayButton.vue b/resources/assets/js/components/ui/FooterPlayButton.vue
index e40c8206..c72a7928 100644
--- a/resources/assets/js/components/ui/FooterPlayButton.vue
+++ b/resources/assets/js/components/ui/FooterPlayButton.vue
@@ -1,7 +1,7 @@
 <template>
   <button type="button" :class="playing ? 'playing' : 'stopped'" title="Play or resume" @click.prevent="toggle">
-    <icon v-if="playing" :icon="faPause"/>
-    <icon v-else :icon="faPlay"/>
+    <icon v-if="playing" :icon="faPause" />
+    <icon v-else :icon="faPlay" />
   </button>
 </template>
 
diff --git a/resources/assets/js/components/ui/LyricsPane.vue b/resources/assets/js/components/ui/LyricsPane.vue
index 51fd45da..4421293b 100644
--- a/resources/assets/js/components/ui/LyricsPane.vue
+++ b/resources/assets/js/components/ui/LyricsPane.vue
@@ -4,7 +4,7 @@
       <template v-if="song">
         <div v-show="song.lyrics">
           <pre ref="lyricsContainer">{{ lyrics }}</pre>
-          <Magnifier @in="zoomLevel++" @out="zoomLevel--" class="magnifier"/>
+          <Magnifier class="magnifier" @in="zoomLevel++" @out="zoomLevel--" />
         </div>
         <p v-if="song.id && !song.lyrics" class="none text-secondary">
           <template v-if="isAdmin">
diff --git a/resources/assets/js/components/ui/Magnifier.vue b/resources/assets/js/components/ui/Magnifier.vue
index d9c00138..cd87c828 100644
--- a/resources/assets/js/components/ui/Magnifier.vue
+++ b/resources/assets/js/components/ui/Magnifier.vue
@@ -1,10 +1,10 @@
 <template>
   <span>
     <button title="Zoom out" type="button" @click.prevent="$emit('out')">
-      <icon :icon="faSearchMinus"/>
+      <icon :icon="faSearchMinus" />
     </button>
     <button title="Zoom in" type="button" @click.prevent="$emit('in')">
-      <icon :icon="faSearchPlus"/>
+      <icon :icon="faSearchPlus" />
     </button>
   </span>
 </template>
diff --git a/resources/assets/js/components/ui/MessageToast.vue b/resources/assets/js/components/ui/MessageToast.vue
index 49735f44..2a6e5b38 100644
--- a/resources/assets/js/components/ui/MessageToast.vue
+++ b/resources/assets/js/components/ui/MessageToast.vue
@@ -2,12 +2,12 @@
   <div
     class="message"
     :class="message.type"
-    @click="dismiss"
     title="Click to dismiss"
+    @click="dismiss"
   >
     <aside>
-      <icon :icon="typeIcon" class="icon"/>
-      <icon :icon="faTimesCircle" class="icon-dismiss"/>
+      <icon :icon="typeIcon" class="icon" />
+      <icon :icon="faTimesCircle" class="icon-dismiss" />
     </aside>
     <main>{{ message.content }}</main>
   </div>
@@ -34,7 +34,7 @@ const typeIcon = computed(() => {
       return faCircleCheck
     case 'warning':
       return faTriangleExclamation
-    case 'danger':
+    default:
       return faCircleExclamation
   }
 })
diff --git a/resources/assets/js/components/ui/MessageToaster.vue b/resources/assets/js/components/ui/MessageToaster.vue
index 65de3885..2c3d5066 100644
--- a/resources/assets/js/components/ui/MessageToaster.vue
+++ b/resources/assets/js/components/ui/MessageToaster.vue
@@ -1,7 +1,7 @@
 <template>
   <TransitionGroup name="toast" tag="ul">
     <li v-for="message in messages" :key="message.id">
-      <MessageToast :message="message" @dismiss="removeMessage(message)"/>
+      <MessageToast :message="message" @dismiss="removeMessage(message)" />
     </li>
   </TransitionGroup>
 </template>
diff --git a/resources/assets/js/components/ui/OfflineNotification.vue b/resources/assets/js/components/ui/OfflineNotification.vue
index e1d71774..36dd878d 100644
--- a/resources/assets/js/components/ui/OfflineNotification.vue
+++ b/resources/assets/js/components/ui/OfflineNotification.vue
@@ -1,15 +1,16 @@
 <template>
   <div class="offline">
     <icon-layers fixed-width>
-      <icon :icon="faWifi" fixed-width size="xl"/>
-      <icon :icon="faSlash" fixed-width size="lg" transform="up-2"/>
+      <icon :icon="faWifi" fixed-width size="xl" />
+      <icon :icon="faSlash" fixed-width size="lg" transform="up-2" />
     </icon-layers>
     <span class="text">You’re offline.</span>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { faSlash, faWifi } from '@fortawesome/free-solid-svg-icons'</script>
+import { faSlash, faWifi } from '@fortawesome/free-solid-svg-icons'
+</script>
 
 <style lang="scss" scoped>
 .offline {
diff --git a/resources/assets/js/components/ui/Overlay.vue b/resources/assets/js/components/ui/Overlay.vue
index af3655a4..a2bc4448 100644
--- a/resources/assets/js/components/ui/Overlay.vue
+++ b/resources/assets/js/components/ui/Overlay.vue
@@ -1,13 +1,13 @@
 <template>
-  <dialog ref="el" :class="state.type" @cancel.prevent="onCancel" data-testid="overlay">
+  <dialog ref="el" :class="state.type" data-testid="overlay" @cancel.prevent="onCancel">
     <div class="wrapper">
-      <SoundBars v-if="state.type === 'loading'"/>
-      <icon v-if="state.type === 'error'" :icon="faCircleExclamation"/>
-      <icon v-if="state.type === 'warning'" :icon="faWarning"/>
-      <icon v-if="state.type === 'info'" :icon="faCircleInfo"/>
-      <icon v-if="state.type === 'success'" :icon="faCircleCheck"/>
+      <SoundBars v-if="state.type === 'loading'" />
+      <icon v-if="state.type === 'error'" :icon="faCircleExclamation" />
+      <icon v-if="state.type === 'warning'" :icon="faWarning" />
+      <icon v-if="state.type === 'info'" :icon="faCircleInfo" />
+      <icon v-if="state.type === 'success'" :icon="faCircleCheck" />
 
-      <span class="message" v-html="state.message"/>
+      <span class="message" v-html="state.message" />
     </div>
   </dialog>
 </template>
diff --git a/resources/assets/js/components/ui/ProfileAvatar.vue b/resources/assets/js/components/ui/ProfileAvatar.vue
index 609f1a69..ca9f289d 100644
--- a/resources/assets/js/components/ui/ProfileAvatar.vue
+++ b/resources/assets/js/components/ui/ProfileAvatar.vue
@@ -6,7 +6,7 @@
     href="/#/profile"
     title="Profile and preferences"
   >
-    <img :alt="`Avatar of ${currentUser.name}`" :src="currentUser.avatar"/>
+    <img :alt="`Avatar of ${currentUser.name}`" :src="currentUser.avatar">
   </a>
 </template>
 
diff --git a/resources/assets/js/components/ui/RepeatModeSwitch.vue b/resources/assets/js/components/ui/RepeatModeSwitch.vue
index e6b455d1..2ae02c75 100644
--- a/resources/assets/js/components/ui/RepeatModeSwitch.vue
+++ b/resources/assets/js/components/ui/RepeatModeSwitch.vue
@@ -8,8 +8,8 @@
     @click.prevent="changeMode"
   >
     <FontAwesomeLayers>
-      <icon :icon="faRepeat"/>
-      <FontAwesomeLayersText v-if="mode === 'REPEAT_ONE'" counter value="1"/>
+      <icon :icon="faRepeat" />
+      <FontAwesomeLayersText v-if="mode === 'REPEAT_ONE'" counter value="1" />
     </FontAwesomeLayers>
   </button>
 </template>
diff --git a/resources/assets/js/components/ui/ScreenControlsToggle.vue b/resources/assets/js/components/ui/ScreenControlsToggle.vue
index 0816067c..278b8429 100644
--- a/resources/assets/js/components/ui/ScreenControlsToggle.vue
+++ b/resources/assets/js/components/ui/ScreenControlsToggle.vue
@@ -1,7 +1,7 @@
 <template>
   <label v-if="isMobile.phone" class="text-highlight">
-    <input type="checkbox" v-model="value"/>
-    <icon :icon="value ? faCaretUp : faCaretDown" class="toggle"/>
+    <input v-model="value" type="checkbox">
+    <icon :icon="value ? faCaretUp : faCaretDown" class="toggle" />
     <span>Toggle the song list controls</span>
   </label>
 </template>
diff --git a/resources/assets/js/components/ui/ScreenHeader.vue b/resources/assets/js/components/ui/ScreenHeader.vue
index f349e68c..b660f57a 100644
--- a/resources/assets/js/components/ui/ScreenHeader.vue
+++ b/resources/assets/js/components/ui/ScreenHeader.vue
@@ -1,20 +1,20 @@
 <template>
   <header class="screen-header" :class="[ layout, disabled ? 'disabled' : '' ]">
     <aside class="thumbnail-wrapper">
-      <slot name="thumbnail"></slot>
+      <slot name="thumbnail" />
     </aside>
 
     <main>
       <div class="heading-wrapper">
         <h1 class="name">
-          <slot></slot>
+          <slot />
         </h1>
         <span class="meta text-secondary">
-          <slot name="meta"></slot>
+          <slot name="meta" />
         </span>
       </div>
 
-      <slot name="controls"></slot>
+      <slot name="controls" />
     </main>
   </header>
 </template>
diff --git a/resources/assets/js/components/ui/SearchForm.vue b/resources/assets/js/components/ui/SearchForm.vue
index 37f805b9..86739e89 100644
--- a/resources/assets/js/components/ui/SearchForm.vue
+++ b/resources/assets/js/components/ui/SearchForm.vue
@@ -1,7 +1,7 @@
 <template>
   <form id="searchForm" role="search" @submit.prevent="onSubmit">
     <span class="icon">
-      <icon :icon="faSearch"/>
+      <icon :icon="faSearch" />
     </span>
 
     <input
@@ -19,7 +19,7 @@
     >
 
     <button type="submit" title="Search">
-      <icon :icon="faSearch"/>
+      <icon :icon="faSearch" />
     </button>
   </form>
 </template>
diff --git a/resources/assets/js/components/ui/SidebarMenuToggleButton.vue b/resources/assets/js/components/ui/SidebarMenuToggleButton.vue
index 3681a0ff..cb3a96ef 100644
--- a/resources/assets/js/components/ui/SidebarMenuToggleButton.vue
+++ b/resources/assets/js/components/ui/SidebarMenuToggleButton.vue
@@ -1,6 +1,6 @@
 <template>
   <button @click.prevent.stop="toggleSidebar">
-    <icon :icon="faBars"/>
+    <icon :icon="faBars" />
   </button>
 </template>
 
diff --git a/resources/assets/js/components/ui/SoundBars.vue b/resources/assets/js/components/ui/SoundBars.vue
index c3c137a5..a444fac4 100644
--- a/resources/assets/js/components/ui/SoundBars.vue
+++ b/resources/assets/js/components/ui/SoundBars.vue
@@ -1,8 +1,8 @@
 <template>
   <i>
-    <span/>
-    <span/>
-    <span/>
+    <span />
+    <span />
+    <span />
   </i>
 </template>
 
diff --git a/resources/assets/js/components/ui/TooltipIcon.vue b/resources/assets/js/components/ui/TooltipIcon.vue
index 76e1a455..31a7a415 100644
--- a/resources/assets/js/components/ui/TooltipIcon.vue
+++ b/resources/assets/js/components/ui/TooltipIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <icon :icon="faCircleQuestion" :title="title" class="help-trigger text-blue"/>
+  <icon :icon="faCircleQuestion" :title="title" class="help-trigger text-blue" />
 </template>
 
 <script lang="ts" setup>
diff --git a/resources/assets/js/components/ui/ViewModeSwitch.vue b/resources/assets/js/components/ui/ViewModeSwitch.vue
index 8e4b229f..d49ccd6c 100644
--- a/resources/assets/js/components/ui/ViewModeSwitch.vue
+++ b/resources/assets/js/components/ui/ViewModeSwitch.vue
@@ -8,7 +8,7 @@
       title="View as thumbnails"
     >
       <input v-model="value" class="hidden" name="view-mode" type="radio" value="thumbnails">
-      <icon :icon="faThumbnailsHehe"/>
+      <icon :icon="faThumbnailsHehe" />
       <span class="hidden">View as thumbnails</span>
     </label>
 
@@ -20,7 +20,7 @@
       title="View as list"
     >
       <input v-model="value" class="hidden" name="view-mode" type="radio" value="list">
-      <icon :icon="faList"/>
+      <icon :icon="faList" />
       <span class="hidden">View as list</span>
     </label>
   </span>
diff --git a/resources/assets/js/components/ui/VirtualScroller.vue b/resources/assets/js/components/ui/VirtualScroller.vue
index e676a3f6..a25c659e 100644
--- a/resources/assets/js/components/ui/VirtualScroller.vue
+++ b/resources/assets/js/components/ui/VirtualScroller.vue
@@ -3,7 +3,7 @@
     <div :style="{ height: `${totalHeight}px` }">
       <div :style="{ transform: `translateY(${offsetY}px)`}">
         <template v-for="item in renderedItems">
-          <slot :item="item"></slot>
+          <slot :item="item" />
         </template>
       </div>
     </div>
diff --git a/resources/assets/js/components/ui/Volume.vue b/resources/assets/js/components/ui/Volume.vue
index c8e67901..78258901 100644
--- a/resources/assets/js/components/ui/Volume.vue
+++ b/resources/assets/js/components/ui/Volume.vue
@@ -8,7 +8,7 @@
       title="Unmute"
       @click="unmute"
     >
-      <icon :icon="faVolumeMute" fixed-width/>
+      <icon :icon="faVolumeMute" fixed-width />
     </span>
 
     <span
@@ -19,7 +19,7 @@
       title="Mute"
       @click="mute"
     >
-      <icon :icon="level === 'discreet' ? faVolumeLow : faVolumeHigh" fixed-width/>
+      <icon :icon="level === 'discreet' ? faVolumeLow : faVolumeHigh" fixed-width />
     </span>
 
     <input
@@ -51,12 +51,12 @@ const level = computed(() => {
 
 const mute = () => volumeManager.mute()
 const unmute = () => volumeManager.unmute()
-const setVolume = (e: InputEvent) => volumeManager.set(parseFloat((e.target as HTMLInputElement).value))
+const setVolume = (e: Event) => volumeManager.set(parseFloat((e.target as HTMLInputElement).value))
 
 /**
  * Broadcast the volume changed event to remote controller.
  */
-const broadcastVolume = (e: InputEvent) => {
+const broadcastVolume = (e: Event) => {
   socketService.broadcast('SOCKET_VOLUME_CHANGED', parseFloat((e.target as HTMLInputElement).value))
 }
 </script>
diff --git a/resources/assets/js/components/ui/YouTubeVideoList.vue b/resources/assets/js/components/ui/YouTubeVideoList.vue
index 8e516be9..27050f21 100644
--- a/resources/assets/js/components/ui/YouTubeVideoList.vue
+++ b/resources/assets/js/components/ui/YouTubeVideoList.vue
@@ -3,13 +3,13 @@
     <template v-if="videos.length">
       <ul>
         <li v-for="video in videos" :key="video.id.videoId" data-testid="youtube-video">
-          <YouTubeVideo :video="video"/>
+          <YouTubeVideo :video="video" />
         </li>
       </ul>
       <Btn v-if="!loading" class="more" @click.prevent="loadMore">Load More</Btn>
     </template>
 
-    <p class="nope" v-if="loading">Loading…</p>
+    <p v-if="loading" class="nope">Loading…</p>
   </div>
 </template>
 
diff --git a/resources/assets/js/components/ui/__snapshots__/AlbumArtistThumbnail.spec.ts.snap b/resources/assets/js/components/ui/__snapshots__/AlbumArtistThumbnail.spec.ts.snap
index 73a678f1..6eb6488e 100644
--- a/resources/assets/js/components/ui/__snapshots__/AlbumArtistThumbnail.spec.ts.snap
+++ b/resources/assets/js/components/ui/__snapshots__/AlbumArtistThumbnail.spec.ts.snap
@@ -1,5 +1,5 @@
 // Vitest Snapshot v1
 
-exports[`renders for album 1`] = `<span class="cover" style="background-image: url(undefined/resources/assets/img/covers/default.svg);" data-testid="album-artist-thumbnail" data-v-e37470a2=""><img alt="IV" src="https://test/album.jpg" loading="lazy" data-v-e37470a2=""><a class="control control-play" href="" role="button" data-v-e37470a2=""><span class="hidden" data-v-e37470a2="">Play all songs in the album IV</span><span class="icon" data-v-e37470a2=""></span></a></span>`;
+exports[`renders for album 1`] = `<span class="cover" style="background-image: url(undefined/resources/assets/img/covers/default.svg);" data-testid="album-artist-thumbnail" data-v-e37470a2=""><img alt="IV" src="https://test/album.jpg" loading="lazy" data-v-e37470a2=""><a class="control control-play" role="button" data-v-e37470a2=""><span class="hidden" data-v-e37470a2="">Play all songs in the album IV</span><span class="icon" data-v-e37470a2=""></span></a></span>`;
 
-exports[`renders for artist 1`] = `<span class="cover" style="background-image: url(undefined/resources/assets/img/covers/default.svg);" data-testid="album-artist-thumbnail" data-v-e37470a2=""><img alt="Led Zeppelin" src="https://test/blimp.jpg" loading="lazy" data-v-e37470a2=""><a class="control control-play" href="" role="button" data-v-e37470a2=""><span class="hidden" data-v-e37470a2="">Play all songs by Led Zeppelin</span><span class="icon" data-v-e37470a2=""></span></a></span>`;
+exports[`renders for artist 1`] = `<span class="cover" style="background-image: url(undefined/resources/assets/img/covers/default.svg);" data-testid="album-artist-thumbnail" data-v-e37470a2=""><img alt="Led Zeppelin" src="https://test/blimp.jpg" loading="lazy" data-v-e37470a2=""><a class="control control-play" role="button" data-v-e37470a2=""><span class="hidden" data-v-e37470a2="">Play all songs by Led Zeppelin</span><span class="icon" data-v-e37470a2=""></span></a></span>`;
diff --git a/resources/assets/js/components/ui/skeletons/ArtistAlbumCardSkeleton.vue b/resources/assets/js/components/ui/skeletons/ArtistAlbumCardSkeleton.vue
index 0427d9b6..cb7fbc5f 100644
--- a/resources/assets/js/components/ui/skeletons/ArtistAlbumCardSkeleton.vue
+++ b/resources/assets/js/components/ui/skeletons/ArtistAlbumCardSkeleton.vue
@@ -1,11 +1,11 @@
 <template>
   <article class="skeleton" :class="layout">
-    <aside class="thumbnail pulse"/>
+    <aside class="thumbnail pulse" />
 
     <footer>
-      <p class="name pulse"/>
-      <p class="artist pulse"/>
-      <p class="meta pulse"/>
+      <p class="name pulse" />
+      <p class="artist pulse" />
+      <p class="meta pulse" />
     </footer>
   </article>
 </template>
diff --git a/resources/assets/js/components/ui/skeletons/GenreItemSkeleton.vue b/resources/assets/js/components/ui/skeletons/GenreItemSkeleton.vue
index dd99afeb..650d2b94 100644
--- a/resources/assets/js/components/ui/skeletons/GenreItemSkeleton.vue
+++ b/resources/assets/js/components/ui/skeletons/GenreItemSkeleton.vue
@@ -1,7 +1,7 @@
 <template>
   <article class="skeleton pulse" :style="{ width: `${width}px` }">
-    <span class="name"></span>
-    <span class="count pulse"/>
+    <span class="name" />
+    <span class="count pulse" />
   </article>
 </template>
 
diff --git a/resources/assets/js/components/ui/skeletons/ScreenHeaderSkeleton.vue b/resources/assets/js/components/ui/skeletons/ScreenHeaderSkeleton.vue
index 6562e867..e8fe306f 100644
--- a/resources/assets/js/components/ui/skeletons/ScreenHeaderSkeleton.vue
+++ b/resources/assets/js/components/ui/skeletons/ScreenHeaderSkeleton.vue
@@ -1,11 +1,11 @@
 <template>
   <header class="skeleton screen-header expanded">
-    <aside class="thumbnail-wrapper pulse"/>
+    <aside class="thumbnail-wrapper pulse" />
 
     <main>
-      <h1 class="pulse"/>
-      <p class="meta pulse"/>
-      <p class="controls pulse"/>
+      <h1 class="pulse" />
+      <p class="meta pulse" />
+      <p class="controls pulse" />
     </main>
   </header>
 </template>
diff --git a/resources/assets/js/components/ui/skeletons/SongCardSkeleton.vue b/resources/assets/js/components/ui/skeletons/SongCardSkeleton.vue
index dbb19bc0..38c6658e 100644
--- a/resources/assets/js/components/ui/skeletons/SongCardSkeleton.vue
+++ b/resources/assets/js/components/ui/skeletons/SongCardSkeleton.vue
@@ -1,10 +1,10 @@
 <template>
   <article class="skeleton">
-    <aside class="pulse"/>
+    <aside class="pulse" />
     <main>
       <div class="details">
-        <h3 class="pulse"/>
-        <p class="pulse"/>
+        <h3 class="pulse" />
+        <p class="pulse" />
       </div>
     </main>
   </article>
diff --git a/resources/assets/js/components/ui/skeletons/SongListSkeleton.vue b/resources/assets/js/components/ui/skeletons/SongListSkeleton.vue
index 0df62490..df48b768 100644
--- a/resources/assets/js/components/ui/skeletons/SongListSkeleton.vue
+++ b/resources/assets/js/components/ui/skeletons/SongListSkeleton.vue
@@ -2,41 +2,41 @@
   <div class="skeleton">
     <div class="song-list-header">
       <span class="track-number">
-        <span class="text"/>
+        <span class="text" />
       </span>
       <span class="title">
-        <span class="text"/>
+        <span class="text" />
       </span>
       <span class="artist">
-        <span class="text"/>
+        <span class="text" />
       </span>
       <span class="album">
-        <span class="text"/>
+        <span class="text" />
       </span>
       <span class="time">
-        <span class="text"/>
+        <span class="text" />
       </span>
-      <span class="favorite"/>
+      <span class="favorite" />
     </div>
     <div v-for="i in 40" :key="i" class="song-item">
       <span class="track-number">
-        <span class="text pulse"/>
+        <span class="text pulse" />
       </span>
       <span class="title">
-        <span class="thumbnail pulse"/>
-        <span class="text pulse"/>
+        <span class="thumbnail pulse" />
+        <span class="text pulse" />
       </span>
       <span class="artist">
-        <span class="text pulse"/>
+        <span class="text pulse" />
       </span>
       <span class="album">
-        <span class="text pulse"/>
+        <span class="text pulse" />
       </span>
       <span class="time">
-        <span class="text pulse"/>
+        <span class="text pulse" />
       </span>
       <span class="favorite">
-        <span class="text pulse"/>
+        <span class="text pulse" />
       </span>
     </div>
   </div>
diff --git a/resources/assets/js/components/ui/upload/DropZone.vue b/resources/assets/js/components/ui/upload/DropZone.vue
index 0631d515..7971aaec 100644
--- a/resources/assets/js/components/ui/upload/DropZone.vue
+++ b/resources/assets/js/components/ui/upload/DropZone.vue
@@ -7,7 +7,7 @@
     @dragover="onDragOver"
     @drop="onDrop"
   >
-    <icon :icon="faUpload" size="6x"/>
+    <icon :icon="faUpload" size="6x" />
     <h3>Drop to upload</h3>
   </div>
 </template>
diff --git a/resources/assets/js/components/ui/upload/UploadItem.vue b/resources/assets/js/components/ui/upload/UploadItem.vue
index e40aa197..1f46c315 100644
--- a/resources/assets/js/components/ui/upload/UploadItem.vue
+++ b/resources/assets/js/components/ui/upload/UploadItem.vue
@@ -1,14 +1,14 @@
 <template>
   <div :class="cssClass" :title="file.message" class="upload-item">
-    <span :style="{ width: `${file.progress}%` }" class="progress"/>
+    <span :style="{ width: `${file.progress}%` }" class="progress" />
     <span class="details">
       <span class="name">{{ file.name }}</span>
       <span class="controls">
         <Btn v-if="canRetry" icon-only title="Retry" transparent unrounded @click="retry">
-          <icon :icon="faRotateBack"/>
+          <icon :icon="faRotateBack" />
         </Btn>
         <Btn v-if="canRemove" icon-only title="Remove" transparent unrounded @click="remove">
-          <icon :icon="faTrashCan"/>
+          <icon :icon="faTrashCan" />
         </Btn>
       </span>
     </span>
diff --git a/resources/assets/js/components/user/AddUserForm.vue b/resources/assets/js/components/user/AddUserForm.vue
index 41916a80..2e0a4660 100644
--- a/resources/assets/js/components/user/AddUserForm.vue
+++ b/resources/assets/js/components/user/AddUserForm.vue
@@ -33,9 +33,9 @@
       </div>
       <div class="form-row">
         <label>
-          <CheckBox name="is_admin" v-model="newUser.is_admin"/>
+          <CheckBox v-model="newUser.is_admin" name="is_admin" />
           User is an admin
-          <TooltipIcon title="Admins can perform administrative tasks like managing users and uploading songs."/>
+          <TooltipIcon title="Admins can perform administrative tasks like managing users and uploading songs." />
         </label>
       </div>
     </main>
diff --git a/resources/assets/js/components/user/EditUserForm.vue b/resources/assets/js/components/user/EditUserForm.vue
index fa7dcd07..48813c3d 100644
--- a/resources/assets/js/components/user/EditUserForm.vue
+++ b/resources/assets/js/components/user/EditUserForm.vue
@@ -32,9 +32,9 @@
       </div>
       <div class="form-row">
         <label>
-          <CheckBox v-model="updateData.is_admin" name="is_admin"/>
+          <CheckBox v-model="updateData.is_admin" name="is_admin" />
           User is an admin
-          <TooltipIcon title="Admins can perform administrative tasks like managing users and uploading songs."/>
+          <TooltipIcon title="Admins can perform administrative tasks like managing users and uploading songs." />
         </label>
       </div>
     </main>
diff --git a/resources/assets/js/components/user/UserBadge.vue b/resources/assets/js/components/user/UserBadge.vue
index 289909e4..7a8b5835 100644
--- a/resources/assets/js/components/user/UserBadge.vue
+++ b/resources/assets/js/components/user/UserBadge.vue
@@ -1,18 +1,17 @@
 <template>
-  <span class="profile" id="userBadge" v-if="currentUser">
+  <span v-if="currentUser" id="userBadge" class="profile">
     <a class="view-profile" href="/#/profile" title="View/edit user profile">
-      <img :alt="`Avatar of ${currentUser.name}`" :src="currentUser.avatar" class="avatar"/>
+      <img :alt="`Avatar of ${currentUser.name}`" :src="currentUser.avatar" class="avatar">
       <span class="name">{{ currentUser.name }}</span>
     </a>
 
     <a
       class="logout control"
-      href
       role="button"
       title="Log out"
       @click.prevent="logout"
     >
-      <icon :icon="faSignOutAlt"/>
+      <icon :icon="faSignOutAlt" />
     </a>
   </span>
 </template>
diff --git a/resources/assets/js/components/user/UserCard.vue b/resources/assets/js/components/user/UserCard.vue
index 277ff32b..7e5dd29b 100644
--- a/resources/assets/js/components/user/UserCard.vue
+++ b/resources/assets/js/components/user/UserCard.vue
@@ -5,7 +5,7 @@
     <main>
       <h1>
         <span class="name">{{ user.name }}</span>
-        <icon v-if="isCurrentUser" :icon="faCircleCheck" class="you text-highlight" title="This is you!"/>
+        <icon v-if="isCurrentUser" :icon="faCircleCheck" class="you text-highlight" title="This is you!" />
         <icon
           v-if="user.is_admin"
           :icon="faShield"
diff --git a/resources/assets/js/components/user/__snapshots__/UserBadge.spec.ts.snap b/resources/assets/js/components/user/__snapshots__/UserBadge.spec.ts.snap
index d5fcaeda..d91132a5 100644
--- a/resources/assets/js/components/user/__snapshots__/UserBadge.spec.ts.snap
+++ b/resources/assets/js/components/user/__snapshots__/UserBadge.spec.ts.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`renders 1`] = `<span class="profile" id="userBadge"><a class="view-profile" href="/#/profile" title="View/edit user profile"><img alt="Avatar of John Doe" src="https://gravatar.com/foo" class="avatar"><span class="name">John Doe</span></a><a class="logout control" href="" role="button" title="Log out"><br data-testid="icon" icon="[object Object]"></a></span>`;
+exports[`renders 1`] = `<span id="userBadge" class="profile"><a class="view-profile" href="/#/profile" title="View/edit user profile"><img alt="Avatar of John Doe" src="https://gravatar.com/foo" class="avatar"><span class="name">John Doe</span></a><a class="logout control" role="button" title="Log out"><br data-testid="icon" icon="[object Object]"></a></span>`;
diff --git a/resources/assets/js/composables/useContextMenu.ts b/resources/assets/js/composables/useContextMenu.ts
index 23c09e26..51b414e0 100644
--- a/resources/assets/js/composables/useContextMenu.ts
+++ b/resources/assets/js/composables/useContextMenu.ts
@@ -1,18 +1,10 @@
 import { reactive, ref } from 'vue'
 import ContextMenuBase from '@/components/ui/ContextMenuBase.vue'
 
-export type ContextMenuContext = Record<string, any>
-
 export const useContextMenu = () => {
   const base = ref<InstanceType<typeof ContextMenuBase>>()
 
-  const context = reactive<ContextMenuContext>({})
-
-  const open = async (top: number, left: number, ctx: ContextMenuContext = {}) => {
-    Object.assign(context, ctx)
-    await base.value?.open(top, left, ctx)
-  }
-
+  const open = async (top: number, left: number) => await base.value?.open(top, left)
   const close = () => base.value?.close()
 
   const trigger = (func: Closure) => {
@@ -23,7 +15,6 @@ export const useContextMenu = () => {
   return {
     ContextMenuBase,
     base,
-    context,
     open,
     close,
     trigger
diff --git a/resources/assets/js/composables/useFloatingUi.ts b/resources/assets/js/composables/useFloatingUi.ts
index ef025bcd..c492de53 100644
--- a/resources/assets/js/composables/useFloatingUi.ts
+++ b/resources/assets/js/composables/useFloatingUi.ts
@@ -9,10 +9,18 @@ export type Config = {
 }
 
 export const useFloatingUi = (
-  reference: HTMLElement | Ref<HTMLElement>,
-  floating: HTMLElement | Ref<HTMLElement>,
+  reference: HTMLElement | Ref<HTMLElement | undefined>,
+  floating: HTMLElement | Ref<HTMLElement | undefined>,
   config: Partial<Config> = {}
 ) => {
+  const extractRef = <T extends HTMLElement | Ref<HTMLElement | undefined>>(ref: T): HTMLElement => {
+    if (isRef(ref) && !ref.value) {
+      throw new TypeError('Reference element is not defined')
+    }
+
+    return isRef(ref) ? ref.value! : ref
+  }
+
   const mergedConfig: Config = Object.assign({
     placement: 'bottom',
     useArrow: true,
@@ -25,10 +33,10 @@ export const useFloatingUi = (
   let _trigger: Closure
 
   const setup = () => {
-    reference = isRef(reference) ? reference.value : reference
-    floating = isRef(floating) ? floating.value : floating
+    const referenceElement = extractRef(reference)
+    const floatingElement = extractRef(floating)
 
-    floating.style.display = 'none'
+    floatingElement.style.display = 'none'
 
     const middleware = [
       flip(),
@@ -40,7 +48,7 @@ export const useFloatingUi = (
     if (mergedConfig.useArrow) {
       arrow = document.createElement('div')
       arrow.className = 'arrow'
-      floating.appendChild(arrow)
+      floatingElement.appendChild(arrow)
 
       middleware.push(arrowMiddleware({
         element: arrow,
@@ -48,26 +56,26 @@ export const useFloatingUi = (
       }))
     }
 
-    const update = async () => await updateFloatingUi(reference, floating, {
+    const update = async () => await updateFloatingUi(referenceElement, floatingElement, {
       placement: mergedConfig.placement,
       middleware
     }, arrow)
 
-    _cleanUp = autoUpdate(reference, floating, update)
+    _cleanUp = autoUpdate(referenceElement, floatingElement, update)
 
     _show = async () => {
-      floating.style.display = 'block'
+      floatingElement.style.display = 'block'
       await update()
     }
 
-    _hide = () => (floating.style.display = 'none')
-    _trigger = () => floating.style.display === 'none' ? _show() : _hide()
+    _hide = () => (floatingElement.style.display = 'none')
+    _trigger = () => floatingElement.style.display === 'none' ? _show() : _hide()
 
     if (mergedConfig.autoTrigger) {
-      reference.addEventListener('mouseenter', _show)
-      reference.addEventListener('focus', _show)
-      reference.addEventListener('mouseleave', _hide)
-      reference.addEventListener('blur', _hide)
+      referenceElement.addEventListener('mouseenter', _show)
+      referenceElement.addEventListener('focus', _show)
+      referenceElement.addEventListener('mouseleave', _hide)
+      referenceElement.addEventListener('blur', _hide)
     }
   }
 
diff --git a/resources/assets/js/composables/useInfiniteScroll.ts b/resources/assets/js/composables/useInfiniteScroll.ts
index a1ec6505..1921c990 100644
--- a/resources/assets/js/composables/useInfiniteScroll.ts
+++ b/resources/assets/js/composables/useInfiniteScroll.ts
@@ -4,7 +4,9 @@ import ToTopButton from '@/components/ui/BtnScrollToTop.vue'
 export const useInfiniteScroll = (loadMore: Closure) => {
   const scroller = ref<HTMLElement>()
 
-  const scrolling = ({ target }: { target: HTMLElement }) => {
+  const scrolling = (event: UIEvent) => {
+    const target = event.target as HTMLElement
+
     // Here we check if the user has scrolled to the end of the wrapper (or 32px to the end).
     // If that's true, load more items.
     if (target.scrollTop + target.clientHeight >= target.scrollHeight - 32) {
diff --git a/resources/assets/js/composables/useSmartPlaylistForm.ts b/resources/assets/js/composables/useSmartPlaylistForm.ts
index 96d08285..9be684e5 100644
--- a/resources/assets/js/composables/useSmartPlaylistForm.ts
+++ b/resources/assets/js/composables/useSmartPlaylistForm.ts
@@ -12,7 +12,7 @@ export const useSmartPlaylistForm = (initialRuleGroups: SmartPlaylistRuleGroup[]
   const addGroup = () => collectedRuleGroups.value.push(playlistStore.createEmptySmartPlaylistRuleGroup())
 
   const onGroupChanged = (data: SmartPlaylistRuleGroup) => {
-    const changedGroup = Object.assign(collectedRuleGroups.value.find(g => g.id === data.id), data)
+    const changedGroup = Object.assign(collectedRuleGroups.value.find(g => g.id === data.id)!, data)
 
     // Remove empty group
     if (changedGroup.rules.length === 0) {
diff --git a/resources/assets/js/composables/useSongList.ts b/resources/assets/js/composables/useSongList.ts
index b7f9703f..b825a4f0 100644
--- a/resources/assets/js/composables/useSongList.ts
+++ b/resources/assets/js/composables/useSongList.ts
@@ -41,7 +41,7 @@ export const useSongList = (songs: Ref<Song[]>, config: Partial<SongListConfig>
     return take(Array.from(new Set(sampleCovers)), 4)
   })
 
-  const getSongsToPlay = (): Song[] => songList.value.getAllSongsWithSort()
+  const getSongsToPlay = (): Song[] => songList.value!.getAllSongsWithSort()
 
   const playAll = (shuffle: boolean) => {
     playbackService.queueAndPlay(getSongsToPlay(), shuffle)
diff --git a/resources/assets/js/composables/useUpload.ts b/resources/assets/js/composables/useUpload.ts
index 3f39dcb3..553f565f 100644
--- a/resources/assets/js/composables/useUpload.ts
+++ b/resources/assets/js/composables/useUpload.ts
@@ -9,7 +9,7 @@ import { useAuthorization, useMessageToaster, useRouter } from '@/composables'
 export const useUpload = () => {
   const { isAdmin } = useAuthorization()
   const { toastSuccess, toastWarning } = useMessageToaster()
-  const { go, isCurrentRoute } = useRouter()
+  const { go, isCurrentScreen } = useRouter()
 
   const mediaPath = toRef(settingStore.state, 'media_path')
 
@@ -45,7 +45,7 @@ export const useUpload = () => {
 
     if (queuedFiles.length) {
       toastSuccess(`Queued ${pluralize(queuedFiles, 'file')} for upload`)
-      isCurrentRoute('Upload') || go('upload')
+      isCurrentScreen('Upload') || go('upload')
     } else {
       toastWarning('No files applicable for upload')
     }
diff --git a/resources/assets/js/config/events.ts b/resources/assets/js/config/events.ts
index acf2ecd3..57f7d9a9 100644
--- a/resources/assets/js/config/events.ts
+++ b/resources/assets/js/config/events.ts
@@ -17,7 +17,7 @@ export interface Events {
 
   MODAL_SHOW_ADD_USER_FORM: () => void
   MODAL_SHOW_EDIT_USER_FORM: (user: User) => void
-  MODAL_SHOW_EDIT_SONG_FORM: (songs: Song | Song[], initialTab: EditSongFormTabName) => void
+  MODAL_SHOW_EDIT_SONG_FORM: (songs: Song | Song[], initialTab?: EditSongFormTabName) => void
   MODAL_SHOW_CREATE_PLAYLIST_FORM: (folder: PlaylistFolder | null) => void
   MODAL_SHOW_EDIT_PLAYLIST_FORM: (playlist: Playlist) => void
   MODAL_SHOW_CREATE_SMART_PLAYLIST_FORM: (folder: PlaylistFolder | null) => void
@@ -41,10 +41,9 @@ export interface Events {
   SOCKET_PLAY_PREV: () => void
   SOCKET_PLAYBACK_STOPPED: () => void
   SOCKET_GET_STATUS: () => void
-  SOCKET_STATUS: () => void
+  SOCKET_STATUS: (data: { song?: Song, volume: number }) => void
   SOCKET_GET_CURRENT_SONG: () => void
   SOCKET_SONG: (song: Song) => void
   SOCKET_SET_VOLUME: (volume: number) => void
   SOCKET_VOLUME_CHANGED: (volume: number) => void
 }
-
diff --git a/resources/assets/js/directives/focus.ts b/resources/assets/js/directives/focus.ts
index 9e82424d..0d0a6c03 100644
--- a/resources/assets/js/directives/focus.ts
+++ b/resources/assets/js/directives/focus.ts
@@ -1,8 +1,5 @@
 import { Directive } from 'vue'
 
-/**
- * A simple directive to set focus into an input field when it's shown.
- */
 export const focus: Directive = {
   mounted: (el: HTMLElement) => el.focus()
 }
diff --git a/resources/assets/js/remote/App.vue b/resources/assets/js/remote/App.vue
index 5165e1be..7fd7550e 100644
--- a/resources/assets/js/remote/App.vue
+++ b/resources/assets/js/remote/App.vue
@@ -1,12 +1,12 @@
 <template>
   <div id="wrapper" :class="{ 'standalone' : inStandaloneMode }">
     <template v-if="authenticated">
-      <AlbumArtOverlay v-if="showAlbumArtOverlay && song" :album="song.album_id"/>
+      <AlbumArtOverlay v-if="showAlbumArtOverlay && song" :album="song.album_id" />
 
       <main>
         <template v-if="connected">
           <div v-if="song" class="details">
-            <div :style="{ backgroundImage: `url(${song.album_cover || defaultCover})` }" class="cover"/>
+            <div :style="{ backgroundImage: `url(${song.album_cover || defaultCover})` }" class="cover" />
             <div class="info">
               <div class="wrap">
                 <p class="title text">{{ song.title }}</p>
@@ -15,29 +15,29 @@
               </div>
             </div>
           </div>
-          <p class="none text-secondary" v-else>No song is playing.</p>
+          <p v-else class="none text-secondary">No song is playing.</p>
           <footer>
             <a class="favorite" :class="song?.liked ? 'yep' : ''" @click.prevent="toggleFavorite">
-              <icon :icon="song?.liked ? faHeart : faEmptyHeart"/>
+              <icon :icon="song?.liked ? faHeart : faEmptyHeart" />
             </a>
             <a class="prev" @click="playPrev">
-              <icon :icon="faStepBackward"/>
+              <icon :icon="faStepBackward" />
             </a>
             <a class="play-pause" @click.prevent="togglePlayback">
-              <icon :icon="playing ? faPause : faPlay"/>
+              <icon :icon="playing ? faPause : faPlay" />
             </a>
             <a class="next" @click.prevent="playNext">
-              <icon :icon="faStepForward"/>
+              <icon :icon="faStepForward" />
             </a>
             <span class="volume">
               <span
                 v-show="showingVolumeSlider"
-                ref="volumeSlider"
                 id="volumeSlider"
+                ref="volumeSlider"
                 v-koel-clickaway="closeVolumeSlider"
               />
               <span class="icon" @click.stop="toggleVolumeSlider">
-                <icon :icon="muted ? faVolumeMute : faVolumeHigh" fixed-width/>
+                <icon :icon="muted ? faVolumeMute : faVolumeHigh" fixed-width />
               </span>
             </span>
           </footer>
@@ -45,7 +45,7 @@
         <div v-else class="loader">
           <div v-if="!maxRetriesReached">
             <p>Searching for Koel…</p>
-            <div class="signal"></div>
+            <div class="signal" />
           </div>
           <p v-else>
             No active Koel instance found.
@@ -55,8 +55,8 @@
       </main>
     </template>
 
-    <div class="login-wrapper" v-else>
-      <LoginForm @loggedin="onUserLoggedIn"/>
+    <div v-else class="login-wrapper">
+      <LoginForm @loggedin="onUserLoggedIn" />
     </div>
   </div>
 </template>
@@ -116,7 +116,7 @@ watch(connected, async () => {
     throw new Error('Failed to initialize noUISlider on element #volumeSlider')
   }
 
-  volumeSlider.value.noUiSlider.on('change', (values: number[], handle: number) => {
+  volumeSlider.value.noUiSlider.on('change', (values: string[], handle: number) => {
     const volume = values[handle]
     muted.value = !volume
     socketService.broadcast('SOCKET_SET_VOLUME', volume)
diff --git a/resources/assets/js/stores/playlistStore.ts b/resources/assets/js/stores/playlistStore.ts
index 490f866f..bcbab28c 100644
--- a/resources/assets/js/stores/playlistStore.ts
+++ b/resources/assets/js/stores/playlistStore.ts
@@ -18,7 +18,7 @@ export const playlistStore = {
   }),
 
   init (playlists: Playlist[]) {
-    this.sort(reactive(playlists)).forEach((playlist: Playlist) => {
+    this.sort(reactive(playlists)).forEach(playlist => {
       if (!playlist.is_smart) {
         this.state.playlists.push(playlist)
       } else {
@@ -38,7 +38,8 @@ export const playlistStore = {
   setupSmartPlaylist: (playlist: Playlist) => {
     playlist.rules.forEach(group => {
       group.rules.forEach(rule => {
-        const model = models.find(model => model.name === rule.model as unknown as string)
+        const serializedRule = rule as unknown as SerializedSmartPlaylistRule
+        const model = models.find(model => model.name === serializedRule.model)
 
         if (!model) {
           logger.error(`Invalid model ${rule.model} found in smart playlist ${playlist.name} (ID ${playlist.id})`)
diff --git a/resources/assets/js/stores/queueStore.spec.ts b/resources/assets/js/stores/queueStore.spec.ts
index 4de18260..4a7f5dbb 100644
--- a/resources/assets/js/stores/queueStore.spec.ts
+++ b/resources/assets/js/stores/queueStore.spec.ts
@@ -5,7 +5,7 @@ import factory from 'factoria'
 import { http } from '@/services'
 import { queueStore, songStore } from '.'
 
-let songs
+let songs: Song[]
 
 new class extends UnitTestCase {
   protected beforeEach () {
diff --git a/resources/assets/js/types.d.ts b/resources/assets/js/types.d.ts
index d07d09eb..d70dc84e 100644
--- a/resources/assets/js/types.d.ts
+++ b/resources/assets/js/types.d.ts
@@ -21,13 +21,9 @@ interface Plyr {
   media: HTMLMediaElement
 
   restart (): void
-
   play (): void
-
   pause (): void
-
   seek (position: number): void
-
   setVolume (volume: number): void
 }
 
@@ -174,7 +170,14 @@ interface SmartPlaylistOperator {
 
 interface SmartPlaylistRule {
   id: number
-  model: SmartPlaylistModel | SmartPlaylistModel['name']
+  model: SmartPlaylistModel
+  operator: SmartPlaylistOperator['operator']
+  value: any[]
+}
+
+interface SerializedSmartPlaylistRule {
+  id: number
+  model: SmartPlaylistModel['name']
   operator: SmartPlaylistOperator['operator']
   value: any[]
 }
@@ -255,7 +258,7 @@ interface Interaction {
 interface EqualizerBandElement extends HTMLElement {
   noUiSlider: {
     destroy (): void
-    on (eventName: 'change' | 'slide', handler: (value: string[], handle: number) => unknown): void
+    on (eventName: 'change' | 'slide', handler: (value: string[], handle: number) => void): void
     set (options: number | any[]): void
   }
 
diff --git a/resources/assets/js/utils/floatingUi.ts b/resources/assets/js/utils/floatingUi.ts
index 43abd5c3..478f5388 100644
--- a/resources/assets/js/utils/floatingUi.ts
+++ b/resources/assets/js/utils/floatingUi.ts
@@ -6,13 +6,14 @@ export const updateFloatingUi = async (
   options: Partial<ComputePositionConfig>,
   arrow?: HTMLElement
 ) => {
+  options.placement = options.placement || 'bottom'
   const { x, y, middlewareData } = await computePosition(reference, floating, options)
 
   floating.style.left = `${x}px`
   floating.style.top = `${y}px`
 
   if (arrow) {
-    const { x: arrowX, y: arrowY } = middlewareData.arrow
+    const { x: arrowX, y: arrowY } = middlewareData.arrow!
 
     const staticSide = {
       top: 'bottom',
@@ -26,8 +27,7 @@ export const updateFloatingUi = async (
       top: arrowY != null ? `${arrowY}px` : '',
       right: '',
       bottom: '',
-      [staticSide]: '-4px'
+      [staticSide!]: '-4px'
     })
   }
 }
-
diff --git a/resources/assets/js/utils/logger.ts b/resources/assets/js/utils/logger.ts
index cb85fb0c..43114bcd 100644
--- a/resources/assets/js/utils/logger.ts
+++ b/resources/assets/js/utils/logger.ts
@@ -1,8 +1,8 @@
 const prefix = `[koel]`
 
 export const logger = {
-  warn: (m, ...args: any[]) => process.env.NODE_ENV === 'development' && console.warn(prefix, m, ...args),
-  log: (m, ...args: any[]) => console.log(prefix, m, ...args),
-  error: (m, ...args: any[]) => console.error(prefix, m, ...args),
-  info: (m, ...args: any[]) => console.info(prefix, m, ...args)
+  warn: (m: any, ...args: any[]) => process.env.NODE_ENV === 'development' && console.warn(prefix, m, ...args),
+  log: (m: any, ...args: any[]) => console.log(prefix, m, ...args),
+  error: (m: any, ...args: any[]) => console.error(prefix, m, ...args),
+  info: (m: any, ...args: any[]) => console.info(prefix, m, ...args)
 }