fix(tests): broken tests after UI revamp

resources/assets/js/components/album/AlbumInfo.spec.ts

@@ -2,8 +2,8 @@ import { screen } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { commonStore, songStore } from '@/stores'
+import { commonStore } from '@/stores'
-import { mediaInfoService, playbackService } from '@/services'
+import { mediaInfoService } from '@/services'
 import AlbumInfoComponent from './AlbumInfo.vue'
 
 let album: Album
@@ -52,36 +52,5 @@ new class extends UnitTestCase {
 
       expect(screen.getByTestId('album-info').classList.contains(mode)).toBe(true)
     })
-
-    it('triggers showing full wiki for aside mode', async () => {
-      await this.renderComponent('aside')
-      expect(screen.queryByTestId('full')).toBeNull()
-
-      await this.user.click(screen.getByRole('button', { name: 'Full Wiki' }))
-
-      expect(screen.queryByTestId('summary')).toBeNull()
-      screen.getByTestId('full')
-    })
-
-    it('shows full wiki for full mode', async () => {
-      await this.renderComponent('full')
-
-      screen.getByTestId('full')
-      expect(screen.queryByTestId('summary')).toBeNull()
-      expect(screen.queryByRole('button', { name: 'Full Wiki' })).toBeNull()
-    })
-
-    it('plays', async () => {
-      const songs = factory<Song>('song', 3)
-      const fetchMock = this.mock(songStore, 'fetchForAlbum').mockResolvedValue(songs)
-      const playMock = this.mock(playbackService, 'queueAndPlay')
-      await this.renderComponent()
-
-      await this.user.click(screen.getByTitle('Play all songs in IV'))
-      await this.tick(2)
-
-      expect(fetchMock).toHaveBeenCalledWith(album)
-      expect(playMock).toHaveBeenCalledWith(songs)
-    })
   }
 }

resources/assets/js/components/album/__snapshots__/AlbumCard.spec.ts.snap

@@ -1,10 +1,11 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<article data-v-f01bdc56="" class="item tw-relative tw-flex md:tw-max-w-full tw-max-w-[256px] tw-border tw-p-5 tw-rounded-lg tw-flex-col tw-gap-5 tw-transition tw-border-color tw-duration-200 full" draggable="true" tabindex="0" title="IV by Led Zeppelin"><br data-v-f01bdc56="" data-testid="thumbnail" entity="[object Object]">
+<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" title="IV by Led Zeppelin">
-  <footer data-v-f01bdc56="" class="tw-flex tw-flex-1 tw-flex-col tw-gap-1.5 tw-overflow-hidden">
+  <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>
-    <div data-v-f01bdc56="" class="name tw-flex tw-flex-col tw-gap-2 tw-whitespace-nowrap"><a href="#/album/42" class="text-normal" data-testid="name">IV</a><a href="#/artist/17">Led Zeppelin</a></div>
+  <footer data-v-f01bdc56="" class="flex flex-1 flex-col gap-1.5 overflow-hidden">
-    <p data-v-f01bdc56="" class="meta tw-text-[0.9rem] tw-flex tw-gap-1.5 tw-opacity-70 hover:tw-opacity-100"><a title="Shuffle all songs in the album IV" class="shuffle-album" role="button"> Shuffle </a><a title="Download all songs in the album IV" class="download-album" role="button"> Download </a></p>
+    <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>
+    <p data-v-f01bdc56="" class="meta text-[0.9rem] flex gap-1.5 opacity-70 hover:opacity-100"><a title="Shuffle all songs in the album IV" role="button"> Shuffle </a><a title="Download all songs in the album IV" role="button"> Download </a></p>
   </footer>
 </article>
 `;

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 tw-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" style="top: 42px; left: 420px;" tabindex="0" data-testid="album-context-menu">
   <ul data-v-0408531a="">
     <li>Play All</li>
     <li>Shuffle All</li>

resources/assets/js/components/album/__snapshots__/AlbumTrackListItem.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<div data-v-da281390="" class="track-list-item tw-flex tw-flex-1 tw-gap-1" title="" tabindex="0"><span data-v-da281390="" class="tw-flex-1">Fahrstuhl to Heaven</span>
+<div data-v-da281390="" class="track-list-item flex flex-1 gap-1" title="" tabindex="0"><span data-v-da281390="" class="flex-1">Fahrstuhl to Heaven</span>
-  <!----><span data-v-da281390="" class="tw-w-14 tw-text-right tw-opacity-50">04:40</span>
+  <!----><span data-v-da281390="" class="w-14 text-right opacity-50">04:40</span>
 </div>
 `;

resources/assets/js/components/artist/ArtistInfo.spec.ts

@@ -1,9 +1,9 @@
 import { expect, it } from 'vitest'
 import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { commonStore, songStore } from '@/stores'
+import { commonStore } from '@/stores'
 import { screen } from '@testing-library/vue'
-import { mediaInfoService, playbackService } from '@/services'
+import { mediaInfoService } from '@/services'
 import ArtistInfoComponent from './ArtistInfo.vue'
 
 let artist: Artist
@@ -46,36 +46,5 @@ new class extends UnitTestCase {
 
       expect(screen.getByTestId('artist-info').classList.contains(mode)).toBe(true)
     })
-
-    it('triggers showing full bio for aside mode', async () => {
-      await this.renderComponent('aside')
-      expect(screen.queryByTestId('full')).toBeNull()
-
-      await this.user.click(screen.getByRole('button', { name: 'Full Bio' }))
-
-      expect(screen.queryByTestId('summary')).toBeNull()
-      screen.getByTestId('full')
-    })
-
-    it('shows full bio for full mode', async () => {
-      await this.renderComponent('full')
-
-      screen.getByTestId('full')
-      expect(screen.queryByTestId('summary')).toBeNull()
-      expect(screen.queryByRole('button', { name: 'Full Bio' })).toBeNull()
-    })
-
-    it('plays', async () => {
-      const songs = factory<Song>('song', 3)
-      const fetchMock = this.mock(songStore, 'fetchForArtist').mockResolvedValue(songs)
-      const playMock = this.mock(playbackService, 'queueAndPlay')
-      await this.renderComponent()
-
-      await this.user.click(screen.getByTitle('Play all songs by Led Zeppelin'))
-      await this.tick(2)
-
-      expect(fetchMock).toHaveBeenCalledWith(artist)
-      expect(playMock).toHaveBeenCalledWith(songs)
-    })
   }
 }

resources/assets/js/components/artist/__snapshots__/ArtistCard.spec.ts.snap

@@ -1,10 +1,11 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<article data-v-f01bdc56="" class="item tw-relative tw-flex md:tw-max-w-full tw-max-w-[256px] tw-border tw-p-5 tw-rounded-lg tw-flex-col tw-gap-5 tw-transition tw-border-color tw-duration-200 full" draggable="true" tabindex="0" title="Led Zeppelin"><br data-v-f01bdc56="" data-testid="thumbnail" entity="[object Object]">
+<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" title="Led Zeppelin">
-  <footer data-v-f01bdc56="" class="tw-flex tw-flex-1 tw-flex-col tw-gap-1.5 tw-overflow-hidden">
+  <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>
-    <div data-v-f01bdc56="" class="name tw-flex tw-flex-col tw-gap-2 tw-whitespace-nowrap"><a href="#/artist/42" class="text-normal" data-testid="name">Led Zeppelin</a></div>
+  <footer data-v-f01bdc56="" class="flex flex-1 flex-col gap-1.5 overflow-hidden">
-    <p data-v-f01bdc56="" class="meta tw-text-[0.9rem] tw-flex tw-gap-1.5 tw-opacity-70 hover:tw-opacity-100"><a title="Shuffle all songs by Led Zeppelin" class="shuffle-artist" role="button"> Shuffle </a><a title="Download all songs by Led Zeppelin" class="download-artist" role="button"> Download </a></p>
+    <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>
+    <p data-v-f01bdc56="" class="meta text-[0.9rem] flex gap-1.5 opacity-70 hover:opacity-100"><a title="Shuffle all songs by Led Zeppelin" role="button"> Shuffle </a><a title="Download all songs by Led Zeppelin" role="button"> Download </a></p>
   </footer>
 </article>
 `;

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 tw-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" style="top: 42px; left: 420px;" tabindex="0" data-testid="artist-context-menu">
   <ul data-v-0408531a="">
     <li>Play All</li>
     <li>Shuffle All</li>

resources/assets/js/components/auth/LoginForm.spec.ts

@@ -10,7 +10,7 @@ new class extends UnitTestCase {
 
     await this.type(screen.getByPlaceholderText('Email Address'), 'john@doe.com')
     await this.type(screen.getByPlaceholderText('Password'), 'secret')
-    await this.user.click(screen.getByRole('button', { name: 'Log In' }))
+    await this.user.click(screen.getByTestId('submit'))
 
     expect(loginMock).toHaveBeenCalledWith('john@doe.com', 'secret')
 

resources/assets/js/components/auth/LoginForm.vue

@@ -20,7 +20,7 @@
       </FormRow>
 
       <FormRow>
-        <Btn type="submit">Log In</Btn>
+        <Btn type="submit" data-testid="submit">Log In</Btn>
       </FormRow>
 
       <FormRow v-if="canResetPassword">

resources/assets/js/components/auth/ResetPasswordForm.spec.ts

@@ -8,6 +8,7 @@ new class extends UnitTestCase {
   protected test () {
     it('resets password', async () => {
       const resetMock = this.mock(authService, 'resetPassword').mockResolvedValue(null)
+      const loginMock = this.mock(authService, 'login').mockResolvedValue(null)
 
       await this.router.activateRoute({
         path: '_',
@@ -19,6 +20,7 @@ new class extends UnitTestCase {
       await this.user.click(screen.getByRole('button', { name: 'Save' }))
 
       expect(resetMock).toHaveBeenCalledWith('foo@bar.com', 'new-password', 'my-token')
+      expect(loginMock).toHaveBeenCalledWith('foo@bar.com', 'new-password')
     })
   }
 }

resources/assets/js/components/auth/__snapshots__/LoginForm.spec.ts.snap

@@ -1,20 +1,20 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<div data-v-0b0f87ea="" class="vertical-center tw-min-h-screen tw-my-0 tw-mx-auto tw-flex-col tw-gap-5">
+<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="sm:tw-w-[288px] sm:tw-border tw-duration-500 tw-p-7 tw-rounded-xl tw-border-transparent sm:tw-bg-white/10 tw-space-y-3" data-testid="login-form">
+  <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="tw-text-center tw-mb-8"><img data-v-0b0f87ea="" class="tw-inline-block" alt="Koel's logo" src="undefined/resources/assets/img/logo.svg" width="156"></div><label data-v-0b0f87ea="" class="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]">
+    <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]">
-      <!--v-if--><input data-v-2ca3bb69="" data-v-0b0f87ea="" class="tw-text-base tw-w-full tw-px-4 tw-py-2.5 tw-rounded" type="email" autofocus="" placeholder="Email Address" required="">
+      <!--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="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]">
+    </label><label data-v-0b0f87ea="" class="flex flex-col gap-2 text-[1.1rem]">
       <!--v-if-->
-      <div data-v-e732892f="" data-v-0b0f87ea="" class="tw-relative"><input data-v-2ca3bb69="" data-v-e732892f="" class="tw-text-base tw-w-full tw-px-4 tw-py-2.5 tw-rounded tw-w-full" type="password" placeholder="Password" required=""><button data-v-e732892f="" type="button" class="tw-absolute tw-p-2.5 tw-right-0 tw-top-0"><br data-v-e732892f="" 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" placeholder="Password" required=""><button class="absolute p-2.5 right-0 top-0 text-k-bg-primary" type="button"><br data-testid="Icon" icon="[object Object]"></button></div>
       <!--v-if-->
-    </label><label data-v-0b0f87ea="" class="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]">
+    </label><label data-v-0b0f87ea="" class="flex flex-col gap-2 text-[1.1rem]">
-      <!--v-if--><button data-v-8943c846="" data-v-0b0f87ea="" class="inset-when-pressed tw-text-base tw-px-4 tw-py-2 tw-rounded tw-cursor-pointer" type="submit">Log In</button>
+      <!--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>
       <!--v-if-->
-    </label><label data-v-0b0f87ea="" class="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]">
+    </label><label data-v-0b0f87ea="" class="flex flex-col gap-2 text-[1.1rem]">
-      <!--v-if--><a data-v-0b0f87ea="" class="tw-text-right tw-text-[.95rem]" role="button"> Forgot password? </a>
+      <!--v-if--><a data-v-0b0f87ea="" class="text-right text-[.95rem] text-k-text-secondary" role="button"> Forgot password? </a>
       <!--v-if-->
     </label>
   </form>
@@ -24,24 +24,24 @@ exports[`renders 1`] = `
 `;
 
 exports[`shows Google login button 1`] = `
-<div data-v-0b0f87ea="" class="vertical-center tw-min-h-screen tw-my-0 tw-mx-auto tw-flex-col tw-gap-5">
+<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="sm:tw-w-[288px] sm:tw-border tw-duration-500 tw-p-7 tw-rounded-xl tw-border-transparent sm:tw-bg-white/10 tw-space-y-3" data-testid="login-form">
+  <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="tw-text-center tw-mb-8"><img data-v-0b0f87ea="" class="tw-inline-block" alt="Koel's logo" src="undefined/resources/assets/img/logo.svg" width="156"></div><label data-v-0b0f87ea="" class="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]">
+    <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]">
-      <!--v-if--><input data-v-2ca3bb69="" data-v-0b0f87ea="" class="tw-text-base tw-w-full tw-px-4 tw-py-2.5 tw-rounded" type="email" autofocus="" placeholder="Email Address" required="">
+      <!--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="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]">
+    </label><label data-v-0b0f87ea="" class="flex flex-col gap-2 text-[1.1rem]">
       <!--v-if-->
-      <div data-v-e732892f="" data-v-0b0f87ea="" class="tw-relative"><input data-v-2ca3bb69="" data-v-e732892f="" class="tw-text-base tw-w-full tw-px-4 tw-py-2.5 tw-rounded tw-w-full" type="password" placeholder="Password" required=""><button data-v-e732892f="" type="button" class="tw-absolute tw-p-2.5 tw-right-0 tw-top-0"><br data-v-e732892f="" 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" placeholder="Password" required=""><button class="absolute p-2.5 right-0 top-0 text-k-bg-primary" type="button"><br data-testid="Icon" icon="[object Object]"></button></div>
       <!--v-if-->
-    </label><label data-v-0b0f87ea="" class="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]">
+    </label><label data-v-0b0f87ea="" class="flex flex-col gap-2 text-[1.1rem]">
-      <!--v-if--><button data-v-8943c846="" data-v-0b0f87ea="" class="inset-when-pressed tw-text-base tw-px-4 tw-py-2 tw-rounded tw-cursor-pointer" type="submit">Log In</button>
+      <!--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>
       <!--v-if-->
-    </label><label data-v-0b0f87ea="" class="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]">
+    </label><label data-v-0b0f87ea="" class="flex flex-col gap-2 text-[1.1rem]">
-      <!--v-if--><a data-v-0b0f87ea="" class="tw-text-right tw-text-[.95rem]" role="button"> Forgot password? </a>
+      <!--v-if--><a data-v-0b0f87ea="" class="text-right text-[.95rem] text-k-text-secondary" role="button"> Forgot password? </a>
       <!--v-if-->
     </label>
   </form>
