feat: persist active extra panel's tab (#1599)

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

@@ -2,7 +2,7 @@ import { ref, Ref } from 'vue'
 import { expect, it } from 'vitest'
 import { fireEvent, waitFor } from '@testing-library/vue'
 import factory from '@/__tests__/factory'
-import { albumStore, artistStore, commonStore } from '@/stores'
+import { albumStore, artistStore, commonStore, preferenceStore } from '@/stores'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import { CurrentSongKey } from '@/symbols'
 import ExtraPanel from './ExtraPanel.vue'
@@ -30,6 +30,16 @@ new class extends UnitTestCase {
   protected test () {
     it('renders without a current song', () => expect(this.renderComponent().html()).toMatchSnapshot())
 
+    it('sets the active tab to the preference', async () => {
+      preferenceStore.activeExtraPanelTab = 'YouTube'
+      const { getByTestId } = this.renderComponent(ref(factory<Song>('song')))
+      const tab = getByTestId<HTMLElement>('extra-panel-youtube')
+
+      expect(tab.style.display).toBe('none')
+      await this.tick()
+      expect(tab.style.display).toBe('')
+    })
+
     it('fetches info for the current song', async () => {
       commonStore.state.use_you_tube = true
       const artist = factory<Artist>('artist')

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

@@ -1,9 +1,9 @@
 <template>
-  <div id="extraPanel" :class="{ 'showing-pane': selectedTab }">
+  <div id="extraPanel" :class="{ 'showing-pane': activeTab }">
     <div class="controls">
       <div class="top">
         <SidebarMenuToggleButton class="burger"/>
-        <ExtraPanelTabHeader v-if="song" v-model="selectedTab"/>
+        <ExtraPanelTabHeader v-if="song" v-model="activeTab"/>
       </div>
 
       <div class="bottom">
@@ -25,9 +25,9 @@
       </div>
     </div>
 
-    <div class="panes" v-if="song" v-show="selectedTab">
+    <div class="panes" v-if="song" v-show="activeTab">
       <div
-        v-show="selectedTab === 'Lyrics'"
+        v-show="activeTab === 'Lyrics'"
         id="extraPanelLyrics"
         aria-labelledby="extraTabLyrics"
         role="tabpanel"
@@ -37,7 +37,7 @@
       </div>
 
       <div
-        v-show="selectedTab === 'Artist'"
+        v-show="activeTab === 'Artist'"
         id="extraPanelArtist"
         aria-labelledby="extraTabArtist"
         role="tabpanel"
@@ -48,7 +48,7 @@
       </div>
 
       <div
-        v-show="selectedTab === 'Album'"
+        v-show="activeTab === 'Album'"
         id="extraPanelAlbum"
         aria-labelledby="extraTabAlbum"
         role="tabpanel"
@@ -59,7 +59,8 @@
       </div>
 
       <div
-        v-show="selectedTab === 'YouTube'"
+        v-show="activeTab === 'YouTube'"
+        data-testid="extra-panel-youtube"
         id="extraPanelYouTube"
         aria-labelledby="extraTabYouTube"
         role="tabpanel"
@@ -74,8 +75,8 @@
 <script lang="ts" setup>
 import isMobile from 'ismobilejs'
 import { faArrowRightFromBracket, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
-import { defineAsyncComponent, ref, watch } from 'vue'
-import { albumStore, artistStore } from '@/stores'
+import { defineAsyncComponent, onMounted, ref, watch } from 'vue'
+import { albumStore, artistStore, preferenceStore } from '@/stores'
 import { useAuthorization, useNewVersionNotification, useThirdPartyServices } from '@/composables'
 import { eventBus, logger, requireInjection } from '@/utils'
 import { CurrentSongKey } from '@/symbols'
@@ -91,14 +92,16 @@ const ExtraPanelTabHeader = defineAsyncComponent(() => import('@/components/ui/E
 
 const { currentUser } = useAuthorization()
 const { useYouTube } = useThirdPartyServices()
+const { shouldNotifyNewVersion } = useNewVersionNotification()
 
 const song = requireInjection(CurrentSongKey, ref(null))
-const selectedTab = ref<ExtraPanelTab | undefined>(undefined)
+const activeTab = ref<ExtraPanelTab | null>(null)
 
 const artist = ref<Artist | null>(null)
 const album = ref<Album | null>(null)
 
 watch(song, song => song && fetchSongInfo(song))
+watch(activeTab, tab => (preferenceStore.activeExtraPanelTab = tab))
 
 const fetchSongInfo = async (_song: Song) => {
   song.value = _song
@@ -113,11 +116,11 @@ const fetchSongInfo = async (_song: Song) => {
   }
 }
 
-const { shouldNotifyNewVersion } = useNewVersionNotification()
-
 const openAboutKoelModal = () => eventBus.emit('MODAL_SHOW_ABOUT_KOEL')
-const onProfileLinkClick = () => isMobile.any && (selectedTab.value = undefined)
+const onProfileLinkClick = () => isMobile.any && (activeTab.value = null)
 const logout = () => eventBus.emit('LOG_OUT')
+
+onMounted(() => isMobile.any || (activeTab.value = preferenceStore.activeExtraPanelTab))
 </script>
 
 <style lang="scss" scoped>

resources/assets/js/stores/preferenceStore.ts

@@ -15,6 +15,7 @@ interface Preferences extends Record<string, any> {
   lyricsZoomLevel: number | null
   theme?: Theme['id'] | null
   visualizer?: Visualizer['id'] | null
+  activeExtraPanelTab: ExtraPanelTab | null
 }
 
 const preferenceStore = {
@@ -39,7 +40,8 @@ const preferenceStore = {
     showAlbumArtOverlay: true,
     lyricsZoomLevel: 1,
     theme: null,
-    visualizer: 'default'
+    visualizer: 'default',
+    activeExtraPanelTab: null
   }),
 
   init (user: User): void {