diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
index 9caf13840e..50195f6a34 100644
--- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
@@ -18,7 +18,7 @@ exports[`Projects view > different files view states > lists all available proje
             <!--v-if-->
           </div>
         </div>
-        <resource-table-stub resources="[object Object],[object Object]" resourcedomselector="[Function]" arepathsdisplayed="false" arethumbnailsdisplayed="true" selectedids="" hasactions="true" showrenamequickaction="true" areresourcesclickable="true" headerposition="0" isselectable="true" issidebaropen="false" paddingx="small" dragdrop="false" viewmode="resource-table" hover="true" sortby="name" fieldsdisplayed="image,name,totalQuota,usedQuota,remainingQuota,indicators,mdate" sortdir="asc" resourcetype="space" lazy="true" sort-fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" view-size="1"></resource-table-stub>
+        <resource-table-stub resources="[object Object],[object Object]" resourcedomselector="[Function]" arepathsdisplayed="false" selectedids="" hasactions="true" showrenamequickaction="true" areresourcesclickable="true" headerposition="0" isselectable="true" issidebaropen="false" dragdrop="false" viewmode="resource-table" hover="true" sortby="name" fieldsdisplayed="image,name,totalQuota,usedQuota,remainingQuota,indicators,mdate" sortdir="asc" resourcetype="space" lazy="true" sort-fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" view-size="1"></resource-table-stub>
       </div>
     </div>
   </div>
diff --git a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
index 72099d4c79..6d2d1d88ae 100644
--- a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
@@ -17,7 +17,7 @@ exports[`TrashOverview > view states > should render trash list 1`] = `
           <!--v-if-->
         </div>
       </div>
-      <resource-table-stub resources="[object Object],[object Object],[object Object]" resourcedomselector="[Function]" arepathsdisplayed="false" arethumbnailsdisplayed="false" selectedids="" hasactions="true" showrenamequickaction="false" targetroutecallback="[Function]" areresourcesclickable="true" headerposition="0" isselectable="false" issidebaropen="false" paddingx="small" dragdrop="false" viewmode="resource-table" hover="true" sortby="name" fieldsdisplayed="name" sortdir="asc" resourcetype="file" lazy="true" class="trash-table" sort-fields="" view-size="1"></resource-table-stub>
+      <resource-table-stub resources="[object Object],[object Object],[object Object]" resourcedomselector="[Function]" arepathsdisplayed="false" selectedids="" hasactions="true" showrenamequickaction="false" targetroutecallback="[Function]" areresourcesclickable="true" headerposition="0" isselectable="false" issidebaropen="false" dragdrop="false" viewmode="resource-table" hover="true" sortby="name" fieldsdisplayed="name" sortdir="asc" resourcetype="file" lazy="true" class="trash-table" sort-fields="" are-thumbnails-displayed="false" view-size="1"></resource-table-stub>
     </div>
   </div>
   <!--v-if-->
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
index 527cfd2e2f..776bca85c8 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
@@ -242,7 +242,6 @@
     </template>
     <template #actions="{ item }">
       <div v-if="showContextDrop(item)" class="flex items-center justify-end flex-row flex-nowrap">
-        <!-- @slot Add quick actions before the `context-menu / three dot` button in the actions column -->
         <slot name="quickActions" :resource="item" />
         <context-menu-quick-action
           ref="contextMenuButton"
@@ -259,7 +258,6 @@
       </div>
     </template>
     <template v-if="$slots.footer" #footer>
-      <!-- @slot Footer of the files table -->
       <slot name="footer" />
     </template>
   </oc-table>
@@ -268,17 +266,8 @@
   </Teleport>
 </template>
 
-<script lang="ts">
-import {
-  ComponentPublicInstance,
-  computed,
-  ComputedRef,
-  defineComponent,
-  PropType,
-  ref,
-  unref,
-  useTemplateRef
-} from 'vue'
+<script setup lang="ts">
+import { ComponentPublicInstance, computed, nextTick, ref, unref, useTemplateRef } from 'vue'
 import { useWindowSize } from '@vueuse/core'
 import {
   extractDomSelector,
@@ -301,7 +290,6 @@ import {
   useCanBeOpenedWithSecureView,
   useCapabilityStore,
   useClipboardStore,
-  useConfigStore,
   useEmbedMode,
   useFileActions,
   useFolderLink,
@@ -314,7 +302,7 @@ import {
 import ResourceListItem from './ResourceListItem.vue'
 import ResourceGhostElement from './ResourceGhostElement.vue'
 import ResourceSize from './ResourceSize.vue'
-import { EVENT_FILE_DROPPED, EVENT_TROW_MOUNTED, ImageDimension } from '../../constants'
+import { ImageDimension } from '../../constants'
 import { eventBus } from '../../services'
 import {
   ContextMenuBtnClickEventData,
@@ -326,11 +314,9 @@ import {
 import { SideBarEventTopics } from '../../composables/sideBar'
 import ContextMenuQuickAction from '../ContextActions/ContextMenuQuickAction.vue'
 import { useInterceptModifierClick } from '../../composables/keyboardActions'
-
-import { useResourceRouteResolver } from '../../composables/filesList/useResourceRouteResolver'
 import { ClipboardActions } from '../../helpers/clipboardActions'
 import { determineResourceTableSortFields } from '../../helpers/ui/resourceTable'
-import { useFileActionsRename } from '../../composables/actions'
+import { FileActionOptions, useFileActionsRename } from '../../composables/actions'
 import { createLocationCommon, isLocationTrashActive } from '../../router'
 import get from 'lodash-es/get'
 import { storeToRefs } from 'pinia'
@@ -343,975 +329,733 @@ import { useIsMobile } from '@opencloud-eu/design-system/composables'
 
 const TAGS_MINIMUM_SCREEN_WIDTH = 850
 
-export default defineComponent({
-  name: 'ResourceTable',
-  components: {
-    UserAvatar,
-    ContextMenuQuickAction,
-    ResourceGhostElement,
-    ResourceListItem,
-    ResourceSize,
-    ResourceStatusIndicators,
-    OcSpinner,
-    OcTable
-  },
-  props: {
-    /**
-     * Resources to be displayed in the table.
-     * Required fields:
-     * - name: The name of the resource containing the file extension in case of a file
-     * - path: The full path of the resource
-     * - type: The type of the resource. Can be `file` or `folder`
-     * Optional fields:
-     * - thumbnail
-     * - size: The size of the resource
-     * - modificationDate: The date of the last modification of the resource
-     * - shareDate: The date when the share was created
-     * - deletionDate: The date when the resource has been deleted
-     * - syncEnabled: The sync status of the share
-     */
-    resources: {
-      type: Array as PropType<Resource[]>,
-      required: true
-    },
-    /**
-     * Closure function to mutate the resource id into a valid DOM selector.
-     */
-    resourceDomSelector: {
-      type: Function as PropType<(resource: Resource) => string>,
-      required: false,
-      default: (resource: Resource) => extractDomSelector(resource.id)
-    },
-    /**
-     * Asserts whether resources path should be shown in the resource name
-     */
-    arePathsDisplayed: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * Asserts whether icons should be replaced with thumbnails for resources which provide them
-     */
-    areThumbnailsDisplayed: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    /**
-     * V-model for the selection
-     */
-    selectedIds: {
-      type: Array as PropType<string[]>,
-      default: (): string[] => []
-    },
-    /**
-     * Asserts whether actions are available
-     */
-    hasActions: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    /**
-     * Asserts whether rename quick action is available
-     */
-    showRenameQuickAction: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    /**
-     * Accepts a `path` and a `resource` param and returns a corresponding route object.
-     */
-    targetRouteCallback: {
-      type: Function as PropType<(arg: CreateTargetRouteOptions) => unknown>,
-      required: false,
-      default: undefined
-    },
-    /**
-     * Asserts whether clicking on the resource name triggers any action
-     */
-    areResourcesClickable: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    /**
-     * Top position of header used when the header is sticky in pixels
-     */
-    headerPosition: {
-      type: Number,
-      required: false,
-      default: 0
-    },
-    /**
-     * Asserts whether resources in the table can be selected
-     */
-    isSelectable: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    /**
-     * Sets specific css classes for when the side bar is (not) open
-     */
-    isSideBarOpen: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * Sets the padding size for x axis
-     * @values xsmall, small, medium, large, xlarge
-     */
-    paddingX: {
-      type: String,
-      required: false,
-      default: 'small',
-      validator: (size: string) => /(xsmall|small|medium|large|xlarge)/.test(size)
-    },
-    /**
-     * Enable Drag & Drop events
-     */
-    dragDrop: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * The active view mode.
-     */
-    viewMode: {
-      type: String as PropType<
-        | typeof FolderViewModeConstants.name.condensedTable
-        | typeof FolderViewModeConstants.name.table
-      >,
-      default: () => FolderViewModeConstants.defaultModeName,
-      validator: (
-        value:
-          | typeof FolderViewModeConstants.name.condensedTable
-          | typeof FolderViewModeConstants.name.table
-      ) =>
-        [FolderViewModeConstants.name.condensedTable, FolderViewModeConstants.name.table].includes(
-          value
-        )
-    },
-    /**
-     * Enable hover effect
-     */
-    hover: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    /**
-     * Show that the table is sorted by this column (no actual sorting takes place)
-     */
-    sortBy: {
-      type: String,
-      required: false,
-      default: undefined
-    },
-    /**
-     * Define what fields should be displayed in the table
-     * If null, all fields are displayed
-     */
-    fieldsDisplayed: {
-      type: Array,
-      required: false,
-      default: null
-    },
-    /**
-     * Show that the table is sorted ascendingly/descendingly (no actual sorting takes place)
-     */
-    sortDir: {
-      type: String as PropType<SortDir>,
-      required: false,
-      default: undefined,
-      validator: (value: string) => {
-        return (
-          value === undefined || [SortDir.Asc.toString(), SortDir.Desc.toString()].includes(value)
-        )
-      }
-    },
-    /**
-     * Space resource the provided resources originate from. Not required on meta pages like favorites, search, ...
-     */
-    space: {
-      type: Object as PropType<SpaceResource>,
-      required: false,
-      default: null
-    },
-    resourceType: {
-      type: String as PropType<'file' | 'space'>,
-      default: 'file'
-    },
-    /**
-     * Determines if the table content should be loaded lazily.
-     */
-    lazy: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * This is only relevant for CERN and can be ignored in any other cases.
-     */
-    groupingSettings: {
-      type: Object,
-      required: false,
-      default: null
-    }
-  },
-  emits: [
-    'fileClick',
-    'sort',
-    'rowMounted',
-    EVENT_FILE_DROPPED,
-    'update:selectedIds',
-    'update:modelValue'
-  ],
-  setup(props, context) {
-    const router = useRouter()
-    const capabilityStore = useCapabilityStore()
-    const { getMatchingSpace } = useGetMatchingSpace()
-    const { canBeOpenedWithSecureView } = useCanBeOpenedWithSecureView()
-    const { interceptModifierClick } = useInterceptModifierClick()
-    const folderLinkUtils = useFolderLink({
-      space: ref(props.space),
-      targetRouteCallback: computed(() => props.targetRouteCallback)
-    })
-    const { isSticky } = useIsTopBarSticky()
-    const { $gettext } = useGettext()
-    const { isMobile } = useIsMobile()
-    const {
-      isLocationPicker,
-      isFilePicker,
-      postMessage,
-      isEnabled: isEmbedModeEnabled,
-      fileTypes: embedModeFileTypes
-    } = useEmbedMode()
-    const { getDefaultAction } = useFileActions()
-    const configStore = useConfigStore()
-    const { options: configOptions } = storeToRefs(configStore)
-
-    const clipboardStore = useClipboardStore()
-    const { resources: clipboardResources, action: clipboardAction } = storeToRefs(clipboardStore)
-
-    const authStore = useAuthStore()
-    const { userContextReady } = storeToRefs(authStore)
-
-    const resourcesStore = useResourcesStore()
-    const { areFileExtensionsShown, latestSelectedId, deleteQueue } = storeToRefs(resourcesStore)
-
-    const dragItem = ref<Resource>()
-    const ghostElement =
-      useTemplateRef<ComponentPublicInstance<typeof ResourceGhostElement>>('ghostElement')
-    const contextMenuButton =
-      useTemplateRef<ComponentPublicInstance<typeof OcButton>>('contextMenuButton')
-
-    const { width } = useWindowSize()
-    const hasTags = computed(
-      () => capabilityStore.filesTags && width.value >= TAGS_MINIMUM_SCREEN_WIDTH
+const {
+  resources,
+  resourceDomSelector = (resource: Resource) => extractDomSelector(resource.id),
+  arePathsDisplayed = false,
+  selectedIds = [],
+  hasActions = true,
+  showRenameQuickAction = true,
+  targetRouteCallback = undefined,
+  areResourcesClickable = true,
+  headerPosition = 0,
+  isSelectable = true,
+  isSideBarOpen = false,
+  dragDrop = false,
+  viewMode = FolderViewModeConstants.defaultModeName,
+  hover = true,
+  sortBy = undefined,
+  fieldsDisplayed = undefined,
+  sortDir = undefined,
+  space = undefined,
+  resourceType = 'file',
+  lazy = true,
+  groupingSettings = undefined
+} = defineProps<{
+  resources: Resource[]
+  resourceDomSelector?: (resource: Resource) => string
+  arePathsDisplayed?: boolean
+  selectedIds?: string[]
+  hasActions?: boolean
+  showRenameQuickAction?: boolean
+  targetRouteCallback?: (arg: CreateTargetRouteOptions) => unknown
+  areResourcesClickable?: boolean
+  headerPosition?: number
+  isSelectable?: boolean
+  isSideBarOpen?: boolean
+  dragDrop?: boolean
+  viewMode?:
+    | typeof FolderViewModeConstants.name.condensedTable
+    | typeof FolderViewModeConstants.name.table
+  hover?: boolean
+  sortBy?: string
+  fieldsDisplayed?: string[]
+  sortDir?: SortDir
+  space?: SpaceResource
+  resourceType?: 'file' | 'space'
+  lazy?: boolean
+  groupingSettings?: Record<string, unknown>
+}>()
+
+const emit = defineEmits<{
+  (e: 'fileClick', options: FileActionOptions): void
+  (e: 'sort', options: { sortBy: string; sortDir: SortDir }): void
+  (
+    e: 'rowMounted',
+    item: Resource,
+    rowElement: ComponentPublicInstance<typeof OcTableTr>,
+    dimension: ImageDimension
+  ): void
+  (e: 'fileDropped', id: string): void
+  (e: 'update:selectedIds', selectedIds: string[]): void
+  (e: 'update:modelValue', value: Resource[]): void
+}>()
+
+defineSlots<{
+  image?: (props: { resource: Resource }) => unknown
+  additionalResourceContent?: (props: { resource: Resource }) => unknown
+  syncEnabled?: (props: { resource: Resource }) => unknown
+  manager?: (props: { resource: Resource }) => unknown
+  members?: (props: { resource: Resource }) => unknown
+  totalQuota?: (props: { resource: Resource }) => unknown
+  usedQuota?: (props: { resource: Resource }) => unknown
+  remainingQuota?: (props: { resource: Resource }) => unknown
+  quickActions?: (props: { resource: Resource }) => unknown
+  contextMenu?: (props: { resource: Resource; isOpen: boolean }) => unknown
+  footer?: () => unknown
+}>()
+
+const router = useRouter()
+const capabilityStore = useCapabilityStore()
+const { getMatchingSpace } = useGetMatchingSpace()
+const { canBeOpenedWithSecureView } = useCanBeOpenedWithSecureView()
+const { interceptModifierClick } = useInterceptModifierClick()
+const {
+  getParentFolderLink,
+  getParentFolderLinkIconAdditionalAttributes,
+  getParentFolderName,
+  getPathPrefix,
+  getFolderLink
+} = useFolderLink({
+  space: ref(space),
+  targetRouteCallback: computed(() => targetRouteCallback)
+})
+const { isSticky } = useIsTopBarSticky()
+const { $gettext, $ngettext, current: currentLanguage } = useGettext()
+const { isMobile } = useIsMobile()
+const {
+  isLocationPicker,
+  isFilePicker,
+  postMessage,
+  isEnabled: isEmbedModeEnabled,
+  fileTypes: embedModeFileTypes
+} = useEmbedMode()
+const { getDefaultAction } = useFileActions()
+
+const clipboardStore = useClipboardStore()
+const { resources: clipboardResources, action: clipboardAction } = storeToRefs(clipboardStore)
+
+const authStore = useAuthStore()
+const { userContextReady } = storeToRefs(authStore)
+
+const resourcesStore = useResourcesStore()
+const { areFileExtensionsShown, latestSelectedId, deleteQueue } = storeToRefs(resourcesStore)
+
+const dragItem = ref<Resource>()
+const ghostElement =
+  useTemplateRef<ComponentPublicInstance<typeof ResourceGhostElement>>('ghostElement')
+const contextMenuButton =
+  useTemplateRef<ComponentPublicInstance<typeof OcButton>>('contextMenuButton')
+
+const { width } = useWindowSize()
+const hasTags = computed(
+  () => capabilityStore.filesTags && width.value >= TAGS_MINIMUM_SCREEN_WIDTH
+)
+
+const isTrashOverviewRoute = useActiveLocation(isLocationTrashActive, 'files-trash-overview')
+
+const { actions: renameActions } = useFileActionsRename()
+const { actions: renameActionsSpace } = useSpaceActionsRename()
+const renameHandler = computed(() => unref(renameActions)[0].handler)
+const renameHandlerSpace = computed(() => unref(renameActionsSpace)[0].handler)
+
+const getTagToolTip = (tag: string) => $gettext(`Search for tag %{tag}`, { tag })
+
+const isResourceDisabled = (resource: Resource) => {
+  if (unref(isEmbedModeEnabled) && unref(embedModeFileTypes)?.length) {
+    return (
+      !unref(embedModeFileTypes).includes(resource.extension) &&
+      !unref(embedModeFileTypes).includes(resource.mimeType) &&
+      !resource.isFolder
     )
+  }
+  return resource.processing === true || isResourceInDeleteQueue(resource.id)
+}
 
-    const isTrashOverviewRoute = useActiveLocation(isLocationTrashActive, 'files-trash-overview')
+const disabledResources = computed(() => {
+  return resources?.filter(isResourceDisabled)?.map((resource) => resource.id) || []
+})
 
-    const { actions: renameActions } = useFileActionsRename()
-    const { actions: renameActionsSpace } = useSpaceActionsRename()
-    const renameHandler = computed(() => unref(renameActions)[0].handler)
-    const renameHandlerSpace = computed(() => unref(renameActionsSpace)[0].handler)
+const isResourceClickable = (resource: Resource) => {
+  if (!areResourcesClickable) {
+    return false
+  }
 
-    const getTagToolTip = (tag: string) => $gettext(`Search for tag %{tag}`, { tag })
+  if (isProjectSpaceResource(resource) && resource.disabled) {
+    return false
+  }
 
-    const isResourceDisabled = (resource: Resource) => {
-      if (unref(isEmbedModeEnabled) && unref(embedModeFileTypes)?.length) {
-        return (
-          !unref(embedModeFileTypes).includes(resource.extension) &&
-          !unref(embedModeFileTypes).includes(resource.mimeType) &&
-          !resource.isFolder
-        )
-      }
-      return resource.processing === true || isResourceInDeleteQueue(resource.id)
+  if (!resource.isFolder) {
+    if (!resource.canDownload() && !canBeOpenedWithSecureView(resource)) {
+      return false
     }
 
-    const disabledResources: ComputedRef<Array<Resource['id']>> = computed(() => {
-      return (
-        props.resources
-          ?.filter((resource) => isResourceDisabled(resource) === true)
-          ?.map((resource) => resource.id) || []
-      )
-    })
-
-    const isResourceClickable = (resource: Resource) => {
-      if (!props.areResourcesClickable) {
-        return false
-      }
-
-      if (isProjectSpaceResource(resource) && resource.disabled) {
-        return false
-      }
+    if (unref(isEmbedModeEnabled) && !unref(isFilePicker)) {
+      return false
+    }
+  }
 
-      if (!resource.isFolder) {
-        if (!resource.canDownload() && !canBeOpenedWithSecureView(resource)) {
-          return false
-        }
+  return !unref(disabledResources).includes(resource.id)
+}
 
-        if (unref(isEmbedModeEnabled) && !unref(isFilePicker)) {
-          return false
-        }
-      }
+const emitSelect = (selectedIds: string[]) => {
+  eventBus.publish('app.files.list.clicked')
+  emit('update:selectedIds', selectedIds)
+}
 
-      return !unref(disabledResources).includes(resource.id)
-    }
+const toggleSelection = (resourceId: string) => {
+  resourcesStore.toggleSelection(resourceId)
+  emitSelect([...resourcesStore.selectedIds])
+}
 
-    const emitSelect = (selectedIds: string[]) => {
-      eventBus.publish('app.files.list.clicked')
-      context.emit('update:selectedIds', selectedIds)
-    }
+const getResourceLink = (resource: Resource) => {
+  if (resource.isFolder) {
+    return getFolderLink(resource)
+  }
 
-    const toggleSelection = (resourceId: string) => {
-      resourcesStore.toggleSelection(resourceId)
-      emitSelect(resourcesStore.selectedIds)
-    }
+  let matchingSpace = space
+  if (!matchingSpace) {
+    matchingSpace = getMatchingSpace(resource)
+  }
 
-    const getResourceLink = (resource: Resource) => {
-      if (resource.isFolder) {
-        return folderLinkUtils.getFolderLink(resource)
-      }
+  const action = getDefaultAction({ resources: [resource], space: matchingSpace })
 
-      let space = props.space
-      if (!space) {
-        space = getMatchingSpace(resource)
-      }
+  if (!action?.route) {
+    return
+  }
 
-      const action = getDefaultAction({ resources: [resource], space })
+  return action.route({ space: matchingSpace, resources: [resource] })
+}
 
-      if (!action?.route) {
-        return
-      }
+const isResourceInDeleteQueue = (id: string): boolean => {
+  return unref(deleteQueue).includes(id)
+}
 
-      return action.route({ space, resources: [resource] })
-    }
+const showContextDrop = (item: Resource | SpaceResource) => {
+  if (unref(isTrashOverviewRoute) && isProjectSpaceResource(item) && item.disabled) {
+    return false
+  }
 
-    const isResourceInDeleteQueue = (id: string): boolean => {
-      return unref(deleteQueue).includes(id)
-    }
+  return !isResourceDisabled(item)
+}
 
-    const showContextDrop = (item: Resource | SpaceResource) => {
-      if (unref(isTrashOverviewRoute) && isProjectSpaceResource(item) && item.disabled) {
-        return false
-      }
+const fields = computed(() => {
+  if (resources.length === 0) {
+    return []
+  }
+  const firstResource = resources[0]
+  const fields: FieldType[] = []
+  if (isSelectable) {
+    fields.push({
+      name: 'select',
+      title: '',
+      type: 'slot',
+      headerType: 'slot',
+      width: 'shrink'
+    })
+  }
 
-      return !isResourceDisabled(item)
-    }
+  const sortFields = determineResourceTableSortFields(firstResource)
+  fields.push(
+    ...(
+      [
+        {
+          name: 'name',
+          title: $gettext('Name'),
+          type: 'slot',
+          width: 'expand',
+          wrap: 'truncate'
+        },
 
-    return {
-      router,
-      configOptions,
-      dragItem,
-      ghostElement,
-      contextMenuButton,
-      getTagToolTip,
-      renameActions,
-      renameActionsSpace,
-      renameHandler,
-      renameHandlerSpace,
-      FolderViewModeConstants,
-      hasTags,
-      disabledResources,
-      isResourceDisabled,
-      userContextReady,
-      getMatchingSpace,
-      clipboardResources,
-      clipboardAction,
-      ...useResourceRouteResolver(
         {
-          space: ref(props.space),
-          targetRouteCallback: computed(() => props.targetRouteCallback)
+          name: 'manager',
+          prop: 'members',
+          title: $gettext('Manager'),
+          type: 'slot'
         },
-        context
-      ),
-      ...folderLinkUtils,
-      postMessage,
-      isFilePicker,
-      isLocationPicker,
-      isEmbedModeEnabled,
-      emitSelect,
-      toggleSelection,
-      eventBus,
-      interceptModifierClick,
-      areFileExtensionsShown,
-      latestSelectedId,
-      isResourceClickable,
-      getResourceLink,
-      isSticky,
-      isResourceInDeleteQueue,
-      ShareTypes,
-      showContextDrop,
-      isMobile
-    }
-  },
-  data() {
-    return {
-      constants: {
-        ImageDimension,
-        EVENT_TROW_MOUNTED
-      }
-    }
-  },
-  computed: {
-    fields() {
-      if (this.resources.length === 0) {
-        return []
-      }
-      const firstResource = this.resources[0]
-      const fields: FieldType[] = []
-      if (this.isSelectable) {
-        fields.push({
-          name: 'select',
-          title: '',
+        {
+          name: 'members',
+          title: $gettext('Members'),
+          prop: 'members',
+          type: 'slot'
+        },
+        {
+          name: 'totalQuota',
+          prop: 'spaceQuota.total',
+          title: $gettext('Total quota'),
           type: 'slot',
-          headerType: 'slot',
+          sortable: true
+        },
+        {
+          name: 'usedQuota',
+          prop: 'spaceQuota.used',
+          title: $gettext('Used quota'),
+          type: 'slot',
+          sortable: true
+        },
+        {
+          name: 'remainingQuota',
+          prop: 'spaceQuota.remaining',
+          title: $gettext('Remaining quota'),
+          type: 'slot',
+          sortable: true
+        },
+        {
+          name: 'indicators',
+          title: $gettext('Status'),
+          type: 'slot',
+          alignH: 'right',
+          wrap: 'nowrap',
           width: 'shrink'
-        })
-      }
-
-      const sortFields = determineResourceTableSortFields(firstResource)
-      fields.push(
-        ...(
-          [
-            {
-              name: 'name',
-              title: this.$gettext('Name'),
-              type: 'slot',
-              width: 'expand',
-              wrap: 'truncate'
-            },
-
-            {
-              name: 'manager',
-              prop: 'members',
-              title: this.$gettext('Manager'),
-              type: 'slot'
-            },
-            {
-              name: 'members',
-              title: this.$gettext('Members'),
-              prop: 'members',
-              type: 'slot'
-            },
-            {
-              name: 'totalQuota',
-              prop: 'spaceQuota.total',
-              title: this.$gettext('Total quota'),
-              type: 'slot',
-              sortable: true
-            },
-            {
-              name: 'usedQuota',
-              prop: 'spaceQuota.used',
-              title: this.$gettext('Used quota'),
-              type: 'slot',
-              sortable: true
-            },
-            {
-              name: 'remainingQuota',
-              prop: 'spaceQuota.remaining',
-              title: this.$gettext('Remaining quota'),
-              type: 'slot',
-              sortable: true
-            },
-            {
-              name: 'indicators',
-              title: this.$gettext('Status'),
-              type: 'slot',
-              alignH: 'right',
-              wrap: 'nowrap',
-              width: 'shrink'
-            },
-            {
-              name: 'size',
-              title: this.$gettext('Size'),
-              type: 'slot',
-              alignH: 'right',
-              wrap: 'nowrap',
-              width: 'shrink'
-            },
-            {
-              name: 'syncEnabled',
-              title: this.$gettext('Info'),
-              type: 'slot',
-              alignH: 'right',
-              wrap: 'nowrap',
-              width: 'shrink'
-            },
-            {
-              name: 'tags',
-              title: this.$gettext('Tags'),
-              type: 'slot',
-              alignH: 'right',
-              wrap: 'nowrap',
-              width: 'shrink'
-            },
-            {
-              name: 'sharedBy',
-              title: this.$gettext('Shared by'),
-              type: 'slot',
-              alignH: 'right',
-              wrap: 'nowrap',
-              width: 'shrink'
-            },
-            {
-              name: 'sharedWith',
-              title: this.$gettext('Shared with'),
-              type: 'slot',
-              alignH: 'right',
-              wrap: 'nowrap',
-              width: 'shrink'
-            },
-            {
-              name: 'mdate',
-              title: this.$gettext('Modified'),
-              type: 'slot',
-              alignH: 'right',
-              wrap: 'nowrap',
-              width: 'shrink',
-              accessibleLabelCallback: (item) =>
-                this.formatDateRelative((item as Resource).mdate) +
-                ' (' +
-                this.formatDate((item as Resource).mdate) +
-                ')'
-            },
-            {
-              name: 'sdate',
-              title: this.$gettext('Shared on'),
-              type: 'slot',
-              alignH: 'right',
-              wrap: 'nowrap',
-              width: 'shrink',
-              accessibleLabelCallback: (item) =>
-                this.formatDateRelative((item as IncomingShareResource).sdate) +
-                ' (' +
-                this.formatDate((item as IncomingShareResource).sdate) +
-                ')'
-            },
-            {
-              name: 'ddate',
-              title: this.$gettext('Deleted'),
-              type: 'slot',
-              alignH: 'right',
-              wrap: 'nowrap',
-              width: 'shrink',
-              accessibleLabelCallback: (item) =>
-                this.formatDateRelative((item as TrashResource).ddate) +
-                ' (' +
-                this.formatDate((item as TrashResource).ddate) +
-                ')'
-            }
-          ] as FieldType[]
-        )
-          .filter((field) => {
-            if (field.name === 'tags' && !this.hasTags) {
-              return false
-            }
-
-            if (field.name === 'indicators') {
-              return true
-            }
-
-            let hasField: boolean
-            if (field.prop) {
-              hasField = get(firstResource, field.prop) !== undefined
-            } else {
-              hasField = Object.prototype.hasOwnProperty.call(firstResource, field.name)
-            }
-            if (!this.fieldsDisplayed) {
-              return hasField
-            }
-
-            return hasField && this.fieldsDisplayed.includes(field.name)
-          })
-          .map((field) => {
-            const sortField = sortFields.find((f) => f.name === field.name)
-            if (sortField) {
-              Object.assign(field, {
-                sortable: sortField.sortable,
-                sortDir: sortField.sortDir
-              })
-            }
-            return field
-          })
-      )
-      if (this.hasActions) {
-        fields.push({
-          name: 'actions',
-          title: this.$gettext('Actions'),
+        },
+        {
+          name: 'size',
+          title: $gettext('Size'),
           type: 'slot',
           alignH: 'right',
           wrap: 'nowrap',
           width: 'shrink'
-        })
-      }
+        },
+        {
+          name: 'syncEnabled',
+          title: $gettext('Info'),
+          type: 'slot',
+          alignH: 'right',
+          wrap: 'nowrap',
+          width: 'shrink'
+        },
+        {
+          name: 'tags',
+          title: $gettext('Tags'),
+          type: 'slot',
+          alignH: 'right',
+          wrap: 'nowrap',
+          width: 'shrink'
+        },
+        {
+          name: 'sharedBy',
+          title: $gettext('Shared by'),
+          type: 'slot',
+          alignH: 'right',
+          wrap: 'nowrap',
+          width: 'shrink'
+        },
+        {
+          name: 'sharedWith',
+          title: $gettext('Shared with'),
+          type: 'slot',
+          alignH: 'right',
+          wrap: 'nowrap',
+          width: 'shrink'
+        },
+        {
+          name: 'mdate',
+          title: $gettext('Modified'),
+          type: 'slot',
+          alignH: 'right',
+          wrap: 'nowrap',
+          width: 'shrink',
+          accessibleLabelCallback: (item) =>
+            formatDateRelative((item as Resource).mdate) +
+            ' (' +
+            formatDate((item as Resource).mdate) +
+            ')'
+        },
+        {
+          name: 'sdate',
+          title: $gettext('Shared on'),
+          type: 'slot',
+          alignH: 'right',
+          wrap: 'nowrap',
+          width: 'shrink',
+          accessibleLabelCallback: (item) =>
+            formatDateRelative((item as IncomingShareResource).sdate) +
+            ' (' +
+            formatDate((item as IncomingShareResource).sdate) +
+            ')'
+        },
+        {
+          name: 'ddate',
+          title: $gettext('Deleted'),
+          type: 'slot',
+          alignH: 'right',
+          wrap: 'nowrap',
+          width: 'shrink',
+          accessibleLabelCallback: (item) =>
+            formatDateRelative((item as TrashResource).ddate) +
+            ' (' +
+            formatDate((item as TrashResource).ddate) +
+            ')'
+        }
+      ] as FieldType[]
+    )
+      .filter((field) => {
+        if (field.name === 'tags' && !unref(hasTags)) {
+          return false
+        }
 
-      return fields
-    },
-    areAllResourcesSelected() {
-      const allResourcesDisabled = this.disabledResources.length === this.resources.length
-      const allSelected =
-        this.selectedResources.length === this.resources.length - this.disabledResources.length
-
-      return !allResourcesDisabled && allSelected
-    },
-    selectAllCheckboxLabel() {
-      return this.areAllResourcesSelected
-        ? this.$gettext('Clear selection')
-        : this.$gettext('Select all')
-    },
-    selectedResources() {
-      return this.resources.filter((resource) => this.selectedIds.includes(resource.id))
-    },
-    contextMenuLabel() {
-      return this.$gettext('Show context menu')
-    },
-    dragSelection() {
-      const selection = [...this.selectedResources]
-      selection.splice(
-        selection.findIndex((i) => i.id === this.dragItem.id),
-        1
-      )
-      return selection
-    }
-  },
-  methods: {
-    isResourceSelected(item: Resource) {
-      return this.selectedIds.includes(item.id)
-    },
-    isResourceCut(resource: Resource) {
-      if (this.clipboardAction !== ClipboardActions.Cut) {
-        return false
-      }
-      return this.clipboardResources.some((r) => r.id === resource.id)
-    },
-    getTagLink(tag: string) {
-      const currentTerm = unref(this.router.currentRoute).query?.term
-      return createLocationCommon('files-common-search', {
-        query: { provider: 'files.sdk', q_tags: tag, ...(currentTerm && { term: currentTerm }) }
+        if (field.name === 'indicators') {
+          return true
+        }
+
+        let hasField: boolean
+        if (field.prop) {
+          hasField = get(firstResource, field.prop) !== undefined
+        } else {
+          hasField = Object.prototype.hasOwnProperty.call(firstResource, field.name)
+        }
+        if (!fieldsDisplayed) {
+          return hasField
+        }
+
+        return hasField && fieldsDisplayed.includes(field.name)
       })
-    },
-    getTagComponentAttrs(tag: string) {
-      if (!this.userContextReady) {
-        return {}
-      }
+      .map((field) => {
+        const sortField = sortFields.find((f) => f.name === field.name)
+        if (sortField) {
+          Object.assign(field, {
+            sortable: sortField.sortable,
+            sortDir: sortField.sortDir
+          })
+        }
+        return field
+      })
+  )
+  if (hasActions) {
+    fields.push({
+      name: 'actions',
+      title: $gettext('Actions'),
+      type: 'slot',
+      alignH: 'right',
+      wrap: 'nowrap',
+      width: 'shrink'
+    })
+  }
 
-      return {
-        to: this.getTagLink(tag)
-      }
-    },
-    isLatestSelectedItem(item: Resource) {
-      return item.id === this.latestSelectedId
-    },
-    hasRenameAction(item: Resource) {
-      if (!this.showRenameQuickAction) {
-        return false
-      }
+  return fields
+})
+const areAllResourcesSelected = computed(() => {
+  const allResourcesDisabled = unref(disabledResources).length === resources.length
+  const allSelected =
+    unref(selectedResources).length === resources.length - unref(disabledResources).length
 
-      if (isProjectSpaceResource(item)) {
-        return this.renameActionsSpace.filter((menuItem) =>
-          menuItem.isVisible({ resources: [item] })
-        ).length
-      }
+  return !allResourcesDisabled && allSelected
+})
+const selectAllCheckboxLabel = computed(() => {
+  return unref(areAllResourcesSelected) ? $gettext('Clear selection') : $gettext('Select all')
+})
+const selectedResources = computed(() => {
+  return resources.filter((resource) => unref(selectedIds).includes(resource.id))
+})
+const dragSelection = computed(() => {
+  const selection = [...unref(selectedResources)]
+  selection.splice(
+    selection.findIndex((i) => i.id === unref(dragItem).id),
+    1
+  )
+  return selection
+})
 
-      return this.renameActions.filter((menuItem) =>
-        menuItem.isVisible({ space: this.space, resources: [item] })
-      ).length
-    },
-    openRenameDialog(item: Resource) {
-      if (isProjectSpaceResource(item)) {
-        return this.renameHandlerSpace({
-          resources: [item]
-        })
-      }
-      this.renameHandler({
-        space: this.getMatchingSpace(item),
-        resources: [item]
-      })
-    },
-    openTagsSidebar() {
-      eventBus.publish(SideBarEventTopics.open)
-    },
-    handleFileClick(e: MouseEvent, resource: Resource) {
-      if (this.interceptModifierClick(e, resource)) {
-        return
-      }
-      this.$emit('fileClick', { space: this.getMatchingSpace(resource), resources: [resource] })
-    },
-    async fileDragged(file: Resource, event: DragEvent) {
-      if (!this.dragDrop) {
-        return
-      }
+const isResourceSelected = (item: Resource) => {
+  return unref(selectedIds).includes(item.id)
+}
+const isResourceCut = (resource: Resource) => {
+  if (unref(clipboardAction) !== ClipboardActions.Cut) {
+    return false
+  }
+  return unref(clipboardResources).some((r) => r.id === resource.id)
+}
+const getTagLink = (tag: string) => {
+  const currentTerm = unref(router.currentRoute).query?.term
+  return createLocationCommon('files-common-search', {
+    query: { provider: 'files.sdk', q_tags: tag, ...(currentTerm && { term: currentTerm }) }
+  })
+}
+const getTagComponentAttrs = (tag: string) => {
+  if (!unref(userContextReady)) {
+    return {}
+  }
 
-      await this.setDragItem(file, event)
+  return {
+    to: getTagLink(tag)
+  }
+}
+const isLatestSelectedItem = (item: Resource) => {
+  return item.id === unref(latestSelectedId)
+}
+const hasRenameAction = (item: Resource) => {
+  if (!showRenameQuickAction) {
+    return false
+  }
 
-      this.addSelectedResource(file)
-    },
-    fileDropped(selector: string, event: DragEvent) {
-      if (!this.dragDrop) {
-        return
-      }
-      const hasFilePayload = (event.dataTransfer.types || []).some((e) => e === 'Files')
-      if (hasFilePayload) {
-        return
-      }
-      this.dragItem = null
-      const dropTarget = event.target as HTMLElement
-      const dropTargetTr = dropTarget.closest('tr')
-      const dropItemId = dropTargetTr.dataset.itemId
-      this.dropRowStyling(selector, true, event)
-
-      this.$emit(EVENT_FILE_DROPPED, dropItemId)
-    },
-    async setDragItem(item: Resource, event: DragEvent) {
-      this.dragItem = item
-      await this.$nextTick()
-      this.ghostElement.$el.ariaHidden = 'true'
-      this.ghostElement.$el.style.left = '-99999px'
-      this.ghostElement.$el.style.top = '-99999px'
-      event.dataTransfer.setDragImage(this.ghostElement.$el, 0, 0)
-      event.dataTransfer.dropEffect = 'move'
-      event.dataTransfer.effectAllowed = 'move'
-    },
-    dropRowStyling(selector: string, leaving: boolean, event: DragEvent) {
-      const hasFilePayload = (event.dataTransfer?.types || []).some((e) => e === 'Files')
-      if (hasFilePayload) {
-        return
-      }
-      if ((event.currentTarget as HTMLElement)?.contains(event.relatedTarget as HTMLElement)) {
-        return
-      }
+  if (isProjectSpaceResource(item)) {
+    return unref(renameActionsSpace).filter((menuItem) => menuItem.isVisible({ resources: [item] }))
+      .length
+  }
 
-      const classList = document.getElementsByClassName(`oc-tbody-tr-${selector}`)[0].classList
-      const className = 'highlightedDropTarget'
-      leaving ? classList.remove(className) : classList.add(className)
-    },
-    sort(opts: { sortBy: string; sortDir: SortDir }) {
-      this.$emit('sort', opts)
-    },
-    addSelectedResource(file: Resource) {
-      const isSelected = this.isResourceSelected(file)
-      if (isSelected) {
-        return
-      }
-      this.toggleSelection(file.id)
-    },
-    showContextMenuOnBtnClick(data: ContextMenuBtnClickEventData, item: Resource) {
-      const { dropdown, event } = data
+  return unref(renameActions).filter((menuItem) => menuItem.isVisible({ space, resources: [item] }))
+    .length
+}
+const openRenameDialog = (item: Resource) => {
+  if (isProjectSpaceResource(item)) {
+    return unref(renameHandlerSpace)({
+      resources: [item]
+    })
+  }
+  unref(renameHandler)({
+    space: getMatchingSpace(item),
+    resources: [item]
+  })
+}
+const openTagsSidebar = () => {
+  eventBus.publish(SideBarEventTopics.open)
+}
 
-      if (event instanceof MouseEvent && this.interceptModifierClick(event, item)) {
-        return
-      }
+const fileDragged = async (file: Resource, event: DragEvent) => {
+  if (!dragDrop) {
+    return
+  }
 
-      if (this.isResourceDisabled(item)) {
-        return false
-      }
+  await setDragItem(file, event)
+  addSelectedResource(file)
+}
+const fileDropped = (selector: string, event: DragEvent) => {
+  if (!dragDrop) {
+    return
+  }
+  const hasFilePayload = (event.dataTransfer.types || []).some((e) => e === 'Files')
+  if (hasFilePayload) {
+    return
+  }
+  dragItem.value = null
+  const dropTarget = event.target as HTMLElement
+  const dropTargetTr = dropTarget.closest('tr')
+  const dropItemId = dropTargetTr.dataset.itemId
+  dropRowStyling(selector, true, event)
 
-      if (dropdown?.tippy === undefined) {
-        return
-      }
-      if (!this.isResourceSelected(item)) {
-        this.emitSelect([item.id])
-      }
-      displayPositionedDropdown(dropdown.tippy, event, this.contextMenuButton)
-    },
-    showContextMenu(row: ComponentPublicInstance<unknown>, event: MouseEvent, item: Resource) {
-      if (event instanceof MouseEvent && this.interceptModifierClick(event, item)) {
-        return
-      }
-      event.preventDefault()
-      if (this.isResourceDisabled(item)) {
-        return false
-      }
+  emit('fileDropped', dropItemId)
+}
+const setDragItem = async (item: Resource, event: DragEvent) => {
+  dragItem.value = item
+  await nextTick()
+  ghostElement.value.$el.ariaHidden = 'true'
+  ghostElement.value.$el.style.left = '-99999px'
+  ghostElement.value.$el.style.top = '-99999px'
+  event.dataTransfer.setDragImage(unref(ghostElement).$el, 0, 0)
+  event.dataTransfer.dropEffect = 'move'
+  event.dataTransfer.effectAllowed = 'move'
+}
+const dropRowStyling = (selector: string, leaving: boolean, event: DragEvent) => {
+  const hasFilePayload = (event.dataTransfer?.types || []).some((e) => e === 'Files')
+  if (hasFilePayload) {
+    return
+  }
+  if ((event.currentTarget as HTMLElement)?.contains(event.relatedTarget as HTMLElement)) {
+    return
+  }
 
-      const instance = row.$el.getElementsByClassName('resource-table-btn-action-dropdown')[0]
-      if (instance === undefined) {
-        return
-      }
-      if (!this.isResourceSelected(item)) {
-        this.emitSelect([item.id])
-      }
+  const classList = document.getElementsByClassName(`oc-tbody-tr-${selector}`)[0].classList
+  const className = 'highlightedDropTarget'
+  leaving ? classList.remove(className) : classList.add(className)
+}
+const sort = (opts: { sortBy: string; sortDir: SortDir }) => {
+  emit('sort', opts)
+}
+const addSelectedResource = (file: Resource) => {
+  if (!isResourceSelected(file)) {
+    toggleSelection(file.id)
+  }
+}
+const showContextMenuOnBtnClick = (data: ContextMenuBtnClickEventData, item: Resource) => {
+  const { dropdown, event } = data
 
-      if (this.isMobile) {
-        // we can't use displayPositionedDropdown() on mobile because we need to open the bottom drawer.
-        // this can be triggered by clicking the context menu button of the current row.
-        const el = document.getElementById(`context-menu-trigger-${item.getDomSelector()}`)
-        el?.click()
-        return
-      }
+  if (event instanceof MouseEvent && interceptModifierClick(event, item)) {
+    return
+  }
 
-      displayPositionedDropdown(instance._tippy, event, this.contextMenuButton)
-    },
-    rowMounted(resource: Resource, component: typeof OcTableTr) {
-      /**
-       * Triggered whenever a row is mounted
-       * @property {object} resource The resource which was mounted as table row
-       * @property {object} component The table row component
-       */
-      this.$emit('rowMounted', resource, component, this.constants.ImageDimension.Thumbnail)
-    },
-    fileClicked(data: [Resource, MouseEvent]) {
-      /**
-       * Triggered when the file row is clicked
-       * @property {object} resource The resource for which the event is triggered
-       */
-      const resource = data[0]
-
-      if (this.isResourceDisabled(resource)) {
-        return
-      }
+  if (isResourceDisabled(item)) {
+    return false
+  }
 
-      if (this.isEmbedModeEnabled && this.isFilePicker && !resource.isFolder) {
-        return this.postMessage<embedModeFilePickMessageData>('opencloud-embed:file-pick', {
-          resource: JSON.parse(JSON.stringify(resource)),
-          locationQuery: JSON.parse(
-            JSON.stringify(routeToContextQuery(unref(this.router.currentRoute)))
-          )
-        })
-      }
+  if (dropdown?.tippy === undefined) {
+    return
+  }
+  if (!isResourceSelected(item)) {
+    emitSelect([item.id])
+  }
+  displayPositionedDropdown(dropdown.tippy, event, unref(contextMenuButton))
+}
+const showContextMenu = (
+  row: ComponentPublicInstance<unknown>,
+  event: MouseEvent,
+  item: Resource
+) => {
+  if (event instanceof MouseEvent && interceptModifierClick(event, item)) {
+    return
+  }
+  event.preventDefault()
+  if (isResourceDisabled(item)) {
+    return false
+  }
 
-      const eventData = data[1]
+  const instance = row.$el.getElementsByClassName('resource-table-btn-action-dropdown')[0]
+  if (instance === undefined) {
+    return
+  }
+  if (!isResourceSelected(item)) {
+    emitSelect([item.id])
+  }
 
-      if (!eventData.shiftKey && !eventData.metaKey && !eventData.ctrlKey) {
-        eventBus.publish('app.files.shiftAnchor.reset')
-      }
+  if (unref(isMobile)) {
+    // we can't use displayPositionedDropdown() on mobile because we need to open the bottom drawer.
+    // this can be triggered by clicking the context menu button of the current row.
+    const el = document.getElementById(`context-menu-trigger-${item.getDomSelector()}`)
+    el?.click()
+    return
+  }
 
-      const isCheckboxClicked =
-        (eventData?.target as HTMLElement).getAttribute('type') === 'checkbox'
-      const contextActionClicked =
-        (eventData?.target as HTMLElement)?.closest('div')?.id === 'oc-files-context-menu'
-      if (contextActionClicked) {
-        return
-      }
-      if (eventData && eventData.metaKey) {
-        return eventBus.publish('app.files.list.clicked.meta', resource)
-      }
-      if (eventData && eventData.shiftKey) {
-        return eventBus.publish('app.files.list.clicked.shift', {
-          resource,
-          skipTargetSelection: false
-        })
-      }
-      if (isCheckboxClicked) {
-        return
-      }
+  displayPositionedDropdown(instance._tippy, event, unref(contextMenuButton))
+}
+const rowMounted = (resource: Resource, component: ComponentPublicInstance<typeof OcTableTr>) => {
+  emit('rowMounted', resource, component, ImageDimension.Thumbnail)
+}
+const fileClicked = (data: [Resource, MouseEvent]) => {
+  const resource = data[0]
 
-      if (this.isResourceSelected(resource)) {
-        return
-      }
+  if (isResourceDisabled(resource)) {
+    return
+  }
 
-      return this.emitSelect([resource.id])
-    },
-    formatDate(date: string) {
-      return formatDateFromJSDate(new Date(date), this.$language.current)
-    },
-    formatDateRelative(date: string) {
-      return formatRelativeDateFromJSDate(new Date(date), this.$language.current)
-    },
-    toggleSelectionAll() {
-      if (this.areAllResourcesSelected) {
-        return this.emitSelect([])
-      }
-      this.emitSelect(
-        this.resources
-          .filter((resource) => !this.disabledResources.includes(resource.id))
-          .map((resource) => resource.id)
-      )
-    },
-    emitFileClick(resource: Resource, event?: MouseEvent) {
-      if (this.interceptModifierClick(event, resource)) {
-        return
-      }
-      const space = this.getMatchingSpace(resource)
-      /**
-       * Triggered when a default action is triggered on a file
-       * @property {object} resource resource for which the event is triggered
-       */
-      this.$emit('fileClick', { space, resources: [resource] })
-    },
-    getResourceCheckboxLabel(resource: Resource) {
-      if (resource.type === 'folder') {
-        return this.$gettext('Select folder')
-      }
-      return this.$gettext('Select file')
-    },
-    getSharedWithAvatarDescription(resource: Resource) {
-      if (!isShareResource(resource)) {
-        return
-      }
-      const resourceType =
-        resource.type === 'folder' ? this.$gettext('folder') : this.$gettext('file')
+  if (unref(isEmbedModeEnabled) && unref(isFilePicker) && !resource.isFolder) {
+    return postMessage<embedModeFilePickMessageData>('opencloud-embed:file-pick', {
+      resource: JSON.parse(JSON.stringify(resource)),
+      locationQuery: JSON.parse(JSON.stringify(routeToContextQuery(unref(router.currentRoute))))
+    })
+  }
 
-      const shareCount = resource.sharedWith.filter(({ shareType }) =>
-        ShareTypes.authenticated.includes(ShareTypes.getByValue(shareType))
-      ).length
+  const eventData = data[1]
 
-      if (!shareCount) {
-        return ''
-      }
+  if (!eventData.shiftKey && !eventData.metaKey && !eventData.ctrlKey) {
+    eventBus.publish('app.files.shiftAnchor.reset')
+  }
 
-      return this.$ngettext(
-        'This %{ resourceType } is shared via %{ shareCount } invite',
-        'This %{ resourceType } is shared via %{ shareCount } invites',
-        shareCount,
-        {
-          resourceType,
-          shareCount: shareCount.toString()
-        }
-      )
-    },
-    getSharedByAvatarDescription(resource: Resource) {
-      if (!isShareResource(resource)) {
-        return ''
-      }
+  const isCheckboxClicked = (eventData?.target as HTMLElement).getAttribute('type') === 'checkbox'
+  const contextActionClicked =
+    (eventData?.target as HTMLElement)?.closest('div')?.id === 'oc-files-context-menu'
+  if (contextActionClicked) {
+    return
+  }
+  if (eventData && eventData.metaKey) {
+    return eventBus.publish('app.files.list.clicked.meta', resource)
+  }
+  if (eventData && eventData.shiftKey) {
+    return eventBus.publish('app.files.list.clicked.shift', {
+      resource,
+      skipTargetSelection: false
+    })
+  }
+  if (isCheckboxClicked) {
+    return
+  }
 
-      const resourceType =
-        resource.type === 'folder' ? this.$gettext('folder') : this.$gettext('file')
-      return this.$gettext('This %{ resourceType } is shared by %{ user }', {
-        resourceType,
-        user: resource.sharedBy.map(({ displayName }) => displayName).join(', ')
-      })
-    },
-    getSharedByAvatarItems(resource: Resource) {
-      if (!isShareResource(resource)) {
-        return []
-      }
+  if (isResourceSelected(resource)) {
+    return
+  }
 
-      return resource.sharedBy.map((s) => ({
-        displayName: s.displayName,
-        name: s.displayName,
-        avatarType: ShareTypes.user.key,
-        username: s.id,
-        userId: s.id
-      }))
-    },
-    getSharedWithAvatarItems(resource: Resource) {
-      if (!isShareResource(resource)) {
-        return []
-      }
+  return emitSelect([resource.id])
+}
+const formatDate = (date: string) => {
+  return formatDateFromJSDate(new Date(date), currentLanguage)
+}
+const formatDateRelative = (date: string) => {
+  return formatRelativeDateFromJSDate(new Date(date), currentLanguage)
+}
+const toggleSelectionAll = () => {
+  if (unref(areAllResourcesSelected)) {
+    return emitSelect([])
+  }
+  emitSelect(
+    resources
+      .filter((resource) => !unref(disabledResources).includes(resource.id))
+      .map((resource) => resource.id)
+  )
+}
+const emitFileClick = (resource: Resource, event?: MouseEvent) => {
+  if (interceptModifierClick(event, resource)) {
+    return
+  }
+
+  emit('fileClick', { space: getMatchingSpace(resource), resources: [resource] })
+}
+const getResourceCheckboxLabel = (resource: Resource) => {
+  if (resource.type === 'folder') {
+    return $gettext('Select folder')
+  }
+  return $gettext('Select file')
+}
+const getSharedWithAvatarDescription = (resource: Resource) => {
+  if (!isShareResource(resource)) {
+    return
+  }
+  const resourceType = resource.type === 'folder' ? $gettext('folder') : $gettext('file')
+
+  const shareCount = resource.sharedWith.filter(({ shareType }) =>
+    ShareTypes.authenticated.includes(ShareTypes.getByValue(shareType))
+  ).length
 
-      return resource.sharedWith
-        .filter(({ shareType }) =>
-          ShareTypes.authenticated.includes(ShareTypes.getByValue(shareType))
-        )
-        .map((s) => ({
-          displayName: s.displayName,
-          name: s.displayName,
-          avatarType: ShareTypes.getByValue(s.shareType).key,
-          username: s.id,
-          userId: s.id
-        }))
+  if (!shareCount) {
+    return ''
+  }
+
+  return $ngettext(
+    'This %{ resourceType } is shared via %{ shareCount } invite',
+    'This %{ resourceType } is shared via %{ shareCount } invites',
+    shareCount,
+    {
+      resourceType,
+      shareCount: shareCount.toString()
     }
+  )
+}
+const getSharedByAvatarDescription = (resource: Resource) => {
+  if (!isShareResource(resource)) {
+    return ''
   }
-})
+
+  const resourceType = resource.type === 'folder' ? $gettext('folder') : $gettext('file')
+  return $gettext('This %{ resourceType } is shared by %{ user }', {
+    resourceType,
+    user: resource.sharedBy.map(({ displayName }) => displayName).join(', ')
+  })
+}
+const getSharedByAvatarItems = (resource: Resource) => {
+  if (!isShareResource(resource)) {
+    return []
+  }
+
+  return resource.sharedBy.map((s) => ({
+    displayName: s.displayName,
+    name: s.displayName,
+    avatarType: ShareTypes.user.key,
+    username: s.id,
+    userId: s.id
+  }))
+}
+const getSharedWithAvatarItems = (resource: Resource) => {
+  if (!isShareResource(resource)) {
+    return []
+  }
+
+  return resource.sharedWith
+    .filter(({ shareType }) => ShareTypes.authenticated.includes(ShareTypes.getByValue(shareType)))
+    .map((s) => ({
+      displayName: s.displayName,
+      name: s.displayName,
+      avatarType: ShareTypes.getByValue(s.shareType).key,
+      username: s.id,
+      userId: s.id
+    }))
+}
 </script>
 <style>
 @reference '@opencloud-eu/design-system/tailwind';
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
index 9501e76f75..fe3cad6244 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
@@ -173,7 +173,6 @@ import {
   FolderViewModeConstants,
   SortDir,
   SortField,
-  useResourceRouteResolver,
   useTileSize,
   useResourcesStore,
   useViewSizeMax,
@@ -184,7 +183,9 @@ import {
   embedModeFilePickMessageData,
   routeToContextQuery,
   useRouter,
-  useSideBar
+  useSideBar,
+  useFolderLink,
+  FileActionOptions
 } from '../../composables'
 import { useInterceptModifierClick } from '../../composables/keyboardActions'
 import { SizeType } from '@opencloud-eu/design-system/helpers'
@@ -225,6 +226,7 @@ const {
 }>()
 
 const emit = defineEmits<{
+  (e: 'fileClick', options: FileActionOptions): void
   (e: 'fileDropped', id: string): void
   (e: 'rowMounted', resource: Resource, compnent: ResourceTileRef, dimension: ImageDimension): void
   (e: 'sort', value: { sortBy: string; sortDir: SortDir }): void
@@ -279,21 +281,14 @@ const tileRefs = ref({
   dropBtns: {} as Record<string, ContextMenuQuickActionRef>
 })
 
-const resourceRouteResolver = useResourceRouteResolver(
-  {
-    space: ref(space),
-    targetRouteCallback: computed(() => targetRouteCallback)
-  },
-  { emit }
-)
+const { getFolderLink } = useFolderLink({
+  space: ref(space),
+  targetRouteCallback: computed(() => targetRouteCallback)
+})
 
 const getRoute = (resource: Resource) => {
   if (resource.isFolder) {
-    return resourceRouteResolver.createFolderLink({
-      path: resource.path,
-      fileId: resource.fileId,
-      resource: resource
-    })
+    return getFolderLink(resource)
   }
 
   let s = space
@@ -325,9 +320,7 @@ const emitTileClick = (resource: Resource, event?: MouseEvent) => {
     toggleSelection(resource)
   }
 
-  if (resource.type !== 'space' && resource.type !== 'folder') {
-    resourceRouteResolver.createFileAction(resource as Resource)
-  }
+  emit('fileClick', { space: getMatchingSpace(resource), resources: [resource] })
 }
 
 const showContextMenuOnBtnClick = (
@@ -496,10 +489,8 @@ const toggleTile = (data: [Resource, MouseEvent | KeyboardEvent], event?: MouseE
 }
 
 const toggleSelection = (resource: Resource) => {
-  const selected = !isResourceSelected(resource)
-    ? [...selectedIds, resource.id]
-    : selectedIds.filter((id) => id !== resource.id)
-  emit('update:selectedIds', selected)
+  resourcesStore.toggleSelection(resource.id)
+  emit('update:selectedIds', [...resourcesStore.selectedIds])
 }
 
 const getResourceCheckboxLabel = (resource: Resource) => {
diff --git a/packages/web-pkg/src/composables/filesList/useResourceRouteResolver.ts b/packages/web-pkg/src/composables/filesList/useResourceRouteResolver.ts
index f9889ab27f..b1b41bb6cd 100644
--- a/packages/web-pkg/src/composables/filesList/useResourceRouteResolver.ts
+++ b/packages/web-pkg/src/composables/filesList/useResourceRouteResolver.ts
@@ -15,6 +15,7 @@ export type ResourceRouteResolverOptions = {
 
 export const useResourceRouteResolver = (
   options: ResourceRouteResolverOptions = {},
+  /** @deprecated */
   context?: any
 ) => {
   const targetRouteCallback = options.targetRouteCallback
@@ -37,6 +38,7 @@ export const useResourceRouteResolver = (
     )
   }
 
+  /** @deprecated */
   const createFileAction = (resource: Resource) => {
     const space = unref(options.space) || getMatchingSpace(resource)
     /**
diff --git a/packages/web-pkg/tests/unit/components/FilesList/ResourceTiles.spec.ts b/packages/web-pkg/tests/unit/components/FilesList/ResourceTiles.spec.ts
index d09e083f62..9fb0639d42 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/ResourceTiles.spec.ts
+++ b/packages/web-pkg/tests/unit/components/FilesList/ResourceTiles.spec.ts
@@ -8,6 +8,7 @@ import { useCanBeOpenedWithSecureView } from '../../../../src/composables/resour
 import { displayPositionedDropdown } from '../../../../src/helpers/contextMenuDropdown'
 import { OcFilterChip } from '@opencloud-eu/design-system/components'
 import { ResourceIndicator } from '../../../../src/helpers/statusIndicators'
+import { useResourcesStore } from '../../../../src'
 
 vi.mock('../../../../src/helpers/contextMenuDropdown')
 vi.mock('../../../../src/composables/viewMode', async (importOriginal) => ({
@@ -120,6 +121,8 @@ describe('ResourceTiles component', () => {
         preventDefault: vi.fn()
       } as unknown as MouseEvent
 
+      const resourcesStore = useResourcesStore()
+      resourcesStore.selectedIds = [resources[0].id]
       await resourceTile.vm.$emit('click', mockMouseEvent)
       expect(wrapper.emitted('update:selectedIds')).toBeTruthy()
       expect(wrapper.emitted('update:selectedIds')[0][0]).toEqual([resources[0].id])