-  <div data-v-0b0f87ea="" class="tw-flex tw-gap-3 tw-items-center"><br data-v-0b0f87ea="" data-testid="google-login-button"></div>
+  <div data-v-0b0f87ea="" class="flex gap-3 items-center"><br data-v-0b0f87ea="" data-testid="google-login-button"></div>
   <!--v-if-->
 </div>
 `;

resources/assets/js/components/invitation/AcceptInvitation.vue

@@ -33,7 +33,7 @@
       </FormRow>
 
       <FormRow>
-        <Btn type="submit" :disabled="loading">Accept &amp; Log In</Btn>
+        <Btn :disabled="loading" data-testid="submit" type="submit">Accept &amp; Log In</Btn>
       </FormRow>
     </form>
 

resources/assets/js/components/invitation/AcceptInvivation.spec.ts

@@ -30,7 +30,7 @@ new class extends UnitTestCase {
 
       await this.user.type(screen.getByTestId('name'), 'Bruce Dickinson')
       await this.user.type(screen.getByTestId('password'), 'top-secret')
-      await this.user.click(screen.getByRole('button', { name: 'Accept & Log In' }))
+      await this.user.click(screen.getByTestId('submit'))
 
       expect(acceptMock).toHaveBeenCalledWith('my-token', 'Bruce Dickinson', 'top-secret')
     })

resources/assets/js/components/layout/app-footer/__snapshots__/FooterExtraControls.spec.ts.snap

@@ -1,9 +1,9 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<div data-v-8bf5fe81="" class="extra-controls tw-flex tw-justify-end tw-relative md:tw-w-[320px] tw-px-8 tw-py-0">
+<div data-v-8bf5fe81="" class="extra-controls flex justify-end relative md:w-[320px] px-6 md:px-8 py-0">
-  <div data-v-8bf5fe81="" class="tw-flex tw-justify-end tw-items-center tw-gap-6"><button data-v-8bf5fe81="" class="tw-transition-[color] tw-duration-200 tw-ease-in-out tw-text-[var(--color-text-secondary)] hover:tw-text-[var(--color-text-primary)] visualizer-btn tw-hidden md:!tw-block" type="button" data-testid="toggle-visualizer-btn" title="Toggle visualizer"><br data-v-8bf5fe81="" data-testid="Icon" icon="[object Object]"></button>
+  <div data-v-8bf5fe81="" class="flex justify-end items-center gap-6"><button data-v-8bf5fe81="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary visualizer-btn hidden md:!block" type="button" data-testid="toggle-visualizer-btn" title="Toggle visualizer"><br data-v-8bf5fe81="" data-testid="Icon" icon="[object Object]"></button>
-    <!--v-if--><span data-v-c7afcfc4="" data-v-8bf5fe81="" id="volume" class="muted tw-hidden md:tw-flex tw-relative tw-items-center tw-gap-2"><button data-v-c7afcfc4="" class="tw-transition-[color] tw-duration-200 tw-ease-in-out tw-text-[var(--color-text-secondary)] hover:tw-text-[var(--color-text-primary)]" type="button" tabindex="0" title="Unmute"><br data-v-c7afcfc4="" data-testid="Icon" icon="[object Object]" fixed-width=""></button><button data-v-c7afcfc4="" class="tw-transition-[color] tw-duration-200 tw-ease-in-out tw-text-[var(--color-text-secondary)] hover:tw-text-[var(--color-text-primary)]" type="button" tabindex="0" title="Mute" style="display: none;"><br data-v-c7afcfc4="" data-testid="Icon" icon="[object Object]" fixed-width=""></button><input data-v-c7afcfc4="" class="plyr__volume !tw-w-[120px] before:tw-absolute before:tw-left-0 before:tw-right-0 before:tw-top-[-12px] before:tw-bottom-[-12px]" max="10" role="slider" step="0.1" title="Volume" type="range"></span>
+    <!--v-if--><span data-v-c7afcfc4="" data-v-8bf5fe81="" id="volume" class="muted hidden md:flex relative items-center gap-2"><button data-v-c7afcfc4="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary" type="button" tabindex="0" title="Unmute"><br data-v-c7afcfc4="" data-testid="Icon" icon="[object Object]" fixed-width=""></button><button data-v-c7afcfc4="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary" type="button" tabindex="0" title="Mute" style="display: none;"><br data-v-c7afcfc4="" data-testid="Icon" icon="[object Object]" fixed-width=""></button><input data-v-c7afcfc4="" class="plyr__volume !w-[120px] before:absolute before:left-0 before:right-0 before:top-[-12px] before:bottom-[-12px]" max="10" role="slider" step="0.1" title="Volume" type="range"></span>
     <!--v-if-->
   </div>
 </div>

resources/assets/js/components/layout/app-footer/__snapshots__/FooterPlaybackControls.spec.ts.snap

@@ -1,8 +1,8 @@
 // Vitest Snapshot v1
 
 exports[`renders with a current song 1`] = `
-<div data-v-2e8b419d="" class="playback-controls tw-flex tw-flex-1 tw-flex-col tw-place-content-center tw-place-items-center">
+<div data-v-2e8b419d="" class="playback-controls flex flex-1 flex-col justify-center">
-  <div data-v-2e8b419d="" class="tw-text-2xl tw-flex tw-items-center tw-justify-center tw-gap-5 md:tw-gap-12"><button data-v-2e8b419d="" class="tw-transition-[color] tw-duration-200 tw-ease-in-out tw-text-[var(--color-text-secondary)] hover:tw-text-[var(--color-text-primary)] tw-text-base" type="button" title="Unlike Fahrstuhl to Heaven by Led Zeppelin"><br data-testid="Icon" icon="[object Object]"></button><!-- a placeholder to maintain the asymmetric layout --><button data-v-2e8b419d="" class="tw-transition-[color] tw-duration-200 tw-ease-in-out tw-text-[var(--color-text-secondary)] hover:tw-text-[var(--color-text-primary)]" type="button" title="Play previous song"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><br data-v-2e8b419d="" data-testid="PlayButton"><button data-v-2e8b419d="" class="tw-transition-[color] tw-duration-200 tw-ease-in-out tw-text-[var(--color-text-secondary)] hover:tw-text-[var(--color-text-primary)]" type="button" title="Play next song"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><button data-v-cab48a7c="" data-v-2e8b419d="" class="tw-opacity-30 tw-text-base" title="Change repeat mode (current: No Repeat)" data-testid="repeat-mode-switch" type="button"><svg data-v-cab48a7c="" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" size="16" class="lucide lucide-repeat-icon">
+  <div data-v-2e8b419d="" class="flex items-center justify-between md:justify-center gap-5 md:gap-12 px-4 md:px-0"><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-base" type="button" title="Unlike Fahrstuhl to Heaven by Led Zeppelin"><br data-testid="Icon" icon="[object Object]"></button><!-- a placeholder to maintain the asymmetric layout --><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-2xl" type="button" title="Play previous song"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><br data-v-2e8b419d="" data-testid="PlayButton"><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-2xl" type="button" title="Play next song"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><button data-v-cab48a7c="" data-v-2e8b419d="" class="opacity-30 text-base" title="Change repeat mode (current: No Repeat)" data-testid="repeat-mode-switch" type="button"><svg data-v-cab48a7c="" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" size="16" class="lucide lucide-repeat-icon">
         <path d="m17 2 4 4-4 4"></path>
         <path d="M3 11v-1a4 4 0 0 1 4-4h14"></path>
         <path d="m7 22-4-4 4-4"></path>
@@ -12,8 +12,8 @@ exports[`renders with a current song 1`] = `
 `;
 
 exports[`renders without a current song 1`] = `
-<div data-v-2e8b419d="" class="playback-controls tw-flex tw-flex-1 tw-flex-col tw-place-content-center tw-place-items-center">
+<div data-v-2e8b419d="" class="playback-controls flex flex-1 flex-col justify-center">
-  <div data-v-2e8b419d="" class="tw-text-2xl tw-flex tw-items-center tw-justify-center tw-gap-5 md:tw-gap-12"><button data-v-2e8b419d="" type="button"></button><!-- a placeholder to maintain the asymmetric layout --><button data-v-2e8b419d="" class="tw-transition-[color] tw-duration-200 tw-ease-in-out tw-text-[var(--color-text-secondary)] hover:tw-text-[var(--color-text-primary)]" type="button" title="Play previous song"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><br data-v-2e8b419d="" data-testid="PlayButton"><button data-v-2e8b419d="" class="tw-transition-[color] tw-duration-200 tw-ease-in-out tw-text-[var(--color-text-secondary)] hover:tw-text-[var(--color-text-primary)]" type="button" title="Play next song"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><button data-v-cab48a7c="" data-v-2e8b419d="" class="tw-opacity-30 tw-text-base" title="Change repeat mode (current: No Repeat)" data-testid="repeat-mode-switch" type="button"><svg data-v-cab48a7c="" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" size="16" class="lucide lucide-repeat-icon">
+  <div data-v-2e8b419d="" class="flex items-center justify-between md:justify-center gap-5 md:gap-12 px-4 md:px-0"><button data-v-2e8b419d="" type="button"></button><!-- a placeholder to maintain the asymmetric layout --><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-2xl" type="button" title="Play previous song"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><br data-v-2e8b419d="" data-testid="PlayButton"><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-2xl" type="button" title="Play next song"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><button data-v-cab48a7c="" data-v-2e8b419d="" class="opacity-30 text-base" title="Change repeat mode (current: No Repeat)" data-testid="repeat-mode-switch" type="button"><svg data-v-cab48a7c="" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" size="16" class="lucide lucide-repeat-icon">
         <path d="m17 2 4 4-4 4"></path>
         <path d="M3 11v-1a4 4 0 0 1 4-4h14"></path>
         <path d="m7 22-4-4 4-4"></path>

resources/assets/js/components/layout/app-footer/__snapshots__/FooterSongInfo.spec.ts.snap

@@ -1,15 +1,15 @@
 // Vitest Snapshot v1
 
 exports[`renders with current song 1`] = `
-<div data-v-91ed60f7="" class="playing song-info tw-px-6 tw-py-0 tw-flex tw-items-center tw-content-start tw-w-[84px] md:tw-w-80 tw-gap-5" draggable="true"><span data-v-91ed60f7="" class="album-thumb tw-block tw-h-[55%] md:tw-h-3/4 tw-aspect-square tw-rounded-full tw-bg-cover"></span>
+<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 tw-overflow-hidden tw-hidden md:tw-block">
+  <div data-v-91ed60f7="" class="meta overflow-hidden hidden md:block">
-    <h3 data-v-91ed60f7="" class="title tw-text-ellipsis tw-overflow-hidden tw-whitespace-nowrap">Fahrstuhl zum Mond</h3><a data-v-91ed60f7="" class="artist tw-text-ellipsis tw-overflow-hidden tw-whitespace-nowrap tw-block tw-text-[0.9rem]" 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="" 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>
   </div>
 </div>
 `;
 
 exports[`renders with no current song 1`] = `
-<div data-v-91ed60f7="" class="song-info tw-px-6 tw-py-0 tw-flex tw-items-center tw-content-start tw-w-[84px] md:tw-w-80 tw-gap-5" draggable="false"><span data-v-91ed60f7="" class="album-thumb tw-block tw-h-[55%] md:tw-h-3/4 tw-aspect-square tw-rounded-full tw-bg-cover"></span>
+<div data-v-91ed60f7="" class="song-info px-6 py-0 flex items-center content-start w-[84px] md:w-80 gap-5" draggable="false"><span data-v-91ed60f7="" class="album-thumb block h-[55%] md:h-3/4 aspect-square rounded-full bg-cover"></span>
   <!--v-if-->
 </div>
 `;

resources/assets/js/components/layout/main-wrapper/extra-drawer/__snapshots__/ExtraDrawer.spec.ts.snap

@@ -1,14 +1,14 @@
 // Vitest Snapshot v1
 
 exports[`renders without a current song 1`] = `
-<aside data-v-847f0b60="" class="tw-fixed sm:tw-relative tw-top-0 tw-w-screen md:tw-w-auto tw-flex tw-flex-col md:tw-flex-row-reverse tw-z-[2]">
+<aside data-v-847f0b60="" class="fixed sm:relative top-0 w-screen md:w-auto flex flex-col md:flex-row-reverse z-[2] text-k-text-secondary">
-  <div data-v-847f0b60="" class="controls tw-flex md:tw-flex-col tw-justify-between tw-items-center md:tw-w-[64px] md:tw-py-6 tw:tw-px-0 tw-bg-black/5 md:tw-border-l tw-border-solid md:tw-border-l-white/5 md:tw-border-b-0 md:tw-shadow-none tw-z-[2] tw-w-screen tw-flex-row tw-border-b tw-border-b-white/5 tw-border-l-0 tw-shadow-xl tw-py-0 tw-px-6 header-height">
+  <div data-v-847f0b60="" class="controls flex md:flex-col justify-between items-center md:w-[64px] md:py-6 tw:px-0 bg-black/5 md:border-l border-solid md:border-l-white/5 md:border-b-0 md:shadow-none z-[2] w-screen flex-row border-b border-b-white/5 border-l-0 shadow-xl py-0 px-6 h-k-header-height">
-    <div data-v-847f0b60="" class="btn-group"><button data-v-5e31283f="" data-v-847f0b60="" class="tw-flex tw-items-center tw-justify-center tw-h-[42px] tw-aspect-square tw-rounded-full tw-bg-none md:tw-bg-black/30 tw-text-xl tw-opacity-70 tw-transition-opacity tw-duration-200 tw-ease-in-out tw-text-current tw-cursor-pointer hover:active-state active:tw-scale-90 tw-block md:tw-hidden" type="button"><br data-testid="Icon" icon="[object Object]"></button>
+    <div data-v-847f0b60="" class="btn-group"><button data-v-5e31283f="" data-v-847f0b60="" class="relative flex items-center justify-center h-[42px] aspect-square rounded-full bg-none md:bg-black/30 text-xl opacity-70 transition-opacity duration-200 ease-in-out text-current cursor-pointer hover:active-state active:scale-90 block md:hidden" type="button"><br data-testid="Icon" icon="[object Object]"></button>
       <!--v-if-->
     </div>
-    <div data-v-847f0b60="" class="btn-group"><button data-v-5e31283f="" data-v-847f0b60="" class="tw-flex tw-items-center tw-justify-center tw-h-[42px] tw-aspect-square tw-rounded-full tw-bg-none md:tw-bg-black/30 tw-text-xl tw-opacity-70 tw-transition-opacity tw-duration-200 tw-ease-in-out tw-text-current tw-cursor-pointer hover:active-state active:tw-scale-90" type="button" title="About Koel"><br data-testid="Icon" icon="[object Object]">
+    <div data-v-847f0b60="" class="btn-group"><button data-v-5e31283f="" data-v-847f0b60="" class="relative flex items-center justify-center h-[42px] aspect-square rounded-full bg-none md:bg-black/30 text-xl opacity-70 transition-opacity duration-200 ease-in-out text-current cursor-pointer hover:active-state active:scale-90" type="button" title="About Koel"><br data-testid="Icon" icon="[object Object]">
         <!--v-if-->
-      </button><button data-v-5e31283f="" data-v-847f0b60="" class="tw-flex tw-items-center tw-justify-center tw-h-[42px] tw-aspect-square tw-rounded-full tw-bg-none md:tw-bg-black/30 tw-text-xl tw-opacity-70 tw-transition-opacity tw-duration-200 tw-ease-in-out tw-text-current tw-cursor-pointer hover:active-state active:tw-scale-90" type="button" title="Log out"><br data-testid="Icon" icon="[object Object]"></button><br data-v-847f0b60="" data-testid="stub"></div>
+      </button><button data-v-5e31283f="" data-v-847f0b60="" class="relative flex items-center justify-center h-[42px] aspect-square rounded-full bg-none md:bg-black/30 text-xl opacity-70 transition-opacity duration-200 ease-in-out text-current cursor-pointer hover:active-state active:scale-90" type="button" title="Log out"><br data-testid="Icon" icon="[object Object]"></button><br data-v-847f0b60="" data-testid="stub"></div>
   </div>
   <!--v-if-->
 </aside>

