Use UI store values for setting the layout

src/components/VAudioDetails/VRelatedAudio.vue

@@ -23,15 +23,17 @@
   </aside>
 </template>
 
-<script>
-import { computed } from '@nuxtjs/composition-api'
+<script lang="ts">
+import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
-import { isMinScreen } from '~/composables/use-media-query'
+import { useUiStore } from '~/stores/ui'
+
+import type { FetchState } from '~/models/fetch-state'
 
 import LoadingIcon from '~/components/LoadingIcon.vue'
 import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
 
-export default {
+export default defineComponent({
   name: 'VRelatedAudio',
   components: { VAudioTrack, LoadingIcon },
   props: {
@@ -40,20 +42,16 @@ export default {
       required: true,
     },
     fetchState: {
-      type: Object,
+      type: Object as PropType<FetchState>,
       required: true,
     },
   },
-  /**
-   * Fetches related audios on `audioId` change
-   * @return {{audioTrackSize: import('@nuxtjs/composition-api').ComputedRef<"l" | "s"> }}
-   */
   setup() {
-    const isMinScreenMd = isMinScreen('md', { shouldPassInSSR: true })
-    const audioTrackSize = computed(() => {
-      return isMinScreenMd.value ? 'l' : 's'
-    })
+    const uiStore = useUiStore()
+
+    const audioTrackSize = computed(() => (uiStore.isDesktopLayout ? 'l' : 's'))
+
     return { audioTrackSize }
   },
-}
+})
 </script>

src/components/VContentSwitcherOld/VMobileMenuModal.vue

