Use the UI store properties to set the layout properties (#1956)

* Use UI store values for setting the layout

Co-authored-by: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>

* Fix cookie options
* Fix desktop filter sidebar spacing
* Fix mobile menu not opening
* Update header VR tests
* Use lg as a desktop threshold for VHeaderInternal
* Use breakpoint in the UI store
* Replace local use-window-size with VueUse one
* Update tests
* Add isBreakpoint helper to use in JS similar to CSS

Co-authored-by: Zack Krida <zackkrida@pm.me>

Co-authored-by: Zack Krida <zackkrida@pm.me>

* Use ALL_SCREEN_SIZES to simplify JS breakpoints

Co-authored-by: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Co-authored-by: Zack Krida <zackkrida@pm.me>

src/components/VAudioDetails/VRelatedAudio.vue

@@ -26,7 +26,7 @@
 <script>
 import { computed } from '@nuxtjs/composition-api'
 
-import { isMinScreen } from '~/composables/use-media-query'
+import { useUiStore } from '~/stores/ui'
 
 import LoadingIcon from '~/components/LoadingIcon.vue'
 import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
@@ -49,10 +49,12 @@ export default {
    * @return {{audioTrackSize: import('@nuxtjs/composition-api').ComputedRef<"l" | "s"> }}
    */
   setup() {
-    const isMinScreenMd = isMinScreen('md', { shouldPassInSSR: true })
+    const uiStore = useUiStore()
+
     const audioTrackSize = computed(() => {
-      return isMinScreenMd.value ? 'l' : 's'
+      return uiStore.isBreakpoint('md') ? 'l' : 's'
     })
+
     return { audioTrackSize }
   },
 }

src/components/VContentSwitcherOld/VMobileMenuModal.vue

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

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,10 +37,10 @@
     <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"
     />
@@ -51,29 +51,24 @@ import {
   computed,
   defineComponent,
   inject,
-  onMounted,
   ref,
   useContext,
   useRouter,
-  watch,
 } from '@nuxtjs/composition-api'
 
 import { useMediaStore } from '~/stores/media'
 import { isSearchTypeSupported, useSearchStore } from '~/stores/search'
+import { 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 useSearchType from '~/composables/use-search-type'
 
-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'
@@ -96,23 +91,22 @@ export default defineComponent({
     VSearchTypePopover,
     VSearchBar,
   },
-  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)
 
@@ -207,24 +201,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()
 
     const focusFilters = useFocusFilters()
     /**
@@ -242,16 +219,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,9 @@ 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 { all: allPages, current: currentPage } = usePages(true)
 
     const isModalVisible = ref(false)
     const closeModal = () => (isModalVisible.value = false)
@@ -107,8 +106,10 @@ export default defineComponent({
       }
     })
 
-    watch(isMinScreenMd, (isMd) => {
-      if (isMd && isModalVisible.value) {
+    const uiStore = useUiStore()
+    const isDesktopLayout = computed(() => uiStore.isDesktopLayout)
+    watch(isDesktopLayout, (isDesktop) => {
+      if (isDesktop && isModalVisible.value) {
         closeModal()
       }
     })

src/components/VHeader/VSearchBar/VSearchButton.vue

@@ -24,7 +24,7 @@
 <script lang="ts">
 import { defineComponent, computed, PropType } from '@nuxtjs/composition-api'
 
-import { isMinScreen } from '~/composables/use-media-query'
+import { useUiStore } from '~/stores/ui'
 
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VButton from '~/components/VButton.vue'
@@ -50,7 +50,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const isDesktopLayout = isMinScreen('md')
+    const uiStore = useUiStore()
 
     /**
      * The search button has a text label on the homepage with a desktop layout,
@@ -60,7 +60,7 @@ export default defineComponent({
       if (props.route !== 'home') {
         return true
       } else {
-        return !isDesktopLayout.value
+        return !uiStore.isDesktopLayout
       }
     })
 

src/components/VHeaderOld/VFilterButtonOld.vue

@@ -3,7 +3,7 @@
     id="filter-button"
     :variant="variant"
     size="disabled"
-    class="align-center flex-shrink-0 gap-2 self-center py-2 font-semibold focus-visible:border-tx focus-visible:ring focus-visible:ring-pink"
+    class="align-center flex-shrink-0 gap-2 self-center py-2 font-semibold focus-visible:border-tx"
     :class="
       filtersAreApplied
         ? 'flex-shrink-0 px-3'
@@ -21,7 +21,7 @@
       :icon-path="filterIcon"
     />
     <span class="hidden md:inline-block">{{ mdMinLabel }}</span>
-    <span class="md:hidden" :class="!filtersAreApplied && 'hidden'">{{
+    <span class="md:hidden" :class="{ hidden: !filtersAreApplied }">{{
       smMaxLabel
     }}</span>
   </VButton>
@@ -31,6 +31,8 @@
 import { computed, defineComponent, inject, ref } from '@nuxtjs/composition-api'
 
 import { useSearchStore } from '~/stores/search'
+import { useUiStore } from '~/stores/ui'
+
 import type { ButtonVariant } from '~/types/button'
 import { defineEvent } from '~/types/emits'
 import { useI18n } from '~/composables/use-i18n'
@@ -62,8 +64,10 @@ export default defineComponent({
   },
   setup() {
     const i18n = useI18n()
+
     const searchStore = useSearchStore()
-    const isMinScreenMd = inject('isMinScreenMd', ref(false))
+    const uiStore = useUiStore()
+
     const isHeaderScrolled = inject('isHeaderScrolled', ref(false))
     const filterCount = computed(() => searchStore.appliedFilterCount)
     const filtersAreApplied = computed(() => filterCount.value > 0)
@@ -74,7 +78,7 @@ export default defineComponent({
      */
     const variant = computed(() => {
       // Show the bordered state by default, unless below md
-      let value: ButtonVariant = isMinScreenMd.value
+      let value: ButtonVariant = uiStore.isDesktopLayout
         ? 'action-menu-bordered'
         : 'action-menu'