From 43795e6ffd48fba3f6bd1b1676245878573cf7be Mon Sep 17 00:00:00 2001
From: Phan An <me@phanan.net>
Date: Tue, 23 Apr 2024 23:01:27 +0200
Subject: [PATCH] chore: reformat code

---
 resources/assets/js/App.vue                   |   4 +-
 resources/assets/js/__tests__/UnitTestCase.ts |  55 ++++------
 .../js/components/album/AlbumCard.spec.ts     |  40 +++----
 .../assets/js/components/album/AlbumCard.vue  |   2 +-
 .../components/album/AlbumContextMenu.spec.ts |  24 ++---
 .../js/components/album/AlbumInfo.spec.ts     |  32 +++---
 .../assets/js/components/album/AlbumInfo.vue  |   2 +-
 .../js/components/album/AlbumTrackList.vue    |   2 +-
 .../album/AlbumTrackListItem.spec.ts          |  34 +++---
 .../components/album/AlbumTrackListItem.vue   |   2 +-
 .../__snapshots__/AlbumCard.spec.ts.snap      |   2 +-
 .../AlbumContextMenu.spec.ts.snap             |   2 +-
 .../js/components/artist/ArtistCard.spec.ts   |  26 ++---
 .../artist/ArtistContextMenu.spec.ts          |  24 ++---
 .../js/components/artist/ArtistInfo.spec.ts   |  28 ++---
 .../__snapshots__/ArtistCard.spec.ts.snap     |   2 +-
 .../ArtistContextMenu.spec.ts.snap            |   2 +-
 .../js/components/auth/ForgotPasswordForm.vue |   8 +-
 .../js/components/auth/LoginForm.spec.ts      |  24 ++---
 .../assets/js/components/auth/LoginForm.vue   |   6 +-
 .../js/components/auth/ResetPasswordForm.vue  |   2 +-
 .../auth/__snapshots__/LoginForm.spec.ts.snap |   8 +-
 .../components/auth/sso/GoogleLoginButton.vue |   4 +-
 .../invitation/AcceptInvitation.vue           |   2 +-
 .../invitation/AcceptInvivation.spec.ts       |   6 +-
 .../koel-plus/ActivateLicenseForm.spec.ts     |   8 +-
 .../koel-plus/ActivateLicenseForm.vue         |   2 +-
 .../components/koel-plus/BtnUpgradeToPlus.vue |   2 +-
 .../koel-plus/KoelPlusModal.spec.ts           |   8 +-
 .../js/components/koel-plus/KoelPlusModal.vue |   6 +-
 .../app-footer/FooterExtraControls.spec.ts    |  22 ++--
 .../app-footer/FooterPlaybackControls.spec.ts |  46 ++++----
 .../layout/app-footer/FooterSongInfo.vue      |   4 +-
 .../__snapshots__/FooterSongInfo.spec.ts.snap |   2 +-
 .../js/components/layout/app-footer/index.vue |   2 +-
 .../layout/main-wrapper/MainContent.spec.ts   |  36 +++----
 .../extra-drawer/AboutKoelButton.vue          |   2 +-
 .../extra-drawer/ExtraDrawer.spec.ts          |  52 ++++-----
 .../main-wrapper/extra-drawer/ExtraDrawer.vue |   2 +-
 .../extra-drawer/ExtraDrawerButton.vue        |   2 +-
 .../extra-drawer/LogoutButton.vue             |   2 +-
 .../sidebar/PlaylistSidebarItem.vue           |   7 +-
 .../main-wrapper/sidebar/QueueSidebarItem.vue |   8 +-
 .../layout/main-wrapper/sidebar/Sidebar.vue   |   8 +-
 .../main-wrapper/sidebar/SidebarItem.spec.ts  |  26 ++---
 .../sidebar/SidebarManageSection.vue          |   8 +-
 .../sidebar/SidebarPlaylistsSection.spec.ts   |  22 ++--
 .../sidebar/SidebarPlaylistsSection.vue       |   2 +-
 .../sidebar/SidebarToggleButton.vue           |   4 +-
 .../sidebar/SidebarYourMusicSection.vue       |  12 +--
 .../sidebar/YouTubeSidebarItem.vue            |   2 +-
 .../js/components/meta/AboutKoelModal.spec.ts |  20 ++--
 .../js/components/meta/AboutKoelModal.vue     |   4 +-
 .../js/components/meta/CreditsBlock.vue       |   4 +-
 .../js/components/meta/SupportKoel.spec.ts    |  20 ++--
 .../__snapshots__/AboutKoelModal.spec.ts.snap |   4 +-
 .../CreatePlaylistContextMenu.spec.ts         |  12 +--
 .../CreatePlaylistContextMenuButton.vue       |   2 +-
 .../playlist/CreatePlaylistForm.vue           |   2 +-
 .../playlist/InvitePlaylistCollaborators.vue  |   4 +-
 .../PlaylistCollaborationModal.spec.ts        |   6 +-
 .../playlist/PlaylistCollaborationModal.vue   |   2 +-
 .../playlist/PlaylistCollaboratorList.spec.ts |  32 +++---
 .../playlist/PlaylistCollaboratorList.vue     |   2 +-
 .../PlaylistCollaboratorListItem.spec.ts      |  32 +++---
 .../playlist/PlaylistCollaboratorListItem.vue |   6 +-
 .../playlist/PlaylistCollaboratorsBadge.vue   |   4 +-
 .../playlist/PlaylistContextMenu.spec.ts      |  23 ++--
 .../playlist/PlaylistContextMenu.vue          |   4 +-
 .../PlaylistFolderContextMenu.spec.ts         |  12 +--
 .../CreateSmartPlaylistForm.vue               |   5 +-
 .../smart-playlist/EditSmartPlaylistForm.vue  |   7 +-
 .../smart-playlist/SmartPlaylistRuleGroup.vue |   4 +-
 .../EditableProfileAvatar.vue                 |   4 +-
 .../profile-preferences/Integrations.vue      |   2 +-
 .../profile-preferences/LastfmIntegration.vue |   2 +-
 .../profile-preferences/ProfileForm.spec.ts   |   8 +-
 .../profile-preferences/ProfileForm.vue       |   4 +-
 .../profile-preferences/QRLogin.vue           |   6 +-
 .../profile-preferences/ThemeCard.spec.ts     |  16 +--
 .../profile-preferences/ThemeCard.vue         |   2 +-
 .../__snapshots__/QRLogin.spec.ts.snap        |   2 +-
 .../__snapshots__/ThemeCard.spec.ts.snap      |   2 +-
 .../screens/AlbumListScreen.spec.ts           |  28 ++---
 .../js/components/screens/AlbumScreen.spec.ts |  76 ++++++-------
 .../js/components/screens/AlbumScreen.vue     |  10 +-
 .../components/screens/AllSongsScreen.spec.ts |  52 ++++-----
 .../js/components/screens/AllSongsScreen.vue  |   5 +-
 .../screens/ArtistListScreen.spec.ts          |  30 +++---
 .../js/components/screens/ArtistScreen.vue    |  16 +--
 .../screens/FavoritesScreen.spec.ts           |  18 ++--
 .../js/components/screens/GenreListScreen.vue |   4 +-
 .../js/components/screens/GenreScreen.spec.ts |  70 ++++++------
 .../js/components/screens/HomeScreen.spec.ts  |  10 +-
 .../js/components/screens/HomeScreen.vue      |  12 +--
 .../components/screens/PlaylistScreen.spec.ts |  38 +++----
 .../js/components/screens/PlaylistScreen.vue  |  14 +--
 .../js/components/screens/QueueScreen.spec.ts |  24 ++---
 .../screens/RecentlyPlayedScreen.spec.ts      |  32 +++---
 .../js/components/screens/UploadScreen.vue    |   2 +-
 .../components/screens/UserListScreen.spec.ts |  44 ++++----
 .../__snapshots__/AllSongsScreen.spec.ts.snap |   6 +-
 .../__snapshots__/SettingsScreen.spec.ts.snap |   2 +-
 .../screens/home/ViewAllRecentSongsButton.vue |   4 +-
 .../search/AlbumExcerptResultsBlock.vue       |   4 +-
 .../search/ArtistExcerptResultsBlock.vue      |   4 +-
 .../screens/search/SearchExcerptsScreen.vue   |   2 +-
 .../search/SongExcerptResultsBlock.vue        |   4 +-
 .../js/components/song/AddToMenu.spec.ts      |  34 +++---
 .../assets/js/components/song/AddToMenu.vue   |   2 +-
 .../js/components/song/EditSongForm.spec.ts   |  38 +++----
 .../js/components/song/EditSongForm.vue       |   8 +-
 .../js/components/song/SongCard.spec.ts       |  38 +++----
 .../assets/js/components/song/SongCard.vue    |   1 +
 .../components/song/SongContextMenu.spec.ts   |  30 +++---
 .../js/components/song/SongContextMenu.vue    |   4 +-
 .../js/components/song/SongList.spec.ts       |  64 +++++------
 .../assets/js/components/song/SongList.vue    |   4 +-
 .../components/song/SongListControls.spec.ts  |  52 ++++-----
 .../js/components/song/SongListFilter.vue     |   6 +-
 .../js/components/song/SongListItem.spec.ts   |  30 +++---
 .../js/components/song/SongListItem.vue       |   2 +-
 .../js/components/song/SongListSorter.vue     |   2 +-
 .../js/components/song/SongThumbnail.spec.ts  |  28 ++---
 .../__snapshots__/EditSongForm.spec.ts.snap   |  28 ++---
 .../js/components/ui/AlbumArtOverlay.spec.ts  |  28 ++---
 .../assets/js/components/ui/AlertBox.vue      |   6 +-
 .../js/components/ui/AppleMusicButton.vue     |   4 +-
 .../js/components/ui/ArtistAlbumCard.vue      |   4 +-
 .../ui/ArtistAlbumThumbnail.spec.ts           |  52 ++++-----
 .../js/components/ui/ArtistAlbumThumbnail.vue |   6 +-
 .../js/components/ui/BtnScrollToTop.vue       |   2 +-
 .../assets/js/components/ui/DialogBox.vue     |   4 +-
 .../assets/js/components/ui/ExternalMark.vue  |   2 +-
 .../js/components/ui/FooterPlayButton.spec.ts |  22 ++--
 .../js/components/ui/LyricsPane.spec.ts       |  34 +++---
 .../assets/js/components/ui/Magnifier.vue     |   2 +-
 resources/assets/js/components/ui/Overlay.vue |   1 +
 .../js/components/ui/PlaylistThumbnail.vue    |   6 +-
 .../assets/js/components/ui/ScreenHeader.vue  |   2 +-
 .../assets/js/components/ui/SearchForm.vue    |   6 +-
 .../js/components/ui/ThumbnailStack.vue       |   2 +-
 .../js/components/ui/VirtualScroller.vue      |   4 +-
 .../AppleMusicButton.spec.ts.snap             |   2 +-
 .../__snapshots__/BtnScrollToTop.spec.ts.snap |   2 +-
 .../__snapshots__/ScreenHeader.spec.ts.snap   |   2 +-
 .../ui/album-artist/AlbumOrArtistGrid.vue     |   4 +-
 .../ui/album-artist/AlbumOrArtistInfo.vue     |   2 +-
 .../album-artist/ExpandableContentBlock.vue   |   4 +-
 .../js/components/ui/equalizer/Equalizer.vue  |   6 +-
 .../components/ui/equalizer/EqualizerBand.vue |   2 +-
 .../js/components/ui/form/BtnGroup.spec.ts    |  16 +--
 .../assets/js/components/ui/form/CheckBox.vue |   2 +-
 .../assets/js/components/ui/form/FormRow.vue  |   2 +-
 .../js/components/ui/form/PasswordField.vue   |   4 +-
 .../js/components/ui/form/SelectBox.vue       |   4 +-
 .../assets/js/components/ui/form/TextArea.vue |   2 +-
 .../js/components/ui/form/TextInput.vue       |   2 +-
 .../form/__snapshots__/CheckBox.spec.ts.snap  |   4 +-
 .../ui/message-toaster/MessageToast.spec.ts   |  26 ++---
 .../ui/message-toaster/MessageToast.vue       |   2 +-
 .../ui/message-toaster/MessageToaster.vue     |   2 +-
 .../ui/skeletons/ArtistAlbumCardSkeleton.vue  |   2 +-
 .../ui/skeletons/GenreItemSkeleton.vue        |   2 +-
 .../js/components/ui/tabs/TabButton.vue       |   6 +-
 .../assets/js/components/ui/tabs/TabList.vue  |   2 +-
 .../components/ui/upload/UploadItem.spec.ts   |  44 ++++----
 .../js/components/ui/upload/UploadItem.vue    |   4 +-
 .../ui/youtube/YouTubeVideoItem.spec.ts       |  26 ++---
 .../ui/youtube/YouTubeVideoItem.vue           |   4 +-
 .../YouTubeVideoItem.spec.ts.snap             |   2 +-
 .../assets/js/components/user/AddUserForm.vue |   3 +-
 .../js/components/user/EditUserForm.vue       |   3 +-
 .../js/components/user/InviteUserForm.vue     |   2 +-
 .../assets/js/components/user/UserAvatar.vue  |   2 +-
 .../js/components/user/UserCard.spec.ts       |  18 ++--
 .../assets/js/components/user/UserCard.vue    |   4 +-
 .../js/components/utils/AppInitializer.vue    |   4 +-
 .../components/utils/GlobalEventListeners.vue |   2 +-
 .../js/components/utils/ImageCropper.vue      |   6 +-
 .../assets/js/composables/useErrorHandler.ts  |  20 ++--
 .../assets/js/composables/useFloatingUi.ts    |   2 +-
 resources/assets/js/composables/useOverlay.ts |   2 +-
 resources/assets/js/composables/useUpload.ts  |   2 +-
 resources/assets/js/config/routes.ts          |   3 +-
 .../js/config/smart-playlist/inputTypes.ts    |  10 +-
 .../js/remote/components/RemoteFooter.vue     |  16 +--
 .../assets/js/remote/components/Scanner.vue   |   2 +-
 .../js/remote/components/SongDetails.vue      |   4 +-
 .../js/remote/components/VolumeControl.vue    |   2 +-
 resources/assets/js/router.ts                 |  56 +++++-----
 resources/assets/js/services/http.ts          |  76 ++++++-------
 .../js/services/playbackService.spec.ts       |  42 ++++----
 .../assets/js/services/playbackService.ts     | 102 +++++++++---------
 resources/assets/js/services/volumeManager.ts |   2 +-
 resources/assets/js/stores/equalizerStore.ts  |   6 +-
 resources/assets/js/stores/songStore.ts       |   2 +-
 .../asteroid/scripts/ThreeSharedRenderer.ts   |   2 +-
 .../js/visualizers/waveform/lib/SceneInit.ts  |   2 +-
 199 files changed, 1257 insertions(+), 1290 deletions(-)

diff --git a/resources/assets/js/App.vue b/resources/assets/js/App.vue
index c0dc4a5b..65ec87a3 100644
--- a/resources/assets/js/App.vue
+++ b/resources/assets/js/App.vue
@@ -30,7 +30,7 @@
   <AcceptInvitation v-if="layout === 'invitation'" />
   <ResetPasswordForm v-if="layout === 'reset-password'" />
 
-  <AppInitializer v-if="authenticated" @success="onInitSuccess" @error="onInitError" />
+  <AppInitializer v-if="authenticated" @error="onInitError" @success="onInitSuccess" />
 </template>
 
 <script lang="ts" setup>
@@ -151,7 +151,7 @@ provide(CurrentSongKey, currentSong)
 
 <style lang="postcss">
 #dragGhost {
-  @apply inline-block py-2 px-3 rounded-md text-base font-sans fixed top-0 left-0 z-[-1] bg-k-success
+  @apply inline-block py-2 pl-8 pr-3 rounded-md text-base font-sans fixed top-0 left-0 z-[-1] bg-k-success
   text-k-text-primary no-hover:hidden;
 }
 
diff --git a/resources/assets/js/__tests__/UnitTestCase.ts b/resources/assets/js/__tests__/UnitTestCase.ts
index c93ccf9e..3b54fbd9 100644
--- a/resources/assets/js/__tests__/UnitTestCase.ts
+++ b/resources/assets/js/__tests__/UnitTestCase.ts
@@ -27,10 +27,18 @@ const deepMerge = (first: object, second: object) => {
   })
 }
 
+const setPropIfNotExists = (obj: object | null, prop: any, value: any) => {
+  if (!obj) return
+
+  if (!Object.prototype.hasOwnProperty.call(obj, prop)) {
+    obj[prop] = value
+  }
+}
+
 export default abstract class UnitTestCase {
-  private backupMethods = new Map()
   protected router: Router
   protected user: UserEvent
+  private backupMethods = new Map()
 
   public constructor () {
     this.router = new Router(routes)
@@ -108,37 +116,6 @@ export default abstract class UnitTestCase {
     }, this.supplyRequiredProvides(options)))
   }
 
-  private supplyRequiredProvides (options: RenderOptions) {
-    options.global = options.global || {}
-    options.global.provide = options.global.provide || {}
-
-    // @ts-ignore
-    if (!options.global.provide?.hasOwnProperty(DialogBoxKey)) {
-      // @ts-ignore
-      options.global.provide[DialogBoxKey] = DialogBoxStub
-    }
-
-    // @ts-ignore
-    if (!options.global.provide?.hasOwnProperty(MessageToasterKey)) {
-      // @ts-ignore
-      options.global.provide[MessageToasterKey] = MessageToasterStub
-    }
-
-    // @ts-ignore
-    if (!options.global.provide.hasOwnProperty(OverlayKey)) {
-      // @ts-ignore
-      options.global.provide[OverlayKey] = OverlayStub
-    }
-
-    // @ts-ignore
-    if (!options.global.provide.hasOwnProperty(RouterKey)) {
-      // @ts-ignore
-      options.global.provide[RouterKey] = this.router
-    }
-
-    return options
-  }
-
   protected enablePlusEdition () {
     commonStore.state.koel_plus = {
       active: true,
@@ -189,9 +166,21 @@ export default abstract class UnitTestCase {
     await this.user.type(element, value)
   }
 
-  protected async trigger(element: HTMLElement, key: EventType | string, options?: {}) {
+  protected async trigger (element: HTMLElement, key: EventType | string, options?: {}) {
     await fireEvent(element, createEvent[key](element, options))
   }
 
   protected abstract test ()
+
+  private supplyRequiredProvides (options: RenderOptions) {
+    options.global = options.global || {}
+    options.global.provide = options.global.provide || {}
+
+    setPropIfNotExists(options.global.provide, DialogBoxKey, DialogBoxStub)
+    setPropIfNotExists(options.global.provide, MessageToasterKey, MessageToasterStub)
+    setPropIfNotExists(options.global.provide, OverlayKey, OverlayStub)
+    setPropIfNotExists(options.global.provide, RouterKey, this.router)
+
+    return options
+  }
 }
diff --git a/resources/assets/js/components/album/AlbumCard.spec.ts b/resources/assets/js/components/album/AlbumCard.spec.ts
index 9516873e..0683b618 100644
--- a/resources/assets/js/components/album/AlbumCard.spec.ts
+++ b/resources/assets/js/components/album/AlbumCard.spec.ts
@@ -10,26 +10,6 @@ import AlbumCard from './AlbumCard.vue'
 let album: Album
 
 new class extends UnitTestCase {
-  private renderComponent () {
-    album = factory<Album>('album', {
-      id: 42,
-      name: 'IV',
-      artist_id: 17,
-      artist_name: 'Led Zeppelin'
-    })
-
-    return this.render(AlbumCard, {
-      props: {
-        album
-      },
-      global: {
-        stubs: {
-          AlbumArtistThumbnail: this.stub('thumbnail')
-        }
-      }
-    })
-  }
-
   protected test () {
     it('renders', () => expect(this.renderComponent().html()).toMatchSnapshot())
 
@@ -70,4 +50,24 @@ new class extends UnitTestCase {
       expect(emitMock).toHaveBeenCalledWith('ALBUM_CONTEXT_MENU_REQUESTED', expect.any(MouseEvent), album)
     })
   }
+
+  private renderComponent () {
+    album = factory<Album>('album', {
+      id: 42,
+      name: 'IV',
+      artist_id: 17,
+      artist_name: 'Led Zeppelin'
+    })
+
+    return this.render(AlbumCard, {
+      props: {
+        album
+      },
+      global: {
+        stubs: {
+          AlbumArtistThumbnail: this.stub('thumbnail')
+        }
+      }
+    })
+  }
 }
diff --git a/resources/assets/js/components/album/AlbumCard.vue b/resources/assets/js/components/album/AlbumCard.vue
index e948a867..e5db4765 100644
--- a/resources/assets/js/components/album/AlbumCard.vue
+++ b/resources/assets/js/components/album/AlbumCard.vue
@@ -2,8 +2,8 @@
   <ArtistAlbumCard
     v-if="showing"
     :entity="album"
-    :title="`${album.name} by ${album.artist_name}`"
     :layout="layout"
+    :title="`${album.name} by ${album.artist_name}`"
     @contextmenu="requestContextMenu"
     @dblclick="shuffle"
     @dragstart="onDragStart"
diff --git a/resources/assets/js/components/album/AlbumContextMenu.spec.ts b/resources/assets/js/components/album/AlbumContextMenu.spec.ts
index 5177072c..66d24cc3 100644
--- a/resources/assets/js/components/album/AlbumContextMenu.spec.ts
+++ b/resources/assets/js/components/album/AlbumContextMenu.spec.ts
@@ -11,18 +11,6 @@ import AlbumContextMenu from './AlbumContextMenu.vue'
 let album: Album
 
 new class extends UnitTestCase {
-  private async renderComponent (_album?: Album) {
-    album = _album || factory<Album>('album', {
-      name: 'IV'
-    })
-
-    const rendered = this.render(AlbumContextMenu)
-    eventBus.emit('ALBUM_CONTEXT_MENU_REQUESTED', { pageX: 420, pageY: 42 } as MouseEvent, album)
-    await this.tick(2)
-
-    return rendered
-  }
-
   protected test () {
     it('renders', async () => expect((await this.renderComponent()).html()).toMatchSnapshot())
 
@@ -94,4 +82,16 @@ new class extends UnitTestCase {
       expect(mock).toHaveBeenCalledWith(`artist/${album.artist_id}`)
     })
   }
+
+  private async renderComponent (_album?: Album) {
+    album = _album || factory<Album>('album', {
+      name: 'IV'
+    })
+
+    const rendered = this.render(AlbumContextMenu)
+    eventBus.emit('ALBUM_CONTEXT_MENU_REQUESTED', { pageX: 420, pageY: 42 } as MouseEvent, album)
+    await this.tick(2)
+
+    return rendered
+  }
 }
diff --git a/resources/assets/js/components/album/AlbumInfo.spec.ts b/resources/assets/js/components/album/AlbumInfo.spec.ts
index 41a2313c..de773bd2 100644
--- a/resources/assets/js/components/album/AlbumInfo.spec.ts
+++ b/resources/assets/js/components/album/AlbumInfo.spec.ts
@@ -9,6 +9,22 @@ import AlbumInfoComponent from './AlbumInfo.vue'
 let album: Album
 
 new class extends UnitTestCase {
+  protected test () {
+    it.each<[MediaInfoDisplayMode]>([['aside'], ['full']])('renders in %s mode', async (mode) => {
+      await this.renderComponent(mode)
+
+      screen.getByTestId('album-info-tracks')
+
+      if (mode === 'aside') {
+        screen.getByTestId('thumbnail')
+      } else {
+        expect(screen.queryByTestId('thumbnail')).toBeNull()
+      }
+
+      expect(screen.getByTestId('album-info').classList.contains(mode)).toBe(true)
+    })
+  }
+
   private async renderComponent (mode: MediaInfoDisplayMode = 'aside', info?: AlbumInfo) {
     commonStore.state.uses_last_fm = true
 
@@ -37,20 +53,4 @@ new class extends UnitTestCase {
 
     return rendered
   }
-
-  protected test () {
-    it.each<[MediaInfoDisplayMode]>([['aside'], ['full']])('renders in %s mode', async (mode) => {
-      await this.renderComponent(mode)
-
-      screen.getByTestId('album-info-tracks')
-
-      if (mode === 'aside') {
-        screen.getByTestId('thumbnail')
-      } else {
-        expect(screen.queryByTestId('thumbnail')).toBeNull()
-      }
-
-      expect(screen.getByTestId('album-info').classList.contains(mode)).toBe(true)
-    })
-  }
 }
diff --git a/resources/assets/js/components/album/AlbumInfo.vue b/resources/assets/js/components/album/AlbumInfo.vue
index ba6408bd..ee3d0646 100644
--- a/resources/assets/js/components/album/AlbumInfo.vue
+++ b/resources/assets/js/components/album/AlbumInfo.vue
@@ -19,8 +19,8 @@
         v-if="info.tracks?.length"
         :album="album"
         :tracks="info.tracks"
-        data-testid="album-info-tracks"
         class="mt-8"
+        data-testid="album-info-tracks"
       />
     </template>
 
diff --git a/resources/assets/js/components/album/AlbumTrackList.vue b/resources/assets/js/components/album/AlbumTrackList.vue
index be64df3e..5f401819 100644
--- a/resources/assets/js/components/album/AlbumTrackList.vue
+++ b/resources/assets/js/components/album/AlbumTrackList.vue
@@ -6,8 +6,8 @@
       <li
         v-for="(track, index) in tracks"
         :key="index"
-        data-testid="album-track-item"
         class="flex p-2 before:w-7 before:opacity-50"
+        data-testid="album-track-item"
       >
         <TrackListItem :album="album" :track="track" />
       </li>
diff --git a/resources/assets/js/components/album/AlbumTrackListItem.spec.ts b/resources/assets/js/components/album/AlbumTrackListItem.spec.ts
index 4039f6a9..ca2bfdba 100644
--- a/resources/assets/js/components/album/AlbumTrackListItem.spec.ts
+++ b/resources/assets/js/components/album/AlbumTrackListItem.spec.ts
@@ -9,6 +9,23 @@ import { ref } from 'vue'
 import AlbumTrackListItem from './AlbumTrackListItem.vue'
 
 new class extends UnitTestCase {
+  protected test () {
+    it('renders', () => expect(this.renderComponent().html()).toMatchSnapshot())
+
+    it('plays', async () => {
+      const matchedSong = factory<Song>('song')
+      const queueMock = this.mock(queueStore, 'queueIfNotQueued')
+      const playMock = this.mock(playbackService, 'play')
+
+      this.renderComponent(matchedSong)
+
+      await this.user.click(screen.getByTitle('Click to play'))
+
+      expect(queueMock).toHaveBeenNthCalledWith(1, matchedSong)
+      expect(playMock).toHaveBeenNthCalledWith(1, matchedSong)
+    })
+  }
+
   private renderComponent (matchedSong?: Song) {
     const songsToMatchAgainst = factory<Song>('song', 10)
     const album = factory<Album>('album')
@@ -36,21 +53,4 @@ new class extends UnitTestCase {
 
     return rendered
   }
-
-  protected test () {
-    it('renders', () => expect(this.renderComponent().html()).toMatchSnapshot())
-
-    it('plays', async () => {
-      const matchedSong = factory<Song>('song')
-      const queueMock = this.mock(queueStore, 'queueIfNotQueued')
-      const playMock = this.mock(playbackService, 'play')
-
-      this.renderComponent(matchedSong)
-
-      await this.user.click(screen.getByTitle('Click to play'))
-
-      expect(queueMock).toHaveBeenNthCalledWith(1, matchedSong)
-      expect(playMock).toHaveBeenNthCalledWith(1, matchedSong)
-    })
-  }
 }
diff --git a/resources/assets/js/components/album/AlbumTrackListItem.vue b/resources/assets/js/components/album/AlbumTrackListItem.vue
index a8502c5f..808c1e6e 100644
--- a/resources/assets/js/components/album/AlbumTrackListItem.vue
+++ b/resources/assets/js/components/album/AlbumTrackListItem.vue
@@ -1,8 +1,8 @@
 <template>
   <div
-    class="track-list-item flex flex-1 gap-1"
     :class="{ active, available: matchedSong }"
     :title="tooltip"
+    class="track-list-item flex flex-1 gap-1"
     tabindex="0"
     @click="play"
   >
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 2c48e12d..02ae8bf4 100644
--- a/resources/assets/js/components/album/__snapshots__/AlbumCard.spec.ts.snap
+++ b/resources/assets/js/components/album/__snapshots__/AlbumCard.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<article data-v-f01bdc56="" class="relative flex max-w-full md:max-w-[256px] border p-5 rounded-lg flex-col gap-5 transition border-color duration-200 full" draggable="true" tabindex="0" data-testid="artist-album-card" title="IV by Led Zeppelin">
+<article data-v-f01bdc56="" class="full relative flex max-w-full md:max-w-[256px] border p-5 rounded-lg flex-col gap-5 transition border-color duration-200" data-testid="artist-album-card" draggable="true" tabindex="0" title="IV by Led Zeppelin">
   <div data-v-a14c1d10="" data-v-f01bdc56="" class="cover relative w-full aspect-square bg-no-repeat bg-cover bg-center overflow-hidden rounded-md after:block after:pt-[100%]" style="background-image: url(undefined/resources/assets/img/covers/default.svg);" data-testid="album-artist-thumbnail"><img data-v-a14c1d10="" alt="IV" src="http://loremflickr.com/640/480" class="w-full h-full object-cover absolute left-0 top-0 pointer-events-none before:absolute before:w-full before:h-full before:opacity-0 before:z-[1] before-top-0" loading="lazy"><a data-v-a14c1d10="" class="control control-play h-full w-full absolute flex justify-center items-center" role="button"><span data-v-a14c1d10="" class="hidden">Play all songs in the album IV</span><span data-v-a14c1d10="" class="icon opacity-0 w-1/2 h-1/2 flex justify-center items-center pointer-events-none pl-[4%] rounded-full after:w-full after:h-full"></span></a></div>
   <footer data-v-f01bdc56="" class="flex flex-1 flex-col gap-1.5 overflow-hidden">
     <div data-v-f01bdc56="" class="name flex flex-col gap-2 whitespace-nowrap"><a href="#/album/42" class="font-medium" data-testid="name">IV</a><a href="#/artist/17">Led Zeppelin</a></div>
diff --git a/resources/assets/js/components/album/__snapshots__/AlbumContextMenu.spec.ts.snap b/resources/assets/js/components/album/__snapshots__/AlbumContextMenu.spec.ts.snap
index 995cbe75..25db3576 100644
--- a/resources/assets/js/components/album/__snapshots__/AlbumContextMenu.spec.ts.snap
+++ b/resources/assets/js/components/album/__snapshots__/AlbumContextMenu.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<nav data-v-0408531a="" class="album-menu menu context-menu select-none" style="top: 42px; left: 420px;" tabindex="0" data-testid="album-context-menu">
+<nav data-v-0408531a="" class="album-menu menu context-menu select-none" tabindex="0" data-testid="album-context-menu">
   <ul data-v-0408531a="">
     <li>Play All</li>
     <li>Shuffle All</li>
diff --git a/resources/assets/js/components/artist/ArtistCard.spec.ts b/resources/assets/js/components/artist/ArtistCard.spec.ts
index 6b2d7cdf..fd064654 100644
--- a/resources/assets/js/components/artist/ArtistCard.spec.ts
+++ b/resources/assets/js/components/artist/ArtistCard.spec.ts
@@ -19,19 +19,6 @@ new class extends UnitTestCase {
     })
   }
 
-  private renderComponent () {
-    return this.render(ArtistCard, {
-      props: {
-        artist
-      },
-      global: {
-        stubs: {
-          AlbumArtistThumbnail: this.stub('thumbnail')
-        }
-      }
-    })
-  }
-
   protected test () {
     it('renders', () => expect(this.renderComponent().html()).toMatchSnapshot())
 
@@ -72,4 +59,17 @@ new class extends UnitTestCase {
       expect(emitMock).toHaveBeenCalledWith('ARTIST_CONTEXT_MENU_REQUESTED', expect.any(MouseEvent), artist)
     })
   }
+
+  private renderComponent () {
+    return this.render(ArtistCard, {
+      props: {
+        artist
+      },
+      global: {
+        stubs: {
+          AlbumArtistThumbnail: this.stub('thumbnail')
+        }
+      }
+    })
+  }
 }
diff --git a/resources/assets/js/components/artist/ArtistContextMenu.spec.ts b/resources/assets/js/components/artist/ArtistContextMenu.spec.ts
index 1d5db5ef..f106b79d 100644
--- a/resources/assets/js/components/artist/ArtistContextMenu.spec.ts
+++ b/resources/assets/js/components/artist/ArtistContextMenu.spec.ts
@@ -11,18 +11,6 @@ import ArtistContextMenu from './ArtistContextMenu.vue'
 let artist: Artist
 
 new class extends UnitTestCase {
-  private async renderComponent (_artist?: Artist) {
-    artist = _artist || factory<Artist>('artist', {
-      name: 'Accept'
-    })
-
-    const rendered = this.render(ArtistContextMenu)
-    eventBus.emit('ARTIST_CONTEXT_MENU_REQUESTED', { pageX: 420, pageY: 42 } as MouseEvent, artist)
-    await this.tick(2)
-
-    return rendered
-  }
-
   protected test () {
     it('renders', async () => expect((await this.renderComponent()).html()).toMatchSnapshot())
 
@@ -91,4 +79,16 @@ new class extends UnitTestCase {
       expect(screen.queryByText('Download')).toBeNull()
     })
   }
+
+  private async renderComponent (_artist?: Artist) {
+    artist = _artist || factory<Artist>('artist', {
+      name: 'Accept'
+    })
+
+    const rendered = this.render(ArtistContextMenu)
+    eventBus.emit('ARTIST_CONTEXT_MENU_REQUESTED', { pageX: 420, pageY: 42 } as MouseEvent, artist)
+    await this.tick(2)
+
+    return rendered
+  }
 }