resources/assets/js/components/layout/main-wrapper/sidebar/SidebarItem.spec.ts

@@ -29,7 +29,7 @@ new class extends UnitTestCase {
         path: '_'
       })
 
-      expect(screen.getByRole('link').classList.contains('active')).toBe(true)
+      expect(screen.getByTestId('sidebar-item').classList.contains('current')).toBe(true)
     })
   }
 }

resources/assets/js/components/layout/main-wrapper/sidebar/SidebarItem.vue

@@ -3,6 +3,7 @@
     :class="current && 'current'"
     class="relative before:right-0 px-6 before:top-1/4 before:w-[4px] before:h-1/2 before:absolute before:rounded-full
     before:transition-[box-shadow,_background-color] before:ease-in-out before:duration-500"
+    data-testid="sidebar-item"
   >
     <a
       :href="props.href"

resources/assets/js/components/layout/main-wrapper/sidebar/__snapshots__/SidebarItem.spec.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`renders 1`] = `<li data-v-7589e0e3="" class="tw-relative before:-tw-right-6 before:tw-top-1/4 before:tw-w-[4px] before:tw-h-1/2 before:tw-absolute before:tw-rounded-full" icon="[object Object]"><a data-v-7589e0e3="" href="#" class="tw-flex tw-items-center tw-overflow-x-hidden tw-gap-3 tw-h-11 tw-relative active:tw-pt-0.5 active:tw-pr-0 active:tw-pb-0 active:tw-pl-0.5"><span data-v-7589e0e3="" class="tw-opacity-70"></span><span data-v-7589e0e3="" class="tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap">Home</span></a></li>`;
+exports[`renders 1`] = `<li data-v-7589e0e3="" class="relative before:right-0 px-6 before:top-1/4 before:w-[4px] before:h-1/2 before:absolute before:rounded-full before:transition-[box-shadow,_background-color] before:ease-in-out before:duration-500" data-testid="sidebar-item" icon="[object Object]"><a data-v-7589e0e3="" href="#" class="flex items-center overflow-x-hidden gap-3 h-11 relative active:pt-0.5 active:pr-0 active:pb-0 active:pl-0.5 !text-k-text-secondary hover:!text-k-text-primary"><span data-v-7589e0e3="" class="opacity-70"></span><span data-v-7589e0e3="" class="overflow-hidden text-ellipsis whitespace-nowrap">Home</span></a></li>`;

resources/assets/js/components/layout/main-wrapper/sidebar/__snapshots__/YouTubeSidebarItem.spec.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`renders 1`] = `<li data-v-7589e0e3="" class="tw-relative before:-tw-right-6 before:tw-top-1/4 before:tw-w-[4px] before:tw-h-1/2 before:tw-absolute before:tw-rounded-full"><a data-v-7589e0e3="" href="#/youtube" class="tw-flex tw-items-center tw-overflow-x-hidden tw-gap-3 tw-h-11 tw-relative active:tw-pt-0.5 active:tw-pr-0 active:tw-pb-0 active:tw-pl-0.5"><span data-v-7589e0e3="" class="tw-opacity-70"><br data-testid="Icon" icon="[object Object]" fixed-width=""></span><span data-v-7589e0e3="" class="tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap"> A Random Video</span></a></li>`;
+exports[`renders 1`] = `<li data-v-7589e0e3="" class="relative before:right-0 px-6 before:top-1/4 before:w-[4px] before:h-1/2 before:absolute before:rounded-full before:transition-[box-shadow,_background-color] before:ease-in-out before:duration-500" data-testid="sidebar-item"><a data-v-7589e0e3="" href="#/youtube" class="flex items-center overflow-x-hidden gap-3 h-11 relative active:pt-0.5 active:pr-0 active:pb-0 active:pl-0.5 !text-k-text-secondary hover:!text-k-text-primary"><span data-v-7589e0e3="" class="opacity-70"><br data-testid="Icon" icon="[object Object]" fixed-width=""></span><span data-v-7589e0e3="" class="overflow-hidden text-ellipsis whitespace-nowrap"> A Random Video</span></a></li>`;

resources/assets/js/components/meta/SupportKoel.spec.ts

@@ -3,9 +3,15 @@ import { screen } from '@testing-library/vue'
 import { preferenceStore } from '@/stores'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import SupportKoel from './SupportKoel.vue'
