refactor: rename Extra Drawer to Side Sheet (#1853)

cypress/integration/other-controls.spec.ts

@@ -13,11 +13,11 @@ context('Other Controls', () => {
   })
 
   it('toggles the info panel', () => {
-    cy.findByTestId('extra-drawer').should('be.visible')
-    cy.findByTestId('toggle-extra-drawer-btn').as('btn').click()
-    cy.findByTestId('extra-drawer').should('not.be.visible')
-    cy.findByTestId('toggle-extra-drawer-btn').as('btn').click()
-    cy.findByTestId('extra-drawer').should('be.visible')
+    cy.findByTestId('side-sheet').should('be.visible')
+    cy.findByTestId('toggle-side-sheet-btn').as('btn').click()
+    cy.findByTestId('side-sheet').should('not.be.visible')
+    cy.findByTestId('toggle-side-sheet-btn').as('btn').click()
+    cy.findByTestId('side-sheet').should('be.visible')
   })
 
   it('toggles the "sound bars" icon when a song is played/paused', () => {

resources/assets/css/partials/vars.pcss

@@ -21,7 +21,7 @@
 
   --header-height: auto;
   --footer-height: 84px;
-  --extra-drawer-width: 25rem;
+  --side-sheet-width: 25rem;
   --sidebar-width: 20rem;
 
   --color-love: #bf2043;
@@ -32,6 +32,6 @@
   @media screen and (max-width: 768px) {
     --header-height: 56px;
     --footer-height: 96px;
-    --extra-drawer-width: 100%;
+    --side-sheet-width: 100%;
   }
 }

resources/assets/js/components/layout/main-wrapper/index.vue

@@ -2,7 +2,7 @@
   <div class="relative flex flex-1 overflow-hidden">
     <SideBar />
     <MainContent />
-    <ExtraDrawer />
+    <SideSheet />
     <ModalWrapper />
   </div>
 </template>
@@ -10,9 +10,9 @@
 <script lang="ts" setup>
 import { defineAsyncComponent } from 'vue'
 
-import SideBar from '@/components/layout/main-wrapper/sidebar/Sidebar.vue'
 import MainContent from '@/components/layout/main-wrapper/MainContent.vue'
-import ExtraDrawer from '@/components/layout/main-wrapper/extra-drawer/ExtraDrawer.vue'
+import SideBar from '@/components/layout/main-wrapper/sidebar/Sidebar.vue'
+import SideSheet from '@/components/layout/main-wrapper/side-sheet/SideSheet.vue'
 
 const ModalWrapper = defineAsyncComponent(() => import('@/components/layout/ModalWrapper.vue'))
 </script>

resources/assets/js/components/layout/main-wrapper/side-sheet/AboutKoelButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <ExtraDrawerButton
+  <SideSheetButton
     v-koel-tooltip.left
     :title="shouldNotifyNewVersion ? 'New version available!' : 'About Koel'"
     @click.prevent="openAboutKoelModal"
@@ -10,7 +10,7 @@
       class="absolute w-[10px] aspect-square right-px top-px rounded-full bg-k-highlight"
       data-testid="new-version-indicator"
     />
-  </ExtraDrawerButton>
+  </SideSheetButton>
 </template>
 
 <script lang="ts" setup>
@@ -18,7 +18,7 @@ import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
 import { eventBus } from '@/utils'
 import { useNewVersionNotification } from '@/composables'
 
-import ExtraDrawerButton from '@/components/layout/main-wrapper/extra-drawer/ExtraDrawerButton.vue'
+import SideSheetButton from '@/components/layout/main-wrapper/side-sheet/SideSheetButton.vue'
 
 const { shouldNotifyNewVersion } = useNewVersionNotification()
 

resources/assets/js/components/layout/main-wrapper/side-sheet/LogoutButton.vue

@@ -1,14 +1,14 @@
 <template>
-  <ExtraDrawerButton v-koel-tooltip.left title="Log out" @click.prevent="logout">
+  <SideSheetButton v-koel-tooltip.left title="Log out" @click.prevent="logout">
     <Icon :icon="faArrowRightFromBracket" />
-  </ExtraDrawerButton>
+  </SideSheetButton>
 </template>
 
 <script lang="ts" setup>
 import { faArrowRightFromBracket } from '@fortawesome/free-solid-svg-icons'
 import { eventBus } from '@/utils'
 
-import ExtraDrawerButton from '@/components/layout/main-wrapper/extra-drawer/ExtraDrawerButton.vue'
+import SideSheetButton from '@/components/layout/main-wrapper/side-sheet/SideSheetButton.vue'
 
 const logout = () => eventBus.emit('LOG_OUT')
 </script>

resources/assets/js/components/layout/main-wrapper/side-sheet/SideSheet.spec.ts

@@ -9,7 +9,7 @@ import { albumStore, artistStore, commonStore, preferenceStore } from '@/stores'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import { CurrentPlayableKey } from '@/symbols'
 import { eventBus } from '@/utils'
-import ExtraDrawer from './ExtraDrawer.vue'
+import Component from './SideSheet.vue'
 
 new class extends UnitTestCase {
   protected test () {
@@ -18,7 +18,7 @@ new class extends UnitTestCase {
     it('sets the active tab to the preference', async () => {
       preferenceStore.active_extra_panel_tab = 'YouTube'
       this.renderComponent(ref(factory('song')))
-      const tab = screen.getByTestId<HTMLElement>('extra-drawer-youtube')
+      const tab = screen.getByTestId<HTMLElement>('side-sheet-youtube')
 
       expect(tab.style.display).toBe('none')
       await this.tick()
@@ -75,7 +75,7 @@ new class extends UnitTestCase {
     const album = factory('album')
     const resolveAlbumMock = this.mock(albumStore, 'resolve').mockResolvedValue(album)
 
-    const rendered = this.render(ExtraDrawer, {
+    const rendered = this.render(Component, {
       global: {
         stubs: {
           ProfileAvatar: this.stub(),

resources/assets/js/components/layout/main-wrapper/side-sheet/SideSheet.vue

@@ -10,10 +10,10 @@
       py-0 px-6 h-k-header-height"
     >
       <div class="btn-group">
-        <ExtraDrawerButton class="md:hidden" @click.prevent="expandSidebar">
+        <SideSheetButton class="md:hidden" @click.prevent="expandSidebar">
           <Icon :icon="faBars" fixed-width />
-        </ExtraDrawerButton>
-        <ExtraDrawerTabHeader v-if="songPlaying" v-model="activeTab" />
+        </SideSheetButton>
+        <SideSheetTabHeader v-if="songPlaying" v-model="activeTab" />
       </div>
 
       <div class="btn-group">
@@ -60,7 +60,7 @@
         v-show="activeTab === 'YouTube'"
         id="extraPanelYouTube"
         aria-labelledby="extraTabYouTube"
-        data-testid="extra-drawer-youtube"
+        data-testid="side-sheet-youtube"
         role="tabpanel"
         tabindex="0"
       >
@@ -81,15 +81,15 @@ import { eventBus, isSong, requireInjection } from '@/utils'
 import { CurrentPlayableKey } from '@/symbols'
 
 import ProfileAvatar from '@/components/ui/ProfileAvatar.vue'
-import AboutKoelButton from '@/components/layout/main-wrapper/extra-drawer/AboutKoelButton.vue'
-import LogoutButton from '@/components/layout/main-wrapper/extra-drawer/LogoutButton.vue'
-import ExtraDrawerButton from '@/components/layout/main-wrapper/extra-drawer/ExtraDrawerButton.vue'
+import AboutKoelButton from '@/components/layout/main-wrapper/side-sheet/AboutKoelButton.vue'
+import LogoutButton from '@/components/layout/main-wrapper/side-sheet/LogoutButton.vue'
+import SideSheetButton from '@/components/layout/main-wrapper/side-sheet/SideSheetButton.vue'
 
 const LyricsPane = defineAsyncComponent(() => import('@/components/ui/LyricsPane.vue'))
 const ArtistInfo = defineAsyncComponent(() => import('@/components/artist/ArtistInfo.vue'))
 const AlbumInfo = defineAsyncComponent(() => import('@/components/album/AlbumInfo.vue'))
 const YouTubeVideoList = defineAsyncComponent(() => import('@/components/ui/youtube/YouTubeVideoList.vue'))
-const ExtraDrawerTabHeader = defineAsyncComponent(() => import('./ExtraDrawerTabHeader.vue'))
+const SideSheetTabHeader = defineAsyncComponent(() => import('./SideSheetTabHeader.vue'))
 
 const { useYouTube } = useThirdPartyServices()
 
@@ -152,7 +152,7 @@ aside {
 }
 
 .panes {
-  @apply no-hover:overflow-y-auto w-k-extra-drawer-width;
+  @apply no-hover:overflow-y-auto w-k-side-sheet-width;
 
   box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
 

resources/assets/js/components/layout/main-wrapper/side-sheet/SideSheetTabHeader.spec.ts

@@ -2,13 +2,13 @@ import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import { commonStore } from '@/stores'
 import { screen } from '@testing-library/vue'
-import ExtraDrawerTabHeader from './ExtraDrawerTabHeader.vue'
+import Component from './SideSheetTabHeader.vue'
 
 new class extends UnitTestCase {
   protected test () {
     it('renders tab headers', () => {
       commonStore.state.uses_you_tube = false
-      this.render(ExtraDrawerTabHeader)
+      this.render(Component)
 
       ;['Lyrics', 'Artist information', 'Album information'].forEach(name => screen.getByRole('button', { name }))
       expect(screen.queryByRole('button', { name: 'Related YouTube videos' })).toBeNull()
@@ -16,13 +16,13 @@ new class extends UnitTestCase {
 
     it('has a YouTube tab header if using YouTube', () => {
       commonStore.state.uses_you_tube = true
-      this.render(ExtraDrawerTabHeader)
+      this.render(Component)
 
       screen.getByRole('button', { name: 'Related YouTube videos' })
     })
 
     it('emits the selected tab value', async () => {
-      const { emitted } = this.render(ExtraDrawerTabHeader)
+      const { emitted } = this.render(Component)
 
       await this.user.click(screen.getByRole('button', { name: 'Lyrics' }))
 

resources/assets/js/components/layout/main-wrapper/side-sheet/SideSheetTabHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <ExtraDrawerButton
+  <SideSheetButton
     id="extraTabLyrics"
     v-koel-tooltip.left
     :class="{ active: value === 'Lyrics' }"
@@ -7,8 +7,8 @@
     @click.prevent="toggleTab('Lyrics')"
   >
     <Icon :icon="faFeather" fixed-width />
-  </ExtraDrawerButton>
-  <ExtraDrawerButton
+  </SideSheetButton>
+  <SideSheetButton
     id="extraTabArtist"
     v-koel-tooltip.left
     :class="{ active: value === 'Artist' }"
@@ -16,8 +16,8 @@
     @click.prevent="toggleTab('Artist')"
   >
     <MicVocalIcon size="18" />
-  </ExtraDrawerButton>
-  <ExtraDrawerButton
+  </SideSheetButton>
+  <SideSheetButton
     id="extraTabAlbum"
     v-koel-tooltip.left
     :class="{ active: value === 'Album' }"
@@ -25,8 +25,8 @@
     @click.prevent="toggleTab('Album')"
   >
     <Icon :icon="faCompactDisc" fixed-width />
-  </ExtraDrawerButton>
-  <ExtraDrawerButton
+  </SideSheetButton>
+  <SideSheetButton
     v-if="useYouTube"
     id="extraTabYouTube"
     v-koel-tooltip.left
@@ -35,7 +35,7 @@
     @click.prevent="toggleTab('YouTube')"
   >
     <Icon :icon="faYoutube" fixed-width />
-  </ExtraDrawerButton>
+  </SideSheetButton>
 </template>
 
 <script lang="ts" setup>
@@ -45,7 +45,7 @@ import { faYoutube } from '@fortawesome/free-brands-svg-icons'
 import { computed } from 'vue'
 import { useThirdPartyServices } from '@/composables'
 
-import ExtraDrawerButton from '@/components/layout/main-wrapper/extra-drawer/ExtraDrawerButton.vue'
+import SideSheetButton from '@/components/layout/main-wrapper/side-sheet/SideSheetButton.vue'
 
 const props = withDefaults(defineProps<{ modelValue?: ExtraPanelTab | null }>(), {
   modelValue: null,

resources/assets/js/components/layout/main-wrapper/side-sheet/__snapshots__/SideSheet.spec.ts.snap

@@ -0,0 +1,15 @@
+// Vitest Snapshot v1
+
+exports[`renders without a current song 1`] = `
+<aside data-v-9fd7deea="" 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-9fd7deea="" 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-9fd7deea="" class="btn-group"><button data-v-7447146c="" data-v-9fd7deea="" 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 md:hidden" type="button"><br data-v-9fd7deea="" data-testid="Icon" icon="[object Object]" fixed-width=""></button>
+      <!--v-if-->
+    </div>
+    <div data-v-9fd7deea="" class="btn-group"><button data-v-7447146c="" data-v-9fd7deea="" 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-7447146c="" data-v-9fd7deea="" 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-9fd7deea="" data-testid="stub"></div>
+  </div>
+  <!--v-if-->
+</aside>
+`;

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

@@ -7,9 +7,9 @@
   >
     <section class="btn-collapse-block flex md:hidden items-center border-b border-b-white/5 h-k-header-height px-6">
       <div class="bg-white/5 rounded-full">
-        <ExtraDrawerButton @click.prevent="collapseSidebar">
+        <SideSheetButton @click.prevent="collapseSidebar">
           <Icon :icon="faTimes" fixed-width />
-        </ExtraDrawerButton>
+        </SideSheetButton>
       </div>
     </section>
 
@@ -43,9 +43,9 @@ import { eventBus } from '@/utils'
 import { useAuthorization, useKoelPlus, useLocalStorage, useRouter, useUpload } from '@/composables'
 
 import BtnUpgradeToPlus from '@/components/koel-plus/BtnUpgradeToPlus.vue'
-import ExtraDrawerButton from '@/components/layout/main-wrapper/extra-drawer/ExtraDrawerButton.vue'
 import HomeButton from '@/components/layout/main-wrapper/sidebar/HomeButton.vue'
 import SearchForm from '@/components/ui/SearchForm.vue'
+import SideSheetButton from '@/components/layout/main-wrapper/side-sheet/SideSheetButton.vue'
 import SidebarManageSection from './SidebarManageSection.vue'
 import SidebarPlaylistsSection from './SidebarPlaylistsSection.vue'
 import SidebarToggleButton from '@/components/layout/main-wrapper/sidebar/SidebarToggleButton.vue'

resources/assets/js/components/ui/SidebarMenuToggleButton.vue

@@ -1,8 +1,8 @@
 <template>
-  <ExtraDrawerButton class="block md:hidden" @click.prevent="toggleSidebar">
+  <SideSheetButton class="block md:hidden" @click.prevent="toggleSidebar">
     <Icon v-if="sidebarExpanded" :icon="faTimes" fixed-width />
     <Icon v-else :icon="faBars" fixed-width />
-  </ExtraDrawerButton>
+  </SideSheetButton>
 </template>
 
 <script lang="ts" setup>
@@ -10,7 +10,7 @@ import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { ref } from 'vue'
 import { eventBus } from '@/utils'
 
-import ExtraDrawerButton from '@/components/layout/main-wrapper/extra-drawer/ExtraDrawerButton.vue'
+import SideSheetButton from '@/components/layout/main-wrapper/side-sheet/SideSheetButton.vue'
 
 const sidebarExpanded = ref(false)
 

tailwind.config.js

@@ -25,7 +25,7 @@ export default {
         'k-header-height': 'var(--header-height)',
         'k-footer-height': 'var(--footer-height)',
         'k-sidebar-width': 'var(--sidebar-width)',
-        'k-extra-drawer-width': 'var(--extra-drawer-width)',
+        'k-side-sheet-width': 'var(--side-sheet-width)',
       },
       screens: {
         'no-hover': {'raw': '(hover: none)'},