diff --git a/resources/assets/js/components/artist/ArtistInfo.spec.ts b/resources/assets/js/components/artist/ArtistInfo.spec.ts
index 22e168fe..fec4783d 100644
--- a/resources/assets/js/components/artist/ArtistInfo.spec.ts
+++ b/resources/assets/js/components/artist/ArtistInfo.spec.ts
@@ -9,6 +9,20 @@ import ArtistInfoComponent from './ArtistInfo.vue'
 let artist: Artist
 
 new class extends UnitTestCase {
+  protected test () {
+    it.each<[MediaInfoDisplayMode]>([['aside'], ['full']])('renders in %s mode', async (mode) => {
+      await this.renderComponent(mode)
+
+      if (mode === 'aside') {
+        screen.getByTestId('thumbnail')
+      } else {
+        expect(screen.queryByTestId('thumbnail')).toBeNull()
+      }
+
+      expect(screen.getByTestId('artist-info').classList.contains(mode)).toBe(true)
+    })
+  }
+
   private async renderComponent (mode: MediaInfoDisplayMode = 'aside', info?: ArtistInfo) {
     commonStore.state.uses_last_fm = true
     info = info ?? factory<ArtistInfo>('artist-info')
@@ -33,18 +47,4 @@ new class extends UnitTestCase {
 
     return rendered
   }
-
-  protected test () {
-    it.each<[MediaInfoDisplayMode]>([['aside'], ['full']])('renders in %s mode', async (mode) => {
-      await this.renderComponent(mode)
-
-      if (mode === 'aside') {
-        screen.getByTestId('thumbnail')
-      } else {
-        expect(screen.queryByTestId('thumbnail')).toBeNull()
-      }
-
-      expect(screen.getByTestId('artist-info').classList.contains(mode)).toBe(true)
-    })
-  }
 }
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 ba479d9e..cccdfeb4 100644
--- a/resources/assets/js/components/artist/__snapshots__/ArtistCard.spec.ts.snap
+++ b/resources/assets/js/components/artist/__snapshots__/ArtistCard.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<article data-v-f01bdc56="" class="relative flex max-w-full md:max-w-[256px] border p-5 rounded-lg flex-col gap-5 transition border-color duration-200 full" draggable="true" tabindex="0" data-testid="artist-album-card" title="Led Zeppelin">
+<article data-v-f01bdc56="" class="full relative flex max-w-full md:max-w-[256px] border p-5 rounded-lg flex-col gap-5 transition border-color duration-200" data-testid="artist-album-card" draggable="true" tabindex="0" title="Led Zeppelin">
   <div data-v-a14c1d10="" data-v-f01bdc56="" class="cover relative w-full aspect-square bg-no-repeat bg-cover bg-center overflow-hidden rounded-md after:block after:pt-[100%]" style="background-image: url(undefined/resources/assets/img/covers/default.svg);" data-testid="album-artist-thumbnail"><img data-v-a14c1d10="" alt="Led Zeppelin" src="foo.jpg" class="w-full h-full object-cover absolute left-0 top-0 pointer-events-none before:absolute before:w-full before:h-full before:opacity-0 before:z-[1] before-top-0" loading="lazy"><a data-v-a14c1d10="" class="control control-play h-full w-full absolute flex justify-center items-center" role="button"><span data-v-a14c1d10="" class="hidden">Play all songs by Led Zeppelin</span><span data-v-a14c1d10="" class="icon opacity-0 w-1/2 h-1/2 flex justify-center items-center pointer-events-none pl-[4%] rounded-full after:w-full after:h-full"></span></a></div>
   <footer data-v-f01bdc56="" class="flex flex-1 flex-col gap-1.5 overflow-hidden">
     <div data-v-f01bdc56="" class="name flex flex-col gap-2 whitespace-nowrap"><a href="#/artist/42" class="font-medium" data-testid="name">Led Zeppelin</a></div>
diff --git a/resources/assets/js/components/artist/__snapshots__/ArtistContextMenu.spec.ts.snap b/resources/assets/js/components/artist/__snapshots__/ArtistContextMenu.spec.ts.snap
index 83542b7a..97379ce1 100644
--- a/resources/assets/js/components/artist/__snapshots__/ArtistContextMenu.spec.ts.snap
+++ b/resources/assets/js/components/artist/__snapshots__/ArtistContextMenu.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<nav data-v-0408531a="" class="artist-menu menu context-menu select-none" style="top: 42px; left: 420px;" tabindex="0" data-testid="artist-context-menu">
+<nav data-v-0408531a="" class="artist-menu menu context-menu select-none" tabindex="0" data-testid="artist-context-menu">
   <ul data-v-0408531a="">
     <li>Play All</li>
     <li>Shuffle All</li>
diff --git a/resources/assets/js/components/auth/ForgotPasswordForm.vue b/resources/assets/js/components/auth/ForgotPasswordForm.vue
index 8674de05..5c2dd595 100644
--- a/resources/assets/js/components/auth/ForgotPasswordForm.vue
+++ b/resources/assets/js/components/auth/ForgotPasswordForm.vue
@@ -10,18 +10,18 @@
       <div class="flex flex-col gap-3 sm:flex-row sm:gap-0 sm:content-stretch">
         <TextInput
           v-model="email"
-          placeholder="Your email address"
-          required type="email"
           class="flex-1 sm:rounded-l sm:rounded-r-none"
+          placeholder="Your email address" required
+          type="email"
         />
-        <Btn :disabled="loading" type="submit" class="sm:rounded-l-none sm:rounded-r">Reset Password</Btn>
+        <Btn :disabled="loading" class="sm:rounded-l-none sm:rounded-r" type="submit">Reset Password</Btn>
         <Btn :disabled="loading" class="!text-k-text-secondary" transparent @click="cancel">Cancel</Btn>
       </div>
     </FormRow>
   </form>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { ref } from 'vue'
 import { authService } from '@/services'
 import { useErrorHandler, useMessageToaster } from '@/composables'
diff --git a/resources/assets/js/components/auth/LoginForm.spec.ts b/resources/assets/js/components/auth/LoginForm.spec.ts
index 63d54879..157f8f2f 100644
--- a/resources/assets/js/components/auth/LoginForm.spec.ts
+++ b/resources/assets/js/components/auth/LoginForm.spec.ts
@@ -6,18 +6,6 @@ import { logger } from '@/utils'
 import LoginFrom from './LoginForm.vue'
 
 new class extends UnitTestCase {
-  private async submitForm (loginMock: Mock) {
-    const rendered = this.render(LoginFrom)
-
-    await this.type(screen.getByPlaceholderText('Email Address'), 'john@doe.com')
-    await this.type(screen.getByPlaceholderText('Password'), 'secret')
-    await this.user.click(screen.getByTestId('submit'))
-
-    expect(loginMock).toHaveBeenCalledWith('john@doe.com', 'secret')
-
-    return rendered
-  }
-
   protected test () {
     it('renders', () => expect(this.render(LoginFrom).html()).toMatchSnapshot())
 
@@ -67,4 +55,16 @@ new class extends UnitTestCase {
       window.SSO_PROVIDERS = []
     })
   }
+
+  private async submitForm (loginMock: Mock) {
+    const rendered = this.render(LoginFrom)
+
+    await this.type(screen.getByPlaceholderText('Email Address'), 'john@doe.com')
+    await this.type(screen.getByPlaceholderText('Password'), 'secret')
+    await this.user.click(screen.getByTestId('submit'))
+
+    expect(loginMock).toHaveBeenCalledWith('john@doe.com', 'secret')
+
+    return rendered
+  }
 }
diff --git a/resources/assets/js/components/auth/LoginForm.vue b/resources/assets/js/components/auth/LoginForm.vue
index 3c4a4c88..68e27283 100644
--- a/resources/assets/js/components/auth/LoginForm.vue
+++ b/resources/assets/js/components/auth/LoginForm.vue
@@ -2,13 +2,13 @@
   <div class="flex items-center justify-center min-h-screen my-0 mx-auto flex-col gap-5">
     <form
       v-show="!showingForgotPasswordForm"
-      class="w-full sm:w-[288px] sm:border duration-500 p-7 rounded-xl border-transparent sm:bg-white/10 space-y-3"
       :class="{ error: failed }"
+      class="w-full sm:w-[288px] sm:border duration-500 p-7 rounded-xl border-transparent sm:bg-white/10 space-y-3"
       data-testid="login-form"
       @submit.prevent="login"
     >
       <div class="text-center mb-8">
-        <img class="inline-block" alt="Koel's logo" src="@/../img/logo.svg" width="156">
+        <img alt="Koel's logo" class="inline-block" src="@/../img/logo.svg" width="156">
       </div>
 
       <FormRow>
@@ -20,7 +20,7 @@
       </FormRow>
 
       <FormRow>
-        <Btn type="submit" data-testid="submit">Log In</Btn>
+        <Btn data-testid="submit" type="submit">Log In</Btn>
       </FormRow>
 
       <FormRow v-if="canResetPassword">
diff --git a/resources/assets/js/components/auth/ResetPasswordForm.vue b/resources/assets/js/components/auth/ResetPasswordForm.vue
index d2dba6fd..3d60617d 100644
--- a/resources/assets/js/components/auth/ResetPasswordForm.vue
+++ b/resources/assets/js/components/auth/ResetPasswordForm.vue
@@ -17,7 +17,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { computed, ref } from 'vue'
 import { authService } from '@/services'
 import { base64Decode } from '@/utils'
diff --git a/resources/assets/js/components/auth/__snapshots__/LoginForm.spec.ts.snap b/resources/assets/js/components/auth/__snapshots__/LoginForm.spec.ts.snap
index 06134257..657eb167 100644
--- a/resources/assets/js/components/auth/__snapshots__/LoginForm.spec.ts.snap
+++ b/resources/assets/js/components/auth/__snapshots__/LoginForm.spec.ts.snap
@@ -3,12 +3,12 @@
 exports[`renders 1`] = `
 <div data-v-0b0f87ea="" class="flex items-center justify-center min-h-screen my-0 mx-auto flex-col gap-5">
   <form data-v-0b0f87ea="" class="w-full sm:w-[288px] sm:border duration-500 p-7 rounded-xl border-transparent sm:bg-white/10 space-y-3" data-testid="login-form">
-    <div data-v-0b0f87ea="" class="text-center mb-8"><img data-v-0b0f87ea="" class="inline-block" alt="Koel's logo" src="undefined/resources/assets/img/logo.svg" width="156"></div><label data-v-0b0f87ea="" class="flex flex-col gap-2 text-[1.1rem]">
+    <div data-v-0b0f87ea="" class="text-center mb-8"><img data-v-0b0f87ea="" alt="Koel's logo" class="inline-block" src="undefined/resources/assets/img/logo.svg" width="156"></div><label data-v-0b0f87ea="" class="flex flex-col gap-2 text-[1.1rem]">
       <!--v-if--><input data-v-0b0f87ea="" class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900" type="email" autofocus="" placeholder="Email Address" required="">
       <!--v-if-->
     </label><label data-v-0b0f87ea="" class="flex flex-col gap-2 text-[1.1rem]">
       <!--v-if-->
-      <div data-v-0b0f87ea="" class="relative"><input class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900 w-full" type="password" data-testid="input" placeholder="Password" required=""><button class="absolute p-2.5 right-0 top-0 text-k-bg-primary" type="button" data-testid="toggle"><br data-testid="Icon" icon="[object Object]"></button></div>
+      <div data-v-0b0f87ea="" class="relative"><input class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900 w-full" type="password" data-testid="input" placeholder="Password" required=""><button class="absolute p-2.5 right-0 top-0 text-k-bg-primary" data-testid="toggle" type="button"><br data-testid="Icon" icon="[object Object]"></button></div>
       <!--v-if-->
     </label><label data-v-0b0f87ea="" class="flex flex-col gap-2 text-[1.1rem]">
       <!--v-if--><button data-v-8943c846="" data-v-0b0f87ea="" class="text-base text-k-text-primary bg-k-primary px-4 py-2.5 rounded cursor-pointer" type="submit" data-testid="submit">Log In</button>
@@ -26,12 +26,12 @@ exports[`renders 1`] = `
 exports[`shows Google login button 1`] = `
 <div data-v-0b0f87ea="" class="flex items-center justify-center min-h-screen my-0 mx-auto flex-col gap-5">
   <form data-v-0b0f87ea="" class="w-full sm:w-[288px] sm:border duration-500 p-7 rounded-xl border-transparent sm:bg-white/10 space-y-3" data-testid="login-form">
-    <div data-v-0b0f87ea="" class="text-center mb-8"><img data-v-0b0f87ea="" class="inline-block" alt="Koel's logo" src="undefined/resources/assets/img/logo.svg" width="156"></div><label data-v-0b0f87ea="" class="flex flex-col gap-2 text-[1.1rem]">
+    <div data-v-0b0f87ea="" class="text-center mb-8"><img data-v-0b0f87ea="" alt="Koel's logo" class="inline-block" src="undefined/resources/assets/img/logo.svg" width="156"></div><label data-v-0b0f87ea="" class="flex flex-col gap-2 text-[1.1rem]">
       <!--v-if--><input data-v-0b0f87ea="" class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900" type="email" autofocus="" placeholder="Email Address" required="">
       <!--v-if-->
     </label><label data-v-0b0f87ea="" class="flex flex-col gap-2 text-[1.1rem]">
       <!--v-if-->
-      <div data-v-0b0f87ea="" class="relative"><input class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900 w-full" type="password" data-testid="input" placeholder="Password" required=""><button class="absolute p-2.5 right-0 top-0 text-k-bg-primary" type="button" data-testid="toggle"><br data-testid="Icon" icon="[object Object]"></button></div>
+      <div data-v-0b0f87ea="" class="relative"><input class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900 w-full" type="password" data-testid="input" placeholder="Password" required=""><button class="absolute p-2.5 right-0 top-0 text-k-bg-primary" data-testid="toggle" type="button"><br data-testid="Icon" icon="[object Object]"></button></div>
       <!--v-if-->
     </label><label data-v-0b0f87ea="" class="flex flex-col gap-2 text-[1.1rem]">
       <!--v-if--><button data-v-8943c846="" data-v-0b0f87ea="" class="text-base text-k-text-primary bg-k-primary px-4 py-2.5 rounded cursor-pointer" type="submit" data-testid="submit">Log In</button>
diff --git a/resources/assets/js/components/auth/sso/GoogleLoginButton.vue b/resources/assets/js/components/auth/sso/GoogleLoginButton.vue
index 70eeae00..6dc575f2 100644
--- a/resources/assets/js/components/auth/sso/GoogleLoginButton.vue
+++ b/resources/assets/js/components/auth/sso/GoogleLoginButton.vue
@@ -5,11 +5,11 @@
     type="button"
     @click.prevent="loginWithGoogle"
   >
-    <img :src="googleLogo" alt="Google Logo" width="32" height="32">
+    <img :src="googleLogo" alt="Google Logo" height="32" width="32">
   </button>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import googleLogo from '@/../img/logos/google.svg'
 import { openPopup } from '@/utils'
 
diff --git a/resources/assets/js/components/invitation/AcceptInvitation.vue b/resources/assets/js/components/invitation/AcceptInvitation.vue
index 7c563afc..6c4db17e 100644
--- a/resources/assets/js/components/invitation/AcceptInvitation.vue
+++ b/resources/assets/js/components/invitation/AcceptInvitation.vue
@@ -41,7 +41,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { onMounted, ref } from 'vue'
 import { invitationService } from '@/services'
 import { useErrorHandler, useRouter } from '@/composables'
diff --git a/resources/assets/js/components/invitation/AcceptInvivation.spec.ts b/resources/assets/js/components/invitation/AcceptInvivation.spec.ts
index b2b8279f..a1971a6c 100644
--- a/resources/assets/js/components/invitation/AcceptInvivation.spec.ts
+++ b/resources/assets/js/components/invitation/AcceptInvivation.spec.ts
@@ -17,9 +17,9 @@ new class extends UnitTestCase {
       })
 
       await this.router.activateRoute({
-          path: '_',
-          screen: 'Invitation.Accept'
-        }, {
+        path: '_',
+        screen: 'Invitation.Accept'
+      }, {
         token: 'my-token'
       })
 
diff --git a/resources/assets/js/components/koel-plus/ActivateLicenseForm.spec.ts b/resources/assets/js/components/koel-plus/ActivateLicenseForm.spec.ts
index 9bc8171d..51ee01d8 100644
--- a/resources/assets/js/components/koel-plus/ActivateLicenseForm.spec.ts
+++ b/resources/assets/js/components/koel-plus/ActivateLicenseForm.spec.ts
@@ -5,10 +5,6 @@ import { plusService } from '@/services'
 import Form from './ActivateLicenseForm.vue'
 
 new class extends UnitTestCase {
-  private renderComponent () {
-    return this.render(Form )
-  }
-
   protected test () {
     it('activates license', async () => {
       this.renderComponent()
@@ -19,4 +15,8 @@ new class extends UnitTestCase {
       expect(activateMock).toHaveBeenCalledWith('my-license-key')
     })
   }
+
+  private renderComponent () {
+    return this.render(Form)
+  }
 }
diff --git a/resources/assets/js/components/koel-plus/ActivateLicenseForm.vue b/resources/assets/js/components/koel-plus/ActivateLicenseForm.vue
index acab62be..83361850 100644
--- a/resources/assets/js/components/koel-plus/ActivateLicenseForm.vue
+++ b/resources/assets/js/components/koel-plus/ActivateLicenseForm.vue
@@ -12,7 +12,7 @@
     <Btn :disabled="loading" class="!rounded-l-none" type="submit">Activate</Btn>
   </form>
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
 import { ref } from 'vue'
 import { plusService } from '@/services'
 import { forceReloadWindow } from '@/utils'
diff --git a/resources/assets/js/components/koel-plus/BtnUpgradeToPlus.vue b/resources/assets/js/components/koel-plus/BtnUpgradeToPlus.vue
index 8016c3fc..552506d6 100644
--- a/resources/assets/js/components/koel-plus/BtnUpgradeToPlus.vue
+++ b/resources/assets/js/components/koel-plus/BtnUpgradeToPlus.vue
@@ -8,7 +8,7 @@
   </Btn>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { faPlus } from '@fortawesome/free-solid-svg-icons'
 import { eventBus } from '@/utils'
 
diff --git a/resources/assets/js/components/koel-plus/KoelPlusModal.spec.ts b/resources/assets/js/components/koel-plus/KoelPlusModal.spec.ts
index 82710564..4d71d950 100644
--- a/resources/assets/js/components/koel-plus/KoelPlusModal.spec.ts
+++ b/resources/assets/js/components/koel-plus/KoelPlusModal.spec.ts
@@ -5,10 +5,6 @@ import UnitTestCase from '@/__tests__/UnitTestCase'
 import Modal from './KoelPlusModal.vue'
 
 new class extends UnitTestCase {
-  private renderComponent () {
-    return this.render(Modal)
-  }
-
   protected test () {
     it('shows button to purchase Koel Plus', async () => {
       commonStore.state.koel_plus.product_id = '42'
@@ -29,4 +25,8 @@ new class extends UnitTestCase {
       screen.getByTestId('activateForm')
     })
   }
+
+  private renderComponent () {
+    return this.render(Modal)
+  }
 }
diff --git a/resources/assets/js/components/koel-plus/KoelPlusModal.vue b/resources/assets/js/components/koel-plus/KoelPlusModal.vue
index f009fdc2..3e342593 100644
--- a/resources/assets/js/components/koel-plus/KoelPlusModal.vue
+++ b/resources/assets/js/components/koel-plus/KoelPlusModal.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="plus text-k-text-secondary max-w-[480px] flex flex-col items-center" data-testid="koel-plus" tabindex="0">
     <img
-      class="-mt-[48px] rounded-full border-[6px] border-white"
       alt="Koel Plus"
+      class="-mt-[48px] rounded-full border-[6px] border-white"
       src="@/../img/koel-plus.svg"
       width="96"
     >
@@ -30,12 +30,12 @@
     </main>
 
     <footer class="w-full text-center bg-black/20">
-      <Btn data-testid="close-modal-btn" danger rounded @click.prevent="close">Close</Btn>
+      <Btn danger data-testid="close-modal-btn" rounded @click.prevent="close">Close</Btn>
     </footer>
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { onMounted, ref } from 'vue'
 import { useKoelPlus } from '@/composables'
 
diff --git a/resources/assets/js/components/layout/app-footer/FooterExtraControls.spec.ts b/resources/assets/js/components/layout/app-footer/FooterExtraControls.spec.ts
index 3e00f155..bf201c46 100644
--- a/resources/assets/js/components/layout/app-footer/FooterExtraControls.spec.ts
+++ b/resources/assets/js/components/layout/app-footer/FooterExtraControls.spec.ts
@@ -5,17 +5,6 @@ import { eventBus } from '@/utils'
 import FooterExtraControls from './FooterExtraControls.vue'
 
 new class extends UnitTestCase {
-  private renderComponent () {
-    return this.render(FooterExtraControls, {
-      global: {
-        stubs: {
-          Equalizer: this.stub('Equalizer'),
-          Volume: this.stub('Volume')
-        }
-      }
-    })
-  }
-
   protected test () {
     it('renders', () => {
       this.setReadOnlyProperty(document, 'fullscreenEnabled', undefined)
@@ -32,4 +21,15 @@ new class extends UnitTestCase {
       expect(emitMock).toHaveBeenCalledWith('FULLSCREEN_TOGGLE')
     })
   }
+
+  private renderComponent () {
+    return this.render(FooterExtraControls, {
+      global: {
+        stubs: {
+          Equalizer: this.stub('Equalizer'),
+          Volume: this.stub('Volume')
+        }
+      }
+    })
+  }
 }
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 f7e00fe9..edfb82f8 100644
--- a/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.spec.ts
+++ b/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.spec.ts
@@ -8,6 +8,29 @@ import { screen } from '@testing-library/vue'
 import FooterPlaybackControls from './FooterPlaybackControls.vue'
 
 new class extends UnitTestCase {
+  protected test () {
+    it('renders without a current song', () => expect(this.renderComponent(null).html()).toMatchSnapshot())
+    it('renders with a current song', () => expect(this.renderComponent().html()).toMatchSnapshot())
+
+    it('plays the previous song', async () => {
+      const playMock = this.mock(playbackService, 'playPrev')
+      this.renderComponent()
+
+      await this.user.click(screen.getByRole('button', { name: 'Play previous song' }))
+
+      expect(playMock).toHaveBeenCalled()
+    })
+
+    it('plays the next song', async () => {
+      const playMock = this.mock(playbackService, 'playNext')
+      this.renderComponent()
+
+      await this.user.click(screen.getByRole('button', { name: 'Play next song' }))
+
+      expect(playMock).toHaveBeenCalled()
+    })
+  }
+
   private renderComponent (song?: Song | null) {
     if (song === undefined) {
       song = factory<Song>('song', {
@@ -32,27 +55,4 @@ new class extends UnitTestCase {
       }
     })
   }
-
-  protected test () {
-    it('renders without a current song', () => expect(this.renderComponent(null).html()).toMatchSnapshot())
-    it('renders with a current song', () => expect(this.renderComponent().html()).toMatchSnapshot())
-
-    it('plays the previous song', async () => {
-      const playMock = this.mock(playbackService, 'playPrev')
-      this.renderComponent()
-
-      await this.user.click(screen.getByRole('button', { name: 'Play previous song' }))
-
-      expect(playMock).toHaveBeenCalled()
-    })
-
-    it('plays the next song', async () => {
-      const playMock = this.mock(playbackService, 'playNext')
-      this.renderComponent()
-
-      await this.user.click(screen.getByRole('button', { name: 'Play next song' }))
-
-      expect(playMock).toHaveBeenCalled()
-    })
-  }
 }
diff --git a/resources/assets/js/components/layout/app-footer/FooterSongInfo.vue b/resources/assets/js/components/layout/app-footer/FooterSongInfo.vue
index 35e42736..2d373041 100644
--- a/resources/assets/js/components/layout/app-footer/FooterSongInfo.vue
+++ b/resources/assets/js/components/layout/app-footer/FooterSongInfo.vue
@@ -9,8 +9,8 @@
     <div v-if="song" class="meta overflow-hidden hidden md:block">
       <h3 class="title text-ellipsis overflow-hidden whitespace-nowrap">{{ song.title }}</h3>
       <a
-        class="artist text-ellipsis overflow-hidden whitespace-nowrap block text-[0.9rem] !text-k-text-secondary hover:!text-k-accent"
         :href="`/#/artist/${song.artist_id}`"
+        class="artist text-ellipsis overflow-hidden whitespace-nowrap block text-[0.9rem] !text-k-text-secondary hover:!text-k-accent"
       >
         {{ song.artist_name }}
       </a>
@@ -29,7 +29,7 @@ const { startDragging } = useDraggable('songs')
 const song = requireInjection(CurrentSongKey, ref())
 
 const cover = computed(() => song.value?.album_cover || defaultCover)
-const coverBackgroundImage = computed(() => `url(${ cover.value })`)
+const coverBackgroundImage = computed(() => `url(${cover.value})`)
 const draggable = computed(() => Boolean(song.value))
 
 const onDragStart = (event: DragEvent) => {
diff --git a/resources/assets/js/components/layout/app-footer/__snapshots__/FooterSongInfo.spec.ts.snap b/resources/assets/js/components/layout/app-footer/__snapshots__/FooterSongInfo.spec.ts.snap
index 0d0af91e..01fec078 100644
--- a/resources/assets/js/components/layout/app-footer/__snapshots__/FooterSongInfo.spec.ts.snap
+++ b/resources/assets/js/components/layout/app-footer/__snapshots__/FooterSongInfo.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`renders with current song 1`] = `
 <div data-v-91ed60f7="" class="playing song-info px-6 py-0 flex items-center content-start w-[84px] md:w-80 gap-5" draggable="true"><span data-v-91ed60f7="" class="album-thumb block h-[55%] md:h-3/4 aspect-square rounded-full bg-cover"></span>
   <div data-v-91ed60f7="" class="meta overflow-hidden hidden md:block">
-    <h3 data-v-91ed60f7="" class="title text-ellipsis overflow-hidden whitespace-nowrap">Fahrstuhl zum Mond</h3><a data-v-91ed60f7="" class="artist text-ellipsis overflow-hidden whitespace-nowrap block text-[0.9rem] !text-k-text-secondary hover:!text-k-accent" href="/#/artist/10">Led Zeppelin</a>
+    <h3 data-v-91ed60f7="" class="title text-ellipsis overflow-hidden whitespace-nowrap">Fahrstuhl zum Mond</h3><a data-v-91ed60f7="" href="/#/artist/10" class="artist text-ellipsis overflow-hidden whitespace-nowrap block text-[0.9rem] !text-k-text-secondary hover:!text-k-accent">Led Zeppelin</a>
   </div>
 </div>
 `;
diff --git a/resources/assets/js/components/layout/app-footer/index.vue b/resources/assets/js/components/layout/app-footer/index.vue
index e73e4ce4..74376276 100644
--- a/resources/assets/js/components/layout/app-footer/index.vue
+++ b/resources/assets/js/components/layout/app-footer/index.vue
@@ -2,8 +2,8 @@
   <footer
     ref="root"
     class="flex flex-col relative z-20 bg-k-bg-secondary h-k-footer-height"
-    @contextmenu.prevent="requestContextMenu"
     @mousemove="showControls"
+    @contextmenu.prevent="requestContextMenu"
   >
     <AudioPlayer v-show="song" />
 
diff --git a/resources/assets/js/components/layout/main-wrapper/MainContent.spec.ts b/resources/assets/js/components/layout/main-wrapper/MainContent.spec.ts
index 83efd789..e1feda9a 100644
--- a/resources/assets/js/components/layout/main-wrapper/MainContent.spec.ts
+++ b/resources/assets/js/components/layout/main-wrapper/MainContent.spec.ts
@@ -9,6 +9,24 @@ import AlbumArtOverlay from '@/components/ui/AlbumArtOverlay.vue'
 import MainContent from './MainContent.vue'
 
 new class extends UnitTestCase {
+  protected test () {
+    it('has a translucent overlay per album', async () => {
+      this.mock(albumStore, 'fetchThumbnail').mockResolvedValue('http://test/foo.jpg')
+
+      this.renderComponent()
+
+      await waitFor(() => screen.getByTestId('album-art-overlay'))
+    })
+
+    it('does not have a translucent over if configured not so', async () => {
+      preferenceStore.state.show_album_art_overlay = false
+
+      this.renderComponent()
+
+      await waitFor(() => expect(screen.queryByTestId('album-art-overlay')).toBeNull())
+    })
+  }
+
   private renderComponent () {
     return this.render(MainContent, {
       global: {
@@ -32,22 +50,4 @@ new class extends UnitTestCase {
       }
     })
   }
-
-  protected test () {
-    it('has a translucent overlay per album', async () => {
-      this.mock(albumStore, 'fetchThumbnail').mockResolvedValue('http://test/foo.jpg')
-
-      this.renderComponent()
-
-      await waitFor(() => screen.getByTestId('album-art-overlay'))
-    })
-
-    it('does not have a translucent over if configured not so', async () => {
-      preferenceStore.state.show_album_art_overlay = false
-
-      this.renderComponent()
-
-      await waitFor(() => expect(screen.queryByTestId('album-art-overlay')).toBeNull())
-    })
-  }
 }
diff --git a/resources/assets/js/components/layout/main-wrapper/extra-drawer/AboutKoelButton.vue b/resources/assets/js/components/layout/main-wrapper/extra-drawer/AboutKoelButton.vue
index 8fc01b9d..eff487a1 100644
--- a/resources/assets/js/components/layout/main-wrapper/extra-drawer/AboutKoelButton.vue
+++ b/resources/assets/js/components/layout/main-wrapper/extra-drawer/AboutKoelButton.vue
@@ -13,7 +13,7 @@
   </ExtraDrawerButton>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
 import { eventBus } from '@/utils'
 import { useNewVersionNotification } from '@/composables'
diff --git a/resources/assets/js/components/layout/main-wrapper/extra-drawer/ExtraDrawer.spec.ts b/resources/assets/js/components/layout/main-wrapper/extra-drawer/ExtraDrawer.spec.ts
index b74b69e0..b9401dc8 100644
--- a/resources/assets/js/components/layout/main-wrapper/extra-drawer/ExtraDrawer.spec.ts
+++ b/resources/assets/js/components/layout/main-wrapper/extra-drawer/ExtraDrawer.spec.ts
@@ -9,32 +9,6 @@ import { eventBus } from '@/utils'
 import ExtraDrawer from './ExtraDrawer.vue'
 
 new class extends UnitTestCase {
-  private renderComponent (songRef: Ref<Song | null> = ref(null)): [RenderResult, Mock, Mock] {
-    const artist = factory<Artist>('artist')
-    const resolveArtistMock = this.mock(artistStore, 'resolve').mockResolvedValue(artist)
-
-    const album = factory<Album>('album')
-    const resolveAlbumMock = this.mock(albumStore, 'resolve').mockResolvedValue(album)
-
-    const rendered = this.render(ExtraDrawer, {
-      global: {
-        stubs: {
-          ProfileAvatar: this.stub(),
-          LyricsPane: this.stub('lyrics'),
-          AlbumInfo: this.stub('album-info'),
-          ArtistInfo: this.stub('artist-info'),
-          YouTubeVideoList: this.stub('youtube-video-list'),
-          ExtraPanelTabHeader: this.stub()
-        },
-        provide: {
-          [<symbol>CurrentSongKey]: songRef
-        }
-      }
-    })
-
-    return [rendered, resolveArtistMock, resolveAlbumMock]
-  }
-
   protected test () {
     it('renders without a current song', () => expect(this.renderComponent()[0].html()).toMatchSnapshot())
 
@@ -90,4 +64,30 @@ new class extends UnitTestCase {
       expect(emitMock).toHaveBeenCalledWith('LOG_OUT')
     })
   }
+
+  private renderComponent (songRef: Ref<Song | null> = ref(null)): [RenderResult, Mock, Mock] {
+    const artist = factory<Artist>('artist')
+    const resolveArtistMock = this.mock(artistStore, 'resolve').mockResolvedValue(artist)
+
+    const album = factory<Album>('album')
+    const resolveAlbumMock = this.mock(albumStore, 'resolve').mockResolvedValue(album)
+
+    const rendered = this.render(ExtraDrawer, {
+      global: {
+        stubs: {
+          ProfileAvatar: this.stub(),
+          LyricsPane: this.stub('lyrics'),
+          AlbumInfo: this.stub('album-info'),
+          ArtistInfo: this.stub('artist-info'),
+          YouTubeVideoList: this.stub('youtube-video-list'),
+          ExtraPanelTabHeader: this.stub()
+        },
+        provide: {
+          [<symbol>CurrentSongKey]: songRef
+        }
+      }
+    })
+
+    return [rendered, resolveArtistMock, resolveAlbumMock]
+  }
 }
diff --git a/resources/assets/js/components/layout/main-wrapper/extra-drawer/ExtraDrawer.vue b/resources/assets/js/components/layout/main-wrapper/extra-drawer/ExtraDrawer.vue
index b6540817..ff320200 100644
--- a/resources/assets/js/components/layout/main-wrapper/extra-drawer/ExtraDrawer.vue
+++ b/resources/assets/js/components/layout/main-wrapper/extra-drawer/ExtraDrawer.vue
@@ -57,8 +57,8 @@
       <div
         v-show="activeTab === 'YouTube'"
         id="extraPanelYouTube"
-        data-testid="extra-drawer-youtube"
         aria-labelledby="extraTabYouTube"
+        data-testid="extra-drawer-youtube"
         role="tabpanel"
         tabindex="0"
       >
diff --git a/resources/assets/js/components/layout/main-wrapper/extra-drawer/ExtraDrawerButton.vue b/resources/assets/js/components/layout/main-wrapper/extra-drawer/ExtraDrawerButton.vue
index 3bd44772..c163981a 100644
--- a/resources/assets/js/components/layout/main-wrapper/extra-drawer/ExtraDrawerButton.vue
+++ b/resources/assets/js/components/layout/main-wrapper/extra-drawer/ExtraDrawerButton.vue
@@ -9,7 +9,7 @@
   </button>
 </template>
 
