diff --git a/packages/web-pkg/src/components/SideBar/FileSideBar.vue b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
index bfaef34f2e..0e716185e0 100644
--- a/packages/web-pkg/src/components/SideBar/FileSideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
@@ -24,8 +24,8 @@
   </InnerSideBar>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType, provide, readonly, ref, unref, watch } from 'vue'
+<script setup lang="ts">
+import { computed, provide, readonly, ref, unref, watch } from 'vue'
 import PQueue from 'p-queue'
 import { SideBarPanelContext } from '../SideBar/types'
 import InnerSideBar from '../SideBar/SideBar.vue'
@@ -69,404 +69,370 @@ import { storeToRefs } from 'pinia'
 import { useTask } from 'vue-concurrency'
 import { ListPermissionsSpaceRootSelectEnum } from '@opencloud-eu/web-client/graph/generated'
 
-export default defineComponent({
-  name: 'FileSideBar',
-  components: { FileInfo, SpaceInfo, InnerSideBar },
-  props: {
-    isOpen: {
-      type: Boolean,
-      required: true
-    },
-    activePanel: {
-      type: String,
-      required: false,
-      default: null
-    },
-    space: {
-      type: Object as PropType<SpaceResource>,
-      required: false,
-      default: null
+const {
+  isOpen,
+  activePanel = undefined,
+  space = undefined
+} = defineProps<{
+  isOpen: boolean
+  activePanel?: string
+  space?: SpaceResource
+}>()
+
+const router = useRouter()
+const clientService = useClientService()
+const extensionRegistry = useExtensionRegistry()
+const eventBus = useEventBus()
+const spacesStore = useSpacesStore()
+const sharesStore = useSharesStore()
+const configStore = useConfigStore()
+const appsStore = useAppsStore()
+const { canListShares } = useCanListShares()
+const { canListVersions } = useCanListVersions()
+
+const resourcesStore = useResourcesStore()
+const { currentFolder } = storeToRefs(resourcesStore)
+
+const loadedResource = ref<Resource>()
+const versions = ref<Resource[]>([])
+
+const availableInternalShareRoles = ref<ShareRole[]>([])
+const availableExternalShareRoles = ref<ShareRole[]>([])
+
+const { selectedResources } = useSelectedResources()
+
+const sharesLoading = ref(false)
+
+const isLoading = computed(() => {
+  return unref(sharesLoading)
+})
+
+const panelContext = computed<SideBarPanelContext<SpaceResource, Resource, Resource>>(() => {
+  if (unref(selectedResources).length === 0) {
+    return {
+      root: space,
+      parent: null,
+      items: unref(currentFolder)?.id ? [unref(currentFolder)] : []
     }
-  },
-  setup(props) {
-    const router = useRouter()
-    const clientService = useClientService()
-    const extensionRegistry = useExtensionRegistry()
-    const eventBus = useEventBus()
-    const spacesStore = useSpacesStore()
-    const sharesStore = useSharesStore()
-    const configStore = useConfigStore()
-    const appsStore = useAppsStore()
-    const { canListShares } = useCanListShares()
-    const { canListVersions } = useCanListVersions()
+  }
+  return {
+    root: space,
+    parent: unref(currentFolder),
+    items: unref(selectedResources)
+  }
+})
 
-    const resourcesStore = useResourcesStore()
-    const { currentFolder } = storeToRefs(resourcesStore)
+const isSharedWithMeLocation = useActiveLocation(isLocationSharesActive, 'files-shares-with-me')
+const isSharedWithOthersLocation = useActiveLocation(
+  isLocationSharesActive,
+  'files-shares-with-others'
+)
+const isSharedViaLinkLocation = useActiveLocation(isLocationSharesActive, 'files-shares-via-link')
+const isProjectsLocation = isLocationSpacesActive(router, 'files-spaces-projects')
+const isFavoritesLocation = useActiveLocation(isLocationCommonActive, 'files-common-favorites')
+const isSearchLocation = useActiveLocation(isLocationCommonActive, 'files-common-search')
+
+const closeSideBar = () => {
+  eventBus.publish(SideBarEventTopics.close)
+}
+const setActiveSideBarPanel = (panelName: string) => {
+  eventBus.publish(SideBarEventTopics.setActivePanel, panelName)
+}
+const isFileHeaderVisible = computed(() => {
+  return (
+    unref(panelContext).items?.length === 1 && !isProjectSpaceResource(unref(panelContext).items[0])
+  )
+})
+const isSpaceHeaderVisible = computed(() => {
+  return (
+    unref(panelContext).items?.length === 1 && isProjectSpaceResource(unref(panelContext).items[0])
+  )
+})
 
-    const loadedResource = ref<Resource>()
-    const versions = ref<Resource[]>([])
+const isShareLocation = computed(() => {
+  return (
+    unref(isSharedWithMeLocation) ||
+    unref(isSharedWithOthersLocation) ||
+    unref(isSharedViaLinkLocation)
+  )
+})
+const isFlatFileList = computed(() => {
+  return unref(isShareLocation) || unref(isSearchLocation) || unref(isFavoritesLocation)
+})
 
-    const availableInternalShareRoles = ref<ShareRole[]>([])
-    const availableExternalShareRoles = ref<ShareRole[]>([])
+const availablePanels = computed(() =>
+  extensionRegistry
+    .requestExtensions<SidebarPanelExtension<SpaceResource, Resource, Resource>>({
+      id: 'global.files.sidebar',
+      extensionType: 'sidebarPanel'
+    })
+    .map((e) => e.panel)
+)
 
-    const { selectedResources } = useSelectedResources()
+const loadVersionsTask = useTask(function* (signal, resource: Resource) {
+  versions.value = yield clientService.webdav.listFileVersions(resource.id, { signal })
+})
 
-    const sharesLoading = ref(false)
+const loadSharesTask = useTask(function* (signal, resource: Resource) {
+  sharesStore.setLoading(true)
+  sharesStore.removeOrphanedShares()
 
-    const isLoading = computed(() => {
-      return unref(sharesLoading)
-    })
+  const { collaboratorShares: collaboratorCache, linkShares: linkCache } = sharesStore
+  const client = clientService.graphAuthenticated.permissions
 
-    const panelContext = computed<SideBarPanelContext<SpaceResource, Resource, Resource>>(() => {
-      if (unref(selectedResources).length === 0) {
-        return {
-          root: props.space,
-          parent: null,
-          items: unref(currentFolder)?.id ? [unref(currentFolder)] : []
-        }
-      }
-      return {
-        root: props.space,
-        parent: unref(currentFolder),
-        items: unref(selectedResources)
-      }
+  let driveId = space?.id
+  if (isShareSpaceResource(space)) {
+    const matchingMountPoint = yield spacesStore.getMountPointForSpace({
+      graphClient: clientService.graphAuthenticated,
+      space,
+      signal
     })
+    if (matchingMountPoint) {
+      driveId = matchingMountPoint.root.remoteItem.rootId
+    }
+  }
 
-    const isSharedWithMeLocation = useActiveLocation(isLocationSharesActive, 'files-shares-with-me')
-    const isSharedWithOthersLocation = useActiveLocation(
-      isLocationSharesActive,
-      'files-shares-with-others'
-    )
-    const isSharedViaLinkLocation = useActiveLocation(
-      isLocationSharesActive,
-      'files-shares-via-link'
-    )
-    const isProjectsLocation = isLocationSpacesActive(router, 'files-spaces-projects')
-    const isFavoritesLocation = useActiveLocation(isLocationCommonActive, 'files-common-favorites')
-    const isSearchLocation = useActiveLocation(isLocationCommonActive, 'files-common-search')
+  // load direct shares
+  const { shares, allowedRoles } = yield* call(
+    client.listPermissions(driveId, resource.fileId, sharesStore.graphRoles, {}, { signal })
+  )
 
-    const closeSideBar = () => {
-      eventBus.publish(SideBarEventTopics.close)
-    }
-    const setActiveSideBarPanel = (panelName: string) => {
-      eventBus.publish(SideBarEventTopics.setActivePanel, panelName)
-    }
-    const isFileHeaderVisible = computed(() => {
-      return (
-        unref(panelContext).items?.length === 1 &&
-        !isProjectSpaceResource(unref(panelContext).items[0])
-      )
-    })
-    const isSpaceHeaderVisible = computed(() => {
-      return (
-        unref(panelContext).items?.length === 1 &&
-        isProjectSpaceResource(unref(panelContext).items[0])
-      )
-    })
+  const loadedCollaboratorShares = shares.filter(isCollaboratorShare)
+  const loadedLinkShares = shares.filter(isLinkShare)
 
-    const isShareLocation = computed(() => {
-      return (
-        unref(isSharedWithMeLocation) ||
-        unref(isSharedWithOthersLocation) ||
-        unref(isSharedViaLinkLocation)
+  const rolesArray = Object.values(sharesStore.graphRoles)
+  availableInternalShareRoles.value =
+    allowedRoles?.map((r) => {
+      return {
+        ...r,
+        icon: rolesArray.find((role) => role.id === r.id)?.icon
+      }
+    }) || []
+
+  // load external share roles
+  if (appsStore.isAppEnabled('open-cloud-mesh')) {
+    const { allowedRoles } = yield* call(
+      client.listPermissions(
+        driveId,
+        resource.fileId,
+        sharesStore.graphRoles,
+        {
+          filter: `@libre.graph.permissions.roles.allowedValues/rolePermissions/any(p:contains(p/condition, '@Subject.UserType=="Federated"'))`,
+          select: [ListPermissionsSpaceRootSelectEnum.LibreGraphPermissionsRolesAllowedValues]
+        },
+        { signal }
       )
-    })
-    const isFlatFileList = computed(() => {
-      return unref(isShareLocation) || unref(isSearchLocation) || unref(isFavoritesLocation)
-    })
-
-    const availablePanels = computed(() =>
-      extensionRegistry
-        .requestExtensions<SidebarPanelExtension<SpaceResource, Resource, Resource>>({
-          id: 'global.files.sidebar',
-          extensionType: 'sidebarPanel'
-        })
-        .map((e) => e.panel)
     )
 
-    const loadVersionsTask = useTask(function* (signal, resource: Resource) {
-      versions.value = yield clientService.webdav.listFileVersions(resource.id, { signal })
-    })
-
-    const loadSharesTask = useTask(function* (signal, resource: Resource) {
-      sharesStore.setLoading(true)
-      sharesStore.removeOrphanedShares()
-
-      const { collaboratorShares: collaboratorCache, linkShares: linkCache } = sharesStore
-      const client = clientService.graphAuthenticated.permissions
-
-      let driveId = props.space?.id
-      if (isShareSpaceResource(props?.space)) {
-        const matchingMountPoint = yield spacesStore.getMountPointForSpace({
-          graphClient: clientService.graphAuthenticated,
-          space: props.space,
-          signal
-        })
-        if (matchingMountPoint) {
-          driveId = matchingMountPoint.root.remoteItem.rootId
+    availableExternalShareRoles.value =
+      allowedRoles?.map((r) => {
+        return {
+          ...r,
+          icon: rolesArray.find((role) => role.id === r.id)?.icon
         }
+      }) || []
+  }
+
+  // use cache for indirect shares
+  const useCache = !unref(isFlatFileList) && !unref(isProjectsLocation)
+  if (useCache) {
+    collaboratorCache.forEach((share) => {
+      if (loadedCollaboratorShares.some((s) => s.id === share.id)) {
+        return
       }
 
-      // load direct shares
-      const { shares, allowedRoles } = yield* call(
-        client.listPermissions(driveId, resource.fileId, sharesStore.graphRoles, {}, { signal })
-      )
+      loadedCollaboratorShares.push({ ...share, indirect: true })
+    })
 
-      const loadedCollaboratorShares = shares.filter(isCollaboratorShare)
-      const loadedLinkShares = shares.filter(isLinkShare)
-
-      const rolesArray = Object.values(sharesStore.graphRoles)
-      availableInternalShareRoles.value =
-        allowedRoles?.map((r) => {
-          return {
-            ...r,
-            icon: rolesArray.find((role) => role.id === r.id)?.icon
-          }
-        }) || []
-
-      // load external share roles
-      if (appsStore.isAppEnabled('open-cloud-mesh')) {
-        const { allowedRoles } = yield* call(
-          client.listPermissions(
-            driveId,
-            resource.fileId,
-            sharesStore.graphRoles,
-            {
-              filter: `@libre.graph.permissions.roles.allowedValues/rolePermissions/any(p:contains(p/condition, '@Subject.UserType=="Federated"'))`,
-              select: [ListPermissionsSpaceRootSelectEnum.LibreGraphPermissionsRolesAllowedValues]
-            },
-            { signal }
-          )
-        )
-
-        availableExternalShareRoles.value =
-          allowedRoles?.map((r) => {
-            return {
-              ...r,
-              icon: rolesArray.find((role) => role.id === r.id)?.icon
-            }
-          }) || []
+    linkCache.forEach((share) => {
+      if (loadedLinkShares.some((s) => s.id === share.id)) {
+        return
       }
 
-      // use cache for indirect shares
-      const useCache = !unref(isFlatFileList) && !unref(isProjectsLocation)
-      if (useCache) {
-        collaboratorCache.forEach((share) => {
-          if (loadedCollaboratorShares.some((s) => s.id === share.id)) {
-            return
-          }
-
-          loadedCollaboratorShares.push({ ...share, indirect: true })
-        })
+      loadedLinkShares.push({ ...share, indirect: true })
+    })
+  }
 
-        linkCache.forEach((share) => {
-          if (loadedLinkShares.some((s) => s.id === share.id)) {
-            return
-          }
+  if (isLocationCommonActive(router, 'files-common-search')) {
+    yield resourcesStore.loadAncestorMetaData({
+      folder: unref(resource),
+      space,
+      client: clientService.webdav,
+      signal
+    })
+  }
 
-          loadedLinkShares.push({ ...share, indirect: true })
-        })
+  // gather all ancestors we need to load shares for (indirect shares, space members)
+  const cachedIds = [...collaboratorCache, ...linkCache].map(({ resourceId }) => resourceId)
+  const ancestorIds = Object.values(resourcesStore.ancestorMetaData)
+    .filter(({ id, path }) => {
+      if (id === resource.id || cachedIds.includes(id)) {
+        // share already cached
+        return false
       }
-
-      if (isLocationCommonActive(router, 'files-common-search')) {
-        yield resourcesStore.loadAncestorMetaData({
-          folder: unref(resource),
-          space: unref(props.space),
-          client: clientService.webdav,
-          signal
-        })
+      if (isIncomingShareResource(resource)) {
+        // incoming shares don't have ancestors because they are root elements themselves
+        return false
       }
-
-      // gather all ancestors we need to load shares for (indirect shares, space members)
-      const cachedIds = [...collaboratorCache, ...linkCache].map(({ resourceId }) => resourceId)
-      const ancestorIds = Object.values(resourcesStore.ancestorMetaData)
-        .filter(({ id, path }) => {
-          if (id === resource.id || cachedIds.includes(id)) {
-            // share already cached
-            return false
-          }
-          if (isIncomingShareResource(resource)) {
-            // incoming shares don't have ancestors because they are root elements themselves
-            return false
-          }
-          if (isPersonalSpaceResource(props.space)) {
-            // filter out personal space roots since they don't have shares
-            return path !== '/'
-          }
-          return true
-        })
-        .map(({ id }) => id)
-
-      if (
-        unref(isFlatFileList) &&
-        isProjectSpaceResource(props.space) &&
-        !isProjectSpaceResource(resource)
-      ) {
-        // add project space to ancestors in flat file list where we don't have ancestors
-        // to display space members in the sidebar
-        ancestorIds.push(props.space.id)
+      if (isPersonalSpaceResource(space)) {
+        // filter out personal space roots since they don't have shares
+        return path !== '/'
       }
+      return true
+    })
+    .map(({ id }) => id)
 
-      const queue = new PQueue({
-        concurrency: configStore.options.concurrentRequests.shares.list
-      })
-
-      const promises = [...new Set(ancestorIds)].map((id) => {
-        return queue.add(() =>
-          clientService.graphAuthenticated.permissions
-            .listPermissions(driveId, id, sharesStore.graphRoles, {}, { signal })
-            .then((result) => {
-              const indirectShares = result.shares.map((s) => ({ ...s, indirect: true }))
-              loadedCollaboratorShares.push(...indirectShares.filter(isCollaboratorShare))
-              loadedLinkShares.push(...indirectShares.filter(isLinkShare))
-            })
-        )
-      })
-
-      yield Promise.allSettled(promises)
-      sharesStore.setCollaboratorShares(loadedCollaboratorShares)
-      sharesStore.setLinkShares(loadedLinkShares)
-      sharesStore.setLoading(false)
-    }).restartable()
-
-    const currentResourceMtime = ref<string>() // used to check if we need to load new versions
-    watch(
-      () => [...unref(panelContext).items, props.isOpen],
-      async (newValue, oldValue) => {
-        if (unref(panelContext).items?.length !== 1) {
-          return
-        }
+  if (unref(isFlatFileList) && isProjectSpaceResource(space) && !isProjectSpaceResource(resource)) {
+    // add project space to ancestors in flat file list where we don't have ancestors
+    // to display space members in the sidebar
+    ancestorIds.push(space.id)
+  }
 
-        if (!props.isOpen) {
-          versions.value = []
-          return
-        }
+  const queue = new PQueue({
+    concurrency: configStore.options.concurrentRequests.shares.list
+  })
+
+  const promises = [...new Set(ancestorIds)].map((id) => {
+    return queue.add(() =>
+      clientService.graphAuthenticated.permissions
+        .listPermissions(driveId, id, sharesStore.graphRoles, {}, { signal })
+        .then((result) => {
+          const indirectShares = result.shares.map((s) => ({ ...s, indirect: true }))
+          loadedCollaboratorShares.push(...indirectShares.filter(isCollaboratorShare))
+          loadedLinkShares.push(...indirectShares.filter(isLinkShare))
+        })
+    )
+  })
+
+  yield Promise.allSettled(promises)
+  sharesStore.setCollaboratorShares(loadedCollaboratorShares)
+  sharesStore.setLinkShares(loadedLinkShares)
+  sharesStore.setLoading(false)
+}).restartable()
+
+const currentResourceMtime = ref<string>() // used to check if we need to load new versions
+watch(
+  () => [...unref(panelContext).items, isOpen],
+  async (newValue, oldValue) => {
+    if (unref(panelContext).items?.length !== 1) {
+      return
+    }
 
-        const res1 = newValue?.[0] as Resource
-        const res2 = oldValue?.[0] as Resource
-        if (res1?.id === res2?.id && res1?.mdate === unref(currentResourceMtime)) {
-          // don't load versions if the content of the resource didn't change
-          return
-        }
+    if (!isOpen) {
+      currentResourceMtime.value = undefined
+      versions.value = []
+      return
+    }
 
-        const resource = unref(panelContext).items[0]
-        currentResourceMtime.value = resource.mdate
+    const res1 = newValue?.[0] as Resource
+    const res2 = oldValue?.[0] as Resource
+    if (res1?.id === res2?.id && res1?.mdate === unref(currentResourceMtime)) {
+      // don't load versions if the content of the resource didn't change
+      return
+    }
 
-        if (loadVersionsTask.isRunning) {
-          loadVersionsTask.cancelAll()
-        }
+    const resource = unref(panelContext).items[0]
+    currentResourceMtime.value = resource.mdate
 
-        if (!canListVersions({ space: props.space, resource })) {
-          return
-        }
+    if (loadVersionsTask.isRunning) {
+      loadVersionsTask.cancelAll()
+    }
 
-        try {
-          await loadVersionsTask.perform(resource)
-        } catch (e) {
-          console.error(e)
-        }
-      },
-      { immediate: true, deep: true }
-    )
+    if (!canListVersions({ space, resource })) {
+      return
+    }
 
-    const panelItemIds = computed(() => unref(panelContext).items.map((item) => item.id))
+    try {
+      await loadVersionsTask.perform(resource)
+    } catch (e) {
+      console.error(e)
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+const panelItemIds = computed(() => unref(panelContext).items.map((item) => item.id))
+
+watch(
+  () => [panelItemIds, isOpen],
+  async () => {
+    if (!isOpen || !unref(panelContext).items?.length) {
+      sharesStore.pruneShares()
+      loadedResource.value = null
+      return
+    }
+    if (unref(panelContext).items?.length !== 1) {
+      // don't load additional metadata for empty or multi-select contexts
+      return
+    }
 
-    watch(
-      () => [panelItemIds, props.isOpen],
-      async () => {
-        if (!props.isOpen || !unref(panelContext).items?.length) {
-          sharesStore.pruneShares()
-          loadedResource.value = null
-          return
-        }
-        if (unref(panelContext).items?.length !== 1) {
-          // don't load additional metadata for empty or multi-select contexts
-          return
-        }
+    const resource = unref(panelContext).items[0]
+    sharesLoading.value = true
 
-        const resource = unref(panelContext).items[0]
-        sharesLoading.value = true
+    if (isProjectSpaceResource(resource)) {
+      await spacesStore.loadGraphPermissions({
+        ids: [resource.id],
+        graphClient: clientService.graphAuthenticated
+      })
+    }
 
-        if (isProjectSpaceResource(resource)) {
-          await spacesStore.loadGraphPermissions({
-            ids: [resource.id],
-            graphClient: clientService.graphAuthenticated
-          })
+    if (canListShares({ space, resource })) {
+      try {
+        if (loadSharesTask.isRunning) {
+          loadSharesTask.cancelAll()
         }
 
-        if (canListShares({ space: props.space, resource })) {
-          try {
-            if (loadSharesTask.isRunning) {
-              loadSharesTask.cancelAll()
-            }
+        loadSharesTask.perform(resource)
+      } catch (e) {
+        console.error(e)
+      }
+    }
 
-            loadSharesTask.perform(resource)
-          } catch (e) {
-            console.error(e)
-          }
-        }
+    if (!unref(isShareLocation)) {
+      loadedResource.value = resource
+      sharesLoading.value = false
+      return
+    }
 
-        if (!unref(isShareLocation)) {
-          loadedResource.value = resource
-          sharesLoading.value = false
-          return
-        }
+    // shared resources look different, hence we need to fetch the actual resource here
+    try {
+      const webDavResource = await clientService.webdav.getFileInfo(space, {
+        path: resource.path
+      })
 
-        // shared resources look different, hence we need to fetch the actual resource here
-        try {
-          const webDavResource = await clientService.webdav.getFileInfo(props.space, {
-            path: resource.path
-          })
-
-          // make sure props from the share (=resource) are available on the merged resource
-          const mergedResource = {
-            ...webDavResource,
-            ...resource,
-            tags: webDavResource.tags // tags are always [] in Graph API, hence take them from webdav
-          }
-          loadedResource.value = mergedResource
-        } catch (error) {
-          loadedResource.value = resource
-          console.error(error)
-        }
-        sharesLoading.value = false
-      },
-      {
-        deep: true,
-        immediate: true
+      // make sure props from the share (=resource) are available on the merged resource
+      const mergedResource = {
+        ...webDavResource,
+        ...resource,
+        tags: webDavResource.tags // tags are always [] in Graph API, hence take them from webdav
       }
-    )
-
-    provide('resource', readonly(loadedResource))
-    provide('versions', readonly(versions))
-    provide(
-      'space',
-      computed(() => props.space)
-    )
-    provide(
-      'activePanel',
-      computed(() => props.activePanel)
-    )
-    provide('availableInternalShareRoles', readonly(availableInternalShareRoles))
-    provide('availableExternalShareRoles', readonly(availableExternalShareRoles))
-    provide(
-      'versionsLoading',
-      computed(() => loadVersionsTask.isRunning)
-    )
-
-    return {
-      loadedResource,
-      setActiveSideBarPanel,
-      closeSideBar,
-      panelContext,
-      availablePanels,
-      isFileHeaderVisible,
-      isSpaceHeaderVisible,
-      isLoading,
-
-      // unit tests
-      loadSharesTask
+      loadedResource.value = mergedResource
+    } catch (error) {
+      loadedResource.value = resource
+      console.error(error)
     }
+    sharesLoading.value = false
+  },
+  {
+    deep: true,
+    immediate: true
   }
-})
+)
+
+provide('resource', readonly(loadedResource))
+provide('versions', readonly(versions))
+provide(
+  'space',
+  computed(() => space)
+)
+provide(
+  'activePanel',
+  computed(() => activePanel)
+)
+provide('availableInternalShareRoles', readonly(availableInternalShareRoles))
+provide('availableExternalShareRoles', readonly(availableExternalShareRoles))
+provide(
+  'versionsLoading',
+  computed(() => loadVersionsTask.isRunning)
+)
 </script>
diff --git a/packages/web-pkg/tests/unit/components/sidebar/FileSideBar.spec.ts b/packages/web-pkg/tests/unit/components/sidebar/FileSideBar.spec.ts
index 5cacf309b0..ea3e147a80 100644
--- a/packages/web-pkg/tests/unit/components/sidebar/FileSideBar.spec.ts
+++ b/packages/web-pkg/tests/unit/components/sidebar/FileSideBar.spec.ts
@@ -47,7 +47,7 @@ describe('FileSideBar', () => {
     it('should show when one resource selected', async () => {
       const item = mock<Resource>({ path: '/someFolder' })
       const { wrapper } = createWrapper({ item })
-      wrapper.vm.loadedResource = item
+      ;(wrapper.vm as any).loadedResource = item
       await wrapper.vm.$nextTick()
       expect(wrapper.find(selectors.fileInfoStub).exists()).toBeTruthy()
     })
@@ -58,7 +58,7 @@ describe('FileSideBar', () => {
     it('should not show when selected resource is a project space', async () => {
       const item = mock<SpaceResource>({ path: '/someFolder', driveType: 'project' })
       const { wrapper } = createWrapper({ item })
-      wrapper.vm.loadedResource = item
+      ;(wrapper.vm as any).loadedResource = item
       await wrapper.vm.$nextTick()
       expect(wrapper.find(selectors.fileInfoStub).exists()).toBeFalsy()
     })
@@ -67,7 +67,7 @@ describe('FileSideBar', () => {
     it('should show when one project space resource selected', async () => {
       const item = mock<SpaceResource>({ path: '/someFolder', driveType: 'project' })
       const { wrapper } = createWrapper({ item })
-      wrapper.vm.loadedResource = item
+      ;(wrapper.vm as any).loadedResource = item
       await wrapper.vm.$nextTick()
       expect(wrapper.find(selectors.spaceInfoStub).exists()).toBeTruthy()
     })
@@ -78,7 +78,7 @@ describe('FileSideBar', () => {
     it('should not show when selected resource is not a project space', async () => {
       const item = mock<Resource>({ path: '/someFolder' })
       const { wrapper } = createWrapper({ item })
-      wrapper.vm.loadedResource = item
+      ;(wrapper.vm as any).loadedResource = item
       await wrapper.vm.$nextTick()
       expect(wrapper.find(selectors.spaceInfoStub).exists()).toBeFalsy()
     })
@@ -95,7 +95,7 @@ describe('FileSideBar', () => {
       })
 
       const { setLoading } = useSharesStore()
-      await wrapper.vm.loadSharesTask.perform(resource)
+      await (wrapper.vm as any).loadSharesTask.perform(resource)
 
       expect(setLoading).toHaveBeenCalledTimes(2)
     })
@@ -112,7 +112,7 @@ describe('FileSideBar', () => {
       })
 
       const { setCollaboratorShares, setLinkShares } = useSharesStore()
-      await wrapper.vm.loadSharesTask.perform(resource)
+      await (wrapper.vm as any).loadSharesTask.perform(resource)
 
       expect(setCollaboratorShares).toHaveBeenCalledWith([expect.anything()])
       expect(setLinkShares).toHaveBeenCalledWith([expect.anything()])
@@ -137,7 +137,7 @@ describe('FileSideBar', () => {
       const resourcesStore = useResourcesStore()
       resourcesStore.ancestorMetaData = { '/foo': mock<AncestorMetaDataValue>({ id: '1' }) }
 
-      await wrapper.vm.loadSharesTask.perform(resource)
+      await (wrapper.vm as any).loadSharesTask.perform(resource)
 
       expect(
         mocks.$clientService.graphAuthenticated.permissions.listPermissions
@@ -155,7 +155,7 @@ describe('FileSideBar', () => {
 
       const { isAppEnabled } = useAppsStore()
       vi.mocked(isAppEnabled).mockReturnValue(true)
-      await wrapper.vm.loadSharesTask.perform(resource)
+      await (wrapper.vm as any).loadSharesTask.perform(resource)
 
       expect(
         mocks.$clientService.graphAuthenticated.permissions.listPermissions
@@ -173,7 +173,7 @@ describe('FileSideBar', () => {
         allowedRoles: []
       })
 
-      await wrapper.vm.loadSharesTask.perform(resource)
+      await (wrapper.vm as any).loadSharesTask.perform(resource)
       expect(loadAncestorMetaData).toHaveBeenCalled()
     })
 
@@ -191,7 +191,7 @@ describe('FileSideBar', () => {
         const sharesStore = useSharesStore()
         sharesStore.collaboratorShares = [mock<CollaboratorShare>()]
 
-        await wrapper.vm.loadSharesTask.perform(resource)
+        await (wrapper.vm as any).loadSharesTask.perform(resource)
 
         expect(sharesStore.setCollaboratorShares).toHaveBeenCalledWith([expect.anything()])
       })
@@ -208,7 +208,7 @@ describe('FileSideBar', () => {
         const sharesStore = useSharesStore()
         sharesStore.collaboratorShares = [mock<CollaboratorShare>()]
 
-        await wrapper.vm.loadSharesTask.perform(resource)
+        await (wrapper.vm as any).loadSharesTask.perform(resource)
 
         expect(sharesStore.setCollaboratorShares).toHaveBeenCalledWith([])
       })
@@ -225,7 +225,7 @@ describe('FileSideBar', () => {
         const sharesStore = useSharesStore()
         sharesStore.collaboratorShares = [mock<CollaboratorShare>()]
 
-        await wrapper.vm.loadSharesTask.perform(resource)
+        await (wrapper.vm as any).loadSharesTask.perform(resource)
 
         expect(sharesStore.setCollaboratorShares).toHaveBeenCalledWith([])
       })