+import { http } from '@/services'
 
 new class extends UnitTestCase {
   protected beforeEach () {
+    // Prevent actual HTTP requests from being made
+    this.setReadOnlyProperty(http, 'silently', {
+      patch: vi.fn()
+    })
+
     super.beforeEach(() => vi.useFakeTimers())
   }
 

resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap

@@ -1,9 +1,9 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<div data-v-6b5b01a9="" class="about text-secondary" data-testid="about-koel" tabindex="0">
+<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="">
+  <main data-v-6b5b01a9="" class="p-6">
-    <div data-v-6b5b01a9="" class="logo"><img data-v-6b5b01a9="" alt="Koel's logo" src="undefined/resources/assets/img/logo.svg" width="128"></div>
+    <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="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="inset-when-pressed tw-text-base tw-px-4 tw-py-2 tw-rounded tw-cursor-pointer" data-testid="close-modal-btn" red="" 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" data-testid="close-modal-btn" danger="" rounded="">Close</button></footer>
 </div>
 `;

resources/assets/js/components/meta/__snapshots__/SponsorList.spec.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`renders 1`] = `<div data-v-46e7cf66="" class="sponsors"><a data-v-46e7cf66="" href="https://render.com" title="Render - Cloud Hosting for Developers" target="_blank"><img data-v-46e7cf66="" alt="Render - Cloud Hosting for Developers" src="undefined/resources/assets/img/sponsors/render.svg" style="height: 28px;"></a><a data-v-46e7cf66="" href="https://www.keycdn.com?a=11519" title="KeyCDN - Content delivery made easy" target="_blank"><img data-v-46e7cf66="" alt="KeyCDN - Content delivery made easy" src="undefined/resources/assets/img/sponsors/keycdn.svg"></a><a data-v-46e7cf66="" href="https://whatthediff.ai" title="What The Diff - AI powered changelog generation" target="_blank"><img data-v-46e7cf66="" alt="What The Diff - AI powered changelog generation" src="undefined/resources/assets/img/sponsors/what-the-diff.svg" style="height: 20px;"></a></div>`;
+exports[`renders 1`] = `<div class="flex items-center flex-wrap justify-center gap-x-2 gap-y-4 p-4 bg-black/10 rounded-md border border-white/5"><a href="https://render.com" title="Render - Cloud Hosting for Developers" class="opacity-70 hover:opacity-100" target="_blank"><img alt="Render - Cloud Hosting for Developers" src="undefined/resources/assets/img/sponsors/render.svg" style="height: 28px;" class="brightness-[10] h-[32px]"></a><a href="https://www.keycdn.com?a=11519" title="KeyCDN - Content delivery made easy" class="opacity-70 hover:opacity-100" target="_blank"><img alt="KeyCDN - Content delivery made easy" src="undefined/resources/assets/img/sponsors/keycdn.svg" class="brightness-[10] h-[32px]"></a><a href="https://whatthediff.ai" title="What The Diff - AI powered changelog generation" class="opacity-70 hover:opacity-100" target="_blank"><img alt="What The Diff - AI powered changelog generation" src="undefined/resources/assets/img/sponsors/what-the-diff.svg" style="height: 20px;" class="brightness-[10] h-[32px]"></a></div>`;

resources/assets/js/components/meta/__snapshots__/SupportKoel.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
 exports[`shows after a delay 1`] = `
-<div data-v-c8ee2518="" class="support-bar" data-testid="support-bar">
+<div data-v-c8ee2518="" class="bg-k-bg-primary text-[0.9rem] px-6 py-4 flex text-k-text-secondary z-10 space-x-3" data-testid="support-bar">
-  <p data-v-c8ee2518=""> Loving Koel? Please consider supporting its development via <a data-v-c8ee2518="" href="https://github.com/users/phanan/sponsorship" rel="noopener" target="_blank">GitHub Sponsors</a> and/or <a data-v-c8ee2518="" href="https://opencollective.com/koel" rel="noopener" target="_blank">OpenCollective</a>. </p><button data-v-c8ee2518="" type="button">Hide</button><span data-v-c8ee2518="" class="sep"></span><button data-v-c8ee2518="" type="button"> Don't bug me again </button>
+  <p data-v-c8ee2518="" class="flex-1"> Loving Koel? Please consider supporting its development via <a data-v-c8ee2518="" href="https://github.com/users/phanan/sponsorship" rel="noopener" target="_blank">GitHub Sponsors</a> and/or <a data-v-c8ee2518="" href="https://opencollective.com/koel" rel="noopener" target="_blank">OpenCollective</a>. </p><button data-v-c8ee2518="" type="button">Hide</button><span data-v-c8ee2518="" class="block after:content-['•'] after:block"></span><button data-v-c8ee2518="" type="button"> Don't bug me again </button>
 </div>
 `;

resources/assets/js/components/playlist/__snapshots__/PlaylistCollaborationModal.spec.ts.snap

@@ -1,19 +1,19 @@
 // Vitest Snapshot v1
 
 exports[`renders the modal 1`] = `
-<div data-v-886145d2="" class="collaboration-modal" tabindex="0">
+<div data-v-886145d2="" class="collaboration-modal max-w-[640px]" tabindex="0">
   <header data-v-886145d2="">
     <h1 data-v-886145d2="">Playlist Collaboration</h1>
   </header>
   <main data-v-886145d2="">
-    <p data-v-886145d2="" class="intro text-secondary"> Collaborative playlists allow multiple users to contribute. <br data-v-886145d2=""> Note: Songs added to a collaborative playlist are made accessible to all users, and you cannot mark a song as private if it’s still part of a collaborative playlist. </p>
+    <p data-v-886145d2="" class="text-k-text-secondary"> Collaborative playlists allow multiple users to contribute. <br data-v-886145d2=""> Note: Songs added to a collaborative playlist are made accessible to all users, and you cannot mark a song as private if it’s still part of a collaborative playlist. </p>
-    <section data-v-886145d2="" class="collaborators">
+    <section data-v-886145d2="" class="space-y-5">
-      <h2 data-v-886145d2=""><span data-v-886145d2="">Current Collaborators</span>
+      <h2 data-v-886145d2="" class="flex text-xl mt-6 mb-1 items-center"><span data-v-886145d2="" class="flex-1">Current Collaborators</span>
         <!--v-if-->
       </h2>
-      <div data-v-886145d2="" class="collaborators-wrapper"><br data-v-886145d2="" data-testid="CollaboratorList" playlist="[object Object]"></div>
+      <div data-v-886145d2="" class="collaborators-wrapper overflow-auto"><br data-v-886145d2="" data-testid="CollaboratorList" playlist="[object Object]"></div>
     </section>
   </main>
-  <footer data-v-886145d2=""><button data-v-8943c846="" data-v-886145d2="" class="inset-when-pressed tw-text-base tw-px-4 tw-py-2 tw-rounded tw-cursor-pointer">Close</button></footer>
+  <footer data-v-886145d2=""><button data-v-8943c846="" data-v-886145d2="" class="text-base text-k-text-primary bg-k-primary px-4 py-2.5 rounded cursor-pointer" type="button">Close</button></footer>
 </div>
 `;

resources/assets/js/components/playlist/__snapshots__/PlaylistCollaboratorList.spec.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`renders 1`] = `<ul data-v-fa3dce2e=""><br data-v-fa3dce2e="" data-testid="ListItem" is="li" role="contributor" manageable="false" removable="false" collaborator="[object Object]"><br data-v-fa3dce2e="" data-testid="ListItem" is="li" role="contributor" manageable="false" removable="false" collaborator="[object Object]"><br data-v-fa3dce2e="" data-testid="ListItem" is="li" role="contributor" manageable="false" removable="false" collaborator="[object Object]"><br data-v-fa3dce2e="" data-testid="ListItem" is="li" role="contributor" manageable="false" removable="false" collaborator="[object Object]"><br data-v-fa3dce2e="" data-testid="ListItem" is="li" role="contributor" manageable="false" removable="false" collaborator="[object Object]"></ul>`;
+exports[`renders 1`] = `<ul class="w-full space-y-3"><br data-testid="ListItem" collaborator="[object Object]" manageable="false" removable="false" role="contributor"><br data-testid="ListItem" collaborator="[object Object]" manageable="false" removable="false" role="contributor"><br data-testid="ListItem" collaborator="[object Object]" manageable="false" removable="false" role="contributor"><br data-testid="ListItem" collaborator="[object Object]" manageable="false" removable="false" role="contributor"><br data-testid="ListItem" collaborator="[object Object]" manageable="false" removable="false" role="contributor"></ul>`;

resources/assets/js/components/profile-preferences/__snapshots__/SpotifyIntegration.spec.ts.snap

@@ -1,8 +1,8 @@
 // Vitest Snapshot v1
 
 exports[`renders proper content with Spotify integration status false, current user admin status false 1`] = `
-<section class="text-secondary">
+<section class="text-k-text-secondary">
-  <h3 class="tw-text-2xl tw-mb-2"><span class="tw-mr-2 tw-text-[#1db954]"><br data-testid="Icon" icon="[object Object]"></span> Spotify Integration </h3>
+  <h3 class="text-2xl mb-2"><span class="mr-2 text-[#1db954]"><br data-testid="Icon" icon="[object Object]"></span> Spotify Integration </h3>
   <div>
     <p> Spotify integration is not enabled.
       <!--v-if-->
@@ -12,17 +12,17 @@ exports[`renders proper content with Spotify integration status false, current u
 `;
 
 exports[`renders proper content with Spotify integration status false, current user admin status true 1`] = `
-<section class="text-secondary">
+<section class="text-k-text-secondary">
-  <h3 class="tw-text-2xl tw-mb-2"><span class="tw-mr-2 tw-text-[#1db954]"><br data-testid="Icon" icon="[object Object]"></span> Spotify Integration </h3>
+  <h3 class="text-2xl mb-2"><span class="mr-2 text-[#1db954]"><br data-testid="Icon" icon="[object Object]"></span> Spotify Integration </h3>
   <div>
-    <p> Spotify integration is not enabled. <span data-testid="spotify-admin-instruction"> Check <a href="https://docs.koel.dev/service-integrations#spotify" class="text-highlight" target="_blank"> Documentation </a> for instructions. </span></p>
+    <p> Spotify integration is not enabled. <span data-testid="spotify-admin-instruction"> Check <a href="https://docs.koel.dev/service-integrations#spotify" target="_blank"> Documentation </a> for instructions. </span></p>
   </div>
 </section>
 `;
 
 exports[`renders proper content with Spotify integration status true, current user admin status false 1`] = `
-<section class="text-secondary">
+<section class="text-k-text-secondary">
-  <h3 class="tw-text-2xl tw-mb-2"><span class="tw-mr-2 tw-text-[#1db954]"><br data-testid="Icon" icon="[object Object]"></span> Spotify Integration </h3>
+  <h3 class="text-2xl mb-2"><span class="mr-2 text-[#1db954]"><br data-testid="Icon" icon="[object Object]"></span> Spotify Integration </h3>
   <div>
     <p> Spotify integration is enabled. Koel will attempt to retrieve album arts and artist images from Spotify when a song is played, if needed. </p>
   </div>
@@ -30,8 +30,8 @@ exports[`renders proper content with Spotify integration status true, current us
 `;
 
 exports[`renders proper content with Spotify integration status true, current user admin status true 1`] = `
-<section class="text-secondary">
+<section class="text-k-text-secondary">
-  <h3 class="tw-text-2xl tw-mb-2"><span class="tw-mr-2 tw-text-[#1db954]"><br data-testid="Icon" icon="[object Object]"></span> Spotify Integration </h3>
+  <h3 class="text-2xl mb-2"><span class="mr-2 text-[#1db954]"><br data-testid="Icon" icon="[object Object]"></span> Spotify Integration </h3>
   <div>
     <p> Spotify integration is enabled. Koel will attempt to retrieve album arts and artist images from Spotify when a song is played, if needed. </p>
   </div>

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 tw-h-[96px] tw-bg-center tw-bg-cover tw-relative tw-cursor-pointer tw-rounded-lg tw-overflow-hidden tw-border-2 tw-border-solid tw-border-white/10 tw-transition tw-duration-300 tw-hover:tw-border-white/50]" style="background-color: rgb(255, 0, 0);" title="Set current theme to Sample"><button data-v-1467c50f="" type="button" class="tw-opacity-0 hover:tw-opacity-100 tw-absolute tw-h-full tw-w-full tw-top-0 tw-left-0 tw-flex tw-items-center tw-justify-center tw-text-lg tw-transition-opacity tw-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="" 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>`;

resources/assets/js/components/screens/AlbumListScreen.spec.ts

@@ -42,17 +42,17 @@ new class extends UnitTestCase {
 
       await this.renderComponent()
 
-      await waitFor(() => expect(screen.getByTestId('album-list').classList.contains(`as-${mode}`)).toBe(true))
+      await waitFor(() => expect(screen.getByTestId('album-grid').classList.contains(`as-${mode}`)).toBe(true))
     })
 
     it('switches layout', async () => {
       await this.renderComponent()
 
       await this.user.click(screen.getByRole('radio', { name: 'View as list' }))
-      await waitFor(() => expect(screen.getByTestId('album-list').classList.contains(`as-list`)).toBe(true))
+      await waitFor(() => expect(screen.getByTestId('album-grid').classList.contains(`as-list`)).toBe(true))
 
       await this.user.click(screen.getByRole('radio', { name: 'View as thumbnails' }))
-      await waitFor(() => expect(screen.getByTestId('album-list').classList.contains(`as-thumbnails`)).toBe(true))
+      await waitFor(() => expect(screen.getByTestId('album-grid').classList.contains(`as-thumbnails`)).toBe(true))
     })
   }
 }

resources/assets/js/components/screens/SettingsScreen.spec.ts

@@ -17,8 +17,8 @@ new class extends UnitTestCase {
       settingStore.state.media_path = ''
       this.render(SettingsScreen)
 
-      await this.type(screen.getByLabelText('Media Path'), '/media')
+      await this.type(screen.getByPlaceholderText('/path/to/your/music'), '/media')
-      await this.user.click(screen.getByRole('button', { name: 'Scan' }))
+      await this.user.click(screen.getByTestId('submit'))
 
       await waitFor(() => {
         expect(updateMock).toHaveBeenCalledWith({ media_path: '/media' })
@@ -34,8 +34,8 @@ new class extends UnitTestCase {
       settingStore.state.media_path = '/old'
       this.render(SettingsScreen)
 
-      await this.type(screen.getByLabelText('Media Path'), '/new')
+      await this.type(screen.getByPlaceholderText('/path/to/your/music'), '/new')
-      await this.user.click(screen.getByRole('button', { name: 'Scan' }))
+      await this.user.click(screen.getByTestId('submit'))
 
       await waitFor(() => {
         expect(updateMock).not.toHaveBeenCalled()

resources/assets/js/components/screens/SettingsScreen.vue

@@ -23,14 +23,15 @@
         <TextInput
           v-model="mediaPath"
           aria-describedby="mediaPathHelp"
-          name="media_path"
           class="w-full md:!w-2/3"
+          name="media_path"
+          placeholder="/path/to/your/music"
         />
       </FormRow>
 
       <FormRow>
         <div>
-          <Btn type="submit">Scan</Btn>
+          <Btn data-testid="submit" type="submit">Scan</Btn>
         </div>
       </FormRow>
     </form>

resources/assets/js/components/screens/__snapshots__/AllSongsScreen.spec.ts.snap

@@ -1,32 +1,32 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<section data-v-dcfb8776="" data-v-8ea4eaa5="" class="tw-max-h-full tw-min-h-full tw-w-full tw-flex tw-flex-col tw-transform-gpu">
+<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 tw-min-h-0 md:tw-min-h-full tw-flex tw-items-end tw-flex-shrink-0 tw-relative tw-content-stretch tw-leading-normal tw-p-6 expanded">
+  <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">
-    <aside data-v-5691beb5="" class="thumbnail-wrapper tw-hidden md:tw-block tw-overflow-hidden tw-w-0 tw-rounded-md">
+    <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 tw-aspect-square tw-overflow-hidden tw-grid tw-bg-cover tw-bg-no-repeat" style="background-image: url(undefined/resources/assets/img/covers/default.svg);"><span data-v-55bfc268="" class="tw-block tw-will-change-transform tw-w-full tw-h-full tw-bg-cover tw-bg-no-repeat" data-testid="thumbnail"></span></article>
+      <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>
-    <main data-v-5691beb5="" class="tw-flex tw-flex-1 tw-gap-5 tw-items-center tw-overflow-hidden">
+    <main data-v-5691beb5="" class="flex flex-1 gap-5 items-center overflow-hidden">
-      <div data-v-5691beb5="" class="tw-w-full tw-flex-1 tw-overflow-hidden">
+      <div data-v-5691beb5="" class="w-full flex-1 overflow-hidden">
-        <h1 data-v-5691beb5="" class="name tw-overflow-hidden tw-whitespace-nowrap tw-text-ellipsis tw-mr-4 tw-font-thin md:tw-font-bold tw-my-0 tw-leading-tight"> All Songs
+        <h1 data-v-5691beb5="" class="name overflow-hidden whitespace-nowrap text-ellipsis mr-4 font-thin md:font-bold my-0 leading-tight"> All Songs
           <!--v-if-->
-        </h1><span data-v-5691beb5="" class="meta text-secondary tw-hidden tw-text-[0.9rem] tw-leading-loose"><span data-v-8ea4eaa5="" data-v-5691beb5-s="">420 songs</span><span data-v-8ea4eaa5="" data-v-5691beb5-s="">10 sec</span></span>
+        </h1><span data-v-5691beb5="" class="meta text-k-text-secondary hidden text-[0.9rem] leading-loose"><span data-v-8ea4eaa5="" data-v-5691beb5-s="">420 songs</span><span data-v-8ea4eaa5="" data-v-5691beb5-s="">10 sec</span></span>
       </div>
-      <div data-v-8ea4eaa5="" data-v-5691beb5-s="" class="controls tw-w-full tw-min-h-[32px] tw-flex tw-justify-between tw-items-center tw-gap-4">
+      <div data-v-8ea4eaa5="" data-v-5691beb5-s="" class="controls w-full min-h-[32px] flex justify-between items-center gap-4">
-        <div data-v-8ea4eaa5="" data-v-5691beb5-s="" class="tw-relative" data-testid="song-list-controls">
+        <div data-v-8ea4eaa5="" data-v-5691beb5-s="" class="relative" data-testid="song-list-controls">
-          <div class="tw-flex tw-gap-2 tw-flex-wrap"><span data-v-cf9b67d8="" class="btn-group tw-inline-block tw-relative tw-flex-nowrap" uppercased=""><button data-v-8943c846="" class="inset-when-pressed tw-text-base tw-px-4 tw-py-2 tw-rounded tw-cursor-pointer btn-shuffle-all" data-testid="btn-shuffle-all" orange="" title="Shuffle all. Press Alt/⌥ to change mode."><br data-testid="Icon" icon="[object Object]" fixed-width=""> All </button><!--v-if--><!--v-if--><!--v-if--></span>
+          <div class="flex gap-2 flex-wrap"><span data-v-cf9b67d8="" class="btn-group inline-block relative flex-nowrap" uppercased=""><button data-v-8943c846="" class="text-base text-k-text-primary bg-k-primary px-4 py-2.5 rounded cursor-pointer btn-shuffle-all" type="button" data-testid="btn-shuffle-all" highlight="" title="Shuffle all. Press Alt/⌥ to change mode."><br data-testid="Icon" icon="[object Object]" fixed-width=""> All </button><!--v-if--><!--v-if--><!--v-if--></span>
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div class="context-menu tw-p-0 tw-hidden">
+          <div class="context-menu p-0 hidden">
-            <div data-v-42061e3e="" class="add-to tw-w-full tw-max-w-64 tw-min-w-48 tw-p-3 tw-space-y-3" data-testid="add-to-menu" tabindex="0">
+            <div data-v-42061e3e="" class="add-to w-full max-w-[256px] min-w-[200px] p-3 space-y-3" data-testid="add-to-menu" tabindex="0">
               <section data-v-42061e3e="" class="existing-playlists">
-                <p data-v-42061e3e="" class="tw-mb-2 tw-text-[0.9rem]">Add 0 songs to</p>
+                <p data-v-42061e3e="" class="mb-2 text-[0.9rem]">Add 0 songs to</p>
-                <ul data-v-42061e3e="" class="tw-relative tw-max-h-48 tw-overflow-y-scroll tw-space-y-1.5">
+                <ul data-v-42061e3e="" class="relative max-h-48 overflow-y-scroll space-y-1.5">
                   <li data-v-42061e3e="" data-testid="queue" tabindex="0">Queue</li>
                   <li data-v-42061e3e="" class="favorites" data-testid="add-to-favorites" tabindex="0"> Favorites </li>
                 </ul>
-              </section><button data-v-8943c846="" data-v-42061e3e="" class="inset-when-pressed tw-text-base tw-px-4 tw-py-2 tw-rounded tw-cursor-pointer !tw-w-full !tw-border !tw-border-solid !tw-border-white/20" transparent=""> New Playlist… </button>
+              </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>
@@ -34,43 +34,43 @@ exports[`renders 1`] = `
       </div>
     </main>
   </header>
-  <main data-v-dcfb8776="" class="tw-overflow-scroll tw-flex tw-flex-col tw-b-16 md:tw-b-6 tw-p-6 tw-flex-1 tw-place-content-start"><br data-v-8ea4eaa5="" data-testid="song-list" class="-tw-m-6"></main>
+  <main data-v-dcfb8776="" class="overflow-scroll flex flex-col b-16 md:b-6 p-6 flex-1 place-content-start"><br data-v-8ea4eaa5="" data-testid="song-list" class="-m-6"></main>
 </section>
 `;
 
 exports[`renders in Plus edition 1`] = `
-<section data-v-dcfb8776="" data-v-8ea4eaa5="" class="tw-max-h-full tw-min-h-full tw-w-full tw-flex tw-flex-col tw-transform-gpu">
+<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 tw-min-h-0 md:tw-min-h-full tw-flex tw-items-end tw-flex-shrink-0 tw-relative tw-content-stretch tw-leading-normal tw-p-6 expanded">
+  <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">
-    <aside data-v-5691beb5="" class="thumbnail-wrapper tw-hidden md:tw-block tw-overflow-hidden tw-w-0 tw-rounded-md">
+    <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 tw-aspect-square tw-overflow-hidden tw-grid tw-bg-cover tw-bg-no-repeat" style="background-image: url(undefined/resources/assets/img/covers/default.svg);"><span data-v-55bfc268="" class="tw-block tw-will-change-transform tw-w-full tw-h-full tw-bg-cover tw-bg-no-repeat" data-testid="thumbnail"></span></article>
+      <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>
-    <main data-v-5691beb5="" class="tw-flex tw-flex-1 tw-gap-5 tw-items-center tw-overflow-hidden">
+    <main data-v-5691beb5="" class="flex flex-1 gap-5 items-center overflow-hidden">
-      <div data-v-5691beb5="" class="tw-w-full tw-flex-1 tw-overflow-hidden">
+      <div data-v-5691beb5="" class="w-full flex-1 overflow-hidden">
-        <h1 data-v-5691beb5="" class="name tw-overflow-hidden tw-whitespace-nowrap tw-text-ellipsis tw-mr-4 tw-font-thin md:tw-font-bold tw-my-0 tw-leading-tight"> All Songs
+        <h1 data-v-5691beb5="" class="name overflow-hidden whitespace-nowrap text-ellipsis mr-4 font-thin md:font-bold my-0 leading-tight"> All Songs
           <!--v-if-->
-        </h1><span data-v-5691beb5="" class="meta text-secondary tw-hidden tw-text-[0.9rem] tw-leading-loose"><span data-v-8ea4eaa5="" data-v-5691beb5-s="">420 songs</span><span data-v-8ea4eaa5="" data-v-5691beb5-s="">10 sec</span></span>
+        </h1><span data-v-5691beb5="" class="meta text-k-text-secondary hidden text-[0.9rem] leading-loose"><span data-v-8ea4eaa5="" data-v-5691beb5-s="">420 songs</span><span data-v-8ea4eaa5="" data-v-5691beb5-s="">10 sec</span></span>
       </div>
-      <div data-v-8ea4eaa5="" data-v-5691beb5-s="" class="controls tw-w-full tw-min-h-[32px] tw-flex tw-justify-between tw-items-center tw-gap-4">
+      <div data-v-8ea4eaa5="" data-v-5691beb5-s="" class="controls w-full min-h-[32px] flex justify-between items-center gap-4">
-        <div data-v-8ea4eaa5="" data-v-5691beb5-s="" class="tw-relative" data-testid="song-list-controls">
+        <div data-v-8ea4eaa5="" data-v-5691beb5-s="" class="relative" data-testid="song-list-controls">
-          <div class="tw-flex tw-gap-2 tw-flex-wrap"><span data-v-cf9b67d8="" class="btn-group tw-inline-block tw-relative tw-flex-nowrap" uppercased=""><button data-v-8943c846="" class="inset-when-pressed tw-text-base tw-px-4 tw-py-2 tw-rounded tw-cursor-pointer btn-shuffle-all" data-testid="btn-shuffle-all" orange="" title="Shuffle all. Press Alt/⌥ to change mode."><br data-testid="Icon" icon="[object Object]" fixed-width=""> All </button><!--v-if--><!--v-if--><!--v-if--></span>
+          <div class="flex gap-2 flex-wrap"><span data-v-cf9b67d8="" class="btn-group inline-block relative flex-nowrap" uppercased=""><button data-v-8943c846="" class="text-base text-k-text-primary bg-k-primary px-4 py-2.5 rounded cursor-pointer btn-shuffle-all" type="button" data-testid="btn-shuffle-all" highlight="" title="Shuffle all. Press Alt/⌥ to change mode."><br data-testid="Icon" icon="[object Object]" fixed-width=""> All </button><!--v-if--><!--v-if--><!--v-if--></span>
             <!--v-if-->
             <!--v-if-->
           </div>
-          <div class="context-menu tw-p-0 tw-hidden">
+          <div class="context-menu p-0 hidden">
-            <div data-v-42061e3e="" class="add-to tw-w-full tw-max-w-64 tw-min-w-48 tw-p-3 tw-space-y-3" data-testid="add-to-menu" tabindex="0">
+            <div data-v-42061e3e="" class="add-to w-full max-w-[256px] min-w-[200px] p-3 space-y-3" data-testid="add-to-menu" tabindex="0">
               <section data-v-42061e3e="" class="existing-playlists">
-                <p data-v-42061e3e="" class="tw-mb-2 tw-text-[0.9rem]">Add 0 songs to</p>
+                <p data-v-42061e3e="" class="mb-2 text-[0.9rem]">Add 0 songs to</p>
-                <ul data-v-42061e3e="" class="tw-relative tw-max-h-48 tw-overflow-y-scroll tw-space-y-1.5">
+                <ul data-v-42061e3e="" class="relative max-h-48 overflow-y-scroll space-y-1.5">
                   <li data-v-42061e3e="" data-testid="queue" tabindex="0">Queue</li>
                   <li data-v-42061e3e="" class="favorites" data-testid="add-to-favorites" tabindex="0"> Favorites </li>
                 </ul>
-              </section><button data-v-8943c846="" data-v-42061e3e="" class="inset-when-pressed tw-text-base tw-px-4 tw-py-2 tw-rounded tw-cursor-pointer !tw-w-full !tw-border !tw-border-solid !tw-border-white/20" transparent=""> New Playlist… </button>
+              </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-secondary tw-inline-flex tw-items-center tw-text-base"><span data-v-bf5853cb="" data-v-8ea4eaa5="" data-v-5691beb5-s="" class="tw-relative tw-align-bottom tw-inline-block tw-w-[32px] tw-h-[20px] tw-bg-gray-300 tw-rounded-full tw-shadow-inner tw-cursor-pointer tw-transition-all tw-duration-200 tw-ease-in-out tw-mr-2 after:tw-h-[16px] after:tw-aspect-square after:tw-absolute after:tw-bg-white after:tw-top-[2px] after:tw-left-[2px] after:tw-rounded-full after:tw-transition-left after:tw-duration-200 after:tw-ease-in-out"><input data-v-bf5853cb="" type="checkbox" class="tw-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 type="checkbox" class="hidden"></span><span data-v-8ea4eaa5="" data-v-5691beb5-s="">Own songs only</span></label>
       </div>
     </main>
   </header>
-  <main data-v-dcfb8776="" class="tw-overflow-scroll tw-flex tw-flex-col tw-b-16 md:tw-b-6 tw-p-6 tw-flex-1 tw-place-content-start"><br data-v-8ea4eaa5="" data-testid="song-list" class="-tw-m-6"></main>
+  <main data-v-dcfb8776="" class="overflow-scroll flex flex-col b-16 md:b-6 p-6 flex-1 place-content-start"><br data-v-8ea4eaa5="" data-testid="song-list" class="-m-6"></main>
 </section>
 `;

resources/assets/js/components/screens/__snapshots__/SettingsScreen.spec.ts.snap

@@ -1,19 +1,20 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<section data-v-dcfb8776="" class="tw-max-h-full tw-min-h-full tw-w-full tw-flex tw-flex-col tw-transform-gpu">
+<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 tw-min-h-0 md:tw-min-h-full tw-flex tw-items-end tw-flex-shrink-0 tw-relative tw-content-stretch tw-leading-normal tw-p-6 expanded">
+  <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">
-    <aside data-v-5691beb5="" class="thumbnail-wrapper tw-hidden md:tw-block tw-overflow-hidden tw-w-0 tw-rounded-md"></aside>
+    <!--v-if-->
-    <main data-v-5691beb5="" class="tw-flex tw-flex-1 tw-gap-5 tw-items-center tw-overflow-hidden">
+    <main data-v-5691beb5="" class="flex flex-1 gap-5 items-center overflow-hidden">
-      <div data-v-5691beb5="" class="tw-w-full tw-flex-1 tw-overflow-hidden">
+      <div data-v-5691beb5="" class="w-full flex-1 overflow-hidden">
-        <h1 data-v-5691beb5="" class="name tw-overflow-hidden tw-whitespace-nowrap tw-text-ellipsis tw-mr-4 tw-font-thin md:tw-font-bold tw-my-0 tw-leading-tight">Settings</h1><span data-v-5691beb5="" class="meta text-secondary tw-hidden tw-text-[0.9rem] tw-leading-loose"></span>
+        <h1 data-v-5691beb5="" class="name overflow-hidden whitespace-nowrap text-ellipsis mr-4 font-thin md:font-bold my-0 leading-tight">Settings</h1>
+        <!--v-if-->
       </div>
     </main>
   </header>
-  <main data-v-dcfb8776="" class="tw-overflow-scroll tw-flex tw-flex-col tw-b-16 md:tw-b-6 tw-p-6 tw-flex-1 tw-place-content-start">
+  <main data-v-dcfb8776="" class="overflow-scroll flex flex-col b-16 md:b-6 p-6 flex-1 place-content-start">
-    <form class="tw-space-y-6"><label class="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]"><span>Media Path</span><input data-v-2ca3bb69="" class="tw-text-base tw-w-full tw-px-4 tw-py-2.5 tw-rounded tw-w-full md:!tw-w-2/3" type="text" aria-describedby="mediaPathHelp" name="media_path"><span class="tw-text-[.95rem] tw-opacity-70 tw-mt-1.5"><span id="mediaPathHelp"> The <em>absolute</em> path to the server directory containing your media. Koel will scan this directory for songs and extract any available information.<br> Scanning may take a while, especially if you have a lot of songs, so be patient. </span></span></label><label class="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]">
+    <form class="space-y-6"><label class="flex flex-col gap-2 text-[1.1rem]"><span>Media Path</span><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 md:!w-2/3" type="text" aria-describedby="mediaPathHelp" name="media_path" placeholder="/path/to/your/music"><span class="text-[.95rem] opacity-70 mt-1.5"><span id="mediaPathHelp"> The <em>absolute</em> path to the server directory containing your media. Koel will scan this directory for songs and extract any available information.<br> Scanning may take a while, especially if you have a lot of songs, so be patient. </span></span></label><label class="flex flex-col gap-2 text-[1.1rem]">
         <!--v-if-->
-        <div><button data-v-8943c846="" class="inset-when-pressed tw-text-base tw-px-4 tw-py-2 tw-rounded tw-cursor-pointer" type="submit">Scan</button></div>
+        <div><button data-v-8943c846="" class="text-base text-k-text-primary bg-k-primary px-4 py-2.5 rounded cursor-pointer" type="submit" data-testid="submit">Scan</button></div>
         <!--v-if-->
       </label></form>
   </main>

resources/assets/js/components/song/SongContextMenu.vue

@@ -105,8 +105,7 @@ const currentSong = toRef(queueStore, 'current')
 
 const { currentUserCan } = usePolicies()
 
-const canEditSongs = currentUserCan.editSong(songs.value)
+const canEditSongs = computed(() => currentUserCan.editSong(songs.value))
-
 const onlyOneSongSelected = computed(() => songs.value.length === 1)
 const firstSongPlaying = computed(() => songs.value.length ? songs.value[0].playback_state === 'Playing' : false)
 const normalPlaylists = computed(() => playlists.value.filter(({ is_smart }) => !is_smart))
@@ -135,9 +134,9 @@ const makePrivate = () => trigger(async () => {
 const canBeShared = computed(() => !isPlus.value || songs.value[0].is_public)
 
 const visibilityActions = computed(() => {
-  if (!canEditSongs) return []
+  if (!canEditSongs.value) return []
 
-  const visibilities = Array.from(new Set(songs.value.map(song => song.is_public)))
+  const visibilities = Array.from(new Set(songs.value.map(song => song.is_public ? 'public' : 'private')))
 
   if (visibilities.length === 2) {
     return [
@@ -152,7 +151,7 @@ const visibilityActions = computed(() => {
     ]
   }
 
-  return visibilities[0]
+  return visibilities[0] === 'public'
     ? [{ label: 'Mark as Private', handler: makePrivate }]
     : [{ label: 'Unmark as Private', handler: makePublic }]
 })

resources/assets/js/components/song/__snapshots__/AddToMenu.spec.ts.snap

@@ -1,16 +1,16 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<div data-v-42061e3e="" class="add-to tw-w-full tw-max-w-64 tw-min-w-48 tw-p-3 tw-space-y-3" data-testid="add-to-menu" tabindex="0" showing="true">
+<div data-v-42061e3e="" class="add-to w-full max-w-[256px] min-w-[200px] p-3 space-y-3" data-testid="add-to-menu" tabindex="0" showing="true">
   <section data-v-42061e3e="" class="existing-playlists">
-    <p data-v-42061e3e="" class="tw-mb-2 tw-text-[0.9rem]">Add 5 songs to</p>
+    <p data-v-42061e3e="" class="mb-2 text-[0.9rem]">Add 5 songs to</p>
-    <ul data-v-42061e3e="" class="tw-relative tw-max-h-48 tw-overflow-y-scroll tw-space-y-1.5">
+    <ul data-v-42061e3e="" class="relative max-h-48 overflow-y-scroll space-y-1.5">
       <li data-v-42061e3e="" data-testid="queue" tabindex="0">Queue</li>
       <li data-v-42061e3e="" class="favorites" data-testid="add-to-favorites" tabindex="0"> Favorites </li>
       <li data-v-42061e3e="" class="playlist" data-testid="add-to-playlist" tabindex="0">Foo</li>
       <li data-v-42061e3e="" class="playlist" data-testid="add-to-playlist" tabindex="0">Bar</li>
       <li data-v-42061e3e="" class="playlist" data-testid="add-to-playlist" tabindex="0">Baz</li>
     </ul>
-  </section><button data-v-8943c846="" data-v-42061e3e="" class="inset-when-pressed tw-text-base tw-px-4 tw-py-2 tw-rounded tw-cursor-pointer !tw-w-full !tw-border !tw-border-solid !tw-border-white/20" transparent=""> New Playlist… </button>
+  </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>
 `;

resources/assets/js/components/song/__snapshots__/EditSongForm.spec.ts.snap

@@ -1,33 +1,33 @@
 // Vitest Snapshot v1
 
 exports[`edits a single song 1`] = `
-<form data-v-d70eb300="" class="tw-max-w-[540px]">
+<form data-v-d70eb300="" class="max-w-[540px]">
-  <header data-v-d70eb300="" class="tw-gap-4"><img data-v-d70eb300="" alt="" src="http://test/album.jpg" class="tw-w-[84px] tw-aspect-square tw-object-cover tw-object-center tw-rounded-md">
+  <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">
-    <div data-v-d70eb300="" class="tw-flex-1 tw-flex tw-flex-col tw-justify-center">
+    <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>
     </div>
   </header>
-  <main data-v-d70eb300="" class="tabs tw-mt-4 !tw-p-0">
+  <div data-v-d70eb300="" class="min-h-full flex flex-col relative mt-4">
-    <div data-v-d70eb300="" class="clear" role="tablist"><button data-v-d70eb300="" id="editSongTabDetails" aria-selected="true" aria-controls="editSongPanelDetails" role="tab" type="button"> Details </button><button data-v-d70eb300="" id="editSongTabLyrics" aria-selected="false" aria-controls="editSongPanelLyrics" data-testid="edit-song-lyrics-tab" role="tab" type="button"> Lyrics </button></div>
+    <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>
-    <div data-v-d70eb300="" class="panes">
+    <div data-v-d70eb300="" class="p-6 overflow-auto">
-      <div data-v-d70eb300="" id="editSongPanelDetails" aria-labelledby="editSongTabDetails" role="tabpanel" class="tw-space-y-3" tabindex="0"><label data-v-d70eb300="" class="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]"><span>Title</span><input data-v-2ca3bb69="" data-v-d70eb300="" class="tw-text-base tw-w-full tw-px-4 tw-py-2.5 tw-rounded" type="text" data-testid="title-input" name="title" title="Title">
+      <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="tw-grid tw-gap-3 tw-grid-cols-2"><label data-v-d70eb300="" class="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]"><span>Artist</span><input data-v-2ca3bb69="" data-v-d70eb300="" class="tw-text-base tw-w-full tw-px-4 tw-py-2.5 tw-rounded" type="text" placeholder="" data-testid="artist-input" name="artist">
+        <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">
             <!--v-if-->
-          </label><label data-v-d70eb300="" class="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]"><span>Album Artist</span><input data-v-2ca3bb69="" data-v-d70eb300="" class="tw-text-base tw-w-full tw-px-4 tw-py-2.5 tw-rounded" type="text" placeholder="" data-testid="albumArtist-input" name="album_artist">
+          </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="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]"><span>Album</span><input data-v-2ca3bb69="" data-v-d70eb300="" class="tw-text-base tw-w-full tw-px-4 tw-py-2.5 tw-rounded" type="text" placeholder="" data-testid="album-input" name="album">
+          </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="tw-grid tw-gap-3 tw-grid-cols-2"><label data-v-d70eb300="" class="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]"><span>Track</span><input data-v-2ca3bb69="" data-v-d70eb300="" class="tw-text-base tw-w-full tw-px-4 tw-py-2.5 tw-rounded" type="number" placeholder="" data-testid="track-input" min="1" name="track">
+        <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">
             <!--v-if-->
-          </label><label data-v-d70eb300="" class="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]"><span>Disc</span><input data-v-2ca3bb69="" data-v-d70eb300="" class="tw-text-base tw-w-full tw-px-4 tw-py-2.5 tw-rounded" type="number" placeholder="" data-testid="disc-input" min="1" name="disc">
+          </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="tw-grid tw-gap-3 tw-grid-cols-2"><label data-v-d70eb300="" class="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]"><span>Genre</span><input data-v-2ca3bb69="" data-v-d70eb300="" class="tw-text-base tw-w-full tw-px-4 tw-py-2.5 tw-rounded" type="text" placeholder="" data-testid="genre-input" name="genre" list="genres"><datalist data-v-d70eb300="" id="genres">
+        <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">
               <option data-v-d70eb300="" value="Blues"></option>
               <option data-v-d70eb300="" value="Classic Rock"></option>
               <option data-v-d70eb300="" value="Country"></option>
@@ -221,49 +221,49 @@ exports[`edits a single song 1`] = `
               <option data-v-d70eb300="" value="Psybient"></option>
             </datalist>
             <!--v-if-->
-          </label><label data-v-d70eb300="" class="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]"><span>Year</span><input data-v-2ca3bb69="" data-v-d70eb300="" class="tw-text-base tw-w-full tw-px-4 tw-py-2.5 tw-rounded" type="number" placeholder="" data-testid="year-input" name="year">
+          </label><label data-v-d70eb300="" class="flex flex-col gap-2 text-[1.1rem]"><span>Year</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="year-input" name="year">
             <!--v-if-->
           </label></div>
       </div>
-      <div data-v-d70eb300="" id="editSongPanelLyrics" aria-labelledby="editSongTabLyrics" role="tabpanel" tabindex="0" style="display: none;"><label data-v-d70eb300="" class="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]">
+      <div data-v-d70eb300="" role="tabpanel" tabindex="0" id="editSongPanelLyrics" aria-labelledby="editSongTabLyrics" style="display: none;"><label data-v-d70eb300="" class="flex flex-col gap-2 text-[1.1rem]">
-          <!--v-if--><textarea data-v-2d5f8323="" data-v-d70eb300="" class="tw-px-4 tw-w-full tw-min-h-48 tw-text-base tw-py-2.5 tw-rounded" data-testid="lyrics-input" name="lyrics" title="Lyrics"></textarea>
+          <!--v-if--><textarea data-v-d70eb300="" class="px-4 w-full min-h-48 text-base py-2.5 rounded text-k-text-input bg-k-bg-input" data-testid="lyrics-input" name="lyrics" title="Lyrics"></textarea>
           <!--v-if-->
         </label></div>
     </div>
-  </main>
+  </div>
-  <footer data-v-d70eb300=""><button data-v-8943c846="" data-v-d70eb300="" class="inset-when-pressed tw-text-base tw-px-4 tw-py-2 tw-rounded tw-cursor-pointer" type="submit">Update</button><button data-v-8943c846="" data-v-d70eb300="" class="inset-when-pressed tw-text-base tw-px-4 tw-py-2 tw-rounded tw-cursor-pointer btn-cancel" white="">Cancel</button></footer>
+  <footer data-v-d70eb300=""><button data-v-8943c846="" data-v-d70eb300="" class="text-base text-k-text-primary bg-k-primary px-4 py-2.5 rounded cursor-pointer" type="submit">Update</button><button data-v-8943c846="" data-v-d70eb300="" class="text-base text-k-text-primary bg-k-primary px-4 py-2.5 rounded cursor-pointer btn-cancel" type="button" white="">Cancel</button></footer>
 </form>
 `;
 
 exports[`edits multiple songs 1`] = `
-<form data-v-d70eb300="" class="tw-max-w-[540px]">
+<form data-v-d70eb300="" class="max-w-[540px]">
-  <header data-v-d70eb300="" class="tw-gap-4"><img data-v-d70eb300="" alt="" src="undefined/resources/assets/img/covers/default.svg" class="tw-w-[84px] tw-aspect-square tw-object-cover tw-object-center tw-rounded-md">
+  <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">
-    <div data-v-d70eb300="" class="tw-flex-1 tw-flex tw-flex-col tw-justify-center">
+    <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>
     </div>
   </header>
-  <main data-v-d70eb300="" class="tabs tw-mt-4 !tw-p-0">
+  <div data-v-d70eb300="" class="min-h-full flex flex-col relative mt-4">
-    <div data-v-d70eb300="" class="clear" role="tablist"><button data-v-d70eb300="" id="editSongTabDetails" aria-selected="true" aria-controls="editSongPanelDetails" role="tab" type="button"> Details </button>
+    <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>
       <!--v-if-->
-    </div>
+    </nav>
-    <div data-v-d70eb300="" class="panes">
+    <div data-v-d70eb300="" class="p-6 overflow-auto">
-      <div data-v-d70eb300="" id="editSongPanelDetails" aria-labelledby="editSongTabDetails" role="tabpanel" class="tw-space-y-3" tabindex="0">
+      <div data-v-d70eb300="" role="tabpanel" tabindex="0" id="editSongPanelDetails" aria-labelledby="editSongTabDetails" class="space-y-5">
         <!--v-if-->
-        <div data-v-d70eb300="" class="tw-grid tw-gap-3 tw-grid-cols-2"><label data-v-d70eb300="" class="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]"><span>Artist</span><input data-v-2ca3bb69="" data-v-d70eb300="" class="tw-text-base tw-w-full tw-px-4 tw-py-2.5 tw-rounded" type="text" placeholder="Leave unchanged" data-testid="artist-input" name="artist">
+        <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">
             <!--v-if-->
-          </label><label data-v-d70eb300="" class="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]"><span>Album Artist</span><input data-v-2ca3bb69="" data-v-d70eb300="" class="tw-text-base tw-w-full tw-px-4 tw-py-2.5 tw-rounded" type="text" placeholder="Leave unchanged" data-testid="albumArtist-input" name="album_artist">
+          </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="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]"><span>Album</span><input data-v-2ca3bb69="" data-v-d70eb300="" class="tw-text-base tw-w-full tw-px-4 tw-py-2.5 tw-rounded" type="text" placeholder="Leave unchanged" data-testid="album-input" name="album">
+          </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="tw-grid tw-gap-3 tw-grid-cols-2"><label data-v-d70eb300="" class="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]"><span>Track</span><input data-v-2ca3bb69="" data-v-d70eb300="" class="tw-text-base tw-w-full tw-px-4 tw-py-2.5 tw-rounded" type="number" placeholder="Leave unchanged" data-testid="track-input" min="1" name="track">
+        <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">
             <!--v-if-->
-          </label><label data-v-d70eb300="" class="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]"><span>Disc</span><input data-v-2ca3bb69="" data-v-d70eb300="" class="tw-text-base tw-w-full tw-px-4 tw-py-2.5 tw-rounded" type="number" placeholder="Leave unchanged" data-testid="disc-input" min="1" name="disc">
+          </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="tw-grid tw-gap-3 tw-grid-cols-2"><label data-v-d70eb300="" class="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]"><span>Genre</span><input data-v-2ca3bb69="" data-v-d70eb300="" class="tw-text-base tw-w-full tw-px-4 tw-py-2.5 tw-rounded" type="text" placeholder="Leave unchanged" data-testid="genre-input" name="genre" list="genres"><datalist data-v-d70eb300="" id="genres">
+        <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">
               <option data-v-d70eb300="" value="Blues"></option>
               <option data-v-d70eb300="" value="Classic Rock"></option>
               <option data-v-d70eb300="" value="Country"></option>
@@ -457,13 +457,13 @@ exports[`edits multiple songs 1`] = `
               <option data-v-d70eb300="" value="Psybient"></option>
             </datalist>
             <!--v-if-->
-          </label><label data-v-d70eb300="" class="tw-flex tw-flex-col tw-gap-2 tw-text-[1.1rem]"><span>Year</span><input data-v-2ca3bb69="" data-v-d70eb300="" class="tw-text-base tw-w-full tw-px-4 tw-py-2.5 tw-rounded" type="number" placeholder="Leave unchanged" data-testid="year-input" name="year">
+          </label><label data-v-d70eb300="" class="flex flex-col gap-2 text-[1.1rem]"><span>Year</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="year-input" name="year">
             <!--v-if-->
           </label></div>
       </div>
       <!--v-if-->
     </div>
-  </main>
+  </div>
-  <footer data-v-d70eb300=""><button data-v-8943c846="" data-v-d70eb300="" class="inset-when-pressed tw-text-base tw-px-4 tw-py-2 tw-rounded tw-cursor-pointer" type="submit">Update</button><button data-v-8943c846="" data-v-d70eb300="" class="inset-when-pressed tw-text-base tw-px-4 tw-py-2 tw-rounded tw-cursor-pointer btn-cancel" white="">Cancel</button></footer>
+  <footer data-v-d70eb300=""><button data-v-8943c846="" data-v-d70eb300="" class="text-base text-k-text-primary bg-k-primary px-4 py-2.5 rounded cursor-pointer" type="submit">Update</button><button data-v-8943c846="" data-v-d70eb300="" class="text-base text-k-text-primary bg-k-primary px-4 py-2.5 rounded cursor-pointer btn-cancel" type="button" white="">Cancel</button></footer>
 </form>
 `;

resources/assets/js/components/song/__snapshots__/SongList.spec.ts.snap

@@ -1,8 +1,8 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<div class="song-list-wrap tw-relative tw-flex tw-flex-col tw-flex-1 tw-overflow-auto tw-py-0 tw-px-3 md:tw-p-0" data-testid="song-list" tabindex="0">
+<div class="song-list-wrap relative flex flex-col flex-1 overflow-auto py-0 px-3 md:p-0" data-testid="song-list" tabindex="0">
-  <div class="sortable song-list-header tw-flex tw-z-[2] tw-bg-[var(--color-bg-secondary)]"><span class="track-number" data-testid="header-track-number" role="button" title="Sort by track number"> # <!--v-if--><!--v-if--></span><span class="title-artist" data-testid="header-title" role="button" title="Sort by title"> Title <br data-testid="Icon" icon="[object Object]" class="text-highlight"><!--v-if--></span><span class="album" data-testid="header-album" role="button" title="Sort by album"> Album <!--v-if--><!--v-if--></span>
+  <div class="sortable song-list-header flex z-[2] bg-k-bg-secondary"><span class="track-number" data-testid="header-track-number" role="button" title="Sort by track number"> # <!--v-if--><!--v-if--></span><span class="title-artist" data-testid="header-title" role="button" title="Sort by title"> Title <br data-testid="Icon" icon="[object Object]" class="text-k-highlight"><!--v-if--></span><span class="album" data-testid="header-album" role="button" title="Sort by album"> Album <!--v-if--><!--v-if--></span>
     <!--v-if--><span class="time" data-testid="header-length" role="button" title="Sort by song duration"> Time <!--v-if--><!--v-if--></span><span class="extra"><br data-testid="song-list-sorter" field="title" order="asc"></span>
   </div><br data-testid="virtual-scroller" item-height="64" items="[object Object],[object Object],[object Object],[object Object],[object Object]">
 </div>

resources/assets/js/components/song/__snapshots__/SongListItem.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<article data-v-9a89d9b9="" class="playing song-item !tw-max-w-full tw-h-[64px] tw-flex tw-items-center tw-transition-[background-color,_box-shadow] tw-ease-in-out tw-duration-200 focus:tw-rounded-md focus focus-within:tw-rounded-md focus:tw-ring-inset focus:tw-ring-1 focus:!tw-ring-[var(--color-accent)] focus-within:tw-ring-inset focus-within:tw-ring-1 focus-within:!tw-ring-[var(--color-accent)] hover:tw-bg-white/5 hover:tw-ring-inset hover:tw-ring-1 hover:tw-ring-white/10 hover:tw-rounded-md" data-testid="song-item" tabindex="0"><span data-v-9a89d9b9="" class="track-number"><i data-v-47e95701="" data-v-9a89d9b9="" class="tw-relative tw-flex tw-gap-1 tw-content-between tw-w-[13px] tw-aspect-square"><span data-v-47e95701=""></span><span data-v-47e95701=""></span><span data-v-47e95701=""></span></i></span><span data-v-9a89d9b9="" class="thumbnail"><div data-v-a2b2e00f="" data-v-9a89d9b9="" style="background-image: url(undefined/resources/assets/img/covers/default.svg);" class="cover tw-w-[48px] tw-min-w-[48px] tw-aspect-square tw-bg-cover tw-relative tw-rounded tw-overflow-hidden tw-flex tw-items-center tw-justify-center before:tw-absolute before:tw-w-full before:tw-h-full before:tw-pointer-events-none before:tw-opacity-0 before:tw-z-[1] before:tw-left-0 before:tw-top-0 before:tw-bg-black"><img data-v-a2b2e00f="" alt="Test Album" src="https://example.com/cover.jpg" class="tw-w-full tw-h-full tw-object-cover tw-absolute tw-left-0 tw-top-0 tw-pointer-events-none" loading="lazy"><a data-v-a2b2e00f="" title="Pause" class="control tw-w-7 tw-h-7 tw-text-base tw-z-[1] tw-hidden tw-text-[color:var(--color-text-primary)] tw-duration-300 tw-justify-center tw-items-center tw-rounded-full tw-bg-black/50 tw-pl-0.5" role="button"><br data-v-a2b2e00f="" data-testid="Icon" icon="[object Object]" class="text-highlight"></a></div></span><span data-v-9a89d9b9="" class="title-artist tw-flex tw-flex-col tw-gap-2 tw-overflow-hidden"><span data-v-9a89d9b9="" class="title text-primary !tw-flex tw-gap-2 tw-items-center"><!--v-if--> Test Song</span><span data-v-9a89d9b9="" class="artist">Test Artist</span></span><span data-v-9a89d9b9="" class="album">Test Album</span>
+<article data-v-9a89d9b9="" class="playing song-item text-k-text-secondary border-b border-k-border !max-w-full h-[64px] flex items-center transition-[background-color,_box-shadow] ease-in-out duration-200 focus:rounded-md focus focus-within:rounded-md focus:ring-inset focus:ring-1 focus:!ring-k-accent focus-within:ring-inset focus-within:ring-1 focus-within:!ring-k-accent hover:bg-white/5 hover:ring-inset hover:ring-1 hover:ring-white/10 hover:rounded-md" data-testid="song-item" tabindex="0"><span data-v-9a89d9b9="" class="track-number"><i data-v-47e95701="" data-v-9a89d9b9="" class="relative flex gap-1 content-between w-[13px] aspect-square"><span data-v-47e95701=""></span><span data-v-47e95701=""></span><span data-v-47e95701=""></span></i></span><span data-v-9a89d9b9="" class="thumbnail"><div data-v-9a89d9b9="" style="background-image: url(undefined/resources/assets/img/covers/default.svg);" class="song-thumbnail group w-[48px] min-w-[48px] aspect-square bg-cover relative rounded overflow-hidden flex items-center justify-center before:absolute before:w-full before:h-full before:pointer-events-none before:z-[1] before:left-0 before:top-0 before:bg-black before:opacity-0 hover:before:opacity-70"><img alt="Test Album" src="https://example.com/cover.jpg" class="w-full h-full object-cover absolute left-0 top-0 pointer-events-none" loading="lazy"><a title="Pause" class="w-7 h-7 text-base z-[1] text-k-text-primary duration-300 justify-center items-center rounded-full bg-black/50 pl-0.5 flex opacity-0 group-hover:opacity-100" role="button"><br data-testid="Icon" icon="[object Object]" class="text-k-highlight"></a></div></span><span data-v-9a89d9b9="" class="title-artist flex flex-col gap-2 overflow-hidden"><span data-v-9a89d9b9="" class="title text-k-text-primary !flex gap-2 items-center"><!--v-if--> Test Song</span><span data-v-9a89d9b9="" class="artist">Test Artist</span></span><span data-v-9a89d9b9="" class="album">Test Album</span>
-  <!--v-if--><span data-v-9a89d9b9="" class="time">16:40</span><span data-v-9a89d9b9="" class="extra"><button data-v-9a89d9b9="" class="tw-transition-[color] tw-duration-200 tw-ease-in-out tw-text-[var(--color-text-secondary)] hover:tw-text-[var(--color-text-primary)]" type="button" title="Unlike Test Song by Test Artist"><br data-testid="Icon" icon="[object Object]"></button></span>
+  <!--v-if--><span data-v-9a89d9b9="" class="time">16:40</span><span data-v-9a89d9b9="" class="extra"><button data-v-9a89d9b9="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary" type="button" title="Unlike Test Song by Test Artist"><br data-testid="Icon" icon="[object Object]"></button></span>
 </article>
 `;

resources/assets/js/components/ui/__snapshots__/AlbumArtOverlay.spec.ts.snap

@@ -1,5 +1,5 @@
 // Vitest Snapshot v1
 
-exports[`displays nothing if fetching fails 1`] = `<div style="background-image: none;" class="tw-pointer-events-none tw-fixed tw-z-[1000] tw-overflow-hidden tw-opacity-10 tw-bg-cover tw-bg-center tw-top-0 tw-left-0 tw-h-full tw-w-full" data-testid="album-art-overlay"></div>`;
+exports[`displays nothing if fetching fails 1`] = `<div style="background-image: none;" class="pointer-events-none fixed z-[1000] overflow-hidden opacity-10 bg-cover bg-center top-0 left-0 h-full w-full" data-testid="album-art-overlay"></div>`;
 
-exports[`fetches and displays the album thumbnail 1`] = `<div style="background-image: url(http://test/thumb.jpg);" class="tw-pointer-events-none tw-fixed tw-z-[1000] tw-overflow-hidden tw-opacity-10 tw-bg-cover tw-bg-center tw-top-0 tw-left-0 tw-h-full tw-w-full" data-testid="album-art-overlay"></div>`;
+exports[`fetches and displays the album thumbnail 1`] = `<div style="background-image: url(http://test/thumb.jpg);" class="pointer-events-none fixed z-[1000] overflow-hidden opacity-10 bg-cover bg-center top-0 left-0 h-full w-full" data-testid="album-art-overlay"></div>`;

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="tw-rounded tw-px-2 tw-py-0 tw-bg-white/10 tw-h-6 tw-flex tw-items-center" 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">
+<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">
     <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>
 `;

resources/assets/js/components/ui/__snapshots__/ArtistAlbumThumbnail.spec.ts.snap

@@ -1,5 +1,5 @@
 // Vitest Snapshot v1
 
-exports[`renders for album 1`] = `<article data-v-a14c1d10="" class="cover tw-relative tw-w-full tw-aspect-square tw-bg-no-repeat tw-bg-cover tw-bg-center tw-overflow-hidden tw-rounded-md after:tw-block after:tw-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="https://test/album.jpg" class="tw-w-full tw-h-full tw-object-cover tw-absolute tw-left-0 tw-top-0 tw-pointer-events-none before:tw-absolute before:tw-w-full before:tw-h-full before:tw-opacity-0 before:tw-z-[1] before-tw-top-0" loading="lazy"><a data-v-a14c1d10="" class="control control-play tw-h-full tw-w-full tw-absolute tw-flex tw-justify-center tw-items-center" role="button"><span data-v-a14c1d10="" class="tw-hidden">Play all songs in the album IV</span><span data-v-a14c1d10="" class="icon tw-opacity-0 tw-w-1/2 tw-h-1/2 tw-flex tw-justify-center tw-items-center tw-pointer-events-none tw-pl-[4%] tw-rounded-full after:tw-w-full after:tw-h-full"></span></a></article>`;
+exports[`renders for album 1`] = `<div data-v-a14c1d10="" 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="https://test/album.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 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>`;
 
-exports[`renders for artist 1`] = `<article data-v-a14c1d10="" class="cover tw-relative tw-w-full tw-aspect-square tw-bg-no-repeat tw-bg-cover tw-bg-center tw-overflow-hidden tw-rounded-md after:tw-block after:tw-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="https://test/blimp.jpg" class="tw-w-full tw-h-full tw-object-cover tw-absolute tw-left-0 tw-top-0 tw-pointer-events-none before:tw-absolute before:tw-w-full before:tw-h-full before:tw-opacity-0 before:tw-z-[1] before-tw-top-0" loading="lazy"><a data-v-a14c1d10="" class="control control-play tw-h-full tw-w-full tw-absolute tw-flex tw-justify-center tw-items-center" role="button"><span data-v-a14c1d10="" class="tw-hidden">Play all songs by Led Zeppelin</span><span data-v-a14c1d10="" class="icon tw-opacity-0 tw-w-1/2 tw-h-1/2 tw-flex tw-justify-center tw-items-center tw-pointer-events-none tw-pl-[4%] tw-rounded-full after:tw-w-full after:tw-h-full"></span></a></article>`;
+exports[`renders for artist 1`] = `<div data-v-a14c1d10="" 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="https://test/blimp.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>`;

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:tw-hidden tw-block tw-fixed tw-right-[1.8rem] tw-z-20 tw-opacity-100 tw-duration-500 tw-transition-opacity tw-rounded-full tw-py-2 tw-px-4 tw-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="" 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>`;

resources/assets/js/components/ui/__snapshots__/LyricsPane.spec.ts.snap

@@ -2,8 +2,8 @@
 
 exports[`renders 1`] = `
 <article data-v-22adf296="">
-  <main data-v-22adf296="" class="tw-relative">
+  <main data-v-22adf296="" class="relative">
-    <div data-v-22adf296=""><pre data-v-22adf296="" class="tw-font-sans tw-whitespace-pre-wrap tw-leading-relaxed">Foo bar baz qux</pre><span data-v-22adf296="" class="magnifier-wrapper tw-opacity-0 tw-absolute tw-top-0 tw-right-0 hover:!tw-opacity-100"><span data-v-fcc3eddd="" data-v-22adf296="" class="tw-flex tw-transition-opacity tw-duration-200"><button data-v-fcc3eddd="" class="inset-when-pressed tw-rounded-l tw-border-r-0" title="Zoom out" type="button"><br data-v-fcc3eddd="" data-testid="Icon" icon="[object Object]"></button><button data-v-fcc3eddd="" class="inset-when-pressed tw-rounded-r" title="Zoom in" type="button"><br data-v-fcc3eddd="" data-testid="Icon" icon="[object Object]"></button></span></span></div>
+    <div data-v-22adf296=""><pre data-v-22adf296="" class="font-sans whitespace-pre-wrap leading-relaxed">Foo bar baz qux</pre><span data-v-22adf296="" class="magnifier-wrapper opacity-0 absolute top-0 right-0 hover:!opacity-100"><span data-v-fcc3eddd="" data-v-22adf296="" class="flex transition-opacity duration-200"><button data-v-fcc3eddd="" class="!rounded-l !border-r-0" title="Zoom out" type="button"><br data-v-fcc3eddd="" data-testid="Icon" icon="[object Object]"></button><button data-v-fcc3eddd="" class="!rounded-r" title="Zoom in" type="button"><br data-v-fcc3eddd="" data-testid="Icon" icon="[object Object]"></button></span></span></div>
     <!--v-if-->
   </main>
 </article>

resources/assets/js/components/ui/__snapshots__/Magnifier.spec.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`renders and functions 1`] = `<span data-v-fcc3eddd="" class="tw-flex tw-transition-opacity tw-duration-200"><button data-v-fcc3eddd="" class="inset-when-pressed tw-rounded-l tw-border-r-0" title="Zoom out" type="button"><br data-v-fcc3eddd="" data-testid="Icon" icon="[object Object]"></button><button data-v-fcc3eddd="" class="inset-when-pressed tw-rounded-r" title="Zoom in" type="button"><br data-v-fcc3eddd="" data-testid="Icon" icon="[object Object]"></button></span>`;
+exports[`renders and functions 1`] = `<span data-v-fcc3eddd="" class="flex transition-opacity duration-200"><button data-v-fcc3eddd="" class="!rounded-l !border-r-0" title="Zoom out" type="button"><br data-v-fcc3eddd="" data-testid="Icon" icon="[object Object]"></button><button data-v-fcc3eddd="" class="!rounded-r" title="Zoom in" type="button"><br data-v-fcc3eddd="" data-testid="Icon" icon="[object Object]"></button></span>`;