-<style scoped lang="postcss">
+<style lang="postcss" scoped>
 @tailwind utilities;
 
 @layer utilities {
diff --git a/resources/assets/js/components/layout/main-wrapper/extra-drawer/LogoutButton.vue b/resources/assets/js/components/layout/main-wrapper/extra-drawer/LogoutButton.vue
index d7b482dd..f162103e 100644
--- a/resources/assets/js/components/layout/main-wrapper/extra-drawer/LogoutButton.vue
+++ b/resources/assets/js/components/layout/main-wrapper/extra-drawer/LogoutButton.vue
@@ -4,7 +4,7 @@
   </ExtraDrawerButton>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { faArrowRightFromBracket } from '@fortawesome/free-solid-svg-icons'
 import { eventBus } from '@/utils'
 
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistSidebarItem.vue b/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistSidebarItem.vue
index 83360ed9..6a7c43b4 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistSidebarItem.vue
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistSidebarItem.vue
@@ -22,12 +22,7 @@
 </template>
 
 <script lang="ts" setup>
-import {
-  faClockRotateLeft,
-  faHeart,
-  faUsers,
-  faWandMagicSparkles
-} from '@fortawesome/free-solid-svg-icons'
+import { faClockRotateLeft, faHeart, faUsers, faWandMagicSparkles } from '@fortawesome/free-solid-svg-icons'
 import { ListMusic } from 'lucide-vue-next'
 import { computed, ref, toRefs } from 'vue'
 import { eventBus } from '@/utils'
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/QueueSidebarItem.vue b/resources/assets/js/components/layout/main-wrapper/sidebar/QueueSidebarItem.vue
index d453eee0..7514b251 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/QueueSidebarItem.vue
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/QueueSidebarItem.vue
@@ -1,11 +1,11 @@
 <template>
   <SidebarItem
-    screen="Queue"
-    href="#/queue"
     :class="droppable && 'droppable'"
+    href="#/queue"
+    screen="Queue"
     @dragleave="onQueueDragLeave"
-    @dragover.prevent="onQueueDragOver"
     @drop="onQueueDrop"
+    @dragover.prevent="onQueueDragOver"
   >
     <template #icon>
       <Icon :icon="faListOl" fixed-width />
@@ -39,7 +39,7 @@ const onQueueDrop = async (event: DragEvent) => {
 
   if (songs.length) {
     queueStore.queue(songs)
-    toastSuccess(`Added ${ pluralize(songs, 'song') } to queue.`)
+    toastSuccess(`Added ${pluralize(songs, 'song')} to queue.`)
   } else {
     toastWarning('No applicable songs to queue.')
   }
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.vue b/resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.vue
index d64e8ad3..ff4b8240 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.vue
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.vue
@@ -27,13 +27,7 @@
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue'
 import { eventBus } from '@/utils'
-import {
-  useAuthorization,
-  useKoelPlus,
-  useRouter,
-  useUpload,
-  useLocalStorage
-} from '@/composables'
+import { useAuthorization, useKoelPlus, useLocalStorage, useRouter, useUpload } from '@/composables'
 
 import SidebarPlaylistsSection from './SidebarPlaylistsSection.vue'
 import SearchForm from '@/components/ui/SearchForm.vue'
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarItem.spec.ts b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarItem.spec.ts
index a24a7d71..362b4862 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarItem.spec.ts
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarItem.spec.ts
@@ -5,19 +5,6 @@ import { faHome } from '@fortawesome/free-solid-svg-icons'
 import SidebarItem from './SidebarItem.vue'
 
 new class extends UnitTestCase {
-  private renderComponent () {
-    return this.render(SidebarItem, {
-      props: {
-        icon: faHome,
-        href: '#',
-        screen: 'Home'
-      },
-      slots: {
-        default: 'Home'
-      }
-    })
-  }
-
   protected test () {
     it('renders', () => expect(this.renderComponent().html()).toMatchSnapshot())
 
@@ -32,4 +19,17 @@ new class extends UnitTestCase {
       expect(screen.getByTestId('sidebar-item').classList.contains('current')).toBe(true)
     })
   }
+
+  private renderComponent () {
+    return this.render(SidebarItem, {
+      props: {
+        icon: faHome,
+        href: '#',
+        screen: 'Home'
+      },
+      slots: {
+        default: 'Home'
+      }
+    })
+  }
 }
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarManageSection.vue b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarManageSection.vue
index 713a4539..5deffde5 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarManageSection.vue
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarManageSection.vue
@@ -5,19 +5,19 @@
     </template>
 
     <ul class="menu">
-      <SidebarItem v-if="isAdmin" screen="Settings" href="#/settings">
+      <SidebarItem v-if="isAdmin" href="#/settings" screen="Settings">
         <template #icon>
           <Icon :icon="faTools" fixed-width />
         </template>
         Settings
       </SidebarItem>
-      <SidebarItem v-if="allowsUpload" screen="Upload" href="#/upload">
+      <SidebarItem v-if="allowsUpload" href="#/upload" screen="Upload">
         <template #icon>
           <Icon :icon="faUpload" fixed-width />
         </template>
         Upload
       </SidebarItem>
-      <SidebarItem v-if="isAdmin" screen="Users" href="#/users">
+      <SidebarItem v-if="isAdmin" href="#/users" screen="Users">
         <template #icon>
           <Icon :icon="faUsers" fixed-width />
         </template>
@@ -26,7 +26,7 @@
     </ul>
   </SidebarSection>
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
 import { faTools, faUpload, faUsers } from '@fortawesome/free-solid-svg-icons'
 import { useAuthorization, useUpload } from '@/composables'
 
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarPlaylistsSection.spec.ts b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarPlaylistsSection.spec.ts
index 718078cc..c606e8dd 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarPlaylistsSection.spec.ts
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarPlaylistsSection.spec.ts
@@ -8,17 +8,6 @@ import PlaylistSidebarItem from './PlaylistSidebarItem.vue'
 import PlaylistFolderSidebarItem from './PlaylistFolderSidebarItem.vue'
 
 new class extends UnitTestCase {
-  private renderComponent () {
-    this.render(SidebarPlaylistsSection, {
-      global: {
-        stubs: {
-          PlaylistSidebarItem,
-          PlaylistFolderSidebarItem
-        }
-      }
-    })
-  }
-
   protected test () {
     it('displays orphan playlists', () => {
       playlistStore.state.playlists = [
@@ -44,4 +33,15 @@ new class extends UnitTestCase {
       ;['Foo Folder', 'Bar Folder'].forEach(text => screen.getByText(text))
     })
   }
+
+  private renderComponent () {
+    this.render(SidebarPlaylistsSection, {
+      global: {
+        stubs: {
+          PlaylistSidebarItem,
+          PlaylistFolderSidebarItem
+        }
+      }
+    })
+  }
 }
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarPlaylistsSection.vue b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarPlaylistsSection.vue
index 08abed33..f44024b9 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarPlaylistsSection.vue
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarPlaylistsSection.vue
@@ -29,7 +29,7 @@ const playlists = toRef(playlistStore.state, 'playlists')
 const favorites = toRef(favoriteStore.state, 'songs')
 
 const orphanPlaylists = computed(() => playlists.value.filter(({ folder_id }) => {
-  if  (folder_id === null) return true
+  if (folder_id === null) return true
 
   // if the playlist's folder is not found, it's an orphan
   // this can happen if the playlist belongs to another user (collaborative playlist)
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarToggleButton.vue b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarToggleButton.vue
index c271462d..97988b26 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarToggleButton.vue
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarToggleButton.vue
@@ -4,13 +4,13 @@
     justify-center z-10 text-k-text-secondary bg-k-bg-secondary border-[1.5px] border-white/20 cursor-pointer
     hover:text-k-text-primary hover:bg-k-bg-secondary"
   >
-    <input v-model="value" type="checkbox" class="hidden">
+    <input v-model="value" class="hidden" type="checkbox">
     <Icon v-if="value" :icon="faAngleLeft" />
     <Icon v-else :icon="faAngleRight" />
   </label>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarYourMusicSection.vue b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarYourMusicSection.vue
index ca04c1d2..c3ab9dbf 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarYourMusicSection.vue
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarYourMusicSection.vue
@@ -5,32 +5,32 @@
     </template>
 
     <ul class="menu">
-      <SidebarItem screen="Home" href="#/home">
+      <SidebarItem href="#/home" screen="Home">
         <template #icon>
           <Icon :icon="faHome" fixed-width />
         </template>
         Home
       </SidebarItem>
       <QueueSidebarItem />
-      <SidebarItem screen="Songs" href="#/songs">
+      <SidebarItem href="#/songs" screen="Songs">
         <template #icon>
           <Icon :icon="faMusic" fixed-width />
         </template>
         All Songs
       </SidebarItem>
-      <SidebarItem screen="Albums" href="#/albums">
+      <SidebarItem href="#/albums" screen="Albums">
         <template #icon>
           <Icon :icon="faCompactDisc" fixed-width />
         </template>
         Albums
       </SidebarItem>
-      <SidebarItem screen="Artists" href="#/artists">
+      <SidebarItem href="#/artists" screen="Artists">
         <template #icon>
           <Icon :icon="faMicrophone" fixed-width />
         </template>
         Artists
       </SidebarItem>
-      <SidebarItem screen="Genres" href="#/genres">
+      <SidebarItem href="#/genres" screen="Genres">
         <template #icon>
           <Icon :icon="faTags" fixed-width />
         </template>
@@ -43,7 +43,7 @@
   </SidebarSection>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { faCompactDisc, faHome, faMicrophone, faMusic, faTags } from '@fortawesome/free-solid-svg-icons'
 import { unescape } from 'lodash'
 import { ref } from 'vue'
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/YouTubeSidebarItem.vue b/resources/assets/js/components/layout/main-wrapper/sidebar/YouTubeSidebarItem.vue
index 93af9352..c2612641 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/YouTubeSidebarItem.vue
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/YouTubeSidebarItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <SidebarItem screen="YouTube" href="#/youtube">
+  <SidebarItem href="#/youtube" screen="YouTube">
     <template #icon>
       <Icon :icon="faYoutube" fixed-width />
     </template>
diff --git a/resources/assets/js/components/meta/AboutKoelModal.spec.ts b/resources/assets/js/components/meta/AboutKoelModal.spec.ts
index 878af6da..4a4ded85 100644
--- a/resources/assets/js/components/meta/AboutKoelModal.spec.ts
+++ b/resources/assets/js/components/meta/AboutKoelModal.spec.ts
@@ -6,16 +6,6 @@ import { screen, waitFor } from '@testing-library/vue'
 import AboutKoelModel from './AboutKoelModal.vue'
 
 new class extends UnitTestCase {
-  private renderComponent () {
-    return this.render(AboutKoelModel, {
-      global: {
-        stubs: {
-          SponsorList: this.stub('sponsor-list')
-        }
-      }
-    })
-  }
-
   protected test () {
     it('renders', async () => {
       commonStore.state.current_version = 'v0.0.0'
@@ -44,4 +34,14 @@ new class extends UnitTestCase {
       window.IS_DEMO = false
     })
   }
+
+  private renderComponent () {
+    return this.render(AboutKoelModel, {
+      global: {
+        stubs: {
+          SponsorList: this.stub('sponsor-list')
+        }
+      }
+    })
+  }
 }
diff --git a/resources/assets/js/components/meta/AboutKoelModal.vue b/resources/assets/js/components/meta/AboutKoelModal.vue
index a51859c0..25e57f8f 100644
--- a/resources/assets/js/components/meta/AboutKoelModal.vue
+++ b/resources/assets/js/components/meta/AboutKoelModal.vue
@@ -8,7 +8,7 @@
   >
     <main class="p-6">
       <div class="mb-4">
-        <img alt="Koel's logo" src="@/../img/logo.svg" width="128" class="inline-block">
+        <img alt="Koel's logo" class="inline-block" src="@/../img/logo.svg" width="128">
       </div>
 
       <div class="current-version">
@@ -57,7 +57,7 @@
     </main>
 
     <footer>
-      <Btn data-testid="close-modal-btn" danger rounded @click.prevent="close">Close</Btn>
+      <Btn danger data-testid="close-modal-btn" rounded @click.prevent="close">Close</Btn>
     </footer>
   </div>
 </template>
diff --git a/resources/assets/js/components/meta/CreditsBlock.vue b/resources/assets/js/components/meta/CreditsBlock.vue
index 5649383a..04097df8 100644
--- a/resources/assets/js/components/meta/CreditsBlock.vue
+++ b/resources/assets/js/components/meta/CreditsBlock.vue
@@ -9,7 +9,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { orderBy } from 'lodash'
 import { onMounted, ref } from 'vue'
 import { http } from '@/services'
@@ -26,7 +26,7 @@ onMounted(async () => {
 })
 </script>
 
-<style scoped lang="postcss">
+<style lang="postcss" scoped>
 li&:last-child {
   &::before {
     content: ', and '
diff --git a/resources/assets/js/components/meta/SupportKoel.spec.ts b/resources/assets/js/components/meta/SupportKoel.spec.ts
index d90177d9..0b76b145 100644
--- a/resources/assets/js/components/meta/SupportKoel.spec.ts
+++ b/resources/assets/js/components/meta/SupportKoel.spec.ts
@@ -22,16 +22,6 @@ new class extends UnitTestCase {
     })
   }
 
-  private async renderComponent () {
-    preferenceStore.initialized.value = true
-    const rendered = this.render(SupportKoel)
-
-    vi.advanceTimersByTime(30 * 60 * 1000)
-    await this.tick()
-
-    return rendered
-  }
-
   protected test () {
     it('shows after a delay', async () => expect((await this.renderComponent()).html()).toMatchSnapshot())
 
@@ -61,4 +51,14 @@ new class extends UnitTestCase {
       expect(preferenceStore.state.support_bar_no_bugging).toBe(true)
     })
   }
+
+  private async renderComponent () {
+    preferenceStore.initialized.value = true
+    const rendered = this.render(SupportKoel)
+
+    vi.advanceTimersByTime(30 * 60 * 1000)
+    await this.tick()
+
+    return rendered
+  }
 }
diff --git a/resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap b/resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap
index 6a827436..8f3e92da 100644
--- a/resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap
+++ b/resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`renders 1`] = `
 <div data-v-6b5b01a9="" class="about text-k-text-secondary text-center max-w-[480px] overflow-hidden relative" data-testid="about-koel" tabindex="0">
   <main data-v-6b5b01a9="" class="p-6">
-    <div data-v-6b5b01a9="" class="mb-4"><img data-v-6b5b01a9="" alt="Koel's logo" src="undefined/resources/assets/img/logo.svg" width="128" class="inline-block"></div>
+    <div data-v-6b5b01a9="" class="mb-4"><img data-v-6b5b01a9="" alt="Koel's logo" class="inline-block" src="undefined/resources/assets/img/logo.svg" width="128"></div>
     <div data-v-6b5b01a9="" class="current-version"> Koel v0.0.0 <span data-v-6b5b01a9="">Community</span> Edition
       <!--v-if-->
     </div>
@@ -12,6 +12,6 @@ exports[`renders 1`] = `
     <!--v-if--><br data-v-6b5b01a9="" data-testid="sponsor-list">
     <p data-v-6b5b01a9=""> Loving Koel? Please consider supporting its development via <a data-v-6b5b01a9="" href="https://github.com/users/phanan/sponsorship" rel="noopener" target="_blank">GitHub Sponsors</a> and/or <a data-v-6b5b01a9="" href="https://opencollective.com/koel" rel="noopener" target="_blank">OpenCollective</a>. </p>
   </main>
-  <footer data-v-6b5b01a9=""><button data-v-8943c846="" data-v-6b5b01a9="" class="text-base text-k-text-primary bg-k-primary px-4 py-2.5 rounded cursor-pointer" type="button" data-testid="close-modal-btn" danger="" rounded="">Close</button></footer>
+  <footer data-v-6b5b01a9=""><button data-v-8943c846="" data-v-6b5b01a9="" class="text-base text-k-text-primary bg-k-primary px-4 py-2.5 rounded cursor-pointer" type="button" danger="" data-testid="close-modal-btn" rounded="">Close</button></footer>
 </div>
 `;
diff --git a/resources/assets/js/components/playlist/CreatePlaylistContextMenu.spec.ts b/resources/assets/js/components/playlist/CreatePlaylistContextMenu.spec.ts
index 735ba011..0d5b0554 100644
--- a/resources/assets/js/components/playlist/CreatePlaylistContextMenu.spec.ts
+++ b/resources/assets/js/components/playlist/CreatePlaylistContextMenu.spec.ts
@@ -7,12 +7,6 @@ import { Events } from '@/config'
 import CreateNewPlaylistContextMenu from './CreatePlaylistContextMenu.vue'
 
 new class extends UnitTestCase {
-  private async renderComponent () {
-    this.render(CreateNewPlaylistContextMenu)
-    eventBus.emit('CREATE_NEW_PLAYLIST_CONTEXT_MENU_REQUESTED', { top: 420, left: 42 })
-    await this.tick(2)
-  }
-
   protected test () {
     it.each<[string, keyof Events]>([
       ['playlist-context-menu-create-simple', 'MODAL_SHOW_CREATE_PLAYLIST_FORM'],
@@ -25,4 +19,10 @@ new class extends UnitTestCase {
       await waitFor(() => expect(emitMock).toHaveBeenCalledWith(eventName))
     })
   }
+
+  private async renderComponent () {
+    this.render(CreateNewPlaylistContextMenu)
+    eventBus.emit('CREATE_NEW_PLAYLIST_CONTEXT_MENU_REQUESTED', { top: 420, left: 42 })
+    await this.tick(2)
+  }
 }
diff --git a/resources/assets/js/components/playlist/CreatePlaylistContextMenuButton.vue b/resources/assets/js/components/playlist/CreatePlaylistContextMenuButton.vue
index f7d8f844..c3cd7bf8 100644
--- a/resources/assets/js/components/playlist/CreatePlaylistContextMenuButton.vue
+++ b/resources/assets/js/components/playlist/CreatePlaylistContextMenuButton.vue
@@ -9,7 +9,7 @@
   </button>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { faCirclePlus } from '@fortawesome/free-solid-svg-icons'
 import { eventBus } from '@/utils'
 
diff --git a/resources/assets/js/components/playlist/CreatePlaylistForm.vue b/resources/assets/js/components/playlist/CreatePlaylistForm.vue
index 6a0dcc3d..eee239fa 100644
--- a/resources/assets/js/components/playlist/CreatePlaylistForm.vue
+++ b/resources/assets/js/components/playlist/CreatePlaylistForm.vue
@@ -3,7 +3,7 @@
     <header>
       <h1>
         New Playlist
-        <span v-if="songs.length" data-testid="from-songs" class="text-k-text-secondary">
+        <span v-if="songs.length" class="text-k-text-secondary" data-testid="from-songs">
           from {{ pluralize(songs, 'song') }}
         </span>
       </h1>
diff --git a/resources/assets/js/components/playlist/InvitePlaylistCollaborators.vue b/resources/assets/js/components/playlist/InvitePlaylistCollaborators.vue
index d6e20a5d..492f04d2 100644
--- a/resources/assets/js/components/playlist/InvitePlaylistCollaborators.vue
+++ b/resources/assets/js/components/playlist/InvitePlaylistCollaborators.vue
@@ -1,6 +1,6 @@
 <template>
   <span>
-    <Btn v-if="shouldShowInviteButton" success small @click.prevent="inviteCollaborators">Invite</Btn>
+    <Btn v-if="shouldShowInviteButton" small success @click.prevent="inviteCollaborators">Invite</Btn>
     <span v-if="justCreatedInviteLink" class="text-k-text-secondary text-[0.95rem]">
       <Icon :icon="faCheckCircle" class="text-k-success mr-1" />
       Link copied to clipboard!
@@ -9,7 +9,7 @@
   </span>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { faCheckCircle, faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 import { computed, ref, toRefs } from 'vue'
 import { copyText } from '@/utils'
diff --git a/resources/assets/js/components/playlist/PlaylistCollaborationModal.spec.ts b/resources/assets/js/components/playlist/PlaylistCollaborationModal.spec.ts
index ddc8d544..0a3a210b 100644
--- a/resources/assets/js/components/playlist/PlaylistCollaborationModal.spec.ts
+++ b/resources/assets/js/components/playlist/PlaylistCollaborationModal.spec.ts
@@ -1,4 +1,4 @@
-import { it, expect } from 'vitest'
+import { expect, it } from 'vitest'
 import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import { ref } from 'vue'
@@ -7,8 +7,8 @@ import Modal from './PlaylistCollaborationModal.vue'
 
 new class extends UnitTestCase {
   protected test () {
-    it ('renders the modal', async () => {
-      const { html } =  this.render(Modal, {
+    it('renders the modal', async () => {
+      const { html } = this.render(Modal, {
         global: {
           provide: {
             [<symbol>ModalContextKey]: [ref({ playlist: factory<Playlist>('playlist') })]
diff --git a/resources/assets/js/components/playlist/PlaylistCollaborationModal.vue b/resources/assets/js/components/playlist/PlaylistCollaborationModal.vue
index 9d4edff1..b5958d5b 100644
--- a/resources/assets/js/components/playlist/PlaylistCollaborationModal.vue
+++ b/resources/assets/js/components/playlist/PlaylistCollaborationModal.vue
@@ -28,7 +28,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { computed } from 'vue'
 import { useAuthorization, useModal } from '@/composables'
 
diff --git a/resources/assets/js/components/playlist/PlaylistCollaboratorList.spec.ts b/resources/assets/js/components/playlist/PlaylistCollaboratorList.spec.ts
index 90024ca3..11343798 100644
--- a/resources/assets/js/components/playlist/PlaylistCollaboratorList.spec.ts
+++ b/resources/assets/js/components/playlist/PlaylistCollaboratorList.spec.ts
@@ -5,6 +5,22 @@ import { playlistCollaborationService } from '@/services'
 import Component from './PlaylistCollaboratorList.vue'
 
 new class extends UnitTestCase {
+  protected test () {
+    it('renders', async () => {
+      const playlist = factory<Playlist>('playlist', {
+        is_collaborative: true
+      })
+
+      const fetchMock = this.mock(playlistCollaborationService, 'fetchCollaborators').mockResolvedValue(
+        factory<PlaylistCollaborator>('playlist-collaborator', 5)
+      )
+
+      const { html } = await this.be().renderComponent(playlist)
+      expect(fetchMock).toHaveBeenCalledWith(playlist)
+      expect(html()).toMatchSnapshot()
+    })
+  }
+
   private async renderComponent (playlist: Playlist) {
     const rendered = this.render(Component, {
       props: {
@@ -21,20 +37,4 @@ new class extends UnitTestCase {
 
     return rendered
   }
-
-  protected test () {
-    it('renders', async () => {
-      const playlist = factory<Playlist>('playlist', {
-        is_collaborative: true
-      })
-
-      const fetchMock = this.mock(playlistCollaborationService, 'fetchCollaborators').mockResolvedValue(
-        factory<PlaylistCollaborator>('playlist-collaborator', 5)
-      )
-
-      const { html } = await this.be().renderComponent(playlist)
-      expect(fetchMock).toHaveBeenCalledWith(playlist)
-      expect(html()).toMatchSnapshot()
-    })
-  }
 }
diff --git a/resources/assets/js/components/playlist/PlaylistCollaboratorList.vue b/resources/assets/js/components/playlist/PlaylistCollaboratorList.vue
index dd0c2a05..4aeefa3e 100644
--- a/resources/assets/js/components/playlist/PlaylistCollaboratorList.vue
+++ b/resources/assets/js/components/playlist/PlaylistCollaboratorList.vue
@@ -13,7 +13,7 @@
   </ul>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { sortBy } from 'lodash'
 import { computed, onMounted, ref, Ref, toRefs } from 'vue'
 import { useAuthorization, useDialogBox, useErrorHandler } from '@/composables'
diff --git a/resources/assets/js/components/playlist/PlaylistCollaboratorListItem.spec.ts b/resources/assets/js/components/playlist/PlaylistCollaboratorListItem.spec.ts
index 5ebc9d64..7394ff23 100644
--- a/resources/assets/js/components/playlist/PlaylistCollaboratorListItem.spec.ts
+++ b/resources/assets/js/components/playlist/PlaylistCollaboratorListItem.spec.ts
@@ -5,22 +5,6 @@ import factory from '@/__tests__/factory'
 import Component from './PlaylistCollaboratorListItem.vue'
 
 new class extends UnitTestCase {
-  private renderComponent (props: {
-    collaborator: PlaylistCollaborator,
-    removable: boolean,
-    manageable: boolean,
-    role: 'owner' | 'contributor'
-  }) {
-    return this.render(Component, {
-      props,
-      global: {
-        stubs: {
-          UserAvatar: this.stub('UserAvatar')
-        }
-      }
-    })
-  }
-
   protected test () {
     it('does not show a badge when current user is not the collaborator', async () => {
       const currentUser = factory<User>('user')
@@ -88,4 +72,20 @@ new class extends UnitTestCase {
       expect(emitted('remove')).toBeTruthy()
     })
   }
+
+  private renderComponent (props: {
+    collaborator: PlaylistCollaborator,
+    removable: boolean,
+    manageable: boolean,
+    role: 'owner' | 'contributor'
+  }) {
+    return this.render(Component, {
+      props,
+      global: {
+        stubs: {
+          UserAvatar: this.stub('UserAvatar')
+        }
+      }
+    })
+  }
 }
diff --git a/resources/assets/js/components/playlist/PlaylistCollaboratorListItem.vue b/resources/assets/js/components/playlist/PlaylistCollaboratorListItem.vue
index 1b060966..59404a44 100644
--- a/resources/assets/js/components/playlist/PlaylistCollaboratorListItem.vue
+++ b/resources/assets/js/components/playlist/PlaylistCollaboratorListItem.vue
@@ -20,12 +20,12 @@
       <span v-else class="contributor">Contributor</span>
     </span>
     <span v-if="manageable" class="actions flex-[0_0_72px] text-right">
-      <Btn v-if="removable" small danger @click.prevent="emit('remove')">Remove</Btn>
+      <Btn v-if="removable" danger small @click.prevent="emit('remove')">Remove</Btn>
     </span>
   </li>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { faCircleCheck } from '@fortawesome/free-solid-svg-icons'
 import { toRefs } from 'vue'
 
@@ -46,7 +46,7 @@ const { currentUser } = useAuthorization()
 const emit = defineEmits<{ (e: 'remove'): void }>()
 </script>
 
-<style scoped lang="postcss">
+<style lang="postcss" scoped>
 span {
   @apply inline-block min-w-0 leading-normal;
 }
diff --git a/resources/assets/js/components/playlist/PlaylistCollaboratorsBadge.vue b/resources/assets/js/components/playlist/PlaylistCollaboratorsBadge.vue
index 30f46b45..6e187a2c 100644
--- a/resources/assets/js/components/playlist/PlaylistCollaboratorsBadge.vue
+++ b/resources/assets/js/components/playlist/PlaylistCollaboratorsBadge.vue
@@ -2,7 +2,7 @@
   <div class="inline-block align-middle">
     <ul class="align-middle -space-x-2">
       <li v-for="user in displayedCollaborators" :key="user.id" class="inline-block align-baseline">
-        <UserAvatar :user="user" width="24" class="border border-white/30" />
+        <UserAvatar :user="user" class="border border-white/30" width="24" />
       </li>
     </ul>
     <span v-if="remainderCount" class="ml-2">
@@ -11,7 +11,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { computed, toRefs } from 'vue'
 
 import UserAvatar from '@/components/user/UserAvatar.vue'
diff --git a/resources/assets/js/components/playlist/PlaylistContextMenu.spec.ts b/resources/assets/js/components/playlist/PlaylistContextMenu.spec.ts
index 74fa32a9..c29ea8bf 100644
--- a/resources/assets/js/components/playlist/PlaylistContextMenu.spec.ts
+++ b/resources/assets/js/components/playlist/PlaylistContextMenu.spec.ts
@@ -4,23 +4,12 @@ import UnitTestCase from '@/__tests__/UnitTestCase'
 import { eventBus } from '@/utils'
 import factory from '@/__tests__/factory'
 import { screen, waitFor } from '@testing-library/vue'
-import { songStore, userStore } from '@/stores'
+import { queueStore, songStore, userStore } from '@/stores'
 import { playbackService } from '@/services'
-import { queueStore } from '@/stores'
 import { MessageToasterStub } from '@/__tests__/stubs'
 import PlaylistContextMenu from './PlaylistContextMenu.vue'
 
 new class extends UnitTestCase {
-  private async renderComponent (playlist: Playlist, user: User | null = null) {
-    userStore.state.current = user || factory<User>('user', {
-      id: playlist.user_id
-    })
-
-    this.render(PlaylistContextMenu)
-    eventBus.emit('PLAYLIST_CONTEXT_MENU_REQUESTED', { pageX: 420, pageY: 42 } as MouseEvent, playlist)
-    await this.tick(2)
-  }
-
   protected test () {
     it('edits a standard playlist', async () => {
       const playlist = factory<Playlist>('playlist')
@@ -164,4 +153,14 @@ new class extends UnitTestCase {
       expect(emitMock).toHaveBeenCalledWith('MODAL_SHOW_PLAYLIST_COLLABORATION', playlist)
     })
   }
+
+  private async renderComponent (playlist: Playlist, user: User | null = null) {
+    userStore.state.current = user || factory<User>('user', {
+      id: playlist.user_id
+    })
+
+    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 75b1a5d3..bfbeec07 100644
--- a/resources/assets/js/components/playlist/PlaylistContextMenu.vue
+++ b/resources/assets/js/components/playlist/PlaylistContextMenu.vue
@@ -16,9 +16,9 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 import { eventBus } from '@/utils'
-import { usePolicies, useContextMenu, useMessageToaster, useKoelPlus, useRouter } from '@/composables'
+import { useContextMenu, useKoelPlus, useMessageToaster, usePolicies, useRouter } from '@/composables'
 import { playbackService } from '@/services'
-import { songStore, queueStore } from '@/stores'
+import { queueStore, songStore } from '@/stores'
 
 const { base, ContextMenuBase, open, trigger } = useContextMenu()
 const { go } = useRouter()
diff --git a/resources/assets/js/components/playlist/PlaylistFolderContextMenu.spec.ts b/resources/assets/js/components/playlist/PlaylistFolderContextMenu.spec.ts
index 4ce4d4da..1e4fd3f2 100644
--- a/resources/assets/js/components/playlist/PlaylistFolderContextMenu.spec.ts
+++ b/resources/assets/js/components/playlist/PlaylistFolderContextMenu.spec.ts
@@ -10,12 +10,6 @@ import { MessageToasterStub } from '@/__tests__/stubs'
 import PlaylistFolderContextMenu from './PlaylistFolderContextMenu.vue'
 
 new class extends UnitTestCase {
-  private async renderComponent (folder: PlaylistFolder) {
-    this.render(PlaylistFolderContextMenu)
-    eventBus.emit('PLAYLIST_FOLDER_CONTEXT_MENU_REQUESTED', { pageX: 420, pageY: 42 } as MouseEvent, folder)
-    await this.tick(2)
-  }
-
   protected test () {
     it('renames', async () => {
       const folder = factory<PlaylistFolder>('playlist-folder')
@@ -120,6 +114,12 @@ new class extends UnitTestCase {
     })
   }
 
+  private async renderComponent (folder: PlaylistFolder) {
+    this.render(PlaylistFolderContextMenu)
+    eventBus.emit('PLAYLIST_FOLDER_CONTEXT_MENU_REQUESTED', { pageX: 420, pageY: 42 } as MouseEvent, folder)
+    await this.tick(2)
+  }
+
   private createPlayableFolder () {
     const folder = factory<PlaylistFolder>('playlist-folder')
     this.mock(playlistStore, 'byFolder', factory<Playlist>('playlist', 3, { folder_id: folder.id }))
diff --git a/resources/assets/js/components/playlist/smart-playlist/CreateSmartPlaylistForm.vue b/resources/assets/js/components/playlist/smart-playlist/CreateSmartPlaylistForm.vue
index 89db5700..1f53af55 100644
--- a/resources/assets/js/components/playlist/smart-playlist/CreateSmartPlaylistForm.vue
+++ b/resources/assets/js/components/playlist/smart-playlist/CreateSmartPlaylistForm.vue
@@ -28,7 +28,7 @@
             :is-first-group="index === 0"
             @input="onGroupChanged"
           />
-          <Btn class="btn-add-group" success small title="Add a new group" uppercase @click.prevent="addGroup">
+          <Btn class="btn-add-group" small success title="Add a new group" uppercase @click.prevent="addGroup">
             <Icon :icon="faPlus" />
             Group
           </Btn>
@@ -55,7 +55,8 @@ import { faPlus } from '@fortawesome/free-solid-svg-icons'
 import { ref, toRef } from 'vue'
 import { playlistFolderStore, playlistStore } from '@/stores'
 import {
-  useDialogBox, useErrorHandler,
+  useDialogBox,
+  useErrorHandler,
   useKoelPlus,
   useMessageToaster,
   useModal,
diff --git a/resources/assets/js/components/playlist/smart-playlist/EditSmartPlaylistForm.vue b/resources/assets/js/components/playlist/smart-playlist/EditSmartPlaylistForm.vue
index 4254703c..7c07ff1b 100644
--- a/resources/assets/js/components/playlist/smart-playlist/EditSmartPlaylistForm.vue
+++ b/resources/assets/js/components/playlist/smart-playlist/EditSmartPlaylistForm.vue
@@ -33,7 +33,7 @@
             :is-first-group="index === 0"
             @input="onGroupChanged"
           />
-          <Btn class="btn-add-group" success small title="Add a new group" uppercase @click.prevent="addGroup">
+          <Btn class="btn-add-group" small success title="Add a new group" uppercase @click.prevent="addGroup">
             <Icon :icon="faPlus" />
             Group
           </Btn>
@@ -41,7 +41,8 @@
 
         <div v-if="isPlus" class="form-row">
           <label class="text-k-text-secondary">
-            <CheckBox v-model="mutablePlaylist.own_songs_only" /> Only include songs from my own library
+            <CheckBox v-model="mutablePlaylist.own_songs_only" />
+            Only include songs from my own library
           </label>
         </div>
       </main>
@@ -77,7 +78,7 @@ import SelectBox from '@/components/ui/form/SelectBox.vue'
 const { showOverlay, hideOverlay } = useOverlay()
 const { toastSuccess } = useMessageToaster()
 const { showConfirmDialog } = useDialogBox()
-const {isPlus} = useKoelPlus()
+const { isPlus } = useKoelPlus()
 
 const playlist = useModal().getFromContext<Playlist>('playlist')
 const folders = toRef(playlistFolderStore.state, 'folders')
diff --git a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleGroup.vue b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleGroup.vue
index 783550b7..55a21611 100644
--- a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleGroup.vue
+++ b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleGroup.vue
@@ -23,11 +23,11 @@
 
     <div class="text-center absolute w-full left-0 -mt-[2px]">
       <Btn
-        title="Remove this rule"
         class="aspect-square scale-75 hover:scale-90 active:scale-[80%]"
         rounded
-        success
         small
+        success
+        title="Remove this rule"
         @click.prevent="addRule"
       >
         <Icon :icon="faPlus" />
diff --git a/resources/assets/js/components/profile-preferences/EditableProfileAvatar.vue b/resources/assets/js/components/profile-preferences/EditableProfileAvatar.vue
index be015047..da223126 100644
--- a/resources/assets/js/components/profile-preferences/EditableProfileAvatar.vue
+++ b/resources/assets/js/components/profile-preferences/EditableProfileAvatar.vue
@@ -23,7 +23,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { faRefresh, faTimes, faUpload } from '@fortawesome/free-solid-svg-icons'
 import { computed, ref, toRefs } from 'vue'
 import { useFileDialog } from '@vueuse/core'
@@ -76,7 +76,7 @@ const onCrop = (result: string) => {
 const onCancel = () => (cropperSource.value = null)
 </script>
 
-<style scoped lang="postcss">
+<style lang="postcss" scoped>
 @tailwind utilities;
 
 @layer utilities {
diff --git a/resources/assets/js/components/profile-preferences/Integrations.vue b/resources/assets/js/components/profile-preferences/Integrations.vue
index cf6c1b82..1dee51c6 100644
--- a/resources/assets/js/components/profile-preferences/Integrations.vue
+++ b/resources/assets/js/components/profile-preferences/Integrations.vue
@@ -9,7 +9,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import LastfmIntegration from '@/components/profile-preferences/LastfmIntegration.vue'
 import SpotifyIntegration from '@/components/profile-preferences/SpotifyIntegration.vue'
 </script>
diff --git a/resources/assets/js/components/profile-preferences/LastfmIntegration.vue b/resources/assets/js/components/profile-preferences/LastfmIntegration.vue
index 71b4c8d1..dfc10a1e 100644
--- a/resources/assets/js/components/profile-preferences/LastfmIntegration.vue
+++ b/resources/assets/js/components/profile-preferences/LastfmIntegration.vue
@@ -28,7 +28,7 @@
         Last.fm integration is not enabled.
         <span v-if="isAdmin" data-testid="lastfm-admin-instruction">
           Check
-          <a href="https://docs.koel.dev/service-integrations#last-fm" class="text-k-highlight" target="_blank">
+          <a class="text-k-highlight" href="https://docs.koel.dev/service-integrations#last-fm" target="_blank">
             Documentation
           </a>
           for instructions.
diff --git a/resources/assets/js/components/profile-preferences/ProfileForm.spec.ts b/resources/assets/js/components/profile-preferences/ProfileForm.spec.ts
index cb7bf95b..c1da1609 100644
--- a/resources/assets/js/components/profile-preferences/ProfileForm.spec.ts
+++ b/resources/assets/js/components/profile-preferences/ProfileForm.spec.ts
@@ -7,10 +7,6 @@ import { MessageToasterStub } from '@/__tests__/stubs'
 import ProfileForm from './ProfileForm.vue'
 
 new class extends UnitTestCase {
-  private renderComponent (user: User) {
-    return this.be(user).render(ProfileForm)
-  }
-
   protected test () {
     it('updates profile', async () => {
       const updateMock = this.mock(authService, 'updateProfile')
@@ -37,4 +33,8 @@ new class extends UnitTestCase {
       expect(alertMock).toHaveBeenCalledWith('Profile updated.')
     })
   }
+
+  private renderComponent (user: User) {
+    return this.be(user).render(ProfileForm)
+  }
 }
diff --git a/resources/assets/js/components/profile-preferences/ProfileForm.vue b/resources/assets/js/components/profile-preferences/ProfileForm.vue
index 77181295..49bb6952 100644
--- a/resources/assets/js/components/profile-preferences/ProfileForm.vue
+++ b/resources/assets/js/components/profile-preferences/ProfileForm.vue
@@ -17,11 +17,11 @@
           <TextInput
             v-model="profile.current_password"
             v-koel-focus
+            data-testid="currentPassword"
             name="current_password"
             placeholder="Required to update your profile"
             required
             type="password"
-            data-testid="currentPassword"
           />
         </FormRow>
 
@@ -73,7 +73,7 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue'
 import { authService, UpdateCurrentProfileData } from '@/services'
-import { useMessageToaster, useAuthorization, useErrorHandler } from '@/composables'
+import { useAuthorization, useErrorHandler, useMessageToaster } from '@/composables'
 
 import Btn from '@/components/ui/form/Btn.vue'
 import PasswordField from '@/components/ui/form/PasswordField.vue'
diff --git a/resources/assets/js/components/profile-preferences/QRLogin.vue b/resources/assets/js/components/profile-preferences/QRLogin.vue
index 9690bd9a..d0d8e6f8 100644
--- a/resources/assets/js/components/profile-preferences/QRLogin.vue
+++ b/resources/assets/js/components/profile-preferences/QRLogin.vue
@@ -1,14 +1,14 @@
 <template>
   <article class="text-k-text-secondary">
     Instead of using a password, you can scan the QR code below to log in to
-    <a href="https://koel.dev/#mobile" target="_blank" class="text-k-highlight">Koel Player</a>
+    <a class="text-k-highlight" href="https://koel.dev/#mobile" target="_blank">Koel Player</a>
     on your mobile device.<br>
     The QR code will refresh every 10 minutes.
-    <img class="mt-4 rounded-4" :src="qrCodeUrl" alt="QR Code" width="192" height="192">
+    <img :src="qrCodeUrl" alt="QR Code" class="mt-4 rounded-4" height="192" width="192">
   </article>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { onMounted, ref, watch } from 'vue'
 import { useQRCode } from '@vueuse/integrations/useQRCode'
 import { authService } from '@/services'
diff --git a/resources/assets/js/components/profile-preferences/ThemeCard.spec.ts b/resources/assets/js/components/profile-preferences/ThemeCard.spec.ts
index 642f2f07..367a1dbb 100644
--- a/resources/assets/js/components/profile-preferences/ThemeCard.spec.ts
+++ b/resources/assets/js/components/profile-preferences/ThemeCard.spec.ts
@@ -9,14 +9,6 @@ const theme: Theme = {
 }
 
 new class extends UnitTestCase {
-  private renderComponent () {
-    return this.render(ThemeCard, {
-      props: {
-        theme
-      }
-    })
-  }
-
   protected test () {
     it('renders', () => expect(this.renderComponent().html()).toMatchSnapshot())
 
@@ -28,4 +20,12 @@ new class extends UnitTestCase {
       expect(emitted().selected[0]).toEqual([theme])
     })
   }
+
+  private renderComponent () {
+    return this.render(ThemeCard, {
+      props: {
+        theme
+      }
+    })
+  }
 }
diff --git a/resources/assets/js/components/profile-preferences/ThemeCard.vue b/resources/assets/js/components/profile-preferences/ThemeCard.vue
index 50088b28..e4264d97 100644
--- a/resources/assets/js/components/profile-preferences/ThemeCard.vue
+++ b/resources/assets/js/components/profile-preferences/ThemeCard.vue
@@ -6,8 +6,8 @@
     class="theme h-[96px] bg-center bg-cover relative cursor-pointer rounded-lg overflow-hidden border-2 border-solid border-white/10 transition duration-300 hover:border-white/50]"
   >
     <button
-      type="button"
       class="opacity-0 hover:opacity-100 absolute h-full w-full top-0 left-0 flex items-center justify-center text-lg transition-opacity bg-black/20"
+      type="button"
       @click="$emit('selected', theme)"
     >
       {{ name }}
diff --git a/resources/assets/js/components/profile-preferences/__snapshots__/QRLogin.spec.ts.snap b/resources/assets/js/components/profile-preferences/__snapshots__/QRLogin.spec.ts.snap
index 01502213..c2f640f4 100644
--- a/resources/assets/js/components/profile-preferences/__snapshots__/QRLogin.spec.ts.snap
+++ b/resources/assets/js/components/profile-preferences/__snapshots__/QRLogin.spec.ts.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`renders 1`] = `<article class="text-k-text-secondary"> Instead of using a password, you can scan the QR code below to log in to <a href="https://koel.dev/#mobile" target="_blank" class="text-k-highlight">Koel Player</a> on your mobile device.<br> The QR code will refresh every 10 minutes. <img class="mt-4 rounded-4" src="data:image/png;base64,my-qr-code" alt="QR Code" width="192" height="192"></article>`;
+exports[`renders 1`] = `<article class="text-k-text-secondary"> Instead of using a password, you can scan the QR code below to log in to <a class="text-k-highlight" href="https://koel.dev/#mobile" target="_blank">Koel Player</a> on your mobile device.<br> The QR code will refresh every 10 minutes. <img src="data:image/png;base64,my-qr-code" alt="QR Code" class="mt-4 rounded-4" height="192" width="192"></article>`;
diff --git a/resources/assets/js/components/profile-preferences/__snapshots__/ThemeCard.spec.ts.snap b/resources/assets/js/components/profile-preferences/__snapshots__/ThemeCard.spec.ts.snap
index 05eabc3a..f8bcc92d 100644
--- a/resources/assets/js/components/profile-preferences/__snapshots__/ThemeCard.spec.ts.snap
+++ b/resources/assets/js/components/profile-preferences/__snapshots__/ThemeCard.spec.ts.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`renders 1`] = `<article data-v-1467c50f="" class="theme h-[96px] bg-center bg-cover relative cursor-pointer rounded-lg overflow-hidden border-2 border-solid border-white/10 transition duration-300 hover:border-white/50]" style="background-color: rgb(255, 0, 0);" title="Set current theme to Sample"><button data-v-1467c50f="" type="button" class="opacity-0 hover:opacity-100 absolute h-full w-full top-0 left-0 flex items-center justify-center text-lg transition-opacity bg-black/20">Sample</button></article>`;
+exports[`renders 1`] = `<article data-v-1467c50f="" class="theme h-[96px] bg-center bg-cover relative cursor-pointer rounded-lg overflow-hidden border-2 border-solid border-white/10 transition duration-300 hover:border-white/50]" style="background-color: rgb(255, 0, 0);" title="Set current theme to Sample"><button data-v-1467c50f="" class="opacity-0 hover:opacity-100 absolute h-full w-full top-0 left-0 flex items-center justify-center text-lg transition-opacity bg-black/20" type="button">Sample</button></article>`;
diff --git a/resources/assets/js/components/screens/AlbumListScreen.spec.ts b/resources/assets/js/components/screens/AlbumListScreen.spec.ts
index 22137ed5..23c87aa6 100644
--- a/resources/assets/js/components/screens/AlbumListScreen.spec.ts
+++ b/resources/assets/js/components/screens/AlbumListScreen.spec.ts
@@ -10,20 +10,6 @@ new class extends UnitTestCase {
     super.beforeEach(() => this.mock(albumStore, 'paginate'))
   }
 
-  private async renderComponent () {
-    albumStore.state.albums = factory<Album>('album', 9)
-
-    this.render(AlbumListScreen, {
-      global: {
-        stubs: {
-          AlbumCard: this.stub('album-card')
-        }
-      }
-    })
-
-    await this.router.activateRoute({ path: 'albums', screen: 'Albums' })
-  }
-
   protected test () {
     it('renders', async () => {
       await this.renderComponent()
@@ -55,4 +41,18 @@ new class extends UnitTestCase {
       await waitFor(() => expect(screen.getByTestId('album-grid').classList.contains(`as-thumbnails`)).toBe(true))
     })
   }
+
+  private async renderComponent () {
+    albumStore.state.albums = factory<Album>('album', 9)
+
+    this.render(AlbumListScreen, {
+      global: {
+        stubs: {
+          AlbumCard: this.stub('album-card')
+        }
+      }
+    })
+
+    await this.router.activateRoute({ path: 'albums', screen: 'Albums' })
+  }
 }
diff --git a/resources/assets/js/components/screens/AlbumScreen.spec.ts b/resources/assets/js/components/screens/AlbumScreen.spec.ts
index fe90185a..7a170799 100644
--- a/resources/assets/js/components/screens/AlbumScreen.spec.ts
+++ b/resources/assets/js/components/screens/AlbumScreen.spec.ts
@@ -11,44 +11,6 @@ import AlbumScreen from './AlbumScreen.vue'
 let album: Album
 
 new class extends UnitTestCase {
-  private async renderComponent () {
-    commonStore.state.uses_last_fm = true
-
-    album = factory<Album>('album', {
-      id: 42,
-      name: 'Led Zeppelin IV',
-      artist_id: 123,
-      artist_name: 'Led Zeppelin'
-    })
-
-    const resolveAlbumMock = this.mock(albumStore, 'resolve').mockResolvedValue(album)
-
-    const songs = factory<Song>('song', 13)
-    const fetchSongsMock = this.mock(songStore, 'fetchForAlbum').mockResolvedValue(songs)
-
-    await this.router.activateRoute({
-      path: 'albums/42',
-      screen: 'Album'
-    }, { id: '42' })
-
-    this.render(AlbumScreen, {
-      global: {
-        stubs: {
-          SongList: this.stub('song-list'),
-          AlbumCard: this.stub('album-card'),
-          AlbumInfo: this.stub('album-info')
-        }
-      }
-    })
-
-    await waitFor(() => {
-      expect(resolveAlbumMock).toHaveBeenCalledWith(album.id)
-      expect(fetchSongsMock).toHaveBeenCalledWith(album.id)
-    })
-
-    await this.tick(2)
-  }
-
   protected test () {
     it('downloads', async () => {
       const downloadMock = this.mock(downloadService, 'fromAlbum')
@@ -91,4 +53,42 @@ new class extends UnitTestCase {
       })
     })
   }
+
+  private async renderComponent () {
+    commonStore.state.uses_last_fm = true
+
+    album = factory<Album>('album', {
+      id: 42,
+      name: 'Led Zeppelin IV',
+      artist_id: 123,
+      artist_name: 'Led Zeppelin'
+    })
+
+    const resolveAlbumMock = this.mock(albumStore, 'resolve').mockResolvedValue(album)
+
+    const songs = factory<Song>('song', 13)
+    const fetchSongsMock = this.mock(songStore, 'fetchForAlbum').mockResolvedValue(songs)
+
+    await this.router.activateRoute({
+      path: 'albums/42',
+      screen: 'Album'
+    }, { id: '42' })
+
+    this.render(AlbumScreen, {
+      global: {
+        stubs: {
+          SongList: this.stub('song-list'),
+          AlbumCard: this.stub('album-card'),
+          AlbumInfo: this.stub('album-info')
+        }
+      }
+    })
+
+    await waitFor(() => {
+      expect(resolveAlbumMock).toHaveBeenCalledWith(album.id)
+      expect(fetchSongsMock).toHaveBeenCalledWith(album.id)
+    })
+
+    await this.tick(2)
+  }
 }
diff --git a/resources/assets/js/components/screens/AlbumScreen.vue b/resources/assets/js/components/screens/AlbumScreen.vue
index 699bb7c3..5f1f1399 100644
--- a/resources/assets/js/components/screens/AlbumScreen.vue
+++ b/resources/assets/js/components/screens/AlbumScreen.vue
@@ -44,15 +44,15 @@
       <template #header>
         <label :class="{ active: activeTab === 'Songs' }">
           Songs
-          <input v-model="activeTab" type="radio" name="tab" value="Songs">
+          <input v-model="activeTab" name="tab" type="radio" value="Songs">
         </label>
         <label :class="{ active: activeTab === 'OtherAlbums' }">
           Other Albums
-          <input v-model="activeTab" type="radio" name="tab" value="OtherAlbums">
+          <input v-model="activeTab" name="tab" type="radio" value="OtherAlbums">
         </label>
         <label v-if="useLastfm" :class="{ active: activeTab === 'Info' }">
           Information
-          <input v-model="activeTab" type="radio" name="tab" value="Info">
+          <input v-model="activeTab" name="tab" type="radio" value="Info">
         </label>
       </template>
 
@@ -70,7 +70,7 @@
       <div v-show="activeTab === 'OtherAlbums'" class="albums-pane" data-testid="albums-pane">
         <template v-if="otherAlbums">
           <AlbumGrid v-if="otherAlbums.length" v-koel-overflow-fade view-mode="list">
-            <AlbumCard v-for="otherAlbum in otherAlbums" :key="otherAlbum.id" layout="compact" :album="otherAlbum" />
+            <AlbumCard v-for="otherAlbum in otherAlbums" :key="otherAlbum.id" :album="otherAlbum" layout="compact" />
           </AlbumGrid>
           <p v-else class="text-k-text-secondary p-6">
             No other albums by {{ album.artist_name }} found in the library.
@@ -81,7 +81,7 @@
         </AlbumGrid>
       </div>
 
-      <div v-show="activeTab === 'Info'" v-if="useLastfm && album" class="info-pane">
+      <div v-if="useLastfm && album" v-show="activeTab === 'Info'" class="info-pane">
         <AlbumInfo :album="album" mode="full" />
       </div>
     </ScreenTabs>
diff --git a/resources/assets/js/components/screens/AllSongsScreen.spec.ts b/resources/assets/js/components/screens/AllSongsScreen.spec.ts
index c93b17e6..87a05308 100644
--- a/resources/assets/js/components/screens/AllSongsScreen.spec.ts
+++ b/resources/assets/js/components/screens/AllSongsScreen.spec.ts
@@ -16,32 +16,6 @@ new class extends UnitTestCase {
     this.be()
   }
 
-  private async renderComponent () {
-    const fetchMock = this.mock(songStore, 'paginate').mockResolvedValue(2)
-
-    this.router.$currentRoute.value = {
-      screen: 'Songs',
-      path: '/songs'
-    }
-
-    const rendered = this.render(AllSongsScreen, {
-      global: {
-        stubs: {
-          SongList: this.stub('song-list')
-        }
-      }
-    })
-
-    await waitFor(() => expect(fetchMock).toHaveBeenCalledWith({
-      sort: 'title',
-      order: 'asc',
-      page: 1,
-      own_songs_only: false
-    }))
-
-    return [rendered, fetchMock] as const
-  }
-
   protected test () {
     it('renders', async () => {
       const [{ html }] = await this.renderComponent()
@@ -78,4 +52,30 @@ new class extends UnitTestCase {
       }))
     })
   }
+
+  private async renderComponent () {
+    const fetchMock = this.mock(songStore, 'paginate').mockResolvedValue(2)
+
+    this.router.$currentRoute.value = {
+      screen: 'Songs',
+      path: '/songs'
+    }
+
+    const rendered = this.render(AllSongsScreen, {
+      global: {
+        stubs: {
+          SongList: this.stub('song-list')
+        }
+      }
+    })
+
+    await waitFor(() => expect(fetchMock).toHaveBeenCalledWith({
+      sort: 'title',
+      order: 'asc',
+      page: 1,
+      own_songs_only: false
+    }))
+
+    return [rendered, fetchMock] as const
+  }
 }
diff --git a/resources/assets/js/components/screens/AllSongsScreen.vue b/resources/assets/js/components/screens/AllSongsScreen.vue
index b4d12d85..769aef30 100644
--- a/resources/assets/js/components/screens/AllSongsScreen.vue
+++ b/resources/assets/js/components/screens/AllSongsScreen.vue
@@ -67,11 +67,12 @@ import { pluralize, secondsToHumanReadable } from '@/utils'
 import { commonStore, queueStore, songStore } from '@/stores'
 import { playbackService } from '@/services'
 import {
+  useErrorHandler,
   useKoelPlus,
+  useLocalStorage,
   useRouter,
   useSongList,
-  useSongListControls,
-  useLocalStorage, useErrorHandler
+  useSongListControls
 } from '@/composables'
 
 import ScreenHeader from '@/components/ui/ScreenHeader.vue'
diff --git a/resources/assets/js/components/screens/ArtistListScreen.spec.ts b/resources/assets/js/components/screens/ArtistListScreen.spec.ts
index 20aa4646..e5ec8997 100644
--- a/resources/assets/js/components/screens/ArtistListScreen.spec.ts
+++ b/resources/assets/js/components/screens/ArtistListScreen.spec.ts
@@ -10,21 +10,6 @@ new class extends UnitTestCase {
     super.beforeEach(() => this.mock(artistStore, 'paginate'))
   }
 
-  private async renderComponent () {
-    artistStore.state.artists = factory<Artist>('artist', 9)
-
-    const rendered = this.render(ArtistListScreen, {
-      global: {
-        stubs: {
-          ArtistCard: this.stub('artist-card')
-        }
-      }
-    })
-
-    await this.router.activateRoute({ path: 'artists', screen: 'Artists' })
-    return rendered
-  }
-
   protected test () {
     it('renders', async () => {
       await this.renderComponent()
@@ -56,4 +41,19 @@ new class extends UnitTestCase {
       await waitFor(() => expect(screen.getByTestId('artist-list').classList.contains(`as-thumbnails`)).toBe(true))
     })
   }
+
+  private async renderComponent () {
+    artistStore.state.artists = factory<Artist>('artist', 9)
+
+    const rendered = this.render(ArtistListScreen, {
+      global: {
+        stubs: {
+          ArtistCard: this.stub('artist-card')
+        }
+      }
+    })
+
+    await this.router.activateRoute({ path: 'artists', screen: 'Artists' })
+    return rendered
+  }
 }
diff --git a/resources/assets/js/components/screens/ArtistScreen.vue b/resources/assets/js/components/screens/ArtistScreen.vue
index 4854ad96..60ed59a4 100644
--- a/resources/assets/js/components/screens/ArtistScreen.vue
+++ b/resources/assets/js/components/screens/ArtistScreen.vue
@@ -43,15 +43,15 @@
       <template #header>
         <label :class="{ active: activeTab === 'Songs' }">
           Songs
-          <input v-model="activeTab" type="radio" name="tab" value="Songs">
+          <input v-model="activeTab" name="tab" type="radio" value="Songs">
         </label>
         <label :class="{ active: activeTab === 'Albums' }">
           Albums
-          <input v-model="activeTab" type="radio" name="tab" value="Albums">
+          <input v-model="activeTab" name="tab" type="radio" value="Albums">
         </label>
         <label v-if="useLastfm" :class="{ active: activeTab === 'Info' }">
           Information
-          <input v-model="activeTab" type="radio" name="tab" value="Info">
+          <input v-model="activeTab" name="tab" type="radio" value="Info">
         </label>
       </template>
 
@@ -77,7 +77,7 @@
         </AlbumOrArtistGrid>
       </div>
 
-      <div v-show="activeTab === 'Info'" v-if="useLastfm && artist" class="info-pane">
+      <div v-if="useLastfm && artist" v-show="activeTab === 'Info'" class="info-pane">
         <ArtistInfo :artist="artist" mode="full" />
       </div>
     </ScreenTabs>
@@ -89,13 +89,7 @@ import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue'
 import { eventBus, pluralize } from '@/utils'
 import { albumStore, artistStore, commonStore, songStore } from '@/stores'
 import { downloadService } from '@/services'
-import {
-  useErrorHandler,
-  useRouter,
-  useSongList,
-  useSongListControls,
-  useThirdPartyServices
-} from '@/composables'
+import { useErrorHandler, useRouter, useSongList, useSongListControls, useThirdPartyServices } from '@/composables'
 
 import ScreenHeader from '@/components/ui/ScreenHeader.vue'
 import ArtistThumbnail from '@/components/ui/ArtistAlbumThumbnail.vue'
diff --git a/resources/assets/js/components/screens/FavoritesScreen.spec.ts b/resources/assets/js/components/screens/FavoritesScreen.spec.ts
index 8efa4eb6..2e34af0a 100644
--- a/resources/assets/js/components/screens/FavoritesScreen.spec.ts
+++ b/resources/assets/js/components/screens/FavoritesScreen.spec.ts
@@ -6,15 +6,6 @@ import { favoriteStore } from '@/stores'
 import FavoritesScreen from './FavoritesScreen.vue'
 
 new class extends UnitTestCase {
-  private async renderComponent () {
-    const fetchMock = this.mock(favoriteStore, 'fetch')
-    this.render(FavoritesScreen)
-
-    await this.router.activateRoute({ path: 'favorites', screen: 'Favorites' })
-
-    await waitFor(() => expect(fetchMock).toHaveBeenCalled())
-  }
-
   protected test () {
     it('renders a list of favorites', async () => {
       favoriteStore.state.songs = factory<Song>('song', 13)
@@ -34,4 +25,13 @@ new class extends UnitTestCase {
       expect(screen.queryByTestId('song-list')).toBeNull()
     })
   }
+
+  private async renderComponent () {
+    const fetchMock = this.mock(favoriteStore, 'fetch')
+    this.render(FavoritesScreen)
+
+    await this.router.activateRoute({ path: 'favorites', screen: 'Favorites' })
+
+    await waitFor(() => expect(fetchMock).toHaveBeenCalled())
+  }
 }
diff --git a/resources/assets/js/components/screens/GenreListScreen.vue b/resources/assets/js/components/screens/GenreListScreen.vue
index f7c13276..b52c523d 100644
--- a/resources/assets/js/components/screens/GenreListScreen.vue
+++ b/resources/assets/js/components/screens/GenreListScreen.vue
@@ -22,10 +22,10 @@
         class="rounded-[0.5em] inline-block m-1.5 align-middle overflow-hidden"
       >
         <a
-          class="bg-white/15 inline-flex items-center justify-center !text-k-text-secondary
-          transition-colors duration-200 ease-in-out hover:!text-k-text-primary hover:bg-k-highlight"
           :href="`/#/genres/${encodeURIComponent(genre.name)}`"
           :title="`${genre.name}: ${pluralize(genre.song_count, 'song')}`"
+          class="bg-white/15 inline-flex items-center justify-center !text-k-text-secondary
+          transition-colors duration-200 ease-in-out hover:!text-k-text-primary hover:bg-k-highlight"
         >
           <span class="name bg-white/5 px-[0.5em] py-[0.2em] leading-normal">{{ genre.name }}</span>
           <span class="count items-center px-[0.5em] py-[0.2em]">
diff --git a/resources/assets/js/components/screens/GenreScreen.spec.ts b/resources/assets/js/components/screens/GenreScreen.spec.ts
index 61cdf277..0d6bedef 100644
--- a/resources/assets/js/components/screens/GenreScreen.spec.ts
+++ b/resources/assets/js/components/screens/GenreScreen.spec.ts
@@ -7,6 +7,41 @@ import { playbackService } from '@/services'
 import GenreScreen from './GenreScreen.vue'
 
 new class extends UnitTestCase {
+  protected test () {
+    it('renders the song list', async () => {
+      await this.renderComponent()
+      expect(screen.getByTestId('song-list')).toBeTruthy()
+    })
+
+    it('shuffles all songs without fetching if genre has <= 500 songs', async () => {
+      const genre = factory<Genre>('genre', { song_count: 10 })
+      const songs = factory<Song>('song', 10)
+      const playbackMock = this.mock(playbackService, 'queueAndPlay')
+
+      await this.renderComponent(genre, songs)
+
+      await this.user.click(screen.getByTitle('Shuffle all. Press Alt/⌥ to change mode.'))
+
+      expect(playbackMock).toHaveBeenCalledWith(songs, true)
+    })
+
+    it('fetches and shuffles all songs if genre has > 500 songs', async () => {
+      const genre = factory<Genre>('genre', { song_count: 501 })
+      const songs = factory<Song>('song', 10) // we don't really need to generate 501 songs
+      const playbackMock = this.mock(playbackService, 'queueAndPlay')
+      const fetchMock = this.mock(songStore, 'fetchRandomForGenre').mockResolvedValue(songs)
+
+      await this.renderComponent(genre, songs)
+
+      await this.user.click(screen.getByTitle('Shuffle all. Press Alt/⌥ to change mode.'))
+
+      await waitFor(() => {
+        expect(fetchMock).toHaveBeenCalledWith(genre, 500)
+        expect(playbackMock).toHaveBeenCalledWith(songs)
+      })
+    })
+  }
+
   private async renderComponent (genre?: Genre, songs?: Song[]) {
     genre = genre || factory<Genre>('genre')
 
@@ -42,39 +77,4 @@ new class extends UnitTestCase {
 
     return rendered
   }
-
-  protected test () {
-    it('renders the song list', async () => {
-      await this.renderComponent()
-      expect(screen.getByTestId('song-list')).toBeTruthy()
-    })
-
-    it('shuffles all songs without fetching if genre has <= 500 songs', async () => {
-      const genre = factory<Genre>('genre', { song_count: 10 })
-      const songs = factory<Song>('song', 10)
-      const playbackMock = this.mock(playbackService, 'queueAndPlay')
-
-      await this.renderComponent(genre, songs)
-
-      await this.user.click(screen.getByTitle('Shuffle all. Press Alt/⌥ to change mode.'))
-
-      expect(playbackMock).toHaveBeenCalledWith(songs, true)
-    })
-
-    it('fetches and shuffles all songs if genre has > 500 songs', async () => {
-      const genre = factory<Genre>('genre', { song_count: 501 })
-      const songs = factory<Song>('song', 10) // we don't really need to generate 501 songs
-      const playbackMock = this.mock(playbackService, 'queueAndPlay')
-      const fetchMock = this.mock(songStore, 'fetchRandomForGenre').mockResolvedValue(songs)
-
-      await this.renderComponent(genre, songs)
-
-      await this.user.click(screen.getByTitle('Shuffle all. Press Alt/⌥ to change mode.'))
-
-      await waitFor(() => {
-        expect(fetchMock).toHaveBeenCalledWith(genre, 500)
-        expect(playbackMock).toHaveBeenCalledWith(songs)
-      })
-    })
-  }
 }
diff --git a/resources/assets/js/components/screens/HomeScreen.spec.ts b/resources/assets/js/components/screens/HomeScreen.spec.ts
index 18d9d20c..d09f4ae0 100644
--- a/resources/assets/js/components/screens/HomeScreen.spec.ts
+++ b/resources/assets/js/components/screens/HomeScreen.spec.ts
@@ -7,11 +7,6 @@ import { screen } from '@testing-library/vue'
 import HomeScreen from './HomeScreen.vue'
 
 new class extends UnitTestCase {
-  private async renderComponent () {
-    this.render(HomeScreen)
-    await this.router.activateRoute({ path: 'home', screen: 'Home' })
-  }
-
   protected test () {
     it('renders an empty state if no songs found', async () => {
       commonStore.state.song_length = 0
@@ -54,4 +49,9 @@ new class extends UnitTestCase {
       expect(refreshMock).toHaveBeenCalled()
     })
   }
+
+  private async renderComponent () {
+    this.render(HomeScreen)
+    await this.router.activateRoute({ path: 'home', screen: 'Home' })
+  }
 }
diff --git a/resources/assets/js/components/screens/HomeScreen.vue b/resources/assets/js/components/screens/HomeScreen.vue
index 668156d2..cd0c3679 100644
--- a/resources/assets/js/components/screens/HomeScreen.vue
+++ b/resources/assets/js/components/screens/HomeScreen.vue
@@ -16,17 +16,17 @@
 
     <div v-else class="space-y-12">
       <div class="grid grid-cols-1 md:grid-cols-2 w-full gap-8 md:gap-4">
-        <MostPlayedSongs data-testid="most-played-songs" :loading="loading" />
-        <RecentlyPlayedSongs data-testid="recently-played-songs" :loading="loading" />
+        <MostPlayedSongs :loading="loading" data-testid="most-played-songs" />
+        <RecentlyPlayedSongs :loading="loading" data-testid="recently-played-songs" />
       </div>
 
       <div class="grid grid-cols-1 md:grid-cols-2 w-full gap-8 md:gap-4">
-        <RecentlyAddedAlbums data-testid="recently-added-albums" :loading="loading" />
-        <RecentlyAddedSongs data-testid="recently-added-songs" :loading="loading" />
+        <RecentlyAddedAlbums :loading="loading" data-testid="recently-added-albums" />
+        <RecentlyAddedSongs :loading="loading" data-testid="recently-added-songs" />
       </div>
 
-      <MostPlayedArtists data-testid="most-played-artists" :loading="loading" />
-      <MostPlayedAlbums data-testid="most-played-albums" :loading="loading" />
+      <MostPlayedArtists :loading="loading" data-testid="most-played-artists" />
+      <MostPlayedAlbums :loading="loading" data-testid="most-played-albums" />
 
       <BtnScrollToTop />
     </div>
diff --git a/resources/assets/js/components/screens/PlaylistScreen.spec.ts b/resources/assets/js/components/screens/PlaylistScreen.spec.ts
index 801dac56..50539c9f 100644
--- a/resources/assets/js/components/screens/PlaylistScreen.spec.ts
+++ b/resources/assets/js/components/screens/PlaylistScreen.spec.ts
@@ -10,25 +10,6 @@ import PlaylistScreen from './PlaylistScreen.vue'
 let playlist: Playlist
 
 new class extends UnitTestCase {
-  private async renderComponent (songs: Song[]) {
-    playlist = playlist || factory<Playlist>('playlist')
-    playlistStore.init([playlist])
-    playlist.songs = songs
-
-    const fetchMock = this.mock(songStore, 'fetchForPlaylist').mockResolvedValue(songs)
-
-    const rendered = this.render(PlaylistScreen)
-
-    await this.router.activateRoute({
-      path: `playlists/${playlist.id}`,
-      screen: 'Playlist'
-    }, { id: playlist.id })
-
-    await waitFor(() => expect(fetchMock).toHaveBeenCalledWith(playlist, false))
-
-    return { rendered, fetchMock }
-  }
-
   protected test () {
     it('renders the playlist', async () => {
       await this.renderComponent(factory<Song>('song', 10))
@@ -75,4 +56,23 @@ new class extends UnitTestCase {
       expect(fetchMock).toHaveBeenCalledWith(playlist, true)
     })
   }
+
+  private async renderComponent (songs: Song[]) {
+    playlist = playlist || factory<Playlist>('playlist')
+    playlistStore.init([playlist])
+    playlist.songs = songs
+
+    const fetchMock = this.mock(songStore, 'fetchForPlaylist').mockResolvedValue(songs)
+
+    const rendered = this.render(PlaylistScreen)
+
+    await this.router.activateRoute({
+      path: `playlists/${playlist.id}`,
+      screen: 'Playlist'
+    }, { id: playlist.id })
+
+    await waitFor(() => expect(fetchMock).toHaveBeenCalledWith(playlist, false))
+
+    return { rendered, fetchMock }
+  }
 }
diff --git a/resources/assets/js/components/screens/PlaylistScreen.vue b/resources/assets/js/components/screens/PlaylistScreen.vue
index 555467fa..af51c2e1 100644
--- a/resources/assets/js/components/screens/PlaylistScreen.vue
+++ b/resources/assets/js/components/screens/PlaylistScreen.vue
@@ -1,7 +1,7 @@
 <template>
   <ScreenBase v-if="playlist">
     <template #header>
-      <ScreenHeader :layout="songs.length === 0 ? 'collapsed' : headerLayout" :disabled="loading">
+      <ScreenHeader :disabled="loading" :layout="songs.length === 0 ? 'collapsed' : headerLayout">
         {{ playlist.name }}
         <ControlsToggle v-if="songs.length" v-model="showingControls" />
 
@@ -29,11 +29,11 @@
           <SongListControls
             v-if="!isPhone || showingControls"
             :config="controlsConfig"
-            @delete-playlist="destroy"
             @filter="applyFilter"
+            @refresh="fetchDetails(true)"
+            @delete-playlist="destroy"
             @play-all="playAll"
             @play-selected="playSelected"
-            @refresh="fetchDetails(true)"
           />
         </template>
       </ScreenHeader>
@@ -44,11 +44,11 @@
       v-if="!loading && songs.length"
       ref="songList"
       class="-m-6"
+      @reorder="onReorder"
       @sort="sort"
       @press:delete="removeSelected"
       @press:enter="onPressEnter"
       @scroll-breakpoint="onScrollBreakpoint"
-      @reorder="onReorder"
     />
 
     <ScreenEmptyState v-if="!songs.length && !loading">
@@ -78,12 +78,12 @@ import { eventBus, pluralize } from '@/utils'
 import { commonStore, playlistStore, songStore } from '@/stores'
 import { downloadService, playlistCollaborationService } from '@/services'
 import {
+  useAuthorization,
+  useErrorHandler,
   usePlaylistManagement,
   useRouter,
   useSongList,
-  useAuthorization,
-  useSongListControls,
-  useErrorHandler
+  useSongListControls
 } from '@/composables'
 
 import ScreenHeader from '@/components/ui/ScreenHeader.vue'
diff --git a/resources/assets/js/components/screens/QueueScreen.spec.ts b/resources/assets/js/components/screens/QueueScreen.spec.ts
index bbfb0d2c..e1442dcd 100644
--- a/resources/assets/js/components/screens/QueueScreen.spec.ts
+++ b/resources/assets/js/components/screens/QueueScreen.spec.ts
@@ -7,18 +7,6 @@ import { playbackService } from '@/services'
 import QueueScreen from './QueueScreen.vue'
 
 new class extends UnitTestCase {
-  private renderComponent (songs: Song[]) {
-    queueStore.state.songs = songs
-
-    this.render(QueueScreen, {
-      global: {
-        stubs: {
-          SongList: this.stub('song-list')
-        }
-      }
-    })
-  }
-
   protected test () {
     it('renders the queue', () => {
       this.renderComponent(factory<Song>('song', 3))
@@ -57,4 +45,16 @@ new class extends UnitTestCase {
       await waitFor(() => expect(playMock).toHaveBeenCalledWith(songs, true))
     })
   }
+
+  private renderComponent (songs: Song[]) {
+    queueStore.state.songs = songs
+
+    this.render(QueueScreen, {
+      global: {
+        stubs: {
+          SongList: this.stub('song-list')
+        }
+      }
+    })
+  }
 }
diff --git a/resources/assets/js/components/screens/RecentlyPlayedScreen.spec.ts b/resources/assets/js/components/screens/RecentlyPlayedScreen.spec.ts
index b1ab1b8a..8b17d91b 100644
--- a/resources/assets/js/components/screens/RecentlyPlayedScreen.spec.ts
+++ b/resources/assets/js/components/screens/RecentlyPlayedScreen.spec.ts
@@ -6,6 +6,22 @@ import { screen, waitFor } from '@testing-library/vue'
 import RecentlyPlayedScreen from './RecentlyPlayedScreen.vue'
 
 new class extends UnitTestCase {
+  protected test () {
+    it('displays the songs', async () => {
+      await this.renderComponent(factory<Song>('song', 3))
+
+      screen.getByTestId('song-list')
+      expect(screen.queryByTestId('screen-empty-state')).toBeNull()
+    })
+
+    it('displays the empty state', async () => {
+      await this.renderComponent([])
+
+      expect(screen.queryByTestId('song-list')).toBeNull()
+      screen.getByTestId('screen-empty-state')
+    })
+  }
+
   private async renderComponent (songs: Song[]) {
     recentlyPlayedStore.state.songs = songs
     const fetchMock = this.mock(recentlyPlayedStore, 'fetch')
@@ -22,20 +38,4 @@ new class extends UnitTestCase {
 
     await waitFor(() => expect(fetchMock).toHaveBeenCalled())
   }
-
-  protected test () {
-    it('displays the songs', async () => {
-      await this.renderComponent(factory<Song>('song', 3))
-
-      screen.getByTestId('song-list')
-      expect(screen.queryByTestId('screen-empty-state')).toBeNull()
-    })
-
-    it('displays the empty state', async () => {
-      await this.renderComponent([])
-
-      expect(screen.queryByTestId('song-list')).toBeNull()
-      screen.getByTestId('screen-empty-state')
-    })
-  }
 }
diff --git a/resources/assets/js/components/screens/UploadScreen.vue b/resources/assets/js/components/screens/UploadScreen.vue
index 6e99ad0a..e527ddfe 100644
--- a/resources/assets/js/components/screens/UploadScreen.vue
+++ b/resources/assets/js/components/screens/UploadScreen.vue
@@ -44,10 +44,10 @@
             or click here to select songs
             <input
               :accept="acceptAttribute"
+              class="absolute opacity-0 w-full h-full z-[2] cursor-pointer left-0 top-0"
               multiple
               name="file[]"
               type="file"
-              class="absolute opacity-0 w-full h-full z-[2] cursor-pointer left-0 top-0"
               @change="onFileInputChange"
             >
           </a>
diff --git a/resources/assets/js/components/screens/UserListScreen.spec.ts b/resources/assets/js/components/screens/UserListScreen.spec.ts
index f7155b8a..3fa30af5 100644
--- a/resources/assets/js/components/screens/UserListScreen.spec.ts
+++ b/resources/assets/js/components/screens/UserListScreen.spec.ts
@@ -15,28 +15,6 @@ new class extends UnitTestCase {
     this.beAdmin()
   }
 
-  private async renderComponent (users: User[] = []) {
-    if (users.length === 0) {
-      users = factory<User>('user', 6)
-    }
-
-    const fetchMock = this.mock(http, 'get').mockResolvedValue(users)
-
-    this.render(UserListScreen, {
-      global: {
-        stubs: {
-          Btn,
-          BtnGroup,
-          UserCard: this.stub('user-card')
-        }
-      }
-    })
-
-    expect(fetchMock).toHaveBeenCalledWith('users')
-
-    await this.tick(2)
-  }
-
   protected test () {
     it('displays a list of users', async () => {
       await this.renderComponent()
@@ -71,4 +49,26 @@ new class extends UnitTestCase {
       expect(emitMock).toHaveBeenCalledWith('MODAL_SHOW_INVITE_USER_FORM')
     })
   }
+
+  private async renderComponent (users: User[] = []) {
+    if (users.length === 0) {
+      users = factory<User>('user', 6)
+    }
+
+    const fetchMock = this.mock(http, 'get').mockResolvedValue(users)
+
+    this.render(UserListScreen, {
+      global: {
+        stubs: {
+          Btn,
+          BtnGroup,
+          UserCard: this.stub('user-card')
+        }
+      }
+    })
+
+    expect(fetchMock).toHaveBeenCalledWith('users')
+
+    await this.tick(2)
+  }
 }
diff --git a/resources/assets/js/components/screens/__snapshots__/AllSongsScreen.spec.ts.snap b/resources/assets/js/components/screens/__snapshots__/AllSongsScreen.spec.ts.snap
index 6c6c8eeb..eea6c510 100644
--- a/resources/assets/js/components/screens/__snapshots__/AllSongsScreen.spec.ts.snap
+++ b/resources/assets/js/components/screens/__snapshots__/AllSongsScreen.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`renders 1`] = `
 <section data-v-dcfb8776="" data-v-8ea4eaa5="" class="max-h-full min-h-full w-full flex flex-col transform-gpu">
-  <header data-v-5691beb5="" data-v-8ea4eaa5="" class="screen-header min-h-0 md:min-h-full flex items-end flex-shrink-0 relative content-stretch leading-normal p-6 border-b border-b-k-bg-secondary expanded">
+  <header data-v-5691beb5="" data-v-8ea4eaa5="" class="expanded screen-header min-h-0 md:min-h-full flex items-end flex-shrink-0 relative content-stretch leading-normal p-6 border-b border-b-k-bg-secondary">
     <aside data-v-5691beb5="" class="thumbnail-wrapper hidden md:block overflow-hidden w-0 rounded-md">
       <article data-v-55bfc268="" data-v-8ea4eaa5="" data-v-5691beb5-s="" class="single thumbnail-stack aspect-square overflow-hidden grid bg-cover bg-no-repeat" style="background-image: url(undefined/resources/assets/img/covers/default.svg);"><span data-v-55bfc268="" class="block will-change-transform w-full h-full bg-cover bg-no-repeat" data-testid="thumbnail"></span></article>
     </aside>
@@ -40,7 +40,7 @@ exports[`renders 1`] = `
 
 exports[`renders in Plus edition 1`] = `
 <section data-v-dcfb8776="" data-v-8ea4eaa5="" class="max-h-full min-h-full w-full flex flex-col transform-gpu">
-  <header data-v-5691beb5="" data-v-8ea4eaa5="" class="screen-header min-h-0 md:min-h-full flex items-end flex-shrink-0 relative content-stretch leading-normal p-6 border-b border-b-k-bg-secondary expanded">
+  <header data-v-5691beb5="" data-v-8ea4eaa5="" class="expanded screen-header min-h-0 md:min-h-full flex items-end flex-shrink-0 relative content-stretch leading-normal p-6 border-b border-b-k-bg-secondary">
     <aside data-v-5691beb5="" class="thumbnail-wrapper hidden md:block overflow-hidden w-0 rounded-md">
       <article data-v-55bfc268="" data-v-8ea4eaa5="" data-v-5691beb5-s="" class="single thumbnail-stack aspect-square overflow-hidden grid bg-cover bg-no-repeat" style="background-image: url(undefined/resources/assets/img/covers/default.svg);"><span data-v-55bfc268="" class="block will-change-transform w-full h-full bg-cover bg-no-repeat" data-testid="thumbnail"></span></article>
     </aside>
@@ -67,7 +67,7 @@ exports[`renders in Plus edition 1`] = `
               </section><button data-v-8943c846="" data-v-42061e3e="" class="text-base text-k-text-primary bg-k-primary px-4 py-2.5 rounded cursor-pointer !w-full !border !border-solid !border-white/20" type="button" transparent=""> New Playlist… </button>
             </div>
           </div>
-        </div><label data-v-8ea4eaa5="" data-v-5691beb5-s="" class="text-k-text-secondary inline-flex items-center text-base"><span data-v-8ea4eaa5="" data-v-5691beb5-s="" class="relative align-bottom inline-block w-[32px] h-[20px] bg-gray-300 rounded-full shadow-inner cursor-pointer transition-all duration-200 ease-in-out mr-2 after:h-[16px] after:aspect-square after:absolute after:bg-white after:top-[2px] after:left-[2px] after:rounded-full after:transition-left after:duration-200 after:ease-in-out has-[:checked]:bg-k-highlight has-[:checked]:after:left-[14px]"><input type="checkbox" class="hidden"></span><span data-v-8ea4eaa5="" data-v-5691beb5-s="">Own songs only</span></label>
+        </div><label data-v-8ea4eaa5="" data-v-5691beb5-s="" class="text-k-text-secondary inline-flex items-center text-base"><span data-v-8ea4eaa5="" data-v-5691beb5-s="" class="relative align-bottom inline-block w-[32px] h-[20px] bg-gray-300 rounded-full shadow-inner cursor-pointer transition-all duration-200 ease-in-out mr-2 after:h-[16px] after:aspect-square after:absolute after:bg-white after:top-[2px] after:left-[2px] after:rounded-full after:transition-left after:duration-200 after:ease-in-out has-[:checked]:bg-k-highlight has-[:checked]:after:left-[14px]"><input class="hidden" type="checkbox"></span><span data-v-8ea4eaa5="" data-v-5691beb5-s="">Own songs only</span></label>
       </div>
     </main>
   </header>
diff --git a/resources/assets/js/components/screens/__snapshots__/SettingsScreen.spec.ts.snap b/resources/assets/js/components/screens/__snapshots__/SettingsScreen.spec.ts.snap
index 50921118..e783fde1 100644
--- a/resources/assets/js/components/screens/__snapshots__/SettingsScreen.spec.ts.snap
+++ b/resources/assets/js/components/screens/__snapshots__/SettingsScreen.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`renders 1`] = `
 <section data-v-dcfb8776="" class="max-h-full min-h-full w-full flex flex-col transform-gpu">
-  <header data-v-5691beb5="" class="screen-header min-h-0 md:min-h-full flex items-end flex-shrink-0 relative content-stretch leading-normal p-6 border-b border-b-k-bg-secondary expanded">
+  <header data-v-5691beb5="" class="expanded screen-header min-h-0 md:min-h-full flex items-end flex-shrink-0 relative content-stretch leading-normal p-6 border-b border-b-k-bg-secondary">
     <!--v-if-->
     <main data-v-5691beb5="" class="flex flex-1 gap-5 items-center overflow-hidden">
       <div data-v-5691beb5="" class="w-full flex-1 overflow-hidden">
diff --git a/resources/assets/js/components/screens/home/ViewAllRecentSongsButton.vue b/resources/assets/js/components/screens/home/ViewAllRecentSongsButton.vue
index a4cd9742..a76a7c0c 100644
--- a/resources/assets/js/components/screens/home/ViewAllRecentSongsButton.vue
+++ b/resources/assets/js/components/screens/home/ViewAllRecentSongsButton.vue
@@ -4,7 +4,7 @@
   </Btn>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { useRouter } from '@/composables'
 
 import Btn from '@/components/ui/form/Btn.vue'
@@ -13,6 +13,6 @@ const { go } = useRouter()
 const goToRecentlyPlayedScreen = () => go('recently-played')
 </script>
 
-<style scoped lang="postcss">
+<style lang="postcss" scoped>
 
 </style>
diff --git a/resources/assets/js/components/screens/search/AlbumExcerptResultsBlock.vue b/resources/assets/js/components/screens/search/AlbumExcerptResultsBlock.vue
index 98b0b69d..847e7651 100644
--- a/resources/assets/js/components/screens/search/AlbumExcerptResultsBlock.vue
+++ b/resources/assets/js/components/screens/search/AlbumExcerptResultsBlock.vue
@@ -18,7 +18,7 @@
   </ExcerptResultBlock>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { toRefs } from 'vue'
 
 import ExcerptResultBlock from '@/components/screens/search/ExcerptResultBlock.vue'
@@ -33,7 +33,7 @@ const props = withDefaults(defineProps<{ albums?: Album[], searching?: boolean }
 const { albums, searching } = toRefs(props)
 </script>
 
-<style scoped lang="postcss">
+<style lang="postcss" scoped>
 .results {
   @apply grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-3;
 }
diff --git a/resources/assets/js/components/screens/search/ArtistExcerptResultsBlock.vue b/resources/assets/js/components/screens/search/ArtistExcerptResultsBlock.vue
index fe07d956..1f62b655 100644
--- a/resources/assets/js/components/screens/search/ArtistExcerptResultsBlock.vue
+++ b/resources/assets/js/components/screens/search/ArtistExcerptResultsBlock.vue
@@ -18,7 +18,7 @@
   </ExcerptResultBlock>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { toRefs } from 'vue'
 
 import ArtistCard from '@/components/artist/ArtistCard.vue'
@@ -33,7 +33,7 @@ const props = withDefaults(defineProps<{ artists?: Artist[], searching?: boolean
 const { artists, searching } = toRefs(props)
 </script>
 
-<style scoped lang="postcss">
+<style lang="postcss" scoped>
 .results {
   @apply grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-3;
 }
diff --git a/resources/assets/js/components/screens/search/SearchExcerptsScreen.vue b/resources/assets/js/components/screens/search/SearchExcerptsScreen.vue
index 3d31160c..01c2bb16 100644
--- a/resources/assets/js/components/screens/search/SearchExcerptsScreen.vue
+++ b/resources/assets/js/components/screens/search/SearchExcerptsScreen.vue
@@ -8,7 +8,7 @@
     </template>
 
     <div v-if="q" class="space-y-8">
-      <SongResultsBlock :query="q" :songs="excerpt.songs" :searching="searching" data-testid="song-excerpts" />
+      <SongResultsBlock :query="q" :searching="searching" :songs="excerpt.songs" data-testid="song-excerpts" />
       <ArtistResultsBlock :artists="excerpt.artists" :searching="searching" data-testid="artist-excerpts" />
       <AlbumResultsBlock :albums="excerpt.albums" :searching="searching" data-testid="album-excerpts" />
     </div>
diff --git a/resources/assets/js/components/screens/search/SongExcerptResultsBlock.vue b/resources/assets/js/components/screens/search/SongExcerptResultsBlock.vue
index 65da4c92..0bdaef12 100644
--- a/resources/assets/js/components/screens/search/SongExcerptResultsBlock.vue
+++ b/resources/assets/js/components/screens/search/SongExcerptResultsBlock.vue
@@ -31,7 +31,7 @@
   </ExcerptResultBlock>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { toRefs } from 'vue'
 import { useRouter } from '@/composables'
 
@@ -52,7 +52,7 @@ const { go } = useRouter()
 const goToSongResults = () => go(`search/songs/?q=${query.value}`)
 </script>
 
-<style scoped lang="postcss">
+<style lang="postcss" scoped>
 .results {
   @apply grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-3;
 }
diff --git a/resources/assets/js/components/song/AddToMenu.spec.ts b/resources/assets/js/components/song/AddToMenu.spec.ts
index 32385515..16fa31b7 100644
--- a/resources/assets/js/components/song/AddToMenu.spec.ts
+++ b/resources/assets/js/components/song/AddToMenu.spec.ts
@@ -16,23 +16,6 @@ const config: AddToMenuConfig = {
 }
 
 new class extends UnitTestCase {
-  private renderComponent (customConfig: Partial<AddToMenuConfig> = {}) {
-    songs = factory<Song>('song', 5)
-
-    return this.render(AddToMenu, {
-      props: {
-        songs,
-        config: Object.assign(clone(config), customConfig),
-        showing: true
-      },
-      global: {
-        stubs: {
-          Btn
-        }
-      }
-    })
-  }
-
   protected test () {
     it('renders', () => {
       playlistStore.state.playlists = [
@@ -96,4 +79,21 @@ new class extends UnitTestCase {
       expect(emitMock).toHaveBeenCalledWith('MODAL_SHOW_CREATE_PLAYLIST_FORM', null, songs)
     })
   }
+
+  private renderComponent (customConfig: Partial<AddToMenuConfig> = {}) {
+    songs = factory<Song>('song', 5)
+
+    return this.render(AddToMenu, {
+      props: {
+        songs,
+        config: Object.assign(clone(config), customConfig),
+        showing: true
+      },
+      global: {
+        stubs: {
+          Btn
+        }
+      }
+    })
+  }
 }
diff --git a/resources/assets/js/components/song/AddToMenu.vue b/resources/assets/js/components/song/AddToMenu.vue
index 5fa6e2a8..da95d864 100644
--- a/resources/assets/js/components/song/AddToMenu.vue
+++ b/resources/assets/js/components/song/AddToMenu.vue
@@ -91,6 +91,6 @@ watch(songs, () => songs.value.length || close())
 <style lang="postcss" scoped>
 li {
   @apply h-9 leading-9 py-0 px-3 whitespace-nowrap overflow-hidden text-ellipsis rounded bg-white/5 cursor-pointer
-    hover:bg-k-highlight hover:text-k-text-primary;
+  hover:bg-k-highlight hover:text-k-text-primary;
 }
 </style>
diff --git a/resources/assets/js/components/song/EditSongForm.spec.ts b/resources/assets/js/components/song/EditSongForm.spec.ts
index 709e7279..23a3397e 100644
--- a/resources/assets/js/components/song/EditSongForm.spec.ts
+++ b/resources/assets/js/components/song/EditSongForm.spec.ts
@@ -12,25 +12,6 @@ import EditSongForm from './EditSongForm.vue'
 let songs: Song[]
 
 new class extends UnitTestCase {
-  private async renderComponent (_songs: Song | Song[], initialTab: EditSongFormTabName = 'details') {
-    songs = arrayify(_songs)
-
-    const rendered = this.render(EditSongForm, {
-      global: {
-        provide: {
-          [<symbol>ModalContextKey]: [ref({
-            songs,
-            initialTab
-          })]
-        }
-      }
-    })
-
-    await this.tick()
-
-    return rendered
-  }
-
   protected test () {
     it('edits a single song', async () => {
       const updateMock = this.mock(songStore, 'update')
@@ -122,4 +103,23 @@ new class extends UnitTestCase {
       expect(screen.getByTestId('displayed-album-name').textContent).toBe('IV')
     })
   }
+
+  private async renderComponent (_songs: Song | Song[], initialTab: EditSongFormTabName = 'details') {
+    songs = arrayify(_songs)
+
+    const rendered = this.render(EditSongForm, {
+      global: {
+        provide: {
+          [<symbol>ModalContextKey]: [ref({
+            songs,
+            initialTab
+          })]
+        }
+      }
+    })
+
+    await this.tick()
+
+    return rendered
+  }
 }
diff --git a/resources/assets/js/components/song/EditSongForm.vue b/resources/assets/js/components/song/EditSongForm.vue
index 0fff95bc..22b45707 100644
--- a/resources/assets/js/components/song/EditSongForm.vue
+++ b/resources/assets/js/components/song/EditSongForm.vue
@@ -1,18 +1,18 @@
 <template>
   <form class="max-w-[540px]" @submit.prevent="submit" @keydown.esc="maybeClose">
     <header class="gap-4">
-      <img alt="" :src="coverUrl" class="w-[84px] aspect-square object-cover object-center rounded-md">
+      <img :src="coverUrl" alt="" class="w-[84px] aspect-square object-cover object-center rounded-md">
       <div class="flex-1 flex flex-col justify-center overflow-hidden">
         <h1 :class="{ mixed: !editingOnlyOneSong }">{{ displayedTitle }}</h1>
         <h2
-          data-testid="displayed-artist-name"
           :class="{ mixed: !allSongsAreFromSameArtist && !formData.artist_name }"
+          data-testid="displayed-artist-name"
         >
           {{ displayedArtistName }}
         </h2>
         <h2
-          data-testid="displayed-album-name"
           :class="{ mixed: !allSongsAreInSameAlbum && !formData.album_name }"
+          data-testid="displayed-album-name"
         >
           {{ displayedAlbumName }}
         </h2>
@@ -117,8 +117,8 @@
                 v-model="formData.genre"
                 :placeholder="inputPlaceholder"
                 data-testid="genre-input"
-                name="genre"
                 list="genres"
+                name="genre"
               />
               <datalist id="genres">
                 <option v-for="genre in genres" :key="genre" :value="genre" />
diff --git a/resources/assets/js/components/song/SongCard.spec.ts b/resources/assets/js/components/song/SongCard.spec.ts
index a074a307..44bafb87 100644
--- a/resources/assets/js/components/song/SongCard.spec.ts
+++ b/resources/assets/js/components/song/SongCard.spec.ts
@@ -9,6 +9,25 @@ import SongCard from './SongCard.vue'
 let song: Song
 
 new class extends UnitTestCase {
+  protected test () {
+    it('has a thumbnail and a like button', () => {
+      this.renderComponent()
+      screen.getByTestId('thumbnail')
+      screen.getByTestId('like-button')
+    })
+
+    it('queues and plays on double-click', async () => {
+      const queueMock = this.mock(queueStore, 'queueIfNotQueued')
+      const playMock = this.mock(playbackService, 'play')
+      this.renderComponent()
+
+      await this.user.dblClick(screen.getByRole('article'))
+
+      expect(queueMock).toHaveBeenCalledWith(song)
+      expect(playMock).toHaveBeenCalledWith(song)
+    })
+  }
+
   private renderComponent (playbackState: PlaybackState = 'Stopped') {
     song = factory<Song>('song', {
       playback_state: playbackState,
@@ -29,23 +48,4 @@ new class extends UnitTestCase {
       }
     })
   }
-
-  protected test () {
-    it('has a thumbnail and a like button', () => {
-      this.renderComponent()
-      screen.getByTestId('thumbnail')
-      screen.getByTestId('like-button')
-    })
-
-    it('queues and plays on double-click', async () => {
-      const queueMock = this.mock(queueStore, 'queueIfNotQueued')
-      const playMock = this.mock(playbackService, 'play')
-      this.renderComponent()
-
-      await this.user.dblClick(screen.getByRole('article'))
-
-      expect(queueMock).toHaveBeenCalledWith(song)
-      expect(playMock).toHaveBeenCalledWith(song)
-    })
-  }
 }
diff --git a/resources/assets/js/components/song/SongCard.vue b/resources/assets/js/components/song/SongCard.vue
index b7ecac47..1c6d91d8 100644
--- a/resources/assets/js/components/song/SongCard.vue
+++ b/resources/assets/js/components/song/SongCard.vue
@@ -67,6 +67,7 @@ article {
   }
 
   /* show the thumbnail's playback control on the whole card focus and hover */
+
   &:hover :deep(.song-thumbnail), &:focus :deep(.song-thumbnail) {
     &::before {
       @apply opacity-70;
diff --git a/resources/assets/js/components/song/SongContextMenu.spec.ts b/resources/assets/js/components/song/SongContextMenu.spec.ts
index 1b07e286..67ec9b68 100644
--- a/resources/assets/js/components/song/SongContextMenu.spec.ts
+++ b/resources/assets/js/components/song/SongContextMenu.spec.ts
@@ -16,21 +16,6 @@ new class extends UnitTestCase {
     super.beforeEach(() => queueStore.state.songs = [])
   }
 
-  private async renderComponent (_songs?: Song | Song[]) {
-    songs = arrayify(_songs || factory<Song>('song', 5))
-
-    const rendered = this.render(SongContextMenu)
-    eventBus.emit('SONG_CONTEXT_MENU_REQUESTED', { pageX: 420, pageY: 42 } as MouseEvent, songs)
-    await this.tick(2)
-
-    return rendered
-  }
-
-  private fillQueue () {
-    queueStore.state.songs = factory<Song>('song', 5)
-    queueStore.state.songs[2].playback_state = 'Playing'
-  }
-
   protected test () {
     it('queues and plays', async () => {
       const queueMock = this.mock(queueStore, 'queueIfNotQueued')
@@ -396,4 +381,19 @@ new class extends UnitTestCase {
       expect(screen.queryByText('Mark as Private')).toBeNull()
     })
   }
+
+  private async renderComponent (_songs?: Song | Song[]) {
+    songs = arrayify(_songs || factory<Song>('song', 5))
+
+    const rendered = this.render(SongContextMenu)
+    eventBus.emit('SONG_CONTEXT_MENU_REQUESTED', { pageX: 420, pageY: 42 } as MouseEvent, songs)
+    await this.tick(2)
+
+    return rendered
+  }
+
+  private fillQueue () {
+    queueStore.state.songs = factory<Song>('song', 5)
+    queueStore.state.songs[2].playback_state = 'Playing'
+  }
 }
diff --git a/resources/assets/js/components/song/SongContextMenu.vue b/resources/assets/js/components/song/SongContextMenu.vue
index 65bb88d8..a1ae3295 100644
--- a/resources/assets/js/components/song/SongContextMenu.vue
+++ b/resources/assets/js/components/song/SongContextMenu.vue
@@ -75,9 +75,9 @@ import {
   useKoelPlus,
   useMessageToaster,
   usePlaylistManagement,
+  usePolicies,
   useRouter,
-  useSongMenuMethods,
-  usePolicies
+  useSongMenuMethods
 } from '@/composables'
 
 const { toastSuccess, toastError, toastWarning } = useMessageToaster()
diff --git a/resources/assets/js/components/song/SongList.spec.ts b/resources/assets/js/components/song/SongList.spec.ts
index 43081849..f88ac95e 100644
--- a/resources/assets/js/components/song/SongList.spec.ts
+++ b/resources/assets/js/components/song/SongList.spec.ts
@@ -17,6 +17,38 @@ import SongList from './SongList.vue'
 let songs: Song[]
 
 new class extends UnitTestCase {
+  protected test () {
+    it('renders', async () => {
+      const { html } = await this.renderComponent(factory<Song>('song', 5))
+      expect(html()).toMatchSnapshot()
+    })
+
+    it.each<[SongListSortField, string]>([
+      ['track', 'header-track-number'],
+      ['title', 'header-title'],
+      ['album_name', 'header-album'],
+      ['length', 'header-length']
+    ])('sorts by %s upon %s clicked', async (field, testId) => {
+      const { emitted } = await this.renderComponent(factory<Song>('song', 5))
+
+      await this.user.click(screen.getByTestId(testId))
+      expect(emitted().sort[0]).toEqual([field, 'desc'])
+
+      await this.user.click(screen.getByTestId(testId))
+      expect(emitted().sort[1]).toEqual([field, 'asc'])
+    })
+
+    it('cannot be sorted if configured so', async () => {
+      const { emitted } = await this.renderComponent(factory<Song>('song', 5), {
+        sortable: false,
+        reorderable: true
+      })
+
+      await this.user.click(screen.getByTestId('header-track-number'))
+      expect(emitted().sort).toBeUndefined()
+    })
+  }
+
   private async renderComponent (
     _songs: Song | Song[],
     config: Partial<SongListConfig> = {
@@ -57,36 +89,4 @@ new class extends UnitTestCase {
       }
     })
   }
-
-  protected test () {
-    it('renders', async () => {
-      const { html } = await this.renderComponent(factory<Song>('song', 5))
-      expect(html()).toMatchSnapshot()
-    })
-
-    it.each<[SongListSortField, string]>([
-      ['track', 'header-track-number'],
-      ['title', 'header-title'],
-      ['album_name', 'header-album'],
-      ['length', 'header-length']
-    ])('sorts by %s upon %s clicked', async (field, testId) => {
-      const { emitted } = await this.renderComponent(factory<Song>('song', 5))
-
-      await this.user.click(screen.getByTestId(testId))
-      expect(emitted().sort[0]).toEqual([field, 'desc'])
-
-      await this.user.click(screen.getByTestId(testId))
-      expect(emitted().sort[1]).toEqual([field, 'asc'])
-    })
-
-    it('cannot be sorted if configured so', async () => {
-      const { emitted } = await this.renderComponent(factory<Song>('song', 5), {
-        sortable: false,
-        reorderable: true
-      })
-
-      await this.user.click(screen.getByTestId('header-track-number'))
-      expect(emitted().sort).toBeUndefined()
-    })
-  }
 }
diff --git a/resources/assets/js/components/song/SongList.vue b/resources/assets/js/components/song/SongList.vue
index fe3ede67..1d4a0b8c 100644
--- a/resources/assets/js/components/song/SongList.vue
+++ b/resources/assets/js/components/song/SongList.vue
@@ -71,8 +71,8 @@
       <span class="extra">
         <SongListSorter
           v-if="config.sortable"
-          :has-custom-sort="config.hasCustomSort"
           :field="sortField"
+          :has-custom-sort="config.hasCustomSort"
           :order="sortOrder"
           @sort="sort"
         />
@@ -93,11 +93,11 @@
         @click="onClick(item, $event)"
         @dragleave="onDragLeave"
         @dragstart="onDragStart(item, $event)"
+        @play="onSongPlay(item.song)"
         @dragover.prevent="onDragOver"
         @drop.prevent="onDrop(item, $event)"
         @dragend.prevent="onDragEnd"
         @contextmenu.prevent="openContextMenu(item, $event)"
-        @play="onSongPlay(item.song)"
       />
     </VirtualScroller>
   </div>
diff --git a/resources/assets/js/components/song/SongListControls.spec.ts b/resources/assets/js/components/song/SongListControls.spec.ts
index 69b481dc..78206356 100644
--- a/resources/assets/js/components/song/SongListControls.spec.ts
+++ b/resources/assets/js/components/song/SongListControls.spec.ts
@@ -8,32 +8,6 @@ import { screen } from '@testing-library/vue'
 import SongListControls from './SongListControls.vue'
 
 new class extends UnitTestCase {
-  private renderComponent (selectedSongCount = 1, configOverrides: Partial<SongListControlsConfig> = {}) {
-    const songs = factory<Song>('song', 5)
-    const config: SongListControlsConfig = merge({
-      addTo: {
-        queue: true,
-        favorites: true
-      },
-      clearQueue: true,
-      deletePlaylist: true,
-      refresh: true,
-      filter: true
-    }, configOverrides)
-
-    return this.render(SongListControls, {
-      global: {
-        provide: {
-          [<symbol>SongsKey]: [ref(songs)],
-          [<symbol>SelectedSongsKey]: [ref(take(songs, selectedSongCount))]
-        }
-      },
-      props: {
-        config
-      }
-    })
-  }
-
   protected test () {
     it.each([[0], [1]])('shuffles all if %s songs are selected', async (selectedCount: number) => {
       const { emitted } = this.renderComponent(selectedCount)
@@ -87,4 +61,30 @@ new class extends UnitTestCase {
       expect(emitted().deletePlaylist).toBeTruthy()
     })
   }
+
+  private renderComponent (selectedSongCount = 1, configOverrides: Partial<SongListControlsConfig> = {}) {
+    const songs = factory<Song>('song', 5)
+    const config: SongListControlsConfig = merge({
+      addTo: {
+        queue: true,
+        favorites: true
+      },
+      clearQueue: true,
+      deletePlaylist: true,
+      refresh: true,
+      filter: true
+    }, configOverrides)
+
+    return this.render(SongListControls, {
+      global: {
+        provide: {
+          [<symbol>SongsKey]: [ref(songs)],
+          [<symbol>SelectedSongsKey]: [ref(take(songs, selectedSongCount))]
+        }
+      },
+      props: {
+        config
+      }
+    })
+  }
 }
diff --git a/resources/assets/js/components/song/SongListFilter.vue b/resources/assets/js/components/song/SongListFilter.vue
index 04046e01..ee25df4a 100644
--- a/resources/assets/js/components/song/SongListFilter.vue
+++ b/resources/assets/js/components/song/SongListFilter.vue
@@ -4,16 +4,16 @@
     class="flex border rounded-md overflow-hidden border-solid border-white/10 focus-within:bg-black/10 focus-within:border-white/40"
     @submit.prevent
   >
-    <Btn v-koel-tooltip title="Filter" unrounded transparent @click.prevent="toggleInput">
+    <Btn v-koel-tooltip title="Filter" transparent unrounded @click.prevent="toggleInput">
       <Icon :icon="faFilter" fixed-width />
     </Btn>
     <TextInput
       v-show="showingInput"
       ref="input"
       v-model="keywords"
-      type="search"
-      placeholder="Keywords"
       class="!text-k-text-primary !bg-transparent !rounded-none !pl-0 !h-[unset] placeholder:text-white/50"
+      placeholder="Keywords"
+      type="search"
     />
   </form>
 </template>
diff --git a/resources/assets/js/components/song/SongListItem.spec.ts b/resources/assets/js/components/song/SongListItem.spec.ts
index f4f30b6e..8a5e54ee 100644
--- a/resources/assets/js/components/song/SongListItem.spec.ts
+++ b/resources/assets/js/components/song/SongListItem.spec.ts
@@ -7,21 +7,6 @@ import SongListItem from './SongListItem.vue'
 let row: SongRow
 
 new class extends UnitTestCase {
-  private renderComponent (song?: Song) {
-    song = song ?? factory<Song>('song')
-
-    row = {
-      song,
-      selected: false
-    }
-
-    return this.render(SongListItem, {
-      props: {
-        item: row
-      }
-    })
-  }
-
   protected test () {
     it('renders', async () => {
       const song = factory<Song>('song', {
@@ -45,4 +30,19 @@ new class extends UnitTestCase {
       expect(emitted().play).toBeTruthy()
     })
   }
+
+  private renderComponent (song?: Song) {
+    song = song ?? factory<Song>('song')
+
+    row = {
+      song,
+      selected: false
+    }
+
+    return this.render(SongListItem, {
+      props: {
+        item: row
+      }
+    })
+  }
 }
diff --git a/resources/assets/js/components/song/SongListItem.vue b/resources/assets/js/components/song/SongListItem.vue
index 94b8766a..6bacfcb7 100644
--- a/resources/assets/js/components/song/SongListItem.vue
+++ b/resources/assets/js/components/song/SongListItem.vue
@@ -31,7 +31,7 @@
       <span class="collaborator">
         <UserAvatar :user="collaborator" width="24" />
       </span>
-      <span class="added-at" :title="song.collaboration.added_at">{{ song.collaboration.fmt_added_at }}</span>
+      <span :title="song.collaboration.added_at" class="added-at">{{ song.collaboration.fmt_added_at }}</span>
     </template>
     <span class="time">{{ fmtLength }}</span>
     <span class="extra">
diff --git a/resources/assets/js/components/song/SongListSorter.vue b/resources/assets/js/components/song/SongListSorter.vue
index 37211989..8debb493 100644
--- a/resources/assets/js/components/song/SongListSorter.vue
+++ b/resources/assets/js/components/song/SongListSorter.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <button ref="button" title="Sort" class="w-full focus:text-k-highlight" @click.stop="trigger">
+    <button ref="button" class="w-full focus:text-k-highlight" title="Sort" @click.stop="trigger">
       <Icon :icon="faSort" />
     </button>
     <menu ref="menu" v-koel-clickaway="hide" class="context-menu normal-case tracking-normal">
diff --git a/resources/assets/js/components/song/SongThumbnail.spec.ts b/resources/assets/js/components/song/SongThumbnail.spec.ts
index 6502128a..88d9a8b8 100644
--- a/resources/assets/js/components/song/SongThumbnail.spec.ts
+++ b/resources/assets/js/components/song/SongThumbnail.spec.ts
@@ -9,20 +9,6 @@ import SongThumbnail from '@/components/song/SongThumbnail.vue'
 let song: Song
 
 new class extends UnitTestCase {
-  private renderComponent (playbackState: PlaybackState = 'Stopped') {
-    song = factory<Song>('song', {
-      playback_state: playbackState,
-      play_count: 10,
-      title: 'Foo bar'
-    })
-
-    return this.render(SongThumbnail, {
-      props: {
-        song
-      }
-    })
-  }
-
   protected test () {
     it.each<[PlaybackState, string, MethodOf<typeof playbackService>]>([
       ['Stopped', 'Play', 'play'],
@@ -38,4 +24,18 @@ new class extends UnitTestCase {
       expect(playbackMock).toHaveBeenCalled()
     })
   }
+
+  private renderComponent (playbackState: PlaybackState = 'Stopped') {
+    song = factory<Song>('song', {
+      playback_state: playbackState,
+      play_count: 10,
+      title: 'Foo bar'
+    })
+
+    return this.render(SongThumbnail, {
+      props: {
+        song
+      }
+    })
+  }
 }
diff --git a/resources/assets/js/components/song/__snapshots__/EditSongForm.spec.ts.snap b/resources/assets/js/components/song/__snapshots__/EditSongForm.spec.ts.snap
index 129e9d80..b9517ac9 100644
--- a/resources/assets/js/components/song/__snapshots__/EditSongForm.spec.ts.snap
+++ b/resources/assets/js/components/song/__snapshots__/EditSongForm.spec.ts.snap
@@ -2,32 +2,32 @@
 
 exports[`edits a single song 1`] = `
 <form data-v-d70eb300="" class="max-w-[540px]">
-  <header data-v-d70eb300="" class="gap-4"><img data-v-d70eb300="" alt="" src="http://test/album.jpg" class="w-[84px] aspect-square object-cover object-center rounded-md">
+  <header data-v-d70eb300="" class="gap-4"><img data-v-d70eb300="" src="http://test/album.jpg" alt="" class="w-[84px] aspect-square object-cover object-center rounded-md">
     <div data-v-d70eb300="" class="flex-1 flex flex-col justify-center overflow-hidden">
       <h1 data-v-d70eb300="" class="">Rocket to Heaven</h1>
-      <h2 data-v-d70eb300="" data-testid="displayed-artist-name" class="">Led Zeppelin</h2>
-      <h2 data-v-d70eb300="" data-testid="displayed-album-name" class="">IV</h2>
+      <h2 data-v-d70eb300="" class="" data-testid="displayed-artist-name">Led Zeppelin</h2>
+      <h2 data-v-d70eb300="" class="" data-testid="displayed-album-name">IV</h2>
     </div>
   </header>
   <div data-v-d70eb300="" class="min-h-full flex flex-col relative mt-4">
-    <nav data-v-d70eb300="" role="tablist" class="overflow-auto border-b-[2px] border-b-white/10 px-6 py-0 flex gap-1 min-h-[36px]"><button data-v-d70eb300="" aria-selected="true" role="tab" type="button" class="cursor-pointer relative px-5 py-3 rounded-t-md opacity-70 bg-white/5 uppercase text-k-text-secondary duration-200 hover:bg-white/10 aria-selected:transition-none aria-selected:text-k-text-primary aria-selected:bg-white/10 aria-selected:opacity-100" id="editSongTabDetails" aria-controls="editSongPanelDetails"> Details </button><button data-v-d70eb300="" aria-selected="false" role="tab" type="button" class="cursor-pointer relative px-5 py-3 rounded-t-md opacity-70 bg-white/5 uppercase text-k-text-secondary duration-200 hover:bg-white/10 aria-selected:transition-none aria-selected:text-k-text-primary aria-selected:bg-white/10 aria-selected:opacity-100" id="editSongTabLyrics" aria-controls="editSongPanelLyrics" data-testid="edit-song-lyrics-tab"> Lyrics </button></nav>
+    <nav data-v-d70eb300="" class="overflow-auto border-b-[2px] border-b-white/10 px-6 py-0 flex gap-1 min-h-[36px]" role="tablist"><button data-v-d70eb300="" aria-selected="true" class="cursor-pointer relative px-5 py-3 rounded-t-md opacity-70 bg-white/5 uppercase text-k-text-secondary duration-200 hover:bg-white/10 aria-selected:transition-none aria-selected:text-k-text-primary aria-selected:bg-white/10 aria-selected:opacity-100" role="tab" type="button" id="editSongTabDetails" aria-controls="editSongPanelDetails"> Details </button><button data-v-d70eb300="" aria-selected="false" class="cursor-pointer relative px-5 py-3 rounded-t-md opacity-70 bg-white/5 uppercase text-k-text-secondary duration-200 hover:bg-white/10 aria-selected:transition-none aria-selected:text-k-text-primary aria-selected:bg-white/10 aria-selected:opacity-100" role="tab" type="button" id="editSongTabLyrics" aria-controls="editSongPanelLyrics" data-testid="edit-song-lyrics-tab"> Lyrics </button></nav>
     <div data-v-d70eb300="" class="p-6 overflow-auto">
       <div data-v-d70eb300="" role="tabpanel" tabindex="0" id="editSongPanelDetails" aria-labelledby="editSongTabDetails" class="space-y-5"><label data-v-d70eb300="" class="flex flex-col gap-2 text-[1.1rem]"><span>Title</span><input data-v-d70eb300="" class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900" type="text" data-testid="title-input" name="title" title="Title">
           <!--v-if-->
         </label>
-        <div data-v-d70eb300="" class="grid gap-3 md:grid-cols-2"><label data-v-d70eb300="" class="flex flex-col gap-2 text-[1.1rem]"><span>Artist</span><input data-v-d70eb300="" class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900" type="text" placeholder="" data-testid="artist-input" name="artist">
+        <div data-v-d70eb300="" class="md:grid-cols-2 grid gap-3"><label data-v-d70eb300="" class="flex flex-col gap-2 text-[1.1rem]"><span>Artist</span><input data-v-d70eb300="" class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900" type="text" placeholder="" data-testid="artist-input" name="artist">
             <!--v-if-->
           </label><label data-v-d70eb300="" class="flex flex-col gap-2 text-[1.1rem]"><span>Album Artist</span><input data-v-d70eb300="" class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900" type="text" placeholder="" data-testid="albumArtist-input" name="album_artist">
             <!--v-if-->
           </label></div><label data-v-d70eb300="" class="flex flex-col gap-2 text-[1.1rem]"><span>Album</span><input data-v-d70eb300="" class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900" type="text" placeholder="" data-testid="album-input" name="album">
           <!--v-if-->
         </label>
-        <div data-v-d70eb300="" class="grid gap-3 md:grid-cols-2"><label data-v-d70eb300="" class="flex flex-col gap-2 text-[1.1rem]"><span>Track</span><input data-v-d70eb300="" class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900" type="number" placeholder="" data-testid="track-input" min="1" name="track">
+        <div data-v-d70eb300="" class="md:grid-cols-2 grid gap-3"><label data-v-d70eb300="" class="flex flex-col gap-2 text-[1.1rem]"><span>Track</span><input data-v-d70eb300="" class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900" type="number" placeholder="" data-testid="track-input" min="1" name="track">
             <!--v-if-->
           </label><label data-v-d70eb300="" class="flex flex-col gap-2 text-[1.1rem]"><span>Disc</span><input data-v-d70eb300="" class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900" type="number" placeholder="" data-testid="disc-input" min="1" name="disc">
             <!--v-if-->
           </label></div>
-        <div data-v-d70eb300="" class="grid gap-3 md:grid-cols-2"><label data-v-d70eb300="" class="flex flex-col gap-2 text-[1.1rem]"><span>Genre</span><input data-v-d70eb300="" class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900" type="text" placeholder="" data-testid="genre-input" name="genre" list="genres"><datalist data-v-d70eb300="" id="genres">
+        <div data-v-d70eb300="" class="md:grid-cols-2 grid gap-3"><label data-v-d70eb300="" class="flex flex-col gap-2 text-[1.1rem]"><span>Genre</span><input data-v-d70eb300="" class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900" type="text" placeholder="" data-testid="genre-input" list="genres" name="genre"><datalist data-v-d70eb300="" id="genres">
               <option data-v-d70eb300="" value="Blues"></option>
               <option data-v-d70eb300="" value="Classic Rock"></option>
               <option data-v-d70eb300="" value="Country"></option>
@@ -237,33 +237,33 @@ exports[`edits a single song 1`] = `
 
 exports[`edits multiple songs 1`] = `
 <form data-v-d70eb300="" class="max-w-[540px]">
-  <header data-v-d70eb300="" class="gap-4"><img data-v-d70eb300="" alt="" src="undefined/resources/assets/img/covers/default.svg" class="w-[84px] aspect-square object-cover object-center rounded-md">
+  <header data-v-d70eb300="" class="gap-4"><img data-v-d70eb300="" src="undefined/resources/assets/img/covers/default.svg" alt="" class="w-[84px] aspect-square object-cover object-center rounded-md">
     <div data-v-d70eb300="" class="flex-1 flex flex-col justify-center overflow-hidden">
       <h1 data-v-d70eb300="" class="mixed">3 songs selected</h1>
-      <h2 data-v-d70eb300="" data-testid="displayed-artist-name" class="mixed">Mixed Artists</h2>
-      <h2 data-v-d70eb300="" data-testid="displayed-album-name" class="mixed">Mixed Albums</h2>
+      <h2 data-v-d70eb300="" class="mixed" data-testid="displayed-artist-name">Mixed Artists</h2>
+      <h2 data-v-d70eb300="" class="mixed" data-testid="displayed-album-name">Mixed Albums</h2>
     </div>
   </header>
   <div data-v-d70eb300="" class="min-h-full flex flex-col relative mt-4">
-    <nav data-v-d70eb300="" role="tablist" class="overflow-auto border-b-[2px] border-b-white/10 px-6 py-0 flex gap-1 min-h-[36px]"><button data-v-d70eb300="" aria-selected="true" role="tab" type="button" class="cursor-pointer relative px-5 py-3 rounded-t-md opacity-70 bg-white/5 uppercase text-k-text-secondary duration-200 hover:bg-white/10 aria-selected:transition-none aria-selected:text-k-text-primary aria-selected:bg-white/10 aria-selected:opacity-100" id="editSongTabDetails" aria-controls="editSongPanelDetails"> Details </button>
+    <nav data-v-d70eb300="" class="overflow-auto border-b-[2px] border-b-white/10 px-6 py-0 flex gap-1 min-h-[36px]" role="tablist"><button data-v-d70eb300="" aria-selected="true" class="cursor-pointer relative px-5 py-3 rounded-t-md opacity-70 bg-white/5 uppercase text-k-text-secondary duration-200 hover:bg-white/10 aria-selected:transition-none aria-selected:text-k-text-primary aria-selected:bg-white/10 aria-selected:opacity-100" role="tab" type="button" id="editSongTabDetails" aria-controls="editSongPanelDetails"> Details </button>
       <!--v-if-->
     </nav>
     <div data-v-d70eb300="" class="p-6 overflow-auto">
       <div data-v-d70eb300="" role="tabpanel" tabindex="0" id="editSongPanelDetails" aria-labelledby="editSongTabDetails" class="space-y-5">
         <!--v-if-->
-        <div data-v-d70eb300="" class="grid gap-3 md:grid-cols-2"><label data-v-d70eb300="" class="flex flex-col gap-2 text-[1.1rem]"><span>Artist</span><input data-v-d70eb300="" class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900" type="text" placeholder="Leave unchanged" data-testid="artist-input" name="artist">
+        <div data-v-d70eb300="" class="md:grid-cols-2 grid gap-3"><label data-v-d70eb300="" class="flex flex-col gap-2 text-[1.1rem]"><span>Artist</span><input data-v-d70eb300="" class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900" type="text" placeholder="Leave unchanged" data-testid="artist-input" name="artist">
             <!--v-if-->
           </label><label data-v-d70eb300="" class="flex flex-col gap-2 text-[1.1rem]"><span>Album Artist</span><input data-v-d70eb300="" class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900" type="text" placeholder="Leave unchanged" data-testid="albumArtist-input" name="album_artist">
             <!--v-if-->
           </label></div><label data-v-d70eb300="" class="flex flex-col gap-2 text-[1.1rem]"><span>Album</span><input data-v-d70eb300="" class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900" type="text" placeholder="Leave unchanged" data-testid="album-input" name="album">
           <!--v-if-->
         </label>
-        <div data-v-d70eb300="" class="grid gap-3 md:grid-cols-2"><label data-v-d70eb300="" class="flex flex-col gap-2 text-[1.1rem]"><span>Track</span><input data-v-d70eb300="" class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900" type="number" placeholder="Leave unchanged" data-testid="track-input" min="1" name="track">
+        <div data-v-d70eb300="" class="md:grid-cols-2 grid gap-3"><label data-v-d70eb300="" class="flex flex-col gap-2 text-[1.1rem]"><span>Track</span><input data-v-d70eb300="" class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900" type="number" placeholder="Leave unchanged" data-testid="track-input" min="1" name="track">
             <!--v-if-->
           </label><label data-v-d70eb300="" class="flex flex-col gap-2 text-[1.1rem]"><span>Disc</span><input data-v-d70eb300="" class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900" type="number" placeholder="Leave unchanged" data-testid="disc-input" min="1" name="disc">
             <!--v-if-->
           </label></div>
-        <div data-v-d70eb300="" class="grid gap-3 md:grid-cols-2"><label data-v-d70eb300="" class="flex flex-col gap-2 text-[1.1rem]"><span>Genre</span><input data-v-d70eb300="" class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900" type="text" placeholder="Leave unchanged" data-testid="genre-input" name="genre" list="genres"><datalist data-v-d70eb300="" id="genres">
+        <div data-v-d70eb300="" class="md:grid-cols-2 grid gap-3"><label data-v-d70eb300="" class="flex flex-col gap-2 text-[1.1rem]"><span>Genre</span><input data-v-d70eb300="" class="block text-base w-full px-4 py-2.5 rounded bg-k-bg-input text-k-text-input read-only:bg-gray-400 read-only:text-gray-900 disabled:bg-gray-400 disabled:text-gray-900" type="text" placeholder="Leave unchanged" data-testid="genre-input" list="genres" name="genre"><datalist data-v-d70eb300="" id="genres">
               <option data-v-d70eb300="" value="Blues"></option>
               <option data-v-d70eb300="" value="Classic Rock"></option>
               <option data-v-d70eb300="" value="Country"></option>
diff --git a/resources/assets/js/components/ui/AlbumArtOverlay.spec.ts b/resources/assets/js/components/ui/AlbumArtOverlay.spec.ts
index 2c8317c1..cdd40a6b 100644
--- a/resources/assets/js/components/ui/AlbumArtOverlay.spec.ts
+++ b/resources/assets/js/components/ui/AlbumArtOverlay.spec.ts
@@ -7,20 +7,6 @@ import AlbumArtOverlay from './AlbumArtOverlay.vue'
 let albumId: number
 
 new class extends UnitTestCase {
-  private async renderComponent () {
-    albumId = 42
-
-    const rendered = this.render(AlbumArtOverlay, {
-      props: {
-        album: albumId
-      }
-    })
-
-    await this.tick()
-
-    return rendered
-  }
-
   protected test () {
     it('fetches and displays the album thumbnail', async () => {
       const fetchMock = this.mock(albumStore, 'fetchThumbnail').mockResolvedValue('http://test/thumb.jpg')
@@ -44,4 +30,18 @@ new class extends UnitTestCase {
       })
     })
   }
+
+  private async renderComponent () {
+    albumId = 42
+
+    const rendered = this.render(AlbumArtOverlay, {
+      props: {
+        album: albumId
+      }
+    })
+
+    await this.tick()
+
+    return rendered
+  }
 }
diff --git a/resources/assets/js/components/ui/AlertBox.vue b/resources/assets/js/components/ui/AlertBox.vue
index 813d5362..9f244351 100644
--- a/resources/assets/js/components/ui/AlertBox.vue
+++ b/resources/assets/js/components/ui/AlertBox.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    class="alert-box flex items-center gap-4 bg-white/10 mb-6 p-4 rounded-md text-k-text-primary"
     :class="`alert-box-${props.type}`"
+    class="alert-box flex items-center gap-4 bg-white/10 mb-6 p-4 rounded-md text-k-text-primary"
   >
     <Icon v-if="props.type === 'info' || props.type === 'default'" :icon="faInfoCircle" />
     <Icon v-if="props.type === 'danger'" :icon="faExclamationCircle" />
@@ -14,7 +14,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import {
   faCheckCircle,
   faExclamationCircle,
@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<{ type?: 'default' | 'info' | 'danger' |
 })
 </script>
 
-<style scoped lang="postcss">
+<style lang="postcss" scoped>
 .alert-box {
   &-info {
     @apply bg-blue-500;
diff --git a/resources/assets/js/components/ui/AppleMusicButton.vue b/resources/assets/js/components/ui/AppleMusicButton.vue
index d38db1b3..fd811f19 100644
--- a/resources/assets/js/components/ui/AppleMusicButton.vue
+++ b/resources/assets/js/components/ui/AppleMusicButton.vue
@@ -1,17 +1,17 @@
 <template>
   <a
-    class="rounded px-2 py-0 bg-white/10 h-6 flex items-center hover:itunes-gradient focus:itunes-gradient"
     :href="url"
+    class="rounded px-2 py-0 bg-white/10 h-6 flex items-center hover:itunes-gradient focus:itunes-gradient"
     target="_blank"
     title="Preview and buy this song on Apple Music"
   >
     <svg
+      class="fill-k-text-primary"
       height="10"
       role="presentation"
       viewBox="0 0 83 20"
       width="41"
       xmlns="http://www.w3.org/2000/svg"
-      class="fill-k-text-primary"
     >
       <path
         d="M34.752 19.746V6.243h-.088l-5.433 13.503h-2.074L21.711 6.243h-.087v13.503h-2.548V1.399h3.235l5.833 14.621h.1L34.064 1.4h3.248v18.347h-2.56zm16.649 0h-2.586v-2.263h-.062c-.725 1.602-2.061 2.504-4.072 2.504-2.86 0-4.61-1.894-4.61-4.958V6.37h2.698v8.125c0 2.034.95 3.127 2.81 3.127 1.95 0 3.124-1.373 3.124-3.458V6.37H51.4v13.376zm7.394-13.618c3.06 0 5.046 1.73 5.134 4.196h-2.536c-.15-1.296-1.087-2.11-2.598-2.11-1.462 0-2.436.724-2.436 1.793 0 .839.6 1.41 2.023 1.741l2.136.496c2.686.636 3.71 1.704 3.71 3.636 0 2.442-2.236 4.12-5.333 4.12-3.285 0-5.26-1.64-5.509-4.183h2.673c.25 1.398 1.187 2.085 2.836 2.085 1.623 0 2.623-.687 2.623-1.78 0-.865-.487-1.373-1.924-1.704l-2.136-.508c-2.498-.585-3.735-1.806-3.735-3.75 0-2.391 2.049-4.032 5.072-4.032zM66.1 2.836c0-.878.7-1.577 1.561-1.577.862 0 1.55.7 1.55 1.577 0 .864-.688 1.576-1.55 1.576a1.573 1.573 0 0 1-1.56-1.576zm.212 3.534h2.698v13.376h-2.698V6.37zm14.089 4.603c-.275-1.424-1.324-2.556-3.085-2.556-2.086 0-3.46 1.767-3.46 4.64 0 2.938 1.386 4.642 3.485 4.642 1.66 0 2.748-.928 3.06-2.48H83C82.713 18.067 80.477 20 77.317 20c-3.76 0-6.208-2.62-6.208-6.942 0-4.247 2.448-6.93 6.183-6.93 3.385 0 5.446 2.213 5.683 4.845h-2.573zM10.824 3.189c-.698.834-1.805 1.496-2.913 1.398-.145-1.128.41-2.33 1.036-3.065C9.644.662 10.848.05 11.835 0c.121 1.178-.336 2.33-1.01 3.19zm.999 1.619c.624.049 2.425.244 3.578 1.98-.096.074-2.137 1.272-2.113 3.79.024 3.01 2.593 4.012 2.617 4.037-.024.074-.407 1.419-1.344 2.812-.817 1.224-1.657 2.422-3.002 2.447-1.297.024-1.73-.783-3.218-.783-1.489 0-1.97.758-3.194.807-1.297.048-2.28-1.297-3.097-2.52C.368 14.908-.904 10.408.825 7.375c.84-1.516 2.377-2.47 4.034-2.495 1.273-.023 2.45.857 3.218.857.769 0 2.137-1.027 3.746-.93z"
diff --git a/resources/assets/js/components/ui/ArtistAlbumCard.vue b/resources/assets/js/components/ui/ArtistAlbumCard.vue
index 87ba66bd..06981cb0 100644
--- a/resources/assets/js/components/ui/ArtistAlbumCard.vue
+++ b/resources/assets/js/components/ui/ArtistAlbumCard.vue
@@ -1,10 +1,10 @@
 <template>
   <article
-    class="relative flex max-w-full md:max-w-[256px] border p-5 rounded-lg flex-col gap-5 transition border-color duration-200"
     :class="layout"
+    class="relative flex max-w-full md:max-w-[256px] border p-5 rounded-lg flex-col gap-5 transition border-color duration-200"
+    data-testid="artist-album-card"
     draggable="true"
     tabindex="0"
-    data-testid="artist-album-card"
     @dblclick="onDblClick"
     @dragstart="onDragStart"
     @contextmenu.prevent="onContextMenu"
diff --git a/resources/assets/js/components/ui/ArtistAlbumThumbnail.spec.ts b/resources/assets/js/components/ui/ArtistAlbumThumbnail.spec.ts
index 9628ee90..96ba1d5e 100644
--- a/resources/assets/js/components/ui/ArtistAlbumThumbnail.spec.ts
+++ b/resources/assets/js/components/ui/ArtistAlbumThumbnail.spec.ts
@@ -11,32 +11,6 @@ let album: Album
 let artist: Artist
 
 new class extends UnitTestCase {
-  private renderForAlbum () {
-    album = factory<Album>('album', {
-      name: 'IV',
-      cover: 'https://test/album.jpg'
-    })
-
-    return this.render(Thumbnail, {
-      props: {
-        entity: album
-      }
-    })
-  }
-
-  private renderForArtist () {
-    artist = factory<Artist>('artist', {
-      name: 'Led Zeppelin',
-      image: 'https://test/blimp.jpg'
-    })
-
-    return this.render(Thumbnail, {
-      props: {
-        entity: artist
-      }
-    })
-  }
-
   protected test () {
     it('renders for album', () => {
       expect(this.renderForAlbum().html()).toMatchSnapshot()
@@ -106,4 +80,30 @@ new class extends UnitTestCase {
       })
     })
   }
+
+  private renderForAlbum () {
+    album = factory<Album>('album', {
+      name: 'IV',
+      cover: 'https://test/album.jpg'
+    })
+
+    return this.render(Thumbnail, {
+      props: {
+        entity: album
+      }
+    })
+  }
+
+  private renderForArtist () {
+    artist = factory<Artist>('artist', {
+      name: 'Led Zeppelin',
+      image: 'https://test/blimp.jpg'
+    })
+
+    return this.render(Thumbnail, {
+      props: {
+        entity: artist
+      }
+    })
+  }
 }
diff --git a/resources/assets/js/components/ui/ArtistAlbumThumbnail.vue b/resources/assets/js/components/ui/ArtistAlbumThumbnail.vue
index 65f129c0..a581c77e 100644
--- a/resources/assets/js/components/ui/ArtistAlbumThumbnail.vue
+++ b/resources/assets/js/components/ui/ArtistAlbumThumbnail.vue
@@ -38,7 +38,7 @@ import { computed, ref, toRefs } from 'vue'
 import { albumStore, artistStore, queueStore, songStore } from '@/stores'
 import { playbackService } from '@/services'
 import { defaultCover } from '@/utils'
-import { usePolicies, useMessageToaster, useRouter, useFileReader, useErrorHandler } from '@/composables'
+import { useErrorHandler, useFileReader, useMessageToaster, usePolicies, useRouter } from '@/composables'
 import { acceptedImageTypes } from '@/config'
 
 const { toastSuccess } = useMessageToaster()
@@ -150,6 +150,7 @@ const onDrop = async (event: DragEvent) => {
     mask-size: 40%;
   }
 }
+
 article {
   .control {
     &:hover, &:focus {
@@ -179,6 +180,7 @@ article {
 }
 
 .compact .icon {
-  @apply text-[.3rem]; /* to control the size of the icon */
+  @apply text-[.3rem];
+  /* to control the size of the icon */
 }
 </style>
diff --git a/resources/assets/js/components/ui/BtnScrollToTop.vue b/resources/assets/js/components/ui/BtnScrollToTop.vue
index 61535d85..90c6a789 100644
--- a/resources/assets/js/components/ui/BtnScrollToTop.vue
+++ b/resources/assets/js/components/ui/BtnScrollToTop.vue
@@ -3,8 +3,8 @@
     <button
       v-show="showing"
       ref="el"
-      title="Scroll to top"
       class="sm:hidden block fixed right-[1.8rem] z-20 opacity-100 duration-500 transition-opacity rounded-full py-2 px-4 bg-black/50"
+      title="Scroll to top"
       type="button"
       @click="scrollToTop"
     >
diff --git a/resources/assets/js/components/ui/DialogBox.vue b/resources/assets/js/components/ui/DialogBox.vue
index dbc45a7d..0ce44dab 100644
--- a/resources/assets/js/components/ui/DialogBox.vue
+++ b/resources/assets/js/components/ui/DialogBox.vue
@@ -1,8 +1,8 @@
 <template>
   <dialog
     ref="dialog"
-    class="rounded-md shadow-xl border-0 p-0 min-w-[320px] max-w-[calc(100vw - 40px)] backdrop:bg-black/50"
     :class="`${type}`"
+    class="rounded-md shadow-xl border-0 p-0 min-w-[320px] max-w-[calc(100vw - 40px)] backdrop:bg-black/50"
   >
     <div class="flex gap-5 py-6 px-7">
       <aside>
@@ -22,7 +22,7 @@
     </div>
 
     <footer class="flex justify-end gap-2 px-6 py-4">
-      <Btn v-if="showCancelButton" name="cancel" class="!bg-gray-100 !text-gray-600" @click.prevent="cancel">
+      <Btn v-if="showCancelButton" class="!bg-gray-100 !text-gray-600" name="cancel" @click.prevent="cancel">
         Cancel
       </Btn>
       <Btn name="ok">OK</Btn>
diff --git a/resources/assets/js/components/ui/ExternalMark.vue b/resources/assets/js/components/ui/ExternalMark.vue
index e052e758..9e7ce16e 100644
--- a/resources/assets/js/components/ui/ExternalMark.vue
+++ b/resources/assets/js/components/ui/ExternalMark.vue
@@ -4,6 +4,6 @@
   </span>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { faSquareUpRight } from '@fortawesome/free-solid-svg-icons'
 </script>
diff --git a/resources/assets/js/components/ui/FooterPlayButton.spec.ts b/resources/assets/js/components/ui/FooterPlayButton.spec.ts
index db212921..3f7a7f3b 100644
--- a/resources/assets/js/components/ui/FooterPlayButton.spec.ts
+++ b/resources/assets/js/components/ui/FooterPlayButton.spec.ts
@@ -10,16 +10,6 @@ import { commonStore, favoriteStore, queueStore, recentlyPlayedStore, songStore
 import FooterPlayButton from './FooterPlayButton.vue'
 
 new class extends UnitTestCase {
-  private renderComponent (currentSong: Song | null = null) {
-    return this.render(FooterPlayButton, {
-      global: {
-        provide: {
-          [<symbol>CurrentSongKey]: ref(currentSong)
-        }
-      }
-    })
-  }
-
   protected test () {
     it('toggles the playback of current song', async () => {
       const toggleMock = this.mock(playbackService, 'toggle')
@@ -30,7 +20,7 @@ new class extends UnitTestCase {
       expect(toggleMock).toHaveBeenCalled()
     })
 
-    it.each<[ScreenName, MethodOf<typeof songStore>, string|number]>([
+    it.each<[ScreenName, MethodOf<typeof songStore>, string | number]>([
       ['Album', 'fetchForAlbum', 42],
       ['Artist', 'fetchForArtist', 42],
       ['Playlist', 'fetchForPlaylist', '71d8cd40-20d4-4b17-b460-d30fe5bb7b66']
@@ -127,4 +117,14 @@ new class extends UnitTestCase {
       })
     })
   }
+
+  private renderComponent (currentSong: Song | null = null) {
+    return this.render(FooterPlayButton, {
+      global: {
+        provide: {
+          [<symbol>CurrentSongKey]: ref(currentSong)
+        }
+      }
+    })
+  }
 }
diff --git a/resources/assets/js/components/ui/LyricsPane.spec.ts b/resources/assets/js/components/ui/LyricsPane.spec.ts
index 9aa68349..8ba13440 100644
--- a/resources/assets/js/components/ui/LyricsPane.spec.ts
+++ b/resources/assets/js/components/ui/LyricsPane.spec.ts
@@ -7,23 +7,6 @@ import LyricsPane from './LyricsPane.vue'
 import Magnifier from '@/components/ui/Magnifier.vue'
 
 new class extends UnitTestCase {
-  private renderComponent (song?: Song) {
-    song = song || factory<Song>('song', {
-      lyrics: 'Foo bar baz qux'
-    })
-
-    return this.render(LyricsPane, {
-      props: {
-        song
-      },
-      global: {
-        stubs: {
-          Magnifier
-        }
-      }
-    })
-  }
-
   protected test () {
     it('renders', () => expect(this.renderComponent().html()).toMatchSnapshot())
 
@@ -43,4 +26,21 @@ new class extends UnitTestCase {
       expect(screen.queryByRole('button', { name: 'Click here' })).toBeNull()
     })
   }
+
+  private renderComponent (song?: Song) {
+    song = song || factory<Song>('song', {
+      lyrics: 'Foo bar baz qux'
+    })
+
+    return this.render(LyricsPane, {
+      props: {
+        song
+      },
+      global: {
+        stubs: {
+          Magnifier
+        }
+      }
+    })
+  }
 }
diff --git a/resources/assets/js/components/ui/Magnifier.vue b/resources/assets/js/components/ui/Magnifier.vue
index 29a9477e..852965a8 100644
--- a/resources/assets/js/components/ui/Magnifier.vue
+++ b/resources/assets/js/components/ui/Magnifier.vue
@@ -18,6 +18,6 @@ const emit = defineEmits<{ (e: 'in' | 'out'): void }>()
 <style lang="postcss" scoped>
 button {
   @apply text-k-text-primary bg-k-bg-primary border border-solid border-white/20 opacity-80
-    px-3 py-1.5 hover:opacity-100 active:scale-95;
+  px-3 py-1.5 hover:opacity-100 active:scale-95;
 }
 </style>
diff --git a/resources/assets/js/components/ui/Overlay.vue b/resources/assets/js/components/ui/Overlay.vue
index 848a5f78..aaff58c8 100644
--- a/resources/assets/js/components/ui/Overlay.vue
+++ b/resources/assets/js/components/ui/Overlay.vue
@@ -46,6 +46,7 @@ defineExpose({ show, hide })
 <style lang="postcss" scoped>
 dialog {
   /* since the texts are placed directly on a dark backdrop, the colors should be a bit washed out */
+
   &.error {
     @apply text-red-400;
   }
diff --git a/resources/assets/js/components/ui/PlaylistThumbnail.vue b/resources/assets/js/components/ui/PlaylistThumbnail.vue
index 9a8c3ca8..74408057 100644
--- a/resources/assets/js/components/ui/PlaylistThumbnail.vue
+++ b/resources/assets/js/components/ui/PlaylistThumbnail.vue
@@ -14,7 +14,7 @@
   </article>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { computed, ref, toRefs } from 'vue'
 import { defaultCover } from '@/utils'
 import { playlistStore } from '@/stores'
@@ -29,7 +29,7 @@ const droppable = ref(false)
 const { isAdmin } = useAuthorization()
 const { isPlus } = useKoelPlus()
 
-const backgroundImage = computed(() => `url(${playlist.value.cover || defaultCover })`)
+const backgroundImage = computed(() => `url(${playlist.value.cover || defaultCover})`)
 
 const allowsUpload = computed(() => isAdmin.value || isPlus.value)
 const onDragEnter = () => (droppable.value = allowsUpload.value)
@@ -78,7 +78,7 @@ const onDrop = async (event: DragEvent) => {
 }
 </script>
 
-<style scoped lang="postcss">
+<style lang="postcss" scoped>
 article {
   background-image: v-bind(backgroundImage);
 
diff --git a/resources/assets/js/components/ui/ScreenHeader.vue b/resources/assets/js/components/ui/ScreenHeader.vue
index e158fa35..7ed864c5 100644
--- a/resources/assets/js/components/ui/ScreenHeader.vue
+++ b/resources/assets/js/components/ui/ScreenHeader.vue
@@ -1,8 +1,8 @@
 <template>
   <header
+    :class="[ layout, disabled ? 'disabled' : '' ]"
     class="screen-header min-h-0 md:min-h-full flex items-end flex-shrink-0 relative content-stretch leading-normal p-6
     border-b border-b-k-bg-secondary"
-    :class="[ layout, disabled ? 'disabled' : '' ]"
   >
     <aside v-if="$slots.thumbnail" class="thumbnail-wrapper hidden md:block overflow-hidden w-0 rounded-md">
       <slot name="thumbnail" />
diff --git a/resources/assets/js/components/ui/SearchForm.vue b/resources/assets/js/components/ui/SearchForm.vue
index 5e81b2da..54b0d956 100644
--- a/resources/assets/js/components/ui/SearchForm.vue
+++ b/resources/assets/js/components/ui/SearchForm.vue
@@ -1,10 +1,10 @@
 <template>
   <form
     id="searchForm"
-    role="search"
     class="text-k-text-secondary flex items-stretch border overflow-hidden gap-2 pl-4 pr-0 py-0 rounded-md
     border-solid border-transparent bg-black/20 focus-within:border-white/20 focus-within:bg-black/50
     transition-[border,_background-color] duration-200 ease-in-out"
+    role="search"
     @submit.prevent="onSubmit"
   >
     <span class="hidden md:flex opacity-70 items-center">
@@ -17,16 +17,16 @@
       :class="{ dirty: q }"
       :placeholder="placeholder"
       autocorrect="false"
+      class="w-full rounded-none h-[36px] !bg-transparent !text-k-text-primary !placeholder:text-white/50"
       name="q"
       required
       spellcheck="false"
       type="search"
-      class="w-full rounded-none h-[36px] !bg-transparent !text-k-text-primary !placeholder:text-white/50"
       @focus="maybeGoToSearchScreen"
       @input="onInput"
     />
 
-    <button type="submit" title="Search" class="block md:hidden py-0 px-4 bg-white/5 rounded-none">
+    <button class="block md:hidden py-0 px-4 bg-white/5 rounded-none" title="Search" type="submit">
       <Icon :icon="faSearch" />
     </button>
   </form>
diff --git a/resources/assets/js/components/ui/ThumbnailStack.vue b/resources/assets/js/components/ui/ThumbnailStack.vue
index 07e8f9d3..79b49ef8 100644
--- a/resources/assets/js/components/ui/ThumbnailStack.vue
+++ b/resources/assets/js/components/ui/ThumbnailStack.vue
@@ -19,7 +19,7 @@ import { take } from 'lodash'
 import { computed, toRefs } from 'vue'
 import { defaultCover } from '@/utils'
 
-const defaultBackgroundImage = `url(${ defaultCover })`
+const defaultBackgroundImage = `url(${defaultCover})`
 
 const props = defineProps<{ thumbnails: string[] }>()
 const { thumbnails } = toRefs(props)
diff --git a/resources/assets/js/components/ui/VirtualScroller.vue b/resources/assets/js/components/ui/VirtualScroller.vue
index ccd86932..e6273074 100644
--- a/resources/assets/js/components/ui/VirtualScroller.vue
+++ b/resources/assets/js/components/ui/VirtualScroller.vue
@@ -5,8 +5,8 @@
     class="virtual-scroller will-change-transform overflow-scroll"
     @scroll.passive="onScroll"
   >
-    <div class="will-change-transform overflow-hidden" :style="{ height: `${totalHeight}px` }">
-      <div class="will-change-transform" :style="{ transform: `translateY(${offsetY}px)`}">
+    <div :style="{ height: `${totalHeight}px` }" class="will-change-transform overflow-hidden">
+      <div :style="{ transform: `translateY(${offsetY}px)`}" class="will-change-transform">
         <slot v-for="item in renderedItems" :item="item" />
       </div>
     </div>
diff --git a/resources/assets/js/components/ui/__snapshots__/AppleMusicButton.spec.ts.snap b/resources/assets/js/components/ui/__snapshots__/AppleMusicButton.spec.ts.snap
index 4d259e6b..57f053f8 100644
--- a/resources/assets/js/components/ui/__snapshots__/AppleMusicButton.spec.ts.snap
+++ b/resources/assets/js/components/ui/__snapshots__/AppleMusicButton.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<a data-v-429d7b12="" class="rounded px-2 py-0 bg-white/10 h-6 flex items-center hover:itunes-gradient focus:itunes-gradient" href="https://music.apple.com/buy-nao" target="_blank" title="Preview and buy this song on Apple Music"><svg data-v-429d7b12="" height="10" role="presentation" viewBox="0 0 83 20" width="41" xmlns="http://www.w3.org/2000/svg" class="fill-k-text-primary">
+<a data-v-429d7b12="" href="https://music.apple.com/buy-nao" class="rounded px-2 py-0 bg-white/10 h-6 flex items-center hover:itunes-gradient focus:itunes-gradient" target="_blank" title="Preview and buy this song on Apple Music"><svg data-v-429d7b12="" class="fill-k-text-primary" height="10" role="presentation" viewBox="0 0 83 20" width="41" xmlns="http://www.w3.org/2000/svg">
     <path data-v-429d7b12="" d="M34.752 19.746V6.243h-.088l-5.433 13.503h-2.074L21.711 6.243h-.087v13.503h-2.548V1.399h3.235l5.833 14.621h.1L34.064 1.4h3.248v18.347h-2.56zm16.649 0h-2.586v-2.263h-.062c-.725 1.602-2.061 2.504-4.072 2.504-2.86 0-4.61-1.894-4.61-4.958V6.37h2.698v8.125c0 2.034.95 3.127 2.81 3.127 1.95 0 3.124-1.373 3.124-3.458V6.37H51.4v13.376zm7.394-13.618c3.06 0 5.046 1.73 5.134 4.196h-2.536c-.15-1.296-1.087-2.11-2.598-2.11-1.462 0-2.436.724-2.436 1.793 0 .839.6 1.41 2.023 1.741l2.136.496c2.686.636 3.71 1.704 3.71 3.636 0 2.442-2.236 4.12-5.333 4.12-3.285 0-5.26-1.64-5.509-4.183h2.673c.25 1.398 1.187 2.085 2.836 2.085 1.623 0 2.623-.687 2.623-1.78 0-.865-.487-1.373-1.924-1.704l-2.136-.508c-2.498-.585-3.735-1.806-3.735-3.75 0-2.391 2.049-4.032 5.072-4.032zM66.1 2.836c0-.878.7-1.577 1.561-1.577.862 0 1.55.7 1.55 1.577 0 .864-.688 1.576-1.55 1.576a1.573 1.573 0 0 1-1.56-1.576zm.212 3.534h2.698v13.376h-2.698V6.37zm14.089 4.603c-.275-1.424-1.324-2.556-3.085-2.556-2.086 0-3.46 1.767-3.46 4.64 0 2.938 1.386 4.642 3.485 4.642 1.66 0 2.748-.928 3.06-2.48H83C82.713 18.067 80.477 20 77.317 20c-3.76 0-6.208-2.62-6.208-6.942 0-4.247 2.448-6.93 6.183-6.93 3.385 0 5.446 2.213 5.683 4.845h-2.573zM10.824 3.189c-.698.834-1.805 1.496-2.913 1.398-.145-1.128.41-2.33 1.036-3.065C9.644.662 10.848.05 11.835 0c.121 1.178-.336 2.33-1.01 3.19zm.999 1.619c.624.049 2.425.244 3.578 1.98-.096.074-2.137 1.272-2.113 3.79.024 3.01 2.593 4.012 2.617 4.037-.024.074-.407 1.419-1.344 2.812-.817 1.224-1.657 2.422-3.002 2.447-1.297.024-1.73-.783-3.218-.783-1.489 0-1.97.758-3.194.807-1.297.048-2.28-1.297-3.097-2.52C.368 14.908-.904 10.408.825 7.375c.84-1.516 2.377-2.47 4.034-2.495 1.273-.023 2.45.857 3.218.857.769 0 2.137-1.027 3.746-.93z" fill-rule="nonzero" stroke="none" stroke-width="1"></path>
   </svg></a>
 `;
diff --git a/resources/assets/js/components/ui/__snapshots__/BtnScrollToTop.spec.ts.snap b/resources/assets/js/components/ui/__snapshots__/BtnScrollToTop.spec.ts.snap
index 54141e07..000ca9db 100644
--- a/resources/assets/js/components/ui/__snapshots__/BtnScrollToTop.spec.ts.snap
+++ b/resources/assets/js/components/ui/__snapshots__/BtnScrollToTop.spec.ts.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`renders 1`] = `<transition-stub data-v-7be58792="" name="fade" appear="false" persisted="true" css="true"><button data-v-7be58792="" title="Scroll to top" class="sm:hidden block fixed right-[1.8rem] z-20 opacity-100 duration-500 transition-opacity rounded-full py-2 px-4 bg-black/50" type="button" style="display: none;"><br data-v-7be58792="" data-testid="Icon" icon="[object Object]">&nbsp; Top </button></transition-stub>`;
+exports[`renders 1`] = `<transition-stub data-v-7be58792="" name="fade" appear="false" persisted="true" css="true"><button data-v-7be58792="" class="sm:hidden block fixed right-[1.8rem] z-20 opacity-100 duration-500 transition-opacity rounded-full py-2 px-4 bg-black/50" title="Scroll to top" type="button" style="display: none;"><br data-v-7be58792="" data-testid="Icon" icon="[object Object]">&nbsp; Top </button></transition-stub>`;
diff --git a/resources/assets/js/components/ui/__snapshots__/ScreenHeader.spec.ts.snap b/resources/assets/js/components/ui/__snapshots__/ScreenHeader.spec.ts.snap
index 7a15739b..d1904e20 100644
--- a/resources/assets/js/components/ui/__snapshots__/ScreenHeader.spec.ts.snap
+++ b/resources/assets/js/components/ui/__snapshots__/ScreenHeader.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<header data-v-5691beb5="" class="screen-header min-h-0 md:min-h-full flex items-end flex-shrink-0 relative content-stretch leading-normal p-6 border-b border-b-k-bg-secondary expanded">
+<header data-v-5691beb5="" class="expanded screen-header min-h-0 md:min-h-full flex items-end flex-shrink-0 relative content-stretch leading-normal p-6 border-b border-b-k-bg-secondary">
   <aside data-v-5691beb5="" class="thumbnail-wrapper hidden md:block overflow-hidden w-0 rounded-md"><img data-v-5691beb5-s="" src="https://placekitten.com/200/300"></aside>
   <main data-v-5691beb5="" class="flex flex-1 gap-5 items-center overflow-hidden">
     <div data-v-5691beb5="" class="w-full flex-1 overflow-hidden">
diff --git a/resources/assets/js/components/ui/album-artist/AlbumOrArtistGrid.vue b/resources/assets/js/components/ui/album-artist/AlbumOrArtistGrid.vue
index 2c4012de..28f1b9b0 100644
--- a/resources/assets/js/components/ui/album-artist/AlbumOrArtistGrid.vue
+++ b/resources/assets/js/components/ui/album-artist/AlbumOrArtistGrid.vue
@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { toRefs } from 'vue'
 
 const props = withDefaults(defineProps<{ viewMode?: ArtistAlbumViewMode }>(), {
@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<{ viewMode?: ArtistAlbumViewMode }>(), {
 const { viewMode } = toRefs(props)
 </script>
 
-<style scoped lang="postcss">
+<style lang="postcss" scoped>
 div {
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 }
diff --git a/resources/assets/js/components/ui/album-artist/AlbumOrArtistInfo.vue b/resources/assets/js/components/ui/album-artist/AlbumOrArtistInfo.vue
index 3218962e..6d927c35 100644
--- a/resources/assets/js/components/ui/album-artist/AlbumOrArtistInfo.vue
+++ b/resources/assets/js/components/ui/album-artist/AlbumOrArtistInfo.vue
@@ -19,7 +19,7 @@
   </article>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { toRefs } from 'vue'
 
 const props = withDefaults(defineProps<{ mode?: MediaInfoDisplayMode }>(), { mode: 'aside' })
diff --git a/resources/assets/js/components/ui/album-artist/ExpandableContentBlock.vue b/resources/assets/js/components/ui/album-artist/ExpandableContentBlock.vue
index 5b288ca1..916b8842 100644
--- a/resources/assets/js/components/ui/album-artist/ExpandableContentBlock.vue
+++ b/resources/assets/js/components/ui/album-artist/ExpandableContentBlock.vue
@@ -4,13 +4,13 @@
       <slot />
     </div>
 
-    <Btn v-if="!showingFull" small class="mt-4" @click.prevent="showingFull = true">
+    <Btn v-if="!showingFull" class="mt-4" small @click.prevent="showingFull = true">
       Read More
     </Btn>
   </article>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { ref } from 'vue'
 
 import Btn from '@/components/ui/form/Btn.vue'
diff --git a/resources/assets/js/components/ui/equalizer/Equalizer.vue b/resources/assets/js/components/ui/equalizer/Equalizer.vue
index e496dd6e..31622541 100644
--- a/resources/assets/js/components/ui/equalizer/Equalizer.vue
+++ b/resources/assets/js/components/ui/equalizer/Equalizer.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="select-none w-full flex flex-col" tabindex="0" @keydown.esc="close">
     <header>
-      <SelectBox v-model="selectedPresetName" title="Select equalizer" class="!bg-black/30 !text-white">
-        <option disabled :value="null">Preset</option>
+      <SelectBox v-model="selectedPresetName" class="!bg-black/30 !text-white" title="Select equalizer">
+        <option :value="null" disabled>Preset</option>
         <option v-for="preset in presets" :key="preset.name!" :value="preset.name">{{ preset.name }}</option>
       </SelectBox>
     </header>
@@ -21,8 +21,8 @@
 
         <EqualizerBand
           v-for="band in bands"
-          ref="filterBandEls"
           :key="band.label"
+          ref="filterBandEls"
           v-model="band.db"
           @commit="save"
           @update:model-value="changeFilterGain(band)"
diff --git a/resources/assets/js/components/ui/equalizer/EqualizerBand.vue b/resources/assets/js/components/ui/equalizer/EqualizerBand.vue
index 6d8f91d9..6aeb69e1 100644
--- a/resources/assets/js/components/ui/equalizer/EqualizerBand.vue
+++ b/resources/assets/js/components/ui/equalizer/EqualizerBand.vue
@@ -7,7 +7,7 @@
   </article>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { computed, onMounted, ref } from 'vue'
 import noUiSlider from 'nouislider'
 
diff --git a/resources/assets/js/components/ui/form/BtnGroup.spec.ts b/resources/assets/js/components/ui/form/BtnGroup.spec.ts
index 1498e79c..2e331008 100644
--- a/resources/assets/js/components/ui/form/BtnGroup.spec.ts
+++ b/resources/assets/js/components/ui/form/BtnGroup.spec.ts
@@ -4,14 +4,6 @@ import BtnGroup from './BtnGroup.vue'
 import Btn from './Btn.vue'
 
 new class extends UnitTestCase {
-  private renderButtonToSlot (text: string) {
-    return this.render(Btn, {
-      slots: {
-        default: text
-      }
-    }).html()
-  }
-
   protected test () {
     it('renders', () => {
       expect(this.render(BtnGroup, {
@@ -21,4 +13,12 @@ new class extends UnitTestCase {
       }).html()).toMatchSnapshot()
     })
   }
+
+  private renderButtonToSlot (text: string) {
+    return this.render(Btn, {
+      slots: {
+        default: text
+      }
+    }).html()
+  }
 }
diff --git a/resources/assets/js/components/ui/form/CheckBox.vue b/resources/assets/js/components/ui/form/CheckBox.vue
index 279b9943..29174ddb 100644
--- a/resources/assets/js/components/ui/form/CheckBox.vue
+++ b/resources/assets/js/components/ui/form/CheckBox.vue
@@ -4,7 +4,7 @@
     after:h-[16px] after:aspect-square after:absolute after:bg-white after:top-[2px] after:left-[2px] after:rounded-full after:transition-left after:duration-200 after:ease-in-out
     has-[:checked]:bg-k-highlight has-[:checked]:after:left-[14px]"
   >
-    <input v-bind="$attrs" v-model="value" :checked="value" type="checkbox" class="hidden">
+    <input v-model="value" :checked="value" class="hidden" type="checkbox" v-bind="$attrs">
   </span>
 </template>
 
diff --git a/resources/assets/js/components/ui/form/FormRow.vue b/resources/assets/js/components/ui/form/FormRow.vue
index 9f40e3a9..f823f311 100644
--- a/resources/assets/js/components/ui/form/FormRow.vue
+++ b/resources/assets/js/components/ui/form/FormRow.vue
@@ -12,7 +12,7 @@
     </span>
   </label>
 
-  <div v-else class="grid gap-3" :class="columnClass">
+  <div v-else :class="columnClass" class="grid gap-3">
     <slot />
   </div>
 </template>
diff --git a/resources/assets/js/components/ui/form/PasswordField.vue b/resources/assets/js/components/ui/form/PasswordField.vue
index a0ee4b38..cfdb5e89 100644
--- a/resources/assets/js/components/ui/form/PasswordField.vue
+++ b/resources/assets/js/components/ui/form/PasswordField.vue
@@ -3,8 +3,8 @@
     <TextInput v-model="value" :type="type" class="w-full" data-testid="input" v-bind="$attrs" />
     <button
       class="absolute p-2.5 right-0 top-0 text-k-bg-primary"
-      type="button"
       data-testid="toggle"
+      type="button"
       @click.prevent="toggleReveal"
     >
       <Icon v-if="type === 'password'" :icon="faEye" />
@@ -13,7 +13,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { computed, ref } from 'vue'
 import { faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons'
 
diff --git a/resources/assets/js/components/ui/form/SelectBox.vue b/resources/assets/js/components/ui/form/SelectBox.vue
index 3088f82a..4a240570 100644
--- a/resources/assets/js/components/ui/form/SelectBox.vue
+++ b/resources/assets/js/components/ui/form/SelectBox.vue
@@ -15,7 +15,7 @@
   </label>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { computed, ref } from 'vue'
 import { faCaretDown } from '@fortawesome/free-solid-svg-icons'
 
@@ -34,7 +34,7 @@ defineExpose({
 })
 </script>
 
-<style scoped lang="postcss">
+<style lang="postcss" scoped>
 select {
   background: none; /* remove background AND the dropdown arrow. Tailwind doesn't have a way to do this. */
 }
diff --git a/resources/assets/js/components/ui/form/TextArea.vue b/resources/assets/js/components/ui/form/TextArea.vue
index 78c6cb8b..46b4d003 100644
--- a/resources/assets/js/components/ui/form/TextArea.vue
+++ b/resources/assets/js/components/ui/form/TextArea.vue
@@ -6,7 +6,7 @@
   />
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { computed, ref } from 'vue'
 
 const props = withDefaults(defineProps<{ modelValue?: any }>(), { modelValue: null })
diff --git a/resources/assets/js/components/ui/form/TextInput.vue b/resources/assets/js/components/ui/form/TextInput.vue
index 6967aa25..8f82c2a2 100644
--- a/resources/assets/js/components/ui/form/TextInput.vue
+++ b/resources/assets/js/components/ui/form/TextInput.vue
@@ -8,7 +8,7 @@
   >
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { computed, ref } from 'vue'
 
 const props = withDefaults(defineProps<{ modelValue?: any }>(), { modelValue: null })
diff --git a/resources/assets/js/components/ui/form/__snapshots__/CheckBox.spec.ts.snap b/resources/assets/js/components/ui/form/__snapshots__/CheckBox.spec.ts.snap
index 90b5ff34..c181d82b 100644
--- a/resources/assets/js/components/ui/form/__snapshots__/CheckBox.spec.ts.snap
+++ b/resources/assets/js/components/ui/form/__snapshots__/CheckBox.spec.ts.snap
@@ -1,5 +1,5 @@
 // Vitest Snapshot v1
 
-exports[`renders checked state 1`] = `<span class="relative align-bottom inline-block w-[32px] h-[20px] bg-gray-300 rounded-full shadow-inner cursor-pointer transition-all duration-200 ease-in-out mr-2 after:h-[16px] after:aspect-square after:absolute after:bg-white after:top-[2px] after:left-[2px] after:rounded-full after:transition-left after:duration-200 after:ease-in-out has-[:checked]:bg-k-highlight has-[:checked]:after:left-[14px]"><input type="checkbox" class="hidden"></span>`;
+exports[`renders checked state 1`] = `<span class="relative align-bottom inline-block w-[32px] h-[20px] bg-gray-300 rounded-full shadow-inner cursor-pointer transition-all duration-200 ease-in-out mr-2 after:h-[16px] after:aspect-square after:absolute after:bg-white after:top-[2px] after:left-[2px] after:rounded-full after:transition-left after:duration-200 after:ease-in-out has-[:checked]:bg-k-highlight has-[:checked]:after:left-[14px]"><input class="hidden" type="checkbox"></span>`;
 
-exports[`renders unchecked state 1`] = `<span class="relative align-bottom inline-block w-[32px] h-[20px] bg-gray-300 rounded-full shadow-inner cursor-pointer transition-all duration-200 ease-in-out mr-2 after:h-[16px] after:aspect-square after:absolute after:bg-white after:top-[2px] after:left-[2px] after:rounded-full after:transition-left after:duration-200 after:ease-in-out has-[:checked]:bg-k-highlight has-[:checked]:after:left-[14px]"><input type="checkbox" class="hidden"></span>`;
+exports[`renders unchecked state 1`] = `<span class="relative align-bottom inline-block w-[32px] h-[20px] bg-gray-300 rounded-full shadow-inner cursor-pointer transition-all duration-200 ease-in-out mr-2 after:h-[16px] after:aspect-square after:absolute after:bg-white after:top-[2px] after:left-[2px] after:rounded-full after:transition-left after:duration-200 after:ease-in-out has-[:checked]:bg-k-highlight has-[:checked]:after:left-[14px]"><input class="hidden" type="checkbox"></span>`;
diff --git a/resources/assets/js/components/ui/message-toaster/MessageToast.spec.ts b/resources/assets/js/components/ui/message-toaster/MessageToast.spec.ts
index ea4fe3ca..344922e0 100644
--- a/resources/assets/js/components/ui/message-toaster/MessageToast.spec.ts
+++ b/resources/assets/js/components/ui/message-toaster/MessageToast.spec.ts
@@ -4,19 +4,6 @@ import UnitTestCase from '@/__tests__/UnitTestCase'
 import MessageToast from './MessageToast.vue'
 
 new class extends UnitTestCase {
-  private renderComponent () {
-    return this.render(MessageToast, {
-      props: {
-        message: {
-          id: 101,
-          type: 'success',
-          message: 'Everything is fine',
-          timeout: 5
-        }
-      }
-    })
-  }
-
   protected test () {
     it('renders', () => expect(this.renderComponent().html()).toMatchSnapshot())
 
@@ -37,4 +24,17 @@ new class extends UnitTestCase {
       vi.useRealTimers()
     })
   }
+
+  private renderComponent () {
+    return this.render(MessageToast, {
+      props: {
+        message: {
+          id: 101,
+          type: 'success',
+          message: 'Everything is fine',
+          timeout: 5
+        }
+      }
+    })
+  }
 }
diff --git a/resources/assets/js/components/ui/message-toaster/MessageToast.vue b/resources/assets/js/components/ui/message-toaster/MessageToast.vue
index 02d4cd4a..984d493b 100644
--- a/resources/assets/js/components/ui/message-toaster/MessageToast.vue
+++ b/resources/assets/js/components/ui/message-toaster/MessageToast.vue
@@ -4,9 +4,9 @@
     class="group rounded-l-md cursor-pointer flex items-stretch opacity-90 transition-transform duration-300 origin-right
     hover:opacity-100 hover:scale-110"
     title="Click to dismiss"
+    @click="dismiss"
     @mouseenter="cancelAutoDismiss"
     @mouseleave="setAutoDismiss"
-    @click="dismiss"
   >
     <aside class="flex items-center px-3 py-0 bg-black/10">
       <Icon :icon="typeIcon" class="group-hover:hidden" />
diff --git a/resources/assets/js/components/ui/message-toaster/MessageToaster.vue b/resources/assets/js/components/ui/message-toaster/MessageToaster.vue
index a7ba4cf4..1e3e4ff6 100644
--- a/resources/assets/js/components/ui/message-toaster/MessageToaster.vue
+++ b/resources/assets/js/components/ui/message-toaster/MessageToaster.vue
@@ -1,5 +1,5 @@
 <template>
-  <TransitionGroup name="toast" tag="ul" class="fixed z-[9999] right-0 top-3 flex flex-col items-end gap-2">
+  <TransitionGroup class="fixed z-[9999] right-0 top-3 flex flex-col items-end gap-2" name="toast" tag="ul">
     <li v-for="message in messages" :key="message.id">
       <MessageToast :message="message" @dismiss="removeMessage(message)" />
     </li>
diff --git a/resources/assets/js/components/ui/skeletons/ArtistAlbumCardSkeleton.vue b/resources/assets/js/components/ui/skeletons/ArtistAlbumCardSkeleton.vue
index 48595f85..5e1dae5b 100644
--- a/resources/assets/js/components/ui/skeletons/ArtistAlbumCardSkeleton.vue
+++ b/resources/assets/js/components/ui/skeletons/ArtistAlbumCardSkeleton.vue
@@ -1,5 +1,5 @@
 <template>
-  <article class="skeleton flex flex-col gap-3 p-5 rounded-lg max-w-[256px] border border-k-border" :class="layout">
+  <article :class="layout" class="skeleton flex flex-col gap-3 p-5 rounded-lg max-w-[256px] border border-k-border">
     <aside class="aspect-square rounded-lg pulse" />
 
     <footer class="flex flex-col flex-1 gap-3">
diff --git a/resources/assets/js/components/ui/skeletons/GenreItemSkeleton.vue b/resources/assets/js/components/ui/skeletons/GenreItemSkeleton.vue
index dab76193..f0839622 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 flex rounded-md overflow-hidden h-[1.2rem] m-1 p-4 flex-shrink-0"
     :style="{ width: `${width}px` }"
+    class="skeleton pulse flex rounded-md overflow-hidden h-[1.2rem] m-1 p-4 flex-shrink-0"
   >
     <span class="flex-1" />
     <span class="aspect-[1.2/1] rounded-full pulse" />
diff --git a/resources/assets/js/components/ui/tabs/TabButton.vue b/resources/assets/js/components/ui/tabs/TabButton.vue
index f1450d7c..0c972d87 100644
--- a/resources/assets/js/components/ui/tabs/TabButton.vue
+++ b/resources/assets/js/components/ui/tabs/TabButton.vue
@@ -1,17 +1,17 @@
 <template>
   <button
     :aria-selected="selected"
-    role="tab"
-    type="button"
     class="cursor-pointer relative px-5 py-3 rounded-t-md opacity-70 bg-white/5 uppercase text-k-text-secondary duration-200 hover:bg-white/10
     aria-selected:transition-none aria-selected:text-k-text-primary aria-selected:bg-white/10 aria-selected:opacity-100"
+    role="tab"
+    type="button"
     @click.prevent="emit('click')"
   >
     <slot />
   </button>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { toRefs } from 'vue'
 
 const props = defineProps<{ selected: boolean }>()
diff --git a/resources/assets/js/components/ui/tabs/TabList.vue b/resources/assets/js/components/ui/tabs/TabList.vue
index 21815d7e..5eff04be 100644
--- a/resources/assets/js/components/ui/tabs/TabList.vue
+++ b/resources/assets/js/components/ui/tabs/TabList.vue
@@ -1,5 +1,5 @@
 <template>
-  <nav role="tablist" class="overflow-auto border-b-[2px] border-b-white/10 px-6 py-0 flex gap-1 min-h-[36px]">
+  <nav class="overflow-auto border-b-[2px] border-b-white/10 px-6 py-0 flex gap-1 min-h-[36px]" role="tablist">
     <slot />
   </nav>
 </template>
diff --git a/resources/assets/js/components/ui/upload/UploadItem.spec.ts b/resources/assets/js/components/ui/upload/UploadItem.spec.ts
index 61a31a47..c833c4d2 100644
--- a/resources/assets/js/components/ui/upload/UploadItem.spec.ts
+++ b/resources/assets/js/components/ui/upload/UploadItem.spec.ts
@@ -8,28 +8,6 @@ import UploadItem from './UploadItem.vue'
 let file: UploadFile
 
 new class extends UnitTestCase {
-  private renderComponent (status: UploadStatus) {
-    file = {
-      status,
-      file: new File([], 'sample.mp3'),
-      id: 'x-file',
-      message: '',
-      name: 'Sample Track',
-      progress: 42
-    }
-
-    return this.render(UploadItem, {
-      props: {
-        file
-      },
-      global: {
-        stubs: {
-          Btn
-        }
-      }
-    })
-  }
-
   protected test () {
     it('renders', () => expect(this.renderComponent('Canceled').html()).toMatchSnapshot())
 
@@ -55,4 +33,26 @@ new class extends UnitTestCase {
       expect(mock).toHaveBeenCalled()
     })
   }
+
+  private renderComponent (status: UploadStatus) {
+    file = {
+      status,
+      file: new File([], 'sample.mp3'),
+      id: 'x-file',
+      message: '',
+      name: 'Sample Track',
+      progress: 42
+    }
+
+    return this.render(UploadItem, {
+      props: {
+        file
+      },
+      global: {
+        stubs: {
+          Btn
+        }
+      }
+    })
+  }
 }
diff --git a/resources/assets/js/components/ui/upload/UploadItem.vue b/resources/assets/js/components/ui/upload/UploadItem.vue
index 1e36e2ab..f2447129 100644
--- a/resources/assets/js/components/ui/upload/UploadItem.vue
+++ b/resources/assets/js/components/ui/upload/UploadItem.vue
@@ -11,10 +11,10 @@
         <span v-if="file.status === 'Errored'" v-koel-tooltip.left :title="file.message" class="info !px-3">
           <Icon :icon="faInfoCircle" :title="file.message" />
         </span>
-        <Btn v-if="canRetry" icon-only title="Retry" transparent unrounded class="!px-3" @click="retry">
+        <Btn v-if="canRetry" class="!px-3" icon-only title="Retry" transparent unrounded @click="retry">
           <Icon :icon="faRotateBack" />
         </Btn>
-        <Btn v-if="canRemove" icon-only title="Remove" transparent unrounded class="!px-3" @click="remove">
+        <Btn v-if="canRemove" class="!px-3" icon-only title="Remove" transparent unrounded @click="remove">
           <Icon :icon="faTrashCan" />
         </Btn>
       </span>
diff --git a/resources/assets/js/components/ui/youtube/YouTubeVideoItem.spec.ts b/resources/assets/js/components/ui/youtube/YouTubeVideoItem.spec.ts
index e879c3fe..c44e3504 100644
--- a/resources/assets/js/components/ui/youtube/YouTubeVideoItem.spec.ts
+++ b/resources/assets/js/components/ui/youtube/YouTubeVideoItem.spec.ts
@@ -7,6 +7,19 @@ import YouTubeVideoItem from './YouTubeVideoItem.vue'
 let video: YouTubeVideo
 
 new class extends UnitTestCase {
+  protected test () {
+    it('renders', () => expect(this.renderComponent().html()).toMatchSnapshot())
+
+    it('plays', async () => {
+      const mock = this.mock(youTubeService, 'play')
+      this.renderComponent()
+
+      await this.user.click(screen.getByRole('button'))
+
+      expect(mock).toHaveBeenCalledWith(video)
+    })
+  }
+
   private renderComponent () {
     video = {
       id: {
@@ -28,17 +41,4 @@ new class extends UnitTestCase {
       }
     })
   }
-
-  protected test () {
-    it('renders', () => expect(this.renderComponent().html()).toMatchSnapshot())
-
-    it('plays', async () => {
-      const mock = this.mock(youTubeService, 'play')
-      this.renderComponent()
-
-      await this.user.click(screen.getByRole('button'))
-
-      expect(mock).toHaveBeenCalledWith(video)
-    })
-  }
 }
diff --git a/resources/assets/js/components/ui/youtube/YouTubeVideoItem.vue b/resources/assets/js/components/ui/youtube/YouTubeVideoItem.vue
index 6b083b03..248340d5 100644
--- a/resources/assets/js/components/ui/youtube/YouTubeVideoItem.vue
+++ b/resources/assets/js/components/ui/youtube/YouTubeVideoItem.vue
@@ -1,12 +1,12 @@
 <template>
   <a
     :href="url"
-    data-testid="youtube-search-result"
     class="flex gap-3 !text-k-text-secondary hover:!text-k-text-primary focus:!text-k-text-primary active:!text-k-text-primary"
+    data-testid="youtube-search-result"
     role="button"
     @click.prevent="play"
   >
-    <img class="self-start" :alt="video.snippet.title" :src="video.snippet.thumbnails.default.url" width="90">
+    <img :alt="video.snippet.title" :src="video.snippet.thumbnails.default.url" class="self-start" width="90">
     <aside class="space-y-1">
       <h3 class="text-lg">{{ unescape(video.snippet.title) }}</h3>
       <p class="text-[0.9rem]">{{ video.snippet.description }}</p>
diff --git a/resources/assets/js/components/ui/youtube/__snapshots__/YouTubeVideoItem.spec.ts.snap b/resources/assets/js/components/ui/youtube/__snapshots__/YouTubeVideoItem.spec.ts.snap
index 14ed4a4f..8e8c0fe2 100644
--- a/resources/assets/js/components/ui/youtube/__snapshots__/YouTubeVideoItem.spec.ts.snap
+++ b/resources/assets/js/components/ui/youtube/__snapshots__/YouTubeVideoItem.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<a data-v-8c072ad7="" href="https://youtu.be/cLgJQ8Zj3AA" data-testid="youtube-search-result" class="flex gap-3 !text-k-text-secondary hover:!text-k-text-primary focus:!text-k-text-primary active:!text-k-text-primary" role="button"><img data-v-8c072ad7="" class="self-start" alt="Guess what it is" src="https://i.ytimg.com/an_webp/cLgJQ8Zj3AA/mqdefault_6s.webp" width="90">
+<a data-v-8c072ad7="" href="https://youtu.be/cLgJQ8Zj3AA" class="flex gap-3 !text-k-text-secondary hover:!text-k-text-primary focus:!text-k-text-primary active:!text-k-text-primary" data-testid="youtube-search-result" role="button"><img data-v-8c072ad7="" alt="Guess what it is" src="https://i.ytimg.com/an_webp/cLgJQ8Zj3AA/mqdefault_6s.webp" class="self-start" width="90">
   <aside data-v-8c072ad7="" class="space-y-1">
     <h3 data-v-8c072ad7="" class="text-lg">Guess what it is</h3>
     <p data-v-8c072ad7="" class="text-[0.9rem]">From the LA Opening Gala 2014: John Williams Celebration</p>
diff --git a/resources/assets/js/components/user/AddUserForm.vue b/resources/assets/js/components/user/AddUserForm.vue
index 825f69c0..5cc6e102 100644
--- a/resources/assets/js/components/user/AddUserForm.vue
+++ b/resources/assets/js/components/user/AddUserForm.vue
@@ -27,7 +27,8 @@
       </FormRow>
       <FormRow>
         <div>
-          <CheckBox v-model="newUser.is_admin" name="is_admin" /> User is an 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." />
         </div>
       </FormRow>
diff --git a/resources/assets/js/components/user/EditUserForm.vue b/resources/assets/js/components/user/EditUserForm.vue
index 2f99414e..03c4e924 100644
--- a/resources/assets/js/components/user/EditUserForm.vue
+++ b/resources/assets/js/components/user/EditUserForm.vue
@@ -38,7 +38,8 @@
       </FormRow>
       <FormRow>
         <div>
-          <CheckBox v-model="updateData.is_admin" name="is_admin" />User is an 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." />
         </div>
       </FormRow>
diff --git a/resources/assets/js/components/user/InviteUserForm.vue b/resources/assets/js/components/user/InviteUserForm.vue
index b145e17e..e87b130c 100644
--- a/resources/assets/js/components/user/InviteUserForm.vue
+++ b/resources/assets/js/components/user/InviteUserForm.vue
@@ -7,7 +7,7 @@
     <main class="space-y-5">
       <FormRow>
         <template #label>Emails</template>
-        <TextArea ref="emailsEl" v-model="rawEmails" name="emails" class="!min-h-[8rem]" required title="Emails" />
+        <TextArea ref="emailsEl" v-model="rawEmails" class="!min-h-[8rem]" name="emails" required title="Emails" />
         <template #help>To invite multiple users, input one email per line.</template>
       </FormRow>
       <FormRow>
diff --git a/resources/assets/js/components/user/UserAvatar.vue b/resources/assets/js/components/user/UserAvatar.vue
index 36d447e9..70a924a5 100644
--- a/resources/assets/js/components/user/UserAvatar.vue
+++ b/resources/assets/js/components/user/UserAvatar.vue
@@ -7,7 +7,7 @@
   >
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { toRefs } from 'vue'
 
 const props = defineProps<{ user: Pick<User, 'name' | 'avatar'> }>()
diff --git a/resources/assets/js/components/user/UserCard.spec.ts b/resources/assets/js/components/user/UserCard.spec.ts
index c34458c3..262a1494 100644
--- a/resources/assets/js/components/user/UserCard.spec.ts
+++ b/resources/assets/js/components/user/UserCard.spec.ts
@@ -10,14 +10,6 @@ import { invitationService } from '@/services'
 import UserCard from './UserCard.vue'
 
 new class extends UnitTestCase {
-  private renderComponent (user: User) {
-    return this.render(UserCard, {
-      props: {
-        user
-      }
-    })
-  }
-
   protected test () {
     it('has different behaviors for current user', () => {
       const user = factory<User>('user')
@@ -77,7 +69,7 @@ new class extends UnitTestCase {
 
       await this.user.click(screen.getByRole('button', { name: 'Revoke' }))
 
-      expect (revokeMock).toHaveBeenCalledWith(prospect)
+      expect(revokeMock).toHaveBeenCalledWith(prospect)
     })
 
     it('does not revoke invite for prospects if not confirmed', async () => {
@@ -91,4 +83,12 @@ new class extends UnitTestCase {
       expect(revokeMock).not.toHaveBeenCalled()
     })
   }
+
+  private renderComponent (user: User) {
+    return this.render(UserCard, {
+      props: {
+        user
+      }
+    })
+  }
 }
diff --git a/resources/assets/js/components/user/UserCard.vue b/resources/assets/js/components/user/UserCard.vue
index 059f7379..ba3be840 100644
--- a/resources/assets/js/components/user/UserCard.vue
+++ b/resources/assets/js/components/user/UserCard.vue
@@ -19,11 +19,11 @@
         />
         <img
           v-if="user.sso_provider === 'Google'"
-          title="Google SSO"
           :src="googleLogo"
           alt="Google"
-          width="14"
           height="14"
+          title="Google SSO"
+          width="14"
         >
       </h3>
 
diff --git a/resources/assets/js/components/utils/AppInitializer.vue b/resources/assets/js/components/utils/AppInitializer.vue
index a142dc4f..1e90c076 100644
--- a/resources/assets/js/components/utils/AppInitializer.vue
+++ b/resources/assets/js/components/utils/AppInitializer.vue
@@ -2,7 +2,7 @@
   <slot />
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { onMounted } from 'vue'
 import { useErrorHandler, useOverlay } from '@/composables'
 import { commonStore, preferenceStore as preferences } from '@/stores'
@@ -51,6 +51,6 @@ onMounted(async () => {
 })
 </script>
 
-<style scoped lang="postcss">
+<style lang="postcss" scoped>
 
 </style>
diff --git a/resources/assets/js/components/utils/GlobalEventListeners.vue b/resources/assets/js/components/utils/GlobalEventListeners.vue
index 86490327..6955f109 100644
--- a/resources/assets/js/components/utils/GlobalEventListeners.vue
+++ b/resources/assets/js/components/utils/GlobalEventListeners.vue
@@ -2,7 +2,7 @@
   <slot />
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { useDialogBox, useMessageToaster, useRouter } from '@/composables'
 import { onMounted } from 'vue'
 import { eventBus, forceReloadWindow } from '@/utils'
diff --git a/resources/assets/js/components/utils/ImageCropper.vue b/resources/assets/js/components/utils/ImageCropper.vue
index 965bee61..134f9856 100644
--- a/resources/assets/js/components/utils/ImageCropper.vue
+++ b/resources/assets/js/components/utils/ImageCropper.vue
@@ -3,10 +3,10 @@
     <div class="relative max-w-full max-h-full rounded-md flex">
       <Cropper
         ref="cropper"
+        :max-width="config.maxWidth"
+        :min-width="config.minWidth"
         :src="source"
         :stencil-props="{ aspectRatio: 1 }"
-        :min-width="config.minWidth"
-        :max-width="config.maxWidth"
       />
       <div class="fixed top-6 right-6 flex flex-1 gap-2">
         <Btn success @click.prevent="crop">Crop</Btn>
@@ -16,7 +16,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { ref, toRefs } from 'vue'
 import { Cropper } from 'vue-advanced-cropper'
 import 'vue-advanced-cropper/dist/style.css'
diff --git a/resources/assets/js/composables/useErrorHandler.ts b/resources/assets/js/composables/useErrorHandler.ts
index 9f371770..bd04ccc5 100644
--- a/resources/assets/js/composables/useErrorHandler.ts
+++ b/resources/assets/js/composables/useErrorHandler.ts
@@ -1,6 +1,6 @@
 import axios, { AxiosResponse } from 'axios'
 import { logger, parseValidationError } from '@/utils'
-import { useMessageToaster, useDialogBox } from '@/composables'
+import { useDialogBox, useMessageToaster } from '@/composables'
 
 export interface StatusMessageMap {
   [key: AxiosResponse['status']]: string | Closure
@@ -12,14 +12,16 @@ export const useErrorHandler = (driver: ErrorMessageDriver = 'toast') => {
   const { toastError } = useMessageToaster()
   const { showErrorDialog } = useDialogBox()
 
-  const showGenericError = () => {
+  const showError = (message: string) => {
     if (driver === 'toast') {
-      toastError('An unknown error occurred.')
+      toastError(message)
     } else {
-      showErrorDialog('An unknown error occurred.')
+      showErrorDialog(message)
     }
   }
 
+  const showGenericError = () => showError('An unknown error occurred.')
+
   const handleHttpError = (error: unknown, statusMessageMap: StatusMessageMap = {}) => {
     logger.error(error)
 
@@ -27,7 +29,7 @@ export const useErrorHandler = (driver: ErrorMessageDriver = 'toast') => {
       return showGenericError()
     }
 
-    if (!error.response?.status || !statusMessageMap.hasOwnProperty(error.response.status)) {
+    if (!error.response?.status || !Object.prototype.hasOwnProperty.call(statusMessageMap, error.response.status)) {
       showError('An unknown error occurred.')
       return
     }
@@ -45,14 +47,6 @@ export const useErrorHandler = (driver: ErrorMessageDriver = 'toast') => {
     }
   }
 
-  const showError = (message: string) => {
-    if (driver === 'toast') {
-      toastError(message)
-    } else {
-      showErrorDialog(message)
-    }
-  }
-
   return {
     handleHttpError,
     showGenericError
diff --git a/resources/assets/js/composables/useFloatingUi.ts b/resources/assets/js/composables/useFloatingUi.ts
index c492de53..1c1254d7 100644
--- a/resources/assets/js/composables/useFloatingUi.ts
+++ b/resources/assets/js/composables/useFloatingUi.ts
@@ -13,7 +13,7 @@ export const useFloatingUi = (
   floating: HTMLElement | Ref<HTMLElement | undefined>,
   config: Partial<Config> = {}
 ) => {
-  const extractRef = <T extends HTMLElement | Ref<HTMLElement | undefined>>(ref: T): HTMLElement => {
+  const extractRef = <T extends HTMLElement | Ref<HTMLElement | undefined>> (ref: T): HTMLElement => {
     if (isRef(ref) && !ref.value) {
       throw new TypeError('Reference element is not defined')
     }
diff --git a/resources/assets/js/composables/useOverlay.ts b/resources/assets/js/composables/useOverlay.ts
index e3786bfa..f0c85538 100644
--- a/resources/assets/js/composables/useOverlay.ts
+++ b/resources/assets/js/composables/useOverlay.ts
@@ -3,7 +3,7 @@ import { requireInjection } from '@/utils'
 import { OverlayKey } from '@/symbols'
 import Overlay from '@/components/ui/Overlay.vue'
 
-export const useOverlay = (overlay?:  Ref<InstanceType<typeof Overlay>> | null) => {
+export const useOverlay = (overlay?: Ref<InstanceType<typeof Overlay>> | null) => {
   overlay = overlay || requireInjection(OverlayKey)
 
   return {
diff --git a/resources/assets/js/composables/useUpload.ts b/resources/assets/js/composables/useUpload.ts
index d91a9497..a93dc10a 100644
--- a/resources/assets/js/composables/useUpload.ts
+++ b/resources/assets/js/composables/useUpload.ts
@@ -4,7 +4,7 @@ import { commonStore } from '@/stores'
 import { acceptedMediaTypes } from '@/config'
 import { UploadFile, uploadService } from '@/services'
 import { getAllFileEntries, pluralize } from '@/utils'
-import { useMessageToaster, useRouter, usePolicies } from '@/composables'
+import { useMessageToaster, usePolicies, useRouter } from '@/composables'
 
 export const useUpload = () => {
   const { toastSuccess, toastWarning } = useMessageToaster()
diff --git a/resources/assets/js/config/routes.ts b/resources/assets/js/config/routes.ts
index f153b318..e2130521 100644
--- a/resources/assets/js/config/routes.ts
+++ b/resources/assets/js/config/routes.ts
@@ -1,9 +1,8 @@
-import { Route } from '@/router'
+import Router, { Route } from '@/router'
 import { userStore } from '@/stores'
 import { cache, playlistCollaborationService } from '@/services'
 import { useUpload } from '@/composables'
 import { logger } from '@/utils'
-import Router from '@/router'
 
 const UUID_REGEX = '[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}'
 
diff --git a/resources/assets/js/config/smart-playlist/inputTypes.ts b/resources/assets/js/config/smart-playlist/inputTypes.ts
index 222ea966..bb21238c 100644
--- a/resources/assets/js/config/smart-playlist/inputTypes.ts
+++ b/resources/assets/js/config/smart-playlist/inputTypes.ts
@@ -1,14 +1,14 @@
 import {
-  is,
-  isNot,
-  contains,
-  notContain,
   beginsWith,
+  contains,
   endsWith,
+  inLast,
+  is,
   isBetween,
   isGreaterThan,
   isLessThan,
-  inLast,
+  isNot,
+  notContain,
   notInLast
 } from '@/config/smart-playlist/operators'
 
diff --git a/resources/assets/js/remote/components/RemoteFooter.vue b/resources/assets/js/remote/components/RemoteFooter.vue
index b512d110..646ff6f3 100644
--- a/resources/assets/js/remote/components/RemoteFooter.vue
+++ b/resources/assets/js/remote/components/RemoteFooter.vue
@@ -3,7 +3,7 @@
     class="h-[18vh] w-screen flex justify-around items-center border-t border-solid border-t-white/10 py-4 text-[5vmin]"
   >
     <a class="has-[.yep]:text-k-love" @click.prevent="toggleFavorite">
-      <Icon :icon="song.liked ? faHeart : faEmptyHeart" :class="song.liked && 'yep'" />
+      <Icon :class="song.liked && 'yep'" :icon="song.liked ? faHeart : faEmptyHeart" />
     </a>
 
     <a class="text-[6vmin]" @click="playPrev">
@@ -15,7 +15,7 @@
       items-center justify-center has-[.paused]:pl-[4px]"
       @click.prevent="togglePlayback"
     >
-      <Icon :icon="playing ? faPause : faPlay" :class="playing || 'paused'" />
+      <Icon :class="playing || 'paused'" :icon="playing ? faPause : faPlay" />
     </a>
 
     <a class="text-[6vmin]" @click.prevent="playNext">
@@ -26,14 +26,8 @@
   </footer>
 </template>
 
-<script setup lang="ts">
-import {
-  faHeart,
-  faPause,
-  faPlay,
-  faStepBackward,
-  faStepForward,
-} from '@fortawesome/free-solid-svg-icons'
+<script lang="ts" setup>
+import { faHeart, faPause, faPlay, faStepBackward, faStepForward, } from '@fortawesome/free-solid-svg-icons'
 import { faHeart as faEmptyHeart } from '@fortawesome/free-regular-svg-icons'
 import { computed, toRefs } from 'vue'
 import { socketService } from '@/services'
@@ -59,7 +53,7 @@ const playNext = () => socketService.broadcast('SOCKET_PLAY_NEXT')
 const playPrev = () => socketService.broadcast('SOCKET_PLAY_PREV')
 </script>
 
-<style scoped lang="postcss">
+<style lang="postcss" scoped>
 a {
   @apply text-k-text-primary active:opacity-80;
 }
diff --git a/resources/assets/js/remote/components/Scanner.vue b/resources/assets/js/remote/components/Scanner.vue
index 29fb9bd4..57c6db95 100644
--- a/resources/assets/js/remote/components/Scanner.vue
+++ b/resources/assets/js/remote/components/Scanner.vue
@@ -14,7 +14,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { computed, onMounted, ref } from 'vue'
 import { socketService } from '@/services'
 
diff --git a/resources/assets/js/remote/components/SongDetails.vue b/resources/assets/js/remote/components/SongDetails.vue
index d1f61d91..981476cb 100644
--- a/resources/assets/js/remote/components/SongDetails.vue
+++ b/resources/assets/js/remote/components/SongDetails.vue
@@ -15,7 +15,7 @@
   </article>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { toRefs } from 'vue'
 import { defaultCover } from '@/utils'
 
@@ -24,7 +24,7 @@ const { song } = toRefs(props)
 </script>
 
 
-<style scoped lang="postcss">
+<style lang="postcss" scoped>
 p {
   @apply max-w-[90%] mx-auto overflow-hidden text-ellipsis whitespace-nowrap leading-[1.3];
 }
diff --git a/resources/assets/js/remote/components/VolumeControl.vue b/resources/assets/js/remote/components/VolumeControl.vue
index de968b9b..c86b975c 100644
--- a/resources/assets/js/remote/components/VolumeControl.vue
+++ b/resources/assets/js/remote/components/VolumeControl.vue
@@ -12,7 +12,7 @@
   </span>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import noUISlider from 'nouislider'
 import { socketService } from '@/services'
 import { faVolumeHigh, faVolumeMute } from '@fortawesome/free-solid-svg-icons'
diff --git a/resources/assets/js/router.ts b/resources/assets/js/router.ts
index 4c2b6d63..c573198b 100644
--- a/resources/assets/js/router.ts
+++ b/resources/assets/js/router.ts
@@ -43,6 +43,26 @@ export default class Router {
     addEventListener('popstate', () => this.resolve(), true)
   }
 
+  public static go (path: string | number, reload = false) {
+    if (typeof path === 'number') {
+      history.go(path)
+      return
+    }
+
+    if (!path.startsWith('/')) {
+      path = `/${path}`
+    }
+
+    if (!path.startsWith('/#')) {
+      path = `/#${path}`
+    }
+
+    path = path.substring(1, path.length)
+    location.assign(`${location.origin}${location.pathname}${path}`)
+
+    reload && forceReloadWindow()
+  }
+
   public async resolve () {
     if (!location.hash || location.hash === '#/' || location.hash === '#!/') {
       return Router.go(this.homeRoute.path)
@@ -67,6 +87,14 @@ export default class Router {
     return this.activateRoute(route, params)
   }
 
+  public triggerNotFound = async () => await this.activateRoute(this.notFoundRoute)
+  public onRouteChanged = (handler: RouteChangedHandler) => this.routeChangedHandlers.push(handler)
+
+  public async activateRoute (route: Route, params: RouteParams = {}) {
+    this.$currentRoute.value = route
+    this.$currentRoute.value.params = params
+  }
+
   private tryMatchRoute () {
     if (!this.cache.has(location.hash)) {
       for (let i = 0; i < this.routes.length; i++) {
@@ -88,32 +116,4 @@ export default class Router {
 
     return this.cache.get(location.hash)
   }
-
-  public triggerNotFound = async () => await this.activateRoute(this.notFoundRoute)
-  public onRouteChanged = (handler: RouteChangedHandler) => this.routeChangedHandlers.push(handler)
-
-  public async activateRoute (route: Route, params: RouteParams = {}) {
-    this.$currentRoute.value = route
-    this.$currentRoute.value.params = params
-  }
-
-  public static go (path: string | number, reload = false) {
-    if (typeof path === 'number') {
-      history.go(path)
-      return
-    }
-
-    if (!path.startsWith('/')) {
-      path = `/${path}`
-    }
-
-    if (!path.startsWith('/#')) {
-      path = `/#${path}`
-    }
-
-    path = path.substring(1, path.length)
-    location.assign(`${location.origin}${location.pathname}${path}`)
-
-    reload && forceReloadWindow()
-  }
 }
diff --git a/resources/assets/js/services/http.ts b/resources/assets/js/services/http.ts
index 6737997a..01b74924 100644
--- a/resources/assets/js/services/http.ts
+++ b/resources/assets/js/services/http.ts
@@ -1,4 +1,4 @@
-import Axios, { AxiosInstance, Method, AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios'
+import Axios, { AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse, Method } from 'axios'
 import NProgress from 'nprogress'
 import { eventBus } from '@/utils'
 import { authService } from '@/services'
@@ -8,43 +8,6 @@ class Http {
 
   private silent = false
 
-  private showLoadingIndicator () {
-    NProgress.start()
-  }
-
-  private hideLoadingIndicator () {
-    NProgress.done(true)
-  }
-
-  public request<T> (method: Method, url: string, data: Record<string, any> = {}, onUploadProgress?: any) {
-    return this.client.request({
-      url,
-      data,
-      method,
-      onUploadProgress
-    }) as Promise<{ data: T }>
-  }
-
-  public async get<T> (url: string) {
-    return (await this.request<T>('get', url)).data
-  }
-
-  public async post<T> (url: string, data: Record<string, any> = {}, onUploadProgress?: any) {
-    return (await this.request<T>('post', url, data, onUploadProgress)).data
-  }
-
-  public async put<T> (url: string, data: Record<string, any>) {
-    return (await this.request<T>('put', url, data)).data
-  }
-
-  public async patch<T> (url: string, data: Record<string, any>) {
-    return (await this.request<T>('patch', url, data)).data
-  }
-
-  public async delete<T> (url: string, data: Record<string, any> = {}) {
-    return (await this.request<T>('delete', url, data)).data
-  }
-
   constructor () {
     this.client = Axios.create({
       baseURL: `${window.BASE_URL}api`,
@@ -92,6 +55,43 @@ class Http {
     this.silent = true
     return this
   }
+
+  public request<T> (method: Method, url: string, data: Record<string, any> = {}, onUploadProgress?: any) {
+    return this.client.request({
+      url,
+      data,
+      method,
+      onUploadProgress
+    }) as Promise<{ data: T }>
+  }
+
+  public async get<T> (url: string) {
+    return (await this.request<T>('get', url)).data
+  }
+
+  public async post<T> (url: string, data: Record<string, any> = {}, onUploadProgress?: any) {
+    return (await this.request<T>('post', url, data, onUploadProgress)).data
+  }
+
+  public async put<T> (url: string, data: Record<string, any>) {
+    return (await this.request<T>('put', url, data)).data
+  }
+
+  public async patch<T> (url: string, data: Record<string, any>) {
+    return (await this.request<T>('patch', url, data)).data
+  }
+
+  public async delete<T> (url: string, data: Record<string, any> = {}) {
+    return (await this.request<T>('delete', url, data)).data
+  }
+
+  private showLoadingIndicator () {
+    NProgress.start()
+  }
+
+  private hideLoadingIndicator () {
+    NProgress.done(true)
+  }
 }
 
 export const http = new Http()
diff --git a/resources/assets/js/services/playbackService.spec.ts b/resources/assets/js/services/playbackService.spec.ts
index 48e9ae3d..a47a6c35 100644
--- a/resources/assets/js/services/playbackService.spec.ts
+++ b/resources/assets/js/services/playbackService.spec.ts
@@ -18,31 +18,10 @@ import {
 } from '@/stores'
 
 new class extends UnitTestCase {
-  private setupEnvironment () {
-    document.body.innerHTML = `
-  <div class="plyr">
-    <audio crossorigin="anonymous" controls/>
-  </div>
-  `
-
-    window.AudioContext = vi.fn().mockImplementation(() => ({
-      createMediaElementSource: vi.fn(noop)
-    }))
-  }
-
   protected beforeEach () {
     super.beforeEach(() => this.setupEnvironment())
   }
 
-  private setCurrentSong (song?: Song) {
-    song = reactive(song || factory<Song>('song', {
-      playback_state: 'Playing'
-    }))
-
-    queueStore.state.songs = reactive([song])
-    return song
-  }
-
   protected test () {
     it('only initializes once', () => {
       const spy = vi.spyOn(plyr, 'setup')
@@ -407,4 +386,25 @@ new class extends UnitTestCase {
       expect(playMock).toHaveBeenCalledWith(songs[0])
     })
   }
+
+  private setupEnvironment () {
+    document.body.innerHTML = `
+  <div class="plyr">
+    <audio crossorigin="anonymous" controls/>
+  </div>
+  `
+
+    window.AudioContext = vi.fn().mockImplementation(() => ({
+      createMediaElementSource: vi.fn(noop)
+    }))
+  }
+
+  private setCurrentSong (song?: Song) {
+    song = reactive(song || factory<Song>('song', {
+      playback_state: 'Playing'
+    }))
+
+    queueStore.state.songs = reactive([song])
+    return song
+  }
 }
diff --git a/resources/assets/js/services/playbackService.ts b/resources/assets/js/services/playbackService.ts
index eb8a2b15..f4b5cbc3 100644
--- a/resources/assets/js/services/playbackService.ts
+++ b/resources/assets/js/services/playbackService.ts
@@ -25,6 +25,38 @@ class PlaybackService {
   private repeatModes: RepeatMode[] = ['NO_REPEAT', 'REPEAT_ALL', 'REPEAT_ONE']
   private initialized = false
 
+  public get isTranscoding () {
+    return isMobile.any && preferences.transcode_on_mobile
+  }
+
+  /**
+   * The next song in the queue.
+   * If we're in REPEAT_ALL mode and there's no next song, just get the first song.
+   */
+  public get next () {
+    if (queueStore.next) {
+      return queueStore.next
+    }
+
+    if (preferences.repeat_mode === 'REPEAT_ALL') {
+      return queueStore.first
+    }
+  }
+
+  /**
+   * The previous song in the queue.
+   * If we're in REPEAT_ALL mode and there's no prev song, get the last song.
+   */
+  public get previous () {
+    if (queueStore.previous) {
+      return queueStore.previous
+    }
+
+    if (preferences.repeat_mode === 'REPEAT_ALL') {
+      return queueStore.last
+    }
+  }
+
   public init (plyrWrapper: HTMLElement) {
     if (this.initialized) return
 
@@ -89,15 +121,6 @@ class PlaybackService {
     await this.restart()
   }
 
-  private async setNowPlayingMeta(song: Song) {
-    document.title = `${song.title} ♫ Koel`
-    this.player.media.setAttribute('title', `${song.artist_name} - ${song.title}`)
-
-    if (isAudioContextSupported) {
-      await audioService.context.resume()
-    }
-  }
-
   public showNotification (song: Song) {
     if (preferences.show_now_playing_notification) {
       try {
@@ -130,16 +153,6 @@ class PlaybackService {
     })
   }
 
-  // Record the UNIX timestamp the song starts playing, for scrobbling purpose
-  private recordStartTime (song: Song) {
-    song.play_start_time = Math.floor(Date.now() / 1000)
-    song.play_count_registered = false
-  }
-
-  private broadcastSong (song: Song) {
-    socketService.broadcast('SOCKET_SONG', song)
-  }
-
   public async restart () {
     const song = queueStore.current!
 
@@ -167,38 +180,6 @@ class PlaybackService {
     }
   }
 
-  public get isTranscoding () {
-    return isMobile.any && preferences.transcode_on_mobile
-  }
-
-  /**
-   * The next song in the queue.
-   * If we're in REPEAT_ALL mode and there's no next song, just get the first song.
-   */
-  public get next () {
-    if (queueStore.next) {
-      return queueStore.next
-    }
-
-    if (preferences.repeat_mode === 'REPEAT_ALL') {
-      return queueStore.first
-    }
-  }
-
-  /**
-   * The previous song in the queue.
-   * If we're in REPEAT_ALL mode and there's no prev song, get the last song.
-   */
-  public get previous () {
-    if (queueStore.previous) {
-      return queueStore.previous
-    }
-
-    if (preferences.repeat_mode === 'REPEAT_ALL') {
-      return queueStore.last
-    }
-  }
-
   public rotateRepeatMode () {
     let index = this.repeatModes.indexOf(preferences.repeat_mode) + 1
 
@@ -328,6 +309,25 @@ class PlaybackService {
     queueStore.all.length && await this.play(queueStore.first)
   }
 
+  private async setNowPlayingMeta (song: Song) {
+    document.title = `${song.title} ♫ Koel`
+    this.player.media.setAttribute('title', `${song.artist_name} - ${song.title}`)
+
+    if (isAudioContextSupported) {
+      await audioService.context.resume()
+    }
+  }
+
+  // Record the UNIX timestamp the song starts playing, for scrobbling purpose
+  private recordStartTime (song: Song) {
+    song.play_start_time = Math.floor(Date.now() / 1000)
+    song.play_count_registered = false
+  }
+
+  private broadcastSong (song: Song) {
+    socketService.broadcast('SOCKET_SONG', song)
+  }
+
   private setMediaSessionActionHandlers () {
     if (!navigator.mediaSession) return
 
diff --git a/resources/assets/js/services/volumeManager.ts b/resources/assets/js/services/volumeManager.ts
index 8faf40a8..e8c8b973 100644
--- a/resources/assets/js/services/volumeManager.ts
+++ b/resources/assets/js/services/volumeManager.ts
@@ -1,9 +1,9 @@
 import { ref } from 'vue'
 
 export class VolumeManager {
+  public volume = ref(0)
   private input!: HTMLInputElement
   private originalVolume = 0
-  public volume = ref(0)
 
   public init (input: HTMLInputElement, initialVolume: number) {
     this.input = input
diff --git a/resources/assets/js/stores/equalizerStore.ts b/resources/assets/js/stores/equalizerStore.ts
index b1eff038..568c4ca9 100644
--- a/resources/assets/js/stores/equalizerStore.ts
+++ b/resources/assets/js/stores/equalizerStore.ts
@@ -10,18 +10,18 @@ export const equalizerStore = {
    * Get the current equalizer config.
    */
   getConfig () {
-    let config: EqualizerPreset|undefined
+    let config: EqualizerPreset | undefined
 
     if (this.isCustom(preferences.equalizer)) return preferences.equalizer
 
     if (preferences.equalizer.name !== null) {
-       config = this.getPresetByName(preferences.equalizer.name)
+      config = this.getPresetByName(preferences.equalizer.name)
     }
 
     return config || presets[0]
   },
 
-  isCustom(preset: any) {
+  isCustom (preset: any) {
     return typeof preset === 'object'
       && preset !== null
       && preset.name === null
diff --git a/resources/assets/js/stores/songStore.ts b/resources/assets/js/stores/songStore.ts
index 88696cf5..51f567e7 100644
--- a/resources/assets/js/stores/songStore.ts
+++ b/resources/assets/js/stores/songStore.ts
@@ -227,7 +227,7 @@ export const songStore = {
   getMostPlayed (count: number) {
     return take(
       orderBy(
-        Array.from(this.vault.values()).filter(({ deleted, play_count })=> !deleted && play_count > 0),
+        Array.from(this.vault.values()).filter(({ deleted, play_count }) => !deleted && play_count > 0),
         'play_count',
         'desc'
       ),
diff --git a/resources/assets/js/visualizers/asteroid/scripts/ThreeSharedRenderer.ts b/resources/assets/js/visualizers/asteroid/scripts/ThreeSharedRenderer.ts
index d9414132..2cbaf3c9 100644
--- a/resources/assets/js/visualizers/asteroid/scripts/ThreeSharedRenderer.ts
+++ b/resources/assets/js/visualizers/asteroid/scripts/ThreeSharedRenderer.ts
@@ -2,9 +2,9 @@ import * as THREE from 'three'
 
 export class ThreeSharedRenderer {
   public readonly camera: THREE.PerspectiveCamera
-  private timer: number
   public renderer!: THREE.WebGLRenderer
   public container: HTMLElement
+  private timer: number
   private readonly resizeHandler: () => void
 
   constructor (container: HTMLElement) {
diff --git a/resources/assets/js/visualizers/waveform/lib/SceneInit.ts b/resources/assets/js/visualizers/waveform/lib/SceneInit.ts
index a6d2c0ba..9e39dcc5 100644
--- a/resources/assets/js/visualizers/waveform/lib/SceneInit.ts
+++ b/resources/assets/js/visualizers/waveform/lib/SceneInit.ts
@@ -1,11 +1,11 @@
 import * as THREE from 'three'
 
 export default class SceneInit {
+  public scene: THREE.Scene
   private readonly fov: number
   private container: HTMLElement
   private readonly camera: THREE.PerspectiveCamera
   private clock: THREE.Clock
-  public scene: THREE.Scene
   private renderer: THREE.WebGLRenderer
   private uniforms: any
   private readonly onWindowResize: () => void