refactor: remove isMobileWidth injection

packages/web-app-admin-settings/src/components/AppTemplate.vue

@@ -16,7 +16,7 @@
             >
               <div class="flex justify-between items-center h-12">
                 <oc-breadcrumb
-                  v-if="!isMobileWidth"
+                  v-if="!isMobile"
                   id="admin-settings-breadcrumb"
                   :items="breadcrumbs"
                   :mobile-breakpoint="isSideBarOpen ? 'md' : 'sm'"
@@ -78,17 +78,8 @@ import {
   useSideBar,
   MobileNav
 } from '@opencloud-eu/web-pkg'
-import {
-  defineComponent,
-  inject,
-  onBeforeUnmount,
-  PropType,
-  Ref,
-  ref,
-  unref,
-  useTemplateRef,
-  watch
-} from 'vue'
+import { defineComponent, onBeforeUnmount, PropType, ref, unref, useTemplateRef, watch } from 'vue'
+import { useIsMobile } from '@opencloud-eu/design-system/composables'
 import { useAppDefaults } from '@opencloud-eu/web-pkg'
 import { SideBarPanel } from '@opencloud-eu/web-pkg'
 import { BreadcrumbItem } from '@opencloud-eu/design-system/helpers'
@@ -156,6 +147,7 @@ export default defineComponent({
     const appBarRef = useTemplateRef<HTMLElement>('appBarRef')
     const limitedScreenSpace = ref(false)
     const { isSticky } = useIsTopBarSticky()
+    const { isMobile } = useIsMobile()
 
     const onResize = () => {
       limitedScreenSpace.value = unref(isSideBarOpen)
@@ -181,7 +173,7 @@ export default defineComponent({
     })
 
     return {
-      isMobileWidth: inject<Ref<boolean>>('isMobileWidth'),
+      isMobile,
       appBarRef,
       limitedScreenSpace,
       isSideBarOpen,

packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import AppTemplate from '../../../src/components/AppTemplate.vue'
 import {
   defaultComponentMocks,
@@ -9,6 +9,7 @@ import {
 import { SideBar, useIsTopBarSticky, useSideBar } from '@opencloud-eu/web-pkg'
 import { mock } from 'vitest-mock-extended'
 import { OcBreadcrumb } from '@opencloud-eu/design-system/components'
+import { useIsMobile } from '@opencloud-eu/design-system/composables'
 
 const stubSelectors = {
   ocBreadcrumb: 'oc-breadcrumb-stub',
@@ -26,6 +27,14 @@ vi.mock('@opencloud-eu/web-pkg', async (importOriginal) => ({
   useAppDefaults: vi.fn(() => ({}))
 }))
 
+vi.mock('@opencloud-eu/design-system/composables', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@opencloud-eu/design-system/composables')>()
+  return {
+    ...actual,
+    useIsMobile: vi.fn()
+  }
+})
+
 describe('AppTemplate', () => {
   describe('loading is true', () => {
     it('should show app loading spinner component', () => {
@@ -76,7 +85,7 @@ describe('AppTemplate', () => {
         ).toEqual([{ text: 'Administration Settings' }, { text: 'Users' }])
       })
       it('does not show in mobile view', () => {
-        const { wrapper } = getWrapper({ isMobileWidth: true })
+        const { wrapper } = getWrapper({ isMobile: true })
         expect(wrapper.find(stubSelectors.ocBreadcrumb).exists()).toBeFalsy()
       })
     })
@@ -96,8 +105,9 @@ describe('AppTemplate', () => {
   })
 })
 
-function getWrapper({ props = {}, isMobileWidth = false, isSideBarOpen = true } = {}) {
+function getWrapper({ props = {}, isMobile = false, isSideBarOpen = true } = {}) {
   vi.mocked(useIsTopBarSticky).mockReturnValue({ isSticky: ref(true) })
+  vi.mocked(useIsMobile).mockReturnValue({ isMobile: computed(() => isMobile) })
 
   const plugins = [...defaultPlugins()]
   const sideBarStore = useSideBar()
@@ -113,7 +123,7 @@ function getWrapper({ props = {}, isMobileWidth = false, isSideBarOpen = true }
       },
       global: {
         plugins,
-        provide: { isMobileWidth: ref(isMobileWidth) },
+        provide: {},
         stubs: {
           OcButton: false
         },

packages/web-app-files/src/components/Spaces/SpaceHeader.vue

@@ -1,13 +1,12 @@
 <template>
   <div
     class="space-header p-4"
-    :class="{ flex: !imageExpanded && !isMobileWidth, 'space-header-squashed': isSideBarOpen }"
+    :class="{ flex: !imageExpanded && !isMobile, 'space-header-squashed': isSideBarOpen }"
   >
     <div
       class="space-header-image mr-6 min-w-xs aspect-[16/9]"
       :class="{
-        'space-header-image-expanded w-full max-w-full max-h-full mb-4':
-          imageExpanded || isMobileWidth,
+        'space-header-image-expanded w-full max-w-full max-h-full mb-4': imageExpanded || isMobile,
         'w-xs max-h-40': !imageExpanded,
         'hidden lg:block': isSideBarOpen
       }"
@@ -104,11 +103,9 @@
 <script setup lang="ts">
 import {
   computed,
-  inject,
   nextTick,
   onBeforeUnmount,
   onMounted,
-  Ref,
   ref,
   unref,
   useTemplateRef,
@@ -126,6 +123,7 @@ import {
   useSideBar,
   useSpacesStore
 } from '@opencloud-eu/web-pkg'
+import { useIsMobile } from '@opencloud-eu/design-system/composables'
 import SpaceContextActions from './SpaceContextActions.vue'
 import { useGettext } from 'vue3-gettext'
 import { DriveItem } from '@opencloud-eu/web-client/graph/generated'
@@ -150,7 +148,7 @@ const { imagesLoading, readmesLoading } = storeToRefs(spacesStore)
 const sidebarStore = useSideBar()
 const { isSideBarOpen } = storeToRefs(sidebarStore)
 
-const isMobileWidth = inject<Ref<boolean>>('isMobileWidth')
+const { isMobile } = useIsMobile()
 
 const isDropOpen = ref(false)
 

packages/web-app-files/tests/unit/components/Spaces/SpaceHeader.spec.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { computed } from 'vue'
 import SpaceHeader from '../../../../src/components/Spaces/SpaceHeader.vue'
 import { DriveItem } from '@opencloud-eu/web-client/graph/generated'
 import { SpaceResource, Resource, buildSpaceImageResource } from '@opencloud-eu/web-client'
@@ -7,6 +7,7 @@ import { mock } from 'vitest-mock-extended'
 import { GetFileContentsResponse } from '@opencloud-eu/web-client/webdav'
 import { flushPromises } from '@vue/test-utils'
 import { useSideBar } from '@opencloud-eu/web-pkg'
+import { useIsMobile } from '@opencloud-eu/design-system/composables'
 
 vi.mock('@opencloud-eu/web-pkg', async (importOriginal) => ({
   ...(await importOriginal<any>()),
@@ -24,6 +25,14 @@ vi.mock('@opencloud-eu/web-client', async (importOriginal) => ({
   buildSpaceImageResource: vi.fn()
 }))
 
+vi.mock('@opencloud-eu/design-system/composables', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@opencloud-eu/design-system/composables')>()
+  return {
+    ...actual,
+    useIsMobile: vi.fn()
+  }
+})
+
 const getSpaceMock = (spaceImageData: DriveItem = undefined) =>
   mock<SpaceResource>({
     id: '1',
@@ -51,7 +60,7 @@ describe('SpaceHeader', () => {
     it('should take full width in mobile view', () => {
       const wrapper = getWrapper({
         space: getSpaceMock({ webDavUrl: '/' }),
-        isMobileWidth: true
+        isMobile: true
       })
       expect(wrapper.find('.space-header').attributes('class')).not.toContain('flex')
       expect(wrapper.find('.space-header-image').attributes('class')).toContain(
@@ -94,14 +103,14 @@ describe('SpaceHeader', () => {
 function getWrapper({
   space = {} as SpaceResource,
   isSideBarOpen = false,
-  isMobileWidth = false,
+  isMobile = false,
   imagesLoading = [],
   readmesLoading = [],
   memberCount = 0
 }: {
   space?: SpaceResource
   isSideBarOpen?: boolean
-  isMobileWidth?: boolean
+  isMobile?: boolean
   imagesLoading?: string[]
   readmesLoading?: string[]
   memberCount?: number
@@ -125,6 +134,8 @@ function getWrapper({
     ...defaultPlugins({ piniaOptions: { spacesState: { imagesLoading, readmesLoading } } })
   ]
 
+  vi.mocked(useIsMobile).mockReturnValue({ isMobile: computed(() => isMobile) })
+
   const sideBarStore = useSideBar()
   sideBarStore.isSideBarOpen = isSideBarOpen
 
@@ -135,7 +146,7 @@ function getWrapper({
     global: {
       mocks,
       plugins,
-      provide: { ...mocks, isMobileWidth: ref(isMobileWidth) },
+      provide: { ...mocks },
       stubs: {
         'space-context-actions': true,
         TextEditor: true

packages/web-app-search/src/portals/SearchBar.vue

@@ -145,8 +145,6 @@ import {
   ComponentPublicInstance,
   computed,
   defineComponent,
-  inject,
-  Ref,
   ref,
   onBeforeUnmount,
   unref,
@@ -158,6 +156,7 @@ import { SearchBarFilter } from '@opencloud-eu/web-pkg'
 import { useAvailableProviders } from '../composables'
 import { RouteLocationNormalizedLoaded } from 'vue-router'
 import { OcDrop } from '@opencloud-eu/design-system/components'
+import { useIsMobile } from '@opencloud-eu/design-system/composables'
 
 export default defineComponent({
   name: 'SearchBar',
@@ -166,7 +165,7 @@ export default defineComponent({
     const router = useRouter()
     const capabilityStore = useCapabilityStore()
     const showCancelButton = ref(false)
-    const isMobileWidth = inject<Ref<boolean>>('isMobileWidth')
+    const { isMobile } = useIsMobile()
     const scopeQueryValue = useRouteQuery('scope')
     const availableProviders = useAvailableProviders()
     const isAppActive = useIsAppActive()
@@ -204,15 +203,15 @@ export default defineComponent({
       () => unref(optionsDropRef)?.$refs.drop as HTMLElement
     )
 
-    watch(isMobileWidth, () => {
+    watch(isMobile, () => {
       const searchBarEl = document.getElementById('files-global-search-bar')
       if (!searchBarEl) {
         return
       }
 
       const optionDropVisible = !!document.querySelector('#files-global-search-options')
 
-      if (!unref(isMobileWidth)) {
+      if (!unref(isMobile)) {
         searchBarEl.style.visibility = 'visible'
         showCancelButton.value = false
       } else {

packages/web-app-search/tests/unit/portals/SearchBar.spec.ts

@@ -278,7 +278,7 @@ function getMountedWrapper({
         ],
         mocks: localMocks,
         renderStubDefaultSlot: true,
-        provide: { ...localMocks, isMobileWidth: ref(false) },
+        provide: { ...localMocks },
         stubs: {
           'router-link': true,
           OcDrop: ocDropStub

packages/web-pkg/src/components/AppBar/AppBar.vue

@@ -66,14 +66,15 @@
 
 <script lang="ts">
 import last from 'lodash-es/last'
-import { computed, defineComponent, inject, PropType, ref, Ref, unref, useSlots } from 'vue'
+import { computed, defineComponent, PropType, ref, unref, useSlots } from 'vue'
 import {
   isPersonalSpaceResource,
   isProjectSpaceResource,
   isShareSpaceResource,
   Resource,
   SpaceResource
 } from '@opencloud-eu/web-client'
+import { useIsMobile } from '@opencloud-eu/design-system/composables'
 import BatchActions from '../BatchActions.vue'
 import ContextActions from '../FilesList/ContextActions.vue'
 import ViewOptions from '../ViewOptions.vue'
@@ -240,10 +241,10 @@ export default defineComponent({
       spacesStore.spaces.filter((s) => isPersonalSpaceResource(s) || isProjectSpaceResource(s))
     )
 
-    const isMobileWidth = inject<Ref<boolean>>('isMobileWidth')
+    const { isMobile } = useIsMobile()
     const isTrashLocation = useActiveLocation(isLocationTrashActive, 'files-trash-generic')
     const showBreadcrumb = computed(() => {
-      if (!unref(isMobileWidth) && props.breadcrumbs.length) {
+      if (!unref(isMobile) && props.breadcrumbs.length) {
         return true
       }
       if (unref(isTrashLocation) && unref(spaces).length === 1) {

packages/web-pkg/tests/unit/components/AppBar/AppBar.spec.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { computed } from 'vue'
 import AppBar from '../../../../src/components/AppBar/AppBar.vue'
 import { mock } from 'vitest-mock-extended'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
@@ -13,6 +13,15 @@ import { ArchiverService } from '../../../../src/services'
 import { FolderView } from '../../../../src/ui/types'
 import { useExtensionRegistry, ViewOptions } from '../../../../src'
 import { OcBreadcrumb } from '@opencloud-eu/design-system/components'
+import { useIsMobile } from '@opencloud-eu/design-system/composables'
+
+vi.mock('@opencloud-eu/design-system/composables', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@opencloud-eu/design-system/composables')>()
+  return {
+    ...actual,
+    useIsMobile: vi.fn()
+  }
+})
 
 const selectors = {
   ocBreadcrumbStub: 'oc-breadcrumb-stub',
@@ -145,8 +154,10 @@ function getShallowWrapper(
     name: 'files-spaces-generic',
     path: '/files/spaces/personal/admin'
   }),
-  isMobileWidth = false
+  isMobile = false
 ) {
+  vi.mocked(useIsMobile).mockReturnValue({ isMobile: computed(() => isMobile) })
+
   const plugins = defaultPlugins({
     piniaOptions: {
       resourcesStore: { resources: selected, selectedIds: selected.map(({ id }) => id) }
@@ -170,7 +181,7 @@ function getShallowWrapper(
       slots,
       global: {
         plugins,
-        provide: { ...mocks, isMobileWidth: ref(isMobileWidth) },
+        provide: { ...mocks },
         mocks
       }
     })