resources/assets/js/components/ui/__snapshots__/ProfileAvatar.spec.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`renders 1`] = `<a data-v-663f2e50="" class="view-profile" data-testid="view-profile-link" href="/#/profile" title="Profile and preferences"><img data-v-f835091e="" data-v-663f2e50="" alt="Avatar of John Doe" src="https://example.com/avatar.jpg" title="John Doe" width="40"></a>`;
+exports[`renders 1`] = `<a class="view-profile" data-testid="view-profile-link" href="/#/profile" title="Profile and preferences"><img alt="Avatar of John Doe" src="https://example.com/avatar.jpg" title="John Doe" class="rounded-full aspect-square bg-k-bg-primary object-cover p-0.5 border border-solid border-white/10 transition duration-200 ease-in-out hover:border-white/30 active:scale-95" width="40"></a>`;

resources/assets/js/components/ui/__snapshots__/ScreenEmptyState.spec.ts.snap

@@ -1,9 +1,9 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<article class="tw-relative tw-flex tw-place-content-center tw-place-items-center tw-flex-1 tw-text-white/50" data-testid="screen-empty-state">
+<article class="relative flex place-content-center place-items-center flex-1 text-white/50" data-testid="screen-empty-state">
-  <div class="md:tw-max-w-3/4 tw-px-6 tw-pt-0 tw-mx-auto tw-flex tw-flex-col tw-items-center"><span class="jumbo-icon tw-block tw-text-[6rem] tw-mb-4 tw-opacity-70"><i class="my-icon"></i></span>
+  <div class="md:max-w-3/4 px-6 pt-0 mx-auto flex flex-col items-center pb-k-header-height"><span class="jumbo-icon block text-[6rem] mb-4 opacity-70"><i class="my-icon"></i></span>
-    <div class="text tw-text-center tw-text-3xl tw-font-light tw-flex tw-flex-col tw-gap-2">Nothing here</div>
+    <div class="text text-center text-3xl font-light flex flex-col gap-2">Nothing here</div>
   </div>
 </article>
 `;

resources/assets/js/components/ui/__snapshots__/ScreenHeader.spec.ts.snap

@@ -1,11 +1,11 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<header data-v-5691beb5="" class="screen-header tw-min-h-0 md:tw-min-h-full tw-flex tw-items-end tw-flex-shrink-0 tw-relative tw-content-stretch tw-leading-normal tw-p-6 expanded">
+<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">
-  <aside data-v-5691beb5="" class="thumbnail-wrapper tw-hidden md:tw-block tw-overflow-hidden tw-w-0 tw-rounded-md"><img data-v-5691beb5-s="" src="https://placekitten.com/200/300"></aside>
+  <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="tw-flex tw-flex-1 tw-gap-5 tw-items-center tw-overflow-hidden">
+  <main data-v-5691beb5="" class="flex flex-1 gap-5 items-center overflow-hidden">
-    <div data-v-5691beb5="" class="tw-w-full tw-flex-1 tw-overflow-hidden">
+    <div data-v-5691beb5="" class="w-full flex-1 overflow-hidden">
-      <h1 data-v-5691beb5="" class="name tw-overflow-hidden tw-whitespace-nowrap tw-text-ellipsis tw-mr-4 tw-font-thin md:tw-font-bold tw-my-0 tw-leading-tight">This Header</h1><span data-v-5691beb5="" class="meta text-secondary tw-hidden tw-text-[0.9rem] tw-leading-loose"><p data-v-5691beb5-s="">Some meta</p></span>
+      <h1 data-v-5691beb5="" class="name overflow-hidden whitespace-nowrap text-ellipsis mr-4 font-thin md:font-bold my-0 leading-tight">This Header</h1><span data-v-5691beb5="" class="meta text-k-text-secondary hidden text-[0.9rem] leading-loose"><p data-v-5691beb5-s="">Some meta</p></span>
     </div>
     <nav data-v-5691beb5-s="">Some controls</nav>
   </main>

resources/assets/js/components/ui/__snapshots__/ViewModeSwitch.spec.ts.snap

@@ -1,5 +1,5 @@
 // Vitest Snapshot v1
 
-exports[`renders list mode 1`] = `<span data-v-d5772cd7="" class="tw-flex tw-w-[64px] tw-border tw-border-solid tw-border-white/20 tw-rounded-md tw-overflow-hidden tw-mt-[0.5rem] md:tw-mt-0"><label data-v-d5772cd7="" class="thumbnails" data-testid="view-mode-thumbnail" title="View as thumbnails"><input data-v-d5772cd7="" class="hidden" name="view-mode" type="radio" value="thumbnails"><br data-v-d5772cd7="" data-testid="Icon" icon="[object Object]"><span data-v-d5772cd7="" class="hidden">View as thumbnails</span></label><label data-v-d5772cd7="" class="active list" data-testid="view-mode-list" title="View as list"><input data-v-d5772cd7="" class="hidden" name="view-mode" type="radio" value="list"><br data-v-d5772cd7="" data-testid="Icon" icon="[object Object]"><span data-v-d5772cd7="" class="hidden">View as list</span></label></span>`;
+exports[`renders list mode 1`] = `<span data-v-d5772cd7="" class="flex w-[64px] border border-solid border-white/20 rounded-md overflow-hidden mt-[0.5rem] md:mt-0"><label data-v-d5772cd7="" class="thumbnails" data-testid="view-mode-thumbnail" title="View as thumbnails"><input data-v-d5772cd7="" class="hidden" name="view-mode" type="radio" value="thumbnails"><br data-v-d5772cd7="" data-testid="Icon" icon="[object Object]"><span data-v-d5772cd7="" class="hidden">View as thumbnails</span></label><label data-v-d5772cd7="" class="active list" data-testid="view-mode-list" title="View as list"><input data-v-d5772cd7="" class="hidden" name="view-mode" type="radio" value="list"><br data-v-d5772cd7="" data-testid="Icon" icon="[object Object]"><span data-v-d5772cd7="" class="hidden">View as list</span></label></span>`;
 
-exports[`renders thumbnails mode 1`] = `<span data-v-d5772cd7="" class="tw-flex tw-w-[64px] tw-border tw-border-solid tw-border-white/20 tw-rounded-md tw-overflow-hidden tw-mt-[0.5rem] md:tw-mt-0"><label data-v-d5772cd7="" class="active thumbnails" data-testid="view-mode-thumbnail" title="View as thumbnails"><input data-v-d5772cd7="" class="hidden" name="view-mode" type="radio" value="thumbnails"><br data-v-d5772cd7="" data-testid="Icon" icon="[object Object]"><span data-v-d5772cd7="" class="hidden">View as thumbnails</span></label><label data-v-d5772cd7="" class="list" data-testid="view-mode-list" title="View as list"><input data-v-d5772cd7="" class="hidden" name="view-mode" type="radio" value="list"><br data-v-d5772cd7="" data-testid="Icon" icon="[object Object]"><span data-v-d5772cd7="" class="hidden">View as list</span></label></span>`;
+exports[`renders thumbnails mode 1`] = `<span data-v-d5772cd7="" class="flex w-[64px] border border-solid border-white/20 rounded-md overflow-hidden mt-[0.5rem] md:mt-0"><label data-v-d5772cd7="" class="active thumbnails" data-testid="view-mode-thumbnail" title="View as thumbnails"><input data-v-d5772cd7="" class="hidden" name="view-mode" type="radio" value="thumbnails"><br data-v-d5772cd7="" data-testid="Icon" icon="[object Object]"><span data-v-d5772cd7="" class="hidden">View as thumbnails</span></label><label data-v-d5772cd7="" class="list" data-testid="view-mode-list" title="View as list"><input data-v-d5772cd7="" class="hidden" name="view-mode" type="radio" value="list"><br data-v-d5772cd7="" data-testid="Icon" icon="[object Object]"><span data-v-d5772cd7="" class="hidden">View as list</span></label></span>`;

resources/assets/js/components/ui/__snapshots__/VolumeSlider.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
-exports[`mutes and unmutes 1`] = `<span data-v-c7afcfc4="" id="volume" class="muted tw-hidden md:tw-flex tw-relative tw-items-center tw-gap-2"><button data-v-c7afcfc4="" class="tw-transition-[color] tw-duration-200 tw-ease-in-out tw-text-[var(--color-text-secondary)] hover:tw-text-[var(--color-text-primary)]" type="button" tabindex="0" title="Unmute"><br data-v-c7afcfc4="" data-testid="Icon" icon="[object Object]" fixed-width=""></button><button data-v-c7afcfc4="" class="tw-transition-[color] tw-duration-200 tw-ease-in-out tw-text-[var(--color-text-secondary)] hover:tw-text-[var(--color-text-primary)]" type="button" tabindex="0" title="Mute" style="display: none;"><br data-v-c7afcfc4="" data-testid="Icon" icon="[object Object]" fixed-width=""></button><input data-v-c7afcfc4="" class="plyr__volume !tw-w-[120px] before:tw-absolute before:tw-left-0 before:tw-right-0 before:tw-top-[-12px] before:tw-bottom-[-12px]" max="10" role="slider" step="0.1" title="Volume" type="range"></span>`;
+exports[`mutes and unmutes 1`] = `<span data-v-c7afcfc4="" id="volume" class="muted hidden md:flex relative items-center gap-2"><button data-v-c7afcfc4="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary" type="button" tabindex="0" title="Unmute"><br data-v-c7afcfc4="" data-testid="Icon" icon="[object Object]" fixed-width=""></button><button data-v-c7afcfc4="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary" type="button" tabindex="0" title="Mute" style="display: none;"><br data-v-c7afcfc4="" data-testid="Icon" icon="[object Object]" fixed-width=""></button><input data-v-c7afcfc4="" class="plyr__volume !w-[120px] before:absolute before:left-0 before:right-0 before:top-[-12px] before:bottom-[-12px]" max="10" role="slider" step="0.1" title="Volume" type="range"></span>`;
 
-exports[`mutes and unmutes 2`] = `<span data-v-c7afcfc4="" id="volume" class="muted tw-hidden md:tw-flex tw-relative tw-items-center tw-gap-2"><button data-v-c7afcfc4="" class="tw-transition-[color] tw-duration-200 tw-ease-in-out tw-text-[var(--color-text-secondary)] hover:tw-text-[var(--color-text-primary)]" type="button" tabindex="0" title="Unmute" style=""><br data-v-c7afcfc4="" data-testid="Icon" icon="[object Object]" fixed-width=""></button><button data-v-c7afcfc4="" class="tw-transition-[color] tw-duration-200 tw-ease-in-out tw-text-[var(--color-text-secondary)] hover:tw-text-[var(--color-text-primary)]" type="button" tabindex="0" title="Mute" style="display: none;"><br data-v-c7afcfc4="" data-testid="Icon" icon="[object Object]" fixed-width=""></button><input data-v-c7afcfc4="" class="plyr__volume !tw-w-[120px] before:tw-absolute before:tw-left-0 before:tw-right-0 before:tw-top-[-12px] before:tw-bottom-[-12px]" max="10" role="slider" step="0.1" title="Volume" type="range"></span>`;
+exports[`mutes and unmutes 2`] = `<span data-v-c7afcfc4="" id="volume" class="muted hidden md:flex relative items-center gap-2"><button data-v-c7afcfc4="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary" type="button" tabindex="0" title="Unmute" style=""><br data-v-c7afcfc4="" data-testid="Icon" icon="[object Object]" fixed-width=""></button><button data-v-c7afcfc4="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary" type="button" tabindex="0" title="Mute" style="display: none;"><br data-v-c7afcfc4="" data-testid="Icon" icon="[object Object]" fixed-width=""></button><input data-v-c7afcfc4="" class="plyr__volume !w-[120px] before:absolute before:left-0 before:right-0 before:top-[-12px] before:bottom-[-12px]" max="10" role="slider" step="0.1" title="Volume" type="range"></span>`;
 
-exports[`mutes and unmutes 3`] = `<span data-v-c7afcfc4="" id="volume" class="loud tw-hidden md:tw-flex tw-relative tw-items-center tw-gap-2"><button data-v-c7afcfc4="" class="tw-transition-[color] tw-duration-200 tw-ease-in-out tw-text-[var(--color-text-secondary)] hover:tw-text-[var(--color-text-primary)]" type="button" tabindex="0" title="Unmute" style="display: none;"><br data-v-c7afcfc4="" data-testid="Icon" icon="[object Object]" fixed-width=""></button><button data-v-c7afcfc4="" class="tw-transition-[color] tw-duration-200 tw-ease-in-out tw-text-[var(--color-text-secondary)] hover:tw-text-[var(--color-text-primary)]" type="button" tabindex="0" title="Mute" style=""><br data-v-c7afcfc4="" data-testid="Icon" icon="[object Object]" fixed-width=""></button><input data-v-c7afcfc4="" class="plyr__volume !tw-w-[120px] before:tw-absolute before:tw-left-0 before:tw-right-0 before:tw-top-[-12px] before:tw-bottom-[-12px]" max="10" role="slider" step="0.1" title="Volume" type="range"></span>`;
+exports[`mutes and unmutes 3`] = `<span data-v-c7afcfc4="" id="volume" class="loud hidden md:flex relative items-center gap-2"><button data-v-c7afcfc4="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary" type="button" tabindex="0" title="Unmute" style="display: none;"><br data-v-c7afcfc4="" data-testid="Icon" icon="[object Object]" fixed-width=""></button><button data-v-c7afcfc4="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary" type="button" tabindex="0" title="Mute" style=""><br data-v-c7afcfc4="" data-testid="Icon" icon="[object Object]" fixed-width=""></button><input data-v-c7afcfc4="" class="plyr__volume !w-[120px] before:absolute before:left-0 before:right-0 before:top-[-12px] before:bottom-[-12px]" max="10" role="slider" step="0.1" title="Volume" type="range"></span>`;

resources/assets/js/components/ui/form/__snapshots__/Btn.spec.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`renders 1`] = `<button data-v-8943c846="" class="inset-when-pressed tw-text-base tw-px-4 tw-py-2 tw-rounded tw-cursor-pointer">Click Me Nao</button>`;
+exports[`renders 1`] = `<button data-v-8943c846="" class="text-base text-k-text-primary bg-k-primary px-4 py-2.5 rounded cursor-pointer" type="button">Click Me Nao</button>`;

resources/assets/js/components/ui/form/__snapshots__/BtnGroup.spec.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`renders 1`] = `<span data-v-cf9b67d8="" class="btn-group tw-inline-block tw-relative tw-flex-nowrap"><button data-v-8943c846="" class="inset-when-pressed tw-text-base tw-px-4 tw-py-2 tw-rounded tw-cursor-pointer">Green</button><button data-v-8943c846="" class="inset-when-pressed tw-text-base tw-px-4 tw-py-2 tw-rounded tw-cursor-pointer">Orange</button><button data-v-8943c846="" class="inset-when-pressed tw-text-base tw-px-4 tw-py-2 tw-rounded tw-cursor-pointer">Blue</button></span>`;
+exports[`renders 1`] = `<span data-v-cf9b67d8="" class="btn-group inline-block relative flex-nowrap"><button data-v-8943c846="" class="text-base text-k-text-primary bg-k-primary px-4 py-2.5 rounded cursor-pointer" type="button">Green</button><button data-v-8943c846="" class="text-base text-k-text-primary bg-k-primary px-4 py-2.5 rounded cursor-pointer" type="button">Orange</button><button data-v-8943c846="" class="text-base text-k-text-primary bg-k-primary px-4 py-2.5 rounded cursor-pointer" type="button">Blue</button></span>`;

resources/assets/js/components/ui/form/__snapshots__/CheckBox.spec.ts.snap

@@ -1,5 +1,5 @@
 // Vitest Snapshot v1
 
-exports[`renders checked state 1`] = `<span data-v-bf5853cb="" class="checked tw-relative tw-align-bottom tw-inline-block tw-w-[32px] tw-h-[20px] tw-bg-gray-300 tw-rounded-full tw-shadow-inner tw-cursor-pointer tw-transition-all tw-duration-200 tw-ease-in-out tw-mr-2 after:tw-h-[16px] after:tw-aspect-square after:tw-absolute after:tw-bg-white after:tw-top-[2px] after:tw-left-[2px] after:tw-rounded-full after:tw-transition-left after:tw-duration-200 after:tw-ease-in-out"><input data-v-bf5853cb="" type="checkbox" class="tw-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 type="checkbox" class="hidden"></span>`;
 