@@ -58,13 +58,13 @@ export default defineComponent({
     },
   },
   setup(_, { emit }) {
-    const content = useSearchType()
-    const pages = usePages()
-
+    const nodeRef = ref<InstanceType<typeof VModal>>(null)
     const searchTypesRef = ref<InstanceType<typeof VSearchTypesOld> | null>(
       null
     )
-    const nodeRef = ref(null)
+
+    const content = useSearchType()
+    const pages = usePages()
 
     const initialFocusElement = computed(() => {
       return searchTypesRef.value?.$el
@@ -76,13 +76,16 @@ export default defineComponent({
 
     const selectItem = (item: SupportedSearchType) => emit('select', item)
 
+    const closeMenu = () => nodeRef.value?.close()
+
     return {
       pages,
       content,
       nodeRef,
       searchTypesRef,
 
       selectItem,
+      closeMenu,
       initialFocusElement,
     }
   },

src/components/VContentSwitcherOld/VSearchTypeButtonOld.vue

@@ -38,9 +38,11 @@ import {
 
 import { ALL_MEDIA, type SearchType } from '~/constants/media'
 import type { ButtonVariant } from '~/types/button'
+
 import useSearchType from '~/composables/use-search-type'
+import { useUiStore } from '~/stores/ui'
+
 import { useI18n } from '~/composables/use-i18n'
-import { isMinScreen } from '~/composables/use-media-query'
 
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VButton from '~/components/VButton.vue'
@@ -66,12 +68,16 @@ export default defineComponent({
   },
   setup(props) {
     const i18n = useI18n()
-    const isHeaderScrolled = inject('isHeaderScrolled', ref(null))
-    const isMinScreenMd = isMinScreen('md', { shouldPassInSSR: true })
+
+    const uiStore = useUiStore()
+
+    const isHeaderScrolled = inject('isHeaderScrolled', ref(false))
+
+    const isDesktopLayout = computed(() => uiStore.isDesktopLayout)
 
     const { icons, activeType: activeItem } = useSearchType()
     const isIconButton = computed(
-      () => isHeaderScrolled?.value && !isMinScreenMd.value
+      () => isHeaderScrolled?.value && !isDesktopLayout.value
     )
     const sizeClasses = computed(() => {
       if (props.type === 'searchbar') {
@@ -91,7 +97,7 @@ export default defineComponent({
       if (props.type === 'searchbar') {
         return 'action-menu'
       } else {
-        return isMinScreenMd.value && !isHeaderScrolled?.value
+        return isDesktopLayout.value && !isHeaderScrolled?.value
           ? 'action-menu-bordered'
           : 'action-menu'
       }
@@ -107,12 +113,13 @@ export default defineComponent({
       buttonVariant,
       sizeClasses,
       buttonLabel,
-      caretDownIcon,
+
       isHeaderScrolled,
-      isMinScreenMd,
       isInSearchBar,
       isPressed,
+
       icon: computed(() => icons[activeItem.value]),
+      caretDownIcon,
     }
   },
 })

src/components/VGlobalAudioSection/VGlobalAudioSection.vue

@@ -21,10 +21,11 @@ import {
 
 import { AUDIO } from '~/constants/media'
 import { useActiveAudio } from '~/composables/use-active-audio'
-import { isMinScreen } from '~/composables/use-media-query'
+
 import { useActiveMediaStore } from '~/stores/active-media'
 import { useMediaStore } from '~/stores/media'
 import { useSingleResultStore } from '~/stores/media/single-result'
+import { useUiStore } from '~/stores/ui'
 
 import type { AudioDetail } from '~/models/media'
 
@@ -40,9 +41,11 @@ export default defineComponent({
     VIconButton,
   },
   setup() {
+    const route = useRoute()
+
     const activeMediaStore = useActiveMediaStore()
     const mediaStore = useMediaStore()
-    const route = useRoute()
+    const uiStore = useUiStore()
 
     const activeAudio = useActiveAudio()
 
@@ -126,7 +129,7 @@ export default defineComponent({
       if (
         (oldRouteVal.name?.includes('audio') &&
           !newRouteVal.name?.includes('audio')) ||
-        (isMinScreen('md') &&
+        (uiStore.isDesktopLayout &&
           newRouteVal.name?.includes('audio-id') &&
           newRouteVal.params.id != activeMediaStore.id)
       ) {

src/components/VHeader/VHeaderDesktop.vue

@@ -2,7 +2,7 @@
   <header
     class="main-header z-30 flex w-full items-stretch justify-between gap-x-2 border-b bg-white py-4 px-6"
     :class="
-      isHeaderScrolled || sidebarVisibleRef
+      isHeaderScrolled || isSidebarVisible
         ? 'border-dark-charcoal-20'
         : 'border-white'
     "
@@ -37,14 +37,14 @@
     <VFilterButton
       ref="filterButtonRef"
       class="flex self-stretch"
-      :pressed="sidebarVisibleRef"
+      :pressed="isSidebarVisible"
       :disabled="areFiltersDisabled"
       aria-haspopup="dialog"
-      :aria-expanded="sidebarVisibleRef"
+      :aria-expanded="isSidebarVisible"
       @toggle="toggleSidebar"
       @tab="onTab"
     />
-    <VTeleport v-if="sidebarVisibleRef" to="sidebar">
+    <VTeleport v-if="isSidebarVisible" to="sidebar">
       <VSearchGridFilter @close="toggleSidebar" />
     </VTeleport>
   </header>
@@ -54,31 +54,26 @@ import {
   computed,
   defineComponent,
   inject,
-  onMounted,
   ref,
   useContext,
   useRouter,
-  watch,
 } from '@nuxtjs/composition-api'
 
 import { Portal as VTeleport } from 'portal-vue'
 
 import { useMediaStore } from '~/stores/media'
 import { isSearchTypeSupported, useSearchStore } from '~/stores/search'
+import { UiStateCookie, useUiStore } from '~/stores/ui'
 
 import { ALL_MEDIA, searchPath, supportedMediaTypes } from '~/constants/media'
-import { IsHeaderScrolledKey } from '~/types/provides'
+import { IsHeaderScrolledKey, IsSidebarVisibleKey } from '~/types/provides'
+
 import { useI18n } from '~/composables/use-i18n'
 import { useI18nResultsCount } from '~/composables/use-i18n-utilities'
-
 import useSearchType from '~/composables/use-search-type'
-import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
 import { useFocusFilters } from '~/composables/use-focus-filters'
 
-import local from '~/utils/local'
-import { env } from '~/utils/env'
 import { Focus } from '~/utils/focus-management'
-
 import { ensureFocus } from '~/utils/reakit-utils/focus'
 
 import VFilterButton from '~/components/VHeader/VFilterButton.vue'
@@ -88,6 +83,8 @@ import VSearchBarButton from '~/components/VHeader/VHeaderMobile/VSearchBarButto
 import VSearchGridFilter from '~/components/VFilters/VSearchGridFilter.vue'
 import VSearchTypePopover from '~/components/VContentSwitcher/VSearchTypePopover.vue'
 
+import useCookies from '../../composables/use-cookies'
+
 import closeIcon from '~/assets/icons/close-small.svg'
 
 /**
@@ -104,28 +101,28 @@ export default defineComponent({
     VSearchBar,
     VTeleport,
   },
-  setup(_, { emit }) {
+  setup() {
     const filterButtonRef = ref<InstanceType<typeof VFilterButton> | null>(null)
     const searchBarRef = ref<InstanceType<typeof VSearchBar> | null>(null)
 
-    const sidebarVisibleRef = ref(false)
-
     const { app } = useContext()
     const i18n = useI18n()
     const router = useRouter()
 
     const mediaStore = useMediaStore()
     const searchStore = useSearchStore()
+    const uiStore = useUiStore()
 
     const content = useSearchType()
-    const filterSidebar = useFilterSidebarVisibility()
 
     const isHeaderScrolled = inject(IsHeaderScrolledKey)
+    const isSidebarVisible = inject(IsSidebarVisibleKey)
 
     const isFetching = computed(() => mediaStore.fetchState.isFetching)
 
     const resultsCount = computed(() => mediaStore.resultCount)
     const { getI18nCount } = useI18nResultsCount()
+    const uiCookies = useCookies<UiStateCookie>(app, 'ui')
     /**
      * Additional text at the end of the search bar.
      * Shows the loading state or result count.
@@ -215,24 +212,7 @@ export default defineComponent({
       () => !searchStore.searchTypeIsSupported
     )
 
-    onMounted(() => {
-      // We default to show the filter on desktop, and only close it if the user has
-      // explicitly closed it before.
-      const localFilterState = !(
-        local.getItem(env.filterStorageKey) === 'false'
-      )
-      const searchStore = useSearchStore()
-      sidebarVisibleRef.value =
-        searchStore.searchTypeIsSupported && localFilterState
-    })
-
-    watch(sidebarVisibleRef, (visible) => {
-      filterSidebar.setVisibility(visible)
-      visible ? emit('open') : emit('close')
-    })
-
-    const toggleSidebar = () =>
-      (sidebarVisibleRef.value = !sidebarVisibleRef.value)
+    const toggleSidebar = () => uiStore.toggleFilters(uiCookies.setCookie)
 
     const focusFilters = useFocusFilters()
     /**
@@ -250,16 +230,14 @@ export default defineComponent({
       isFetching,
 
       isHeaderScrolled,
+      isSidebarVisible,
       areFiltersDisabled,
 
-      close,
-
       handleSearch,
       clearSearchTerm,
       selectSearchType,
       searchStatus,
       searchTerm,
-      sidebarVisibleRef,
       toggleSidebar,
       onTab,
     }

src/components/VHeader/VHeaderInternal.vue

@@ -64,16 +64,16 @@
 
 <script lang="ts">
 import {
+  computed,
   defineComponent,
-  inject,
   ref,
   useRoute,
   watch,
 } from '@nuxtjs/composition-api'
 
 import usePages from '~/composables/use-pages'
 
-import { IsMinScreenMdKey } from '~/types/provides'
+import { useUiStore } from '~/stores/ui'
 
 import VHomeLink from '~/components/VHeader/VHomeLink.vue'
 import VIconButton from '~/components/VIconButton/VIconButton.vue'
@@ -91,10 +91,13 @@ export default defineComponent({
   setup() {
     const menuButtonRef = ref<InstanceType<typeof VIconButton> | null>(null)
 
-    const { all: allPages, current: currentPage } = usePages(true)
     const route = useRoute()
 
-    const isMinScreenMd = inject(IsMinScreenMdKey)
+    const uiStore = useUiStore()
+
+    const { all: allPages, current: currentPage } = usePages(true)
+
+    const isDesktopLayout = computed(() => uiStore.isDesktopLayout)
 
     const isModalVisible = ref(false)
     const closeModal = () => (isModalVisible.value = false)
@@ -107,8 +110,8 @@ export default defineComponent({
       }
     })
 
-    watch(isMinScreenMd, (isMd) => {
-      if (isMd && isModalVisible.value) {
+    watch(isDesktopLayout, (isDesktop) => {
+      if (isDesktop && isModalVisible.value) {
         closeModal()
       }
     })