-exports[`renders unchecked state 1`] = `<span data-v-bf5853cb="" class="tw-relative tw-align-bottom tw-inline-block tw-w-[32px] tw-h-[20px] tw-bg-gray-300 tw-rounded-full tw-shadow-inner tw-cursor-pointer tw-transition-all tw-duration-200 tw-ease-in-out tw-mr-2 after:tw-h-[16px] after:tw-aspect-square after:tw-absolute after:tw-bg-white after:tw-top-[2px] after:tw-left-[2px] after:tw-rounded-full after:tw-transition-left after:tw-duration-200 after:tw-ease-in-out"><input data-v-bf5853cb="" type="checkbox" class="tw-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 type="checkbox" class="hidden"></span>`;

resources/assets/js/components/ui/message-toaster/__snapshots__/MessageToast.spec.ts.snap

@@ -1,8 +1,8 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<article data-v-4706720e="" class="success tw-rounded-l-md tw-cursor-pointer tw-flex tw-items-stretch tw-opacity-90 tw-transition-transform tw-duration-300" title="Click to dismiss">
+<article data-v-4706720e="" class="success 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">
-  <aside data-v-4706720e="" class="tw-flex tw-items-center tw-px-3 tw-py-0 tw-bg-black/10"><br data-v-4706720e="" data-testid="Icon" icon="[object Object]" class="icon"><br data-v-4706720e="" data-testid="Icon" icon="[object Object]" class="icon-dismiss"></aside>
+  <aside data-v-4706720e="" class="flex items-center px-3 py-0 bg-black/10"><br data-v-4706720e="" data-testid="Icon" icon="[object Object]" class="group-hover:hidden"><br data-v-4706720e="" data-testid="Icon" icon="[object Object]" class="hidden group-hover:block"></aside>
-  <main data-v-4706720e="" class="tw-flex-1 tw-py-2 tw-pl-3 tw-pr-4"></main>
+  <main data-v-4706720e="" class="flex-1 py-2 pl-3 pr-4"></main>
 </article>
 `;

resources/assets/js/components/ui/upload/__snapshots__/UploadItem.spec.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`renders 1`] = `<div data-v-c7c7e2e2="" class="canceled upload-item tw-relative tw-rounded tw-min-h-[32px] tw-overflow-hidden" title=""><span data-v-c7c7e2e2="" style="width: 42%;" class="progress tw-absolute tw-h-full tw-top-0 tw-left-0 tw-z-0 tw-duration-200 tw-ease-out"></span><span data-v-c7c7e2e2="" class="details tw-z-10 tw-absolute tw-h-full tw-w-full tw-flex tw-items-center tw-content-between"><span data-v-c7c7e2e2="" class="name tw-px-4 tw-flex-1">Sample Track</span><span data-v-c7c7e2e2="" class="tw-flex tw-items-center"><!--v-if--><button data-v-8943c846="" data-v-c7c7e2e2="" class="inset-when-pressed tw-text-base tw-px-4 tw-py-2 tw-rounded tw-cursor-pointer !tw-px-3" icon-only="" title="Retry" transparent="" unrounded=""><br data-v-c7c7e2e2="" data-testid="Icon" icon="[object Object]"></button><button data-v-8943c846="" data-v-c7c7e2e2="" class="inset-when-pressed tw-text-base tw-px-4 tw-py-2 tw-rounded tw-cursor-pointer !tw-px-3" icon-only="" title="Remove" transparent="" unrounded=""><br data-v-c7c7e2e2="" data-testid="Icon" icon="[object Object]"></button></span></span></div>`;
+exports[`renders 1`] = `<div data-v-c7c7e2e2="" class="canceled upload-item relative rounded min-h-[32px] overflow-hidden bg-k-bg-secondary" title=""><span data-v-c7c7e2e2="" class="progress absolute h-full top-0 left-0 z-0 duration-200 ease-out bg-k-highlight"></span><span data-v-c7c7e2e2="" class="details z-10 absolute h-full w-full flex items-center content-between"><span data-v-c7c7e2e2="" class="name px-4 flex-1">Sample Track</span><span data-v-c7c7e2e2="" class="flex items-center"><!--v-if--><button data-v-8943c846="" data-v-c7c7e2e2="" class="text-base text-k-text-primary bg-k-primary px-4 py-2.5 rounded cursor-pointer !px-3" type="button" icon-only="" title="Retry" transparent="" unrounded=""><br data-v-c7c7e2e2="" data-testid="Icon" icon="[object Object]"></button><button data-v-8943c846="" data-v-c7c7e2e2="" class="text-base text-k-text-primary bg-k-primary px-4 py-2.5 rounded cursor-pointer !px-3" type="button" icon-only="" title="Remove" transparent="" unrounded=""><br data-v-c7c7e2e2="" data-testid="Icon" icon="[object Object]"></button></span></span></div>`;

resources/assets/js/components/ui/youtube/__snapshots__/YouTubeVideoItem.spec.ts.snap

@@ -1,10 +1,10 @@
 // Vitest Snapshot v1
 
 exports[`renders 1`] = `
-<a data-v-8c072ad7="" href="https://youtu.be/cLgJQ8Zj3AA" data-testid="youtube-search-result" class="tw-flex tw-gap-3" role="button"><img data-v-8c072ad7="" class="tw-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" 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">
-  <aside data-v-8c072ad7="" class="tw-space-y-1">
+  <aside data-v-8c072ad7="" class="space-y-1">
-    <h3 data-v-8c072ad7="" class="tw-text-lg">Guess what it is</h3>
+    <h3 data-v-8c072ad7="" class="text-lg">Guess what it is</h3>
-    <p data-v-8c072ad7="" class="tw-text-[0.9rem]">From the LA Opening Gala 2014: John Williams Celebration</p>
+    <p data-v-8c072ad7="" class="text-[0.9rem]">From the LA Opening Gala 2014: John Williams Celebration</p>
   </aside>
 </a>
 `;

resources/assets/js/components/user/AddUserForm.spec.ts

@@ -15,7 +15,7 @@ new class extends UnitTestCase {
 
       await this.type(screen.getByRole('textbox', { name: 'Name' }), 'John Doe')
       await this.type(screen.getByRole('textbox', { name: 'Email' }), 'john@doe.com')
-      await this.type(screen.getByLabelText('Password'), 'secret-password')
+      await this.type(screen.getByTitle('Password'), 'secret-password')
       await this.user.click(screen.getByRole('checkbox'))
       await this.user.click(screen.getByRole('button', { name: 'Save' }))
 

resources/assets/js/components/user/EditUserForm.spec.ts

@@ -25,7 +25,7 @@ new class extends UnitTestCase {
       })
 
       await this.type(screen.getByRole('textbox', { name: 'Name' }), 'Jane Doe')
-      await this.type(screen.getByLabelText('Password'), 'new-password-duck')
+      await this.type(screen.getByTitle('Password'), 'new-password-duck')
       await this.user.click(screen.getByRole('button', { name: 'Update' }))
 
       await waitFor(() => {

resources/assets/js/components/user/EditUserForm.vue

@@ -31,6 +31,7 @@
           autocomplete="new-password"
           name="password"
           placeholder="Leave blank for no changes"
+          title="Password"
           type="password"
         />
         <template #help>Min. 10 characters. Should be a mix of characters, numbers, and symbols.</template>

resources/assets/js/components/user/InviteUserForm.vue

@@ -42,7 +42,7 @@ const { showOverlay, hideOverlay } = useOverlay()
 const { toastSuccess } = useMessageToaster()
 const { showErrorDialog, showConfirmDialog } = useDialogBox()
 
-const emailsEl = ref<HTMLTextAreaElement>()
+const emailsEl = ref<InstanceType<typeof TextArea>>()
 const rawEmails = ref('')
 const isAdmin = ref(false)
 
@@ -64,14 +64,14 @@ const submit = async () => {
   })
 
   if (validEmails.length !== emailEntries.length) {
-    emailsEl.value!.setCustomValidity('One or some of the emails you entered are invalid.')
+    emailsEl.value!.el?.setCustomValidity('One or some of the emails you entered are invalid.')
-    emailsEl.value!.reportValidity()
+    emailsEl.value!.el?.reportValidity()
     return
   }
 
   if (validEmails.length === 0) {
-    emailsEl.value!.setCustomValidity('Please enter at least one email address.')
+    emailsEl.value!.el?.setCustomValidity('Please enter at least one email address.')
-    emailsEl.value!.reportValidity()
+    emailsEl.value!.el?.reportValidity()
     return
   }
 

resources/assets/js/services/authService.ts

@@ -60,7 +60,7 @@ export const authService = {
   requestResetPasswordLink: async (email: string) => await http.post('forgot-password', { email }),
 
   resetPassword: async (email: string, password: string, token: string) => {
-    await http.post('reset-password', { email, password, token })
+    return await http.post('reset-password', { email, password, token })
   },
 
   getOneTimeToken: async () => (await http.get<{ token: string }>('one-time-token')).token