From 0580ed4260520467a4e1e669269e1704759e62bb Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Thu, 2 Oct 2025 15:00:23 +0200
Subject: [PATCH 1/6] feat: tiles view for trash content

# Conflicts:
#	packages/web-app-files/src/composables/extensions/useFolderViews.ts
---
 .../composables/extensions/useFolderViews.ts  | 10 +++--
 packages/web-app-files/src/extensionPoints.ts |  8 +++-
 .../src/views/spaces/GenericTrash.vue         | 42 +++++++++++++++---
 .../unit/views/spaces/GenericTrash.spec.ts    | 43 ++++++++++++++++++-
 .../src/components/FilesList/ResourceTile.vue |  6 +++
 .../components/FilesList/ResourceTiles.vue    | 11 ++++-
 .../components/FilesList/ResourceTile.spec.ts | 37 +++++++++++-----
 .../FilesList/ResourceTiles.spec.ts           | 12 +++++-
 .../__snapshots__/ResourceTile.spec.ts.snap   |  8 ++--
 .../objects/app-files/resource/actions.ts     |  8 ++--
 10 files changed, 153 insertions(+), 32 deletions(-)

diff --git a/packages/web-app-files/src/composables/extensions/useFolderViews.ts b/packages/web-app-files/src/composables/extensions/useFolderViews.ts
index f5b98d8b27..7778b10532 100644
--- a/packages/web-app-files/src/composables/extensions/useFolderViews.ts
+++ b/packages/web-app-files/src/composables/extensions/useFolderViews.ts
@@ -3,7 +3,8 @@ import { useGettext } from 'vue3-gettext'
 import {
   folderViewsFavoritesExtensionPoint,
   folderViewsFolderExtensionPoint,
-  folderViewsProjectSpacesExtensionPoint
+  folderViewsProjectSpacesExtensionPoint,
+  folderViewsTrashExtensionPoint
 } from '../../extensionPoints'
 
 export const useFolderViews = (): FolderViewExtension[] => {
@@ -15,6 +16,7 @@ export const useFolderViews = (): FolderViewExtension[] => {
       type: 'folderView',
       extensionPointIds: [
         folderViewsFolderExtensionPoint.id,
+        folderViewsTrashExtensionPoint.id,
         folderViewsProjectSpacesExtensionPoint.id
       ],
       folderView: {
@@ -33,7 +35,8 @@ export const useFolderViews = (): FolderViewExtension[] => {
       extensionPointIds: [
         folderViewsFolderExtensionPoint.id,
         folderViewsProjectSpacesExtensionPoint.id,
-        folderViewsFavoritesExtensionPoint.id
+        folderViewsFavoritesExtensionPoint.id,
+        folderViewsTrashExtensionPoint.id
       ],
       folderView: {
         name: 'resource-table',
@@ -51,7 +54,8 @@ export const useFolderViews = (): FolderViewExtension[] => {
       extensionPointIds: [
         folderViewsFolderExtensionPoint.id,
         folderViewsProjectSpacesExtensionPoint.id,
-        folderViewsFavoritesExtensionPoint.id
+        folderViewsFavoritesExtensionPoint.id,
+        folderViewsTrashExtensionPoint.id
       ],
       folderView: {
         name: 'resource-tiles',
diff --git a/packages/web-app-files/src/extensionPoints.ts b/packages/web-app-files/src/extensionPoints.ts
index 7547b578fb..32beb364f9 100644
--- a/packages/web-app-files/src/extensionPoints.ts
+++ b/packages/web-app-files/src/extensionPoints.ts
@@ -54,6 +54,11 @@ export const folderViewsProjectSpacesExtensionPoint: ExtensionPoint<FolderViewEx
   extensionType: 'folderView'
 }
 
+export const folderViewsTrashExtensionPoint: ExtensionPoint<FolderViewExtension> = {
+  id: 'app.files.folder-views.trash',
+  extensionType: 'folderView'
+}
+
 export const extensionPoints = () => {
   return computed<ExtensionPoint<any>[]>(() => {
     return [
@@ -66,7 +71,8 @@ export const extensionPoints = () => {
       fileSideBarExtensionPoint,
       folderViewsFolderExtensionPoint,
       folderViewsFavoritesExtensionPoint,
-      folderViewsProjectSpacesExtensionPoint
+      folderViewsProjectSpacesExtensionPoint,
+      folderViewsTrashExtensionPoint
     ]
   })
 }
diff --git a/packages/web-app-files/src/views/spaces/GenericTrash.vue b/packages/web-app-files/src/views/spaces/GenericTrash.vue
index b15145653b..1c997b8c2e 100644
--- a/packages/web-app-files/src/views/spaces/GenericTrash.vue
+++ b/packages/web-app-files/src/views/spaces/GenericTrash.vue
@@ -6,6 +6,7 @@
         :has-bulk-actions="true"
         :is-side-bar-open="isSideBarOpen"
         :space="space"
+        :view-modes="viewModes"
       >
         <template #actions>
           <oc-button
@@ -35,7 +36,8 @@
             <span v-text="$gettext('This trash bin is empty')" />
           </template>
         </no-content-message>
-        <resource-table
+        <component
+          :is="folderView.component"
           v-else
           v-model:selected-ids="selectedResourcesIds"
           :is-side-bar-open="isSideBarOpen"
@@ -48,7 +50,11 @@
           :sort-by="sortBy"
           :sort-dir="sortDir"
           :space="space"
+          :view-mode="viewMode"
           :has-actions="showActions"
+          :sort-fields="sortFields"
+          :view-size="viewSize"
+          :style="folderViewStyle"
           @sort="handleSort"
         >
           <template #contextMenu="{ resource, isOpen }">
@@ -61,7 +67,7 @@
             <pagination :pages="paginationPages" :current-page="paginationPage" />
             <list-info v-if="paginatedResources.length > 0" class="w-full my-2" />
           </template>
-        </resource-table>
+        </component>
       </template>
     </files-view-wrapper>
     <file-side-bar :is-open="isSideBarOpen" :active-panel="sideBarActivePanel" :space="space" />
@@ -69,7 +75,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, unref } from 'vue'
+import { ComponentPublicInstance, computed, onBeforeUnmount, onMounted, ref, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { storeToRefs } from 'pinia'
 import {
@@ -81,16 +87,17 @@ import {
   FileSideBar,
   Pagination,
   NoContentMessage,
-  ResourceTable,
   useDocumentTitle,
   useFileActionsEmptyTrashBin,
-  useUserStore
+  useUserStore,
+  useExtensionRegistry
 } from '@opencloud-eu/web-pkg'
 
 import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
 import ListInfo from '../../components/FilesList/ListInfo.vue'
 import { useResourcesViewDefaults } from '../../composables'
 import { isProjectSpaceResource, SpaceResource } from '@opencloud-eu/web-client'
+import { folderViewsTrashExtensionPoint } from '../../extensionPoints'
 
 const props = defineProps<{
   space?: SpaceResource | null
@@ -116,9 +123,32 @@ const {
   handleSort,
   sideBarActivePanel,
   selectedResources,
-  isResourceInSelection
+  isResourceInSelection,
+  viewMode,
+  viewSize,
+  sortFields
 } = resourcesViewDefaults
 
+const extensionRegistry = useExtensionRegistry()
+const viewModes = computed(() => {
+  return [
+    ...extensionRegistry.requestExtensions(folderViewsTrashExtensionPoint).map((e) => e.folderView)
+  ]
+})
+
+const folderView = computed(() => {
+  const viewMode = unref(resourcesViewDefaults.viewMode)
+  return unref(viewModes).find((v) => v.name === viewMode)
+})
+const appBarRef = ref<ComponentPublicInstance | null>()
+const folderViewStyle = computed(() => {
+  return {
+    ...(unref(folderView)?.isScrollable === false && {
+      height: `calc(100% - ${unref(appBarRef)?.$el.getBoundingClientRect().height}px)`
+    })
+  }
+})
+
 const isEmpty = computed(() => unref(resourcesViewDefaults.paginatedResources).length < 1)
 
 const { actions: emptyTrashBinActions } = useFileActionsEmptyTrashBin()
diff --git a/packages/web-app-files/tests/unit/views/spaces/GenericTrash.spec.ts b/packages/web-app-files/tests/unit/views/spaces/GenericTrash.spec.ts
index f7a26ef9de..acd47d6b62 100644
--- a/packages/web-app-files/tests/unit/views/spaces/GenericTrash.spec.ts
+++ b/packages/web-app-files/tests/unit/views/spaces/GenericTrash.spec.ts
@@ -13,7 +13,19 @@ import {
   PartialComponentProps,
   RouteLocation
 } from '@opencloud-eu/web-test-helpers'
-import { AppBar, NoContentMessage, ResourceTable } from '@opencloud-eu/web-pkg'
+import {
+  AppBar,
+  FolderViewExtension,
+  NoContentMessage,
+  ResourceTable,
+  useExtensionRegistry
+} from '@opencloud-eu/web-pkg'
+import {
+  folderViewsFavoritesExtensionPoint,
+  folderViewsFolderExtensionPoint,
+  folderViewsProjectSpacesExtensionPoint,
+  folderViewsTrashExtensionPoint
+} from '../../../../src/extensionPoints'
 
 vi.mock('../../../../src/composables')
 
@@ -74,12 +86,38 @@ function getMountedWrapper({
   files?: Resource[]
   loading?: boolean
 } = {}) {
+  const plugins = [...defaultPlugins()]
   vi.mocked(useResourcesViewDefaults).mockImplementation(() =>
     useResourcesViewDefaultsMock({
       paginatedResources: ref(files),
       areResourcesLoading: ref(loading)
     })
   )
+
+  const extensions = [
+    {
+      id: 'com.github.opencloud-eu.web.files.folder-view.resource-table',
+      type: 'folderView',
+      extensionPointIds: [
+        folderViewsFolderExtensionPoint.id,
+        folderViewsProjectSpacesExtensionPoint.id,
+        folderViewsFavoritesExtensionPoint.id,
+        folderViewsTrashExtensionPoint.id
+      ],
+      folderView: {
+        name: 'resource-table',
+        label: 'Switch to default view',
+        icon: {
+          name: 'menu-line',
+          fillType: 'none'
+        },
+        component: ResourceTable
+      }
+    }
+  ] satisfies FolderViewExtension[]
+  const { requestExtensions } = useExtensionRegistry()
+  vi.mocked(requestExtensions).mockReturnValue(extensions)
+
   const defaultMocks = {
     ...defaultComponentMocks({
       currentRoute: mock<RouteLocation>({ name: 'files-trash-generic' })
@@ -90,12 +128,13 @@ function getMountedWrapper({
     space: mock<SpaceResource>({ id: '1', getDriveAliasAndItem: vi.fn(), name: 'Personal space' }),
     ...props
   }
+
   return {
     mocks: defaultMocks,
     wrapper: mount(GenericTrash, {
       props: propsData,
       global: {
-        plugins: [...defaultPlugins()],
+        plugins,
         mocks: defaultMocks,
         provide: defaultMocks,
         stubs: { ...defaultStubs, portal: true }
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTile.vue b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
index cb1705b892..9fc0253fad 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTile.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
@@ -85,6 +85,8 @@
               :is-icon-displayed="false"
               :is-extension-displayed="isExtensionDisplayed"
               :is-resource-clickable="isResourceClickable"
+              :is-path-displayed="isPathDisplayed"
+              :parent-folder-name="getParentFolderName(resource)"
               :link="resourceRoute"
               @click.stop="$emit('click', $event)"
             />
@@ -119,6 +121,7 @@ import { useIsVisible } from '@opencloud-eu/design-system/composables'
 import { SizeType } from '@opencloud-eu/design-system/helpers'
 import { useToggleTile } from '../../composables/selection'
 import { OcCard } from '@opencloud-eu/design-system/components'
+import { useFolderLink } from '../../composables'
 
 const {
   resource,
@@ -127,6 +130,7 @@ const {
   isResourceClickable = true,
   isResourceDisabled = false,
   isExtensionDisplayed = true,
+  isPathDisplayed = false,
   resourceIconSize = 'xlarge',
   lazy = false,
   isLoading = false
@@ -137,6 +141,7 @@ const {
   isResourceClickable?: boolean
   isResourceDisabled?: boolean
   isExtensionDisplayed?: boolean
+  isPathDisplayed?: boolean
   resourceIconSize?: SizeType
   lazy?: boolean
   isLoading?: boolean
@@ -158,6 +163,7 @@ defineSlots<{
 
 const { toggleTile } = useToggleTile()
 const { $gettext } = useGettext()
+const { getParentFolderName } = useFolderLink()
 
 const observerTarget = useTemplateRef<InstanceType<typeof OcCard>>('observerTarget')
 const observerTargetElement = computed<HTMLElement>(() => unref(observerTarget)?.$el)
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
index d8584f2385..6c64526cbc 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
@@ -57,6 +57,7 @@
           :is-resource-clickable="isResourceClickable(resource)"
           :is-resource-disabled="isResourceDisabled(resource) || isSpaceResourceDisabled(resource)"
           :is-extension-displayed="areFileExtensionsShown"
+          :is-path-displayed="arePathsDisplayed"
           :resource-icon-size="resourceIconSize"
           :draggable="dragDrop"
           :lazy="areTilesLazy"
@@ -202,7 +203,9 @@ const {
   sortDir,
   viewSize = FolderViewModeConstants.tilesSizeDefault,
   dragDrop = false,
-  lazy = true
+  lazy = true,
+  areResourcesClickable = true,
+  arePathsDisplayed = false
 } = defineProps<{
   resources?: Resource[]
   selectedIds?: string[]
@@ -214,6 +217,8 @@ const {
   viewSize?: number
   dragDrop?: boolean
   lazy?: boolean
+  areResourcesClickable?: boolean
+  arePathsDisplayed?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -351,6 +356,10 @@ const selectedResources = computed(() => {
 })
 
 const isResourceClickable = (resource: Resource) => {
+  if (!areResourcesClickable) {
+    return false
+  }
+
   if (isResourceDisabled(resource) || isSpaceResourceDisabled(resource)) {
     return false
   }
diff --git a/packages/web-pkg/tests/unit/components/FilesList/ResourceTile.spec.ts b/packages/web-pkg/tests/unit/components/FilesList/ResourceTile.spec.ts
index 9c000f80c9..67ae9d229e 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/ResourceTile.spec.ts
+++ b/packages/web-pkg/tests/unit/components/FilesList/ResourceTile.spec.ts
@@ -1,14 +1,20 @@
-import { defaultPlugins, shallowMount } from '@opencloud-eu/web-test-helpers'
+import { defaultComponentMocks, defaultPlugins, shallowMount } from '@opencloud-eu/web-test-helpers'
 import ResourceTile from '../../../../src/components/FilesList/ResourceTile.vue'
+import { mock } from 'vitest-mock-extended'
+import { RouteLocation } from 'vue-router'
+import { SpaceResource } from '@opencloud-eu/web-client'
 
-const getSpaceMock = (disabled = false) => ({
-  name: 'Space 1',
-  path: '',
-  type: 'space',
-  isFolder: true,
-  disabled,
-  getDriveAliasAndItem: () => '1'
-})
+const getSpaceMock = (disabled = false) =>
+  ({
+    name: 'Space 1',
+    id: '1',
+    storageId: '1',
+    path: '',
+    type: 'space',
+    isFolder: true,
+    disabled,
+    getDriveAliasAndItem: () => '1'
+  }) as unknown as SpaceResource
 
 describe('OcTile component', () => {
   it('renders default space correctly', () => {
@@ -36,9 +42,20 @@ describe('OcTile component', () => {
   })
 
   function getWrapper(props = {}) {
+    const defaultMocks = defaultComponentMocks({
+      currentRoute: mock<RouteLocation>({ name: 'files' })
+    })
+
     return shallowMount(ResourceTile, {
       props,
-      global: { plugins: [...defaultPlugins()], renderStubDefaultSlot: true }
+      global: {
+        plugins: [
+          ...defaultPlugins({ piniaOptions: { spacesState: { spaces: [getSpaceMock(false)] } } })
+        ],
+        renderStubDefaultSlot: true,
+        mocks: defaultMocks,
+        provide: defaultMocks
+      }
     })
   }
 })
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 88fe85e229..5f936109a0 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/ResourceTiles.spec.ts
+++ b/packages/web-pkg/tests/unit/components/FilesList/ResourceTiles.spec.ts
@@ -37,6 +37,7 @@ vi.mock('../../../../src/composables/actions/files', async (importOriginal) => (
 const spacesResources = [
   {
     id: '1',
+    storageId: '1',
     name: 'Space 1',
     path: '',
     type: 'space',
@@ -47,6 +48,7 @@ const spacesResources = [
   },
   {
     id: '2',
+    storageId: '2',
     name: 'Space 2',
     path: '',
     type: 'space',
@@ -62,6 +64,7 @@ const resources: Resource[] = [
     id: 'forest',
     resourceId: 'forest',
     driveId: 'forest',
+    storageId: '1',
     name: 'forest.jpg',
     path: 'images/nature/forest.jpg',
     extension: 'jpg',
@@ -290,7 +293,14 @@ describe('ResourceTiles component', () => {
           ...slots
         },
         global: {
-          plugins: [...defaultPlugins({ piniaOptions: { resourcesStore: { deleteQueue } } })],
+          plugins: [
+            ...defaultPlugins({
+              piniaOptions: {
+                resourcesStore: { deleteQueue },
+                spacesState: { spaces: spacesResources }
+              }
+            })
+          ],
           mocks: mocks,
           provide: mocks,
           stubs
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap
index 1fdd0b1830..e4b56a72b1 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcTile component > renders default space correctly 1`] = `
-"<oc-card-stub tag="div" titletag="h2" logourl="" headerclass="" bodyclass="p-0" footerclass="" class="oc-tile-card flex flex-col h-full shadow-none bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest">
+"<oc-card-stub tag="div" titletag="h2" logourl="" headerclass="" bodyclass="p-0" footerclass="" class="oc-tile-card flex flex-col h-full shadow-none bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest" data-item-id="1">
   <resource-link-stub resource="[object Object]" isresourceclickable="true" class="oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" tabindex="-1">
     <div class="z-10 absolute top-0 left-0 [&amp;_input]:not-[.oc-checkbox-checked]:bg-role-surface-container"></div>
     <!--v-if-->
@@ -12,7 +12,7 @@ exports[`OcTile component > renders default space correctly 1`] = `
   <div class="p-2">
     <div class="flex justify-between items-center">
       <div class="flex items-center truncate resource-name-wrapper text-role-on-surface overflow-hidden">
-        <resource-list-item-stub resource="[object Object]" pathprefix="" ispathdisplayed="false" parentfoldername="" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="true" isicondisplayed="false" isresourceclickable="true"></resource-list-item-stub>
+        <resource-list-item-stub resource="[object Object]" pathprefix="" ispathdisplayed="false" parentfoldername="." parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="true" isicondisplayed="false" isresourceclickable="true"></resource-list-item-stub>
       </div>
       <div class="flex items-center">
         <!-- Slot for indicators !-->
@@ -26,7 +26,7 @@ exports[`OcTile component > renders default space correctly 1`] = `
 `;
 
 exports[`OcTile component > renders disabled space correctly 1`] = `
-"<oc-card-stub tag="div" titletag="h2" logourl="" headerclass="" bodyclass="p-0" footerclass="" class="oc-tile-card flex flex-col h-full shadow-none bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest oc-tile-card-disabled opacity-70 grayscale-60 pointer-events-none">
+"<oc-card-stub tag="div" titletag="h2" logourl="" headerclass="" bodyclass="p-0" footerclass="" class="oc-tile-card flex flex-col h-full shadow-none bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest oc-tile-card-disabled opacity-70 grayscale-60 pointer-events-none" data-item-id="1">
   <resource-link-stub resource="[object Object]" isresourceclickable="true" class="oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" tabindex="-1">
     <div class="z-10 absolute top-0 left-0 [&amp;_input]:not-[.oc-checkbox-checked]:bg-role-surface-container"></div>
     <!--v-if-->
@@ -37,7 +37,7 @@ exports[`OcTile component > renders disabled space correctly 1`] = `
   <div class="p-2">
     <div class="flex justify-between items-center">
       <div class="flex items-center truncate resource-name-wrapper text-role-on-surface overflow-hidden">
-        <resource-list-item-stub resource="[object Object]" pathprefix="" ispathdisplayed="false" parentfoldername="" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="true" isicondisplayed="false" isresourceclickable="true"></resource-list-item-stub>
+        <resource-list-item-stub resource="[object Object]" pathprefix="" ispathdisplayed="false" parentfoldername="." parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="true" isicondisplayed="false" isresourceclickable="true"></resource-list-item-stub>
       </div>
       <div class="flex items-center">
         <!-- Slot for indicators !-->
diff --git a/tests/e2e/support/objects/app-files/resource/actions.ts b/tests/e2e/support/objects/app-files/resource/actions.ts
index 09cfe89979..17ba79f937 100644
--- a/tests/e2e/support/objects/app-files/resource/actions.ts
+++ b/tests/e2e/support/objects/app-files/resource/actions.ts
@@ -1297,7 +1297,7 @@ export const deleteResourceTrashbin = async (args: deleteResourceTrashbinArgs):
   )
   await new Promise((resolve) => setTimeout(resolve, 5000))
   if (!(await resourceCheckbox.isChecked())) {
-    await resourceCheckbox.check()
+    await resourceCheckbox.click()
   }
 
   await page.locator(permanentDeleteButton).first().click()
@@ -1346,7 +1346,7 @@ export const expectThatDeleteButtonIsNotVisible = async (
     util.format(checkBoxForTrashbin, `/${resource.replace(/^\/+/, '')}`)
   )
   if (!(await resourceCheckbox.isChecked())) {
-    await resourceCheckbox.check()
+    await resourceCheckbox.click()
   }
   const deleteButton = page.locator(permanentDeleteButton)
   await expect(deleteButton).not.toBeVisible()
@@ -1385,7 +1385,7 @@ export const selectTrashbinResource = async (page: Page, resource: string): Prom
     util.format(checkBoxForTrashbin, `/${resource.replace(/^\/+/, '')}`)
   )
   if (!(await resourceCheckbox.isChecked())) {
-    await resourceCheckbox.check()
+    await resourceCheckbox.click()
   }
 }
 
@@ -1446,7 +1446,7 @@ export const expectThatRestoreResourceButtonVisibility = async (
     util.format(checkBoxForTrashbin, `/${resource.replace(/^\/+/, '')}`)
   )
   if (!(await resourceCheckbox.isChecked())) {
-    await resourceCheckbox.check()
+    await resourceCheckbox.click()
   }
   const restoreButton = page.locator(restoreResourceButton)
   await expect(restoreButton).not.toBeVisible()

From 8b77af5eb4df5c99f945de54065df4123167d95f Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Thu, 2 Oct 2025 23:31:09 +0200
Subject: [PATCH 2/6] feat: enable tiles view for trash overview

---
 .../composables/extensions/useFolderViews.ts  | 10 ++-
 packages/web-app-files/src/extensionPoints.ts |  5 ++
 .../src/views/spaces/GenericTrash.vue         |  3 +-
 .../src/views/trash/Overview.vue              | 65 +++++++++++++----
 .../tests/unit/views/trash/Overview.spec.ts   | 41 ++++++++++-
 .../trash/__snapshots__/Overview.spec.ts.snap | 73 -------------------
 .../components/FilesList/ResourceTiles.vue    | 19 +----
 .../objects/app-files/trashbin/actions.ts     | 11 +--
 8 files changed, 115 insertions(+), 112 deletions(-)
 delete mode 100644 packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap

diff --git a/packages/web-app-files/src/composables/extensions/useFolderViews.ts b/packages/web-app-files/src/composables/extensions/useFolderViews.ts
index 7778b10532..8ee3423fb2 100644
--- a/packages/web-app-files/src/composables/extensions/useFolderViews.ts
+++ b/packages/web-app-files/src/composables/extensions/useFolderViews.ts
@@ -4,7 +4,8 @@ import {
   folderViewsFavoritesExtensionPoint,
   folderViewsFolderExtensionPoint,
   folderViewsProjectSpacesExtensionPoint,
-  folderViewsTrashExtensionPoint
+  folderViewsTrashExtensionPoint,
+  folderViewsTrashOverviewExtensionPoint
 } from '../../extensionPoints'
 
 export const useFolderViews = (): FolderViewExtension[] => {
@@ -17,6 +18,7 @@ export const useFolderViews = (): FolderViewExtension[] => {
       extensionPointIds: [
         folderViewsFolderExtensionPoint.id,
         folderViewsTrashExtensionPoint.id,
+        folderViewsTrashOverviewExtensionPoint.id,
         folderViewsProjectSpacesExtensionPoint.id
       ],
       folderView: {
@@ -36,7 +38,8 @@ export const useFolderViews = (): FolderViewExtension[] => {
         folderViewsFolderExtensionPoint.id,
         folderViewsProjectSpacesExtensionPoint.id,
         folderViewsFavoritesExtensionPoint.id,
-        folderViewsTrashExtensionPoint.id
+        folderViewsTrashExtensionPoint.id,
+        folderViewsTrashOverviewExtensionPoint.id
       ],
       folderView: {
         name: 'resource-table',
@@ -55,7 +58,8 @@ export const useFolderViews = (): FolderViewExtension[] => {
         folderViewsFolderExtensionPoint.id,
         folderViewsProjectSpacesExtensionPoint.id,
         folderViewsFavoritesExtensionPoint.id,
-        folderViewsTrashExtensionPoint.id
+        folderViewsTrashExtensionPoint.id,
+        folderViewsTrashOverviewExtensionPoint.id
       ],
       folderView: {
         name: 'resource-tiles',
diff --git a/packages/web-app-files/src/extensionPoints.ts b/packages/web-app-files/src/extensionPoints.ts
index 32beb364f9..a89c26f583 100644
--- a/packages/web-app-files/src/extensionPoints.ts
+++ b/packages/web-app-files/src/extensionPoints.ts
@@ -59,6 +59,11 @@ export const folderViewsTrashExtensionPoint: ExtensionPoint<FolderViewExtension>
   extensionType: 'folderView'
 }
 
+export const folderViewsTrashOverviewExtensionPoint: ExtensionPoint<FolderViewExtension> = {
+  id: 'app.files.folder-views.trash-overview',
+  extensionType: 'folderView'
+}
+
 export const extensionPoints = () => {
   return computed<ExtensionPoint<any>[]>(() => {
     return [
diff --git a/packages/web-app-files/src/views/spaces/GenericTrash.vue b/packages/web-app-files/src/views/spaces/GenericTrash.vue
index 1c997b8c2e..2e70c1355e 100644
--- a/packages/web-app-files/src/views/spaces/GenericTrash.vue
+++ b/packages/web-app-files/src/views/spaces/GenericTrash.vue
@@ -2,6 +2,7 @@
   <div class="flex w-full">
     <files-view-wrapper>
       <app-bar
+        ref="appBarRef"
         :breadcrumbs="breadcrumbs"
         :has-bulk-actions="true"
         :is-side-bar-open="isSideBarOpen"
@@ -52,7 +53,7 @@
           :space="space"
           :view-mode="viewMode"
           :has-actions="showActions"
-          :sort-fields="sortFields"
+          :sort-fields="sortFields.filter((field) => field.name === 'name')"
           :view-size="viewSize"
           :style="folderViewStyle"
           @sort="handleSort"
diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index 181210c998..33aa741601 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="ready" class="flex">
+  <div class="flex w-full">
     <files-view-wrapper>
       <app-bar
         :breadcrumbs="breadcrumbs"
@@ -7,6 +7,7 @@
         :has-hidden-files="false"
         :has-file-extensions="false"
         :has-pagination="false"
+        :view-modes="viewModes"
       />
       <app-loading-spinner v-if="areResourcesLoading" />
       <template v-else>
@@ -25,18 +26,24 @@
               autocomplete="off"
             />
           </div>
-          <resource-table
+
+          <component
+            :is="folderView.component"
             class="trash-table"
             :resources="displaySpaces"
             :fields-displayed="['name']"
             :sort-by="sortBy"
             :sort-dir="sortDir"
+            :sort-fields="sortFields.filter((field) => field.name === 'name')"
             :is-side-bar-open="isSideBarOpen"
             :header-position="fileListHeaderY"
             :are-thumbnails-displayed="false"
             :are-paths-displayed="false"
             :is-selectable="false"
             :show-rename-quick-action="false"
+            :view-mode="viewMode"
+            :view-size="viewSize"
+            :style="folderViewStyle"
             :target-route-callback="resourceTargetRouteCallback"
             @sort="handleSort"
           >
@@ -47,16 +54,21 @@
                 :action-options="{ resources: [resource] as SpaceResource[] }"
               />
             </template>
+            <template #actions="{ resource }">
+              <trash-quick-actions :space="resource" :item="resource" />
+            </template>
             <template #quickActions="{ resource }">
               <trash-quick-actions :space="resource" :item="resource" />
             </template>
             <template #footer>
               <div class="text-center w-full my-2">
-                <p class="text-role-on-surface-variant">{{ footerTextTotal }}</p>
+                <p data-testid="files-list-footer-info" class="text-role-on-surface-variant">
+                  {{ footerTextTotal }}
+                </p>
                 <p v-if="filterTerm" class="text-role-on-surface-variant">{{ footerTextFilter }}</p>
               </div>
             </template>
-          </resource-table>
+          </component>
         </template>
       </template>
     </files-view-wrapper>
@@ -65,7 +77,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, unref, watch } from 'vue'
+import { ComponentPublicInstance, computed, nextTick, onMounted, ref, unref, watch } from 'vue'
 import Mark from 'mark.js'
 import Fuse from 'fuse.js'
 import { useGettext } from 'vue3-gettext'
@@ -81,10 +93,9 @@ import {
   NoContentMessage,
   SortDir,
   useClientService,
-  useFileListHeaderPosition,
+  useExtensionRegistry,
   useResourcesStore,
   useRouter,
-  useSideBar,
   useSpacesStore,
   useUserStore
 } from '@opencloud-eu/web-pkg'
@@ -95,24 +106,50 @@ import {
   isProjectSpaceResource,
   SpaceResource
 } from '@opencloud-eu/web-client'
-import { ResourceTable } from '@opencloud-eu/web-pkg/src'
 import { RouteLocationNamedRaw } from 'vue-router'
 import TrashContextActions from '../../components/Trash/TrashContextActions.vue'
 import TrashQuickActions from '../../components/Trash/TrashQuickActions.vue'
 import { storeToRefs } from 'pinia'
+import { folderViewsTrashOverviewExtensionPoint } from '../../extensionPoints'
+import { useResourcesViewDefaults } from '../../composables'
 
 const userStore = useUserStore()
 const spacesStore = useSpacesStore()
 const router = useRouter()
 const { $gettext, $ngettext } = useGettext()
 const clientService = useClientService()
-const { y: fileListHeaderY } = useFileListHeaderPosition()
-const { isSideBarOpen, sideBarActivePanel } = useSideBar()
 const resourcesStore = useResourcesStore()
 
+const resourcesViewDefaults = useResourcesViewDefaults()
+
+const { isSideBarOpen, fileListHeaderY, sideBarActivePanel, viewMode, viewSize, sortFields } =
+  resourcesViewDefaults
+
+const folderView = computed(() => {
+  const viewMode = unref(resourcesViewDefaults.viewMode)
+  return unref(viewModes).find((v) => v.name === viewMode)
+})
+
 const { areEmptyTrashesShown } = storeToRefs(resourcesStore)
 
-const ready = ref(false)
+const extensionRegistry = useExtensionRegistry()
+const viewModes = computed(() => {
+  return [
+    ...extensionRegistry
+      .requestExtensions(folderViewsTrashOverviewExtensionPoint)
+      .map((e) => e.folderView)
+  ]
+})
+
+const appBarRef = ref<ComponentPublicInstance | null>()
+const folderViewStyle = computed(() => {
+  return {
+    ...(unref(folderView)?.isScrollable === false && {
+      height: `calc(100% - ${unref(appBarRef)?.$el.getBoundingClientRect().height}px)`
+    })
+  }
+})
+
 const sortBy = ref<keyof SpaceResource>('name')
 const sortDir = ref<SortDir>(SortDir.Asc)
 const filterTerm = ref('')
@@ -157,6 +194,7 @@ const loadResourcesTask = useTask(function* (signal) {
     ids: unref(spaces).map((space) => space.id),
     graphClient: clientService.graphAuthenticated
   })
+
   resourcesStore.initResourceList({ currentFolder: null, resources: unref(spaces) })
 })
 
@@ -241,11 +279,12 @@ const resourceTargetRouteCallback = ({
 
 let markInstance: Mark | undefined
 onMounted(async () => {
+  await loadResourcesTask.perform()
+
   if (unref(spaces).length === 1 && !isProjectSpaceResource(unref(spaces)[0])) {
     return router.push(getTrashLink(unref(spaces)[0]))
   }
-  ready.value = true
-  await loadResourcesTask.perform()
+
   await nextTick()
   markInstance = new Mark('.trash-table')
 })
diff --git a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
index a0f2b9455a..0af183cae8 100644
--- a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
+++ b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
@@ -9,7 +9,18 @@ import {
 import { mock } from 'vitest-mock-extended'
 import { nextTick } from 'vue'
 import { SpaceResource } from '@opencloud-eu/web-client'
-import { ResourceTable, SortDir } from '@opencloud-eu/web-pkg'
+import {
+  FolderViewExtension,
+  ResourceTable,
+  SortDir,
+  useExtensionRegistry
+} from '@opencloud-eu/web-pkg'
+import {
+  folderViewsFavoritesExtensionPoint,
+  folderViewsFolderExtensionPoint,
+  folderViewsProjectSpacesExtensionPoint,
+  folderViewsTrashOverviewExtensionPoint
+} from '../../../../src/extensionPoints'
 
 const spaceMocks = [
   {
@@ -117,6 +128,32 @@ function getWrapper({ spaces = spaceMocks }: { spaces?: SpaceResource[] } = {})
     })
   }
 
+  const plugins = [...defaultPlugins({ piniaOptions: { spacesState: { spaces } } })]
+
+  const extensions = [
+    {
+      id: 'com.github.opencloud-eu.web.files.folder-view.resource-table',
+      type: 'folderView',
+      extensionPointIds: [
+        folderViewsFolderExtensionPoint.id,
+        folderViewsProjectSpacesExtensionPoint.id,
+        folderViewsFavoritesExtensionPoint.id,
+        folderViewsTrashOverviewExtensionPoint.id
+      ],
+      folderView: {
+        name: 'resource-table',
+        label: 'Switch to default view',
+        icon: {
+          name: 'menu-line',
+          fillType: 'none'
+        },
+        component: ResourceTable
+      }
+    }
+  ] satisfies FolderViewExtension[]
+  const { requestExtensions } = useExtensionRegistry()
+  vi.mocked(requestExtensions).mockReturnValue(extensions)
+
   mocks.$clientService.graphAuthenticated.drives.listMyDrives.mockResolvedValue(spaceMocks)
 
   return {
@@ -126,7 +163,7 @@ function getWrapper({ spaces = spaceMocks }: { spaces?: SpaceResource[] } = {})
         stubs: { ...defaultStubs, NoContentMessage: true, 'resource-table': false },
         mocks,
         provide: mocks,
-        plugins: [...defaultPlugins({ piniaOptions: { spacesState: { spaces } } })]
+        plugins
       }
     })
   }
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
deleted file mode 100644
index 2fe4d63801..0000000000
--- a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
+++ /dev/null
@@ -1,73 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`TrashOverview > view states > should render trash list 1`] = `
-"<div class="flex">
-  <div class="files-view-wrapper relative grid grid-cols-1 flex-1 focus:outline-0 h-full overflow-y-auto gap-0">
-    <div id="files-view" class="outline-0 z-0">
-      <app-bar-stub viewmodedefault="resource-tiles" breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" viewmodes="" hasbulkactions="false" hasviewoptions="true" hashiddenfiles="false" hasfileextensions="false" haspagination="false" showactionsonselection="false" issidebaropen="false" batchactionsloading="false"></app-bar-stub>
-      <div class="flex justify-end flex-wrap items-end mx-4 mb-4">
-        <div class="w-3xs"><label class="inline-block mb-0.5" for="trash-filter">Search
-            <!--v-if-->
-          </label>
-          <div class="relative">
-            <!--v-if--> <input id="trash-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input" type="text" value="">
-            <!--v-if-->
-          </div>
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-      </div>
-      <table data-v-3c9ab66c="" class="oc-table oc-table-hover oc-table-sticky has-item-context-menu trash-table files-table" id="files-space-table" selection="">
-        <thead data-v-3c9ab66c="" class="oc-thead border-b">
-          <tr data-v-98c4aba8="" data-v-3c9ab66c="" class="oc-table-header-row h-10.5">
-            <th data-v-27e13406="" data-v-c53469a5="" data-v-3c9ab66c="" class="oc-table-cell text-left align-middle min-w-38 oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-name z-10 pl-4" style="top: 0px;" aria-sort="ascending"><button data-v-3c9ab66c="" type="button" aria-label="Sort by name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
-                <!--v-if-->
-                <!-- @slot Content of the button --> <span data-v-3c9ab66c="" class="oc-table-thead-content inline-table align-middle header-text">Name</span> <span data-v-3c9ab66c="" class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-4 p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
-      if (__props.accessibleLabel !== &quot;&quot;) {
-        const title = document.createElement(&quot;title&quot;);
-        title.setAttribute(&quot;id&quot;, svgTitleId.value);
-        title.appendChild(document.createTextNode(__props.accessibleLabel));
-        svg.insertBefore(title, svg.firstChild);
-      };
-      return svg;
-    }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
-              </button></th>
-            <th data-v-27e13406="" data-v-c53469a5="" data-v-3c9ab66c="" class="oc-table-cell text-right align-middle w-px oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-indicators z-10" style="top: 0px;">
-              <div data-v-3c9ab66c=""><span data-v-3c9ab66c="" class="oc-table-thead-content inline-table align-middle header-text">Status</span></div>
-            </th>
-            <th data-v-27e13406="" data-v-c53469a5="" data-v-3c9ab66c="" class="oc-table-cell text-right align-middle w-px oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-actions z-10 pr-4" style="top: 0px;">
-              <div data-v-3c9ab66c=""><span data-v-3c9ab66c="" class="oc-table-thead-content inline-table align-middle header-text">Actions</span></div>
-            </th>
-          </tr>
-        </thead>
-        <tbody data-v-3c9ab66c="" class="has-item-context-menu">
-          <tr data-v-98c4aba8="" data-v-3c9ab66c="" class="oc-tbody-tr oc-tbody-tr-1 border-t h-10.5" data-item-id="1" draggable="false">
-            <td data-v-27e13406="" data-v-98c4aba8="" class="oc-table-cell text-left align-middle oc-td" colspan="3"><span data-v-98c4aba8="" class="shimmer inline-block bg-role-shadow overflow-hidden absolute inset-x-2 inset-y-3 after:absolute after:inset-0 after:transform-[translateX(-100%)] opacity-10 after:animate-shimmer"></span></td>
-          </tr>
-          <tr data-v-98c4aba8="" data-v-3c9ab66c="" class="oc-tbody-tr oc-tbody-tr-2 border-t h-10.5" data-item-id="2" draggable="false">
-            <td data-v-27e13406="" data-v-98c4aba8="" class="oc-table-cell text-left align-middle oc-td" colspan="3"><span data-v-98c4aba8="" class="shimmer inline-block bg-role-shadow overflow-hidden absolute inset-x-2 inset-y-3 after:absolute after:inset-0 after:transform-[translateX(-100%)] opacity-10 after:animate-shimmer"></span></td>
-          </tr>
-          <tr data-v-98c4aba8="" data-v-3c9ab66c="" class="oc-tbody-tr oc-tbody-tr-3 border-t h-10.5" data-item-id="3" draggable="false">
-            <td data-v-27e13406="" data-v-98c4aba8="" class="oc-table-cell text-left align-middle oc-td" colspan="3"><span data-v-98c4aba8="" class="shimmer inline-block bg-role-shadow overflow-hidden absolute inset-x-2 inset-y-3 after:absolute after:inset-0 after:transform-[translateX(-100%)] opacity-10 after:animate-shimmer"></span></td>
-          </tr>
-        </tbody>
-        <tfoot data-v-3c9ab66c="" class="oc-table-footer border-t">
-          <tr data-v-3c9ab66c="" class="oc-table-footer-row h-10.5">
-            <td data-v-3c9ab66c="" colspan="3" class="oc-table-footer-cell p-1 text-sm text-role-on-surface-variant">
-              <!-- @slot Footer of the table -->
-              <!-- @slot Footer of the files table -->
-              <div class="text-center w-full my-2">
-                <p class="text-role-on-surface-variant">3 trash bins in total</p>
-                <!--v-if-->
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-      </table>
-      <!--v-if-->
-    </div>
-  </div>
-  <!--v-if-->
-  <file-side-bar-stub isopen="false"></file-side-bar-stub>
-</div>"
-`;
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
index 6c64526cbc..24c462b209 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
@@ -2,6 +2,7 @@
   <div id="tiles-view" class="px-4 pt-2">
     <div class="flex items-center mb-2 pb-2 oc-tiles-controls">
       <oc-checkbox
+        v-if="isSelectable"
         id="tiles-view-select-all"
         v-oc-tooltip="selectAllCheckboxLabel"
         class="ml-2"
@@ -76,7 +77,7 @@
         >
           <template #selection>
             <oc-checkbox
-              v-if="!isLocationPicker && !isFilePicker"
+              v-if="isSelectable && !isLocationPicker && !isFilePicker"
               :label="getResourceCheckboxLabel(resource)"
               :label-hidden="true"
               size="large"
@@ -159,10 +160,8 @@ import { isSpaceResource, Resource, SpaceResource } from '@opencloud-eu/web-clie
 // Alignment regarding naming would be an API-breaking change and can
 // Be done at a later point in time?
 import { ContextMenuQuickAction } from '../ContextActions'
-import { createLocationSpaces } from '../../router'
 import {
   ContextMenuBtnClickEventData,
-  createFileRouteOptions,
   CreateTargetRouteOptions,
   displayPositionedDropdown
 } from '../../helpers'
@@ -196,6 +195,7 @@ type ContextMenuQuickActionRef = ComponentPublicInstance<typeof ContextMenuQuick
 const {
   resources = [],
   selectedIds = [],
+  isSelectable = true,
   targetRouteCallback,
   space,
   sortFields = [],
@@ -209,6 +209,7 @@ const {
 } = defineProps<{
   resources?: Resource[]
   selectedIds?: string[]
+  isSelectable?: boolean
   targetRouteCallback?: (arg: CreateTargetRouteOptions) => unknown
   space?: SpaceResource
   sortFields?: SortField[]
@@ -275,18 +276,6 @@ const resourceRouteResolver = useResourceRouteResolver(
 )
 
 const getRoute = (resource: Resource) => {
-  if (isSpaceResource(resource)) {
-    return resource.disabled
-      ? null
-      : createLocationSpaces(
-          'files-spaces-generic',
-          createFileRouteOptions(resource as SpaceResource, {
-            path: '',
-            fileId: resource.fileId
-          })
-        )
-  }
-
   if (resource.isFolder) {
     return resourceRouteResolver.createFolderLink({
       path: resource.path,
diff --git a/tests/e2e/support/objects/app-files/trashbin/actions.ts b/tests/e2e/support/objects/app-files/trashbin/actions.ts
index a981782337..531b3cdc90 100644
--- a/tests/e2e/support/objects/app-files/trashbin/actions.ts
+++ b/tests/e2e/support/objects/app-files/trashbin/actions.ts
@@ -1,18 +1,19 @@
 import { Page, Locator } from '@playwright/test'
 import util from 'util'
 
-const spaceIdSelector = '//tr[@data-item-id="%s"]//*[contains(@class, "oc-resource-details")]//a'
+const spaceIdSelector = '(//*[@data-item-id="%s"]//a[contains(@class, "oc-resource-link")])[1]'
 const showEmptyTrashbinsButton = '//*[@data-testid="files-switch-projects-show-disabled"]//button'
 const filesViewOptionButton = '#files-view-options-btn'
 const emptyTrashbinQuickActionBtn =
-  '//*[@data-test-resource-name="%s"]//ancestor::tr//button[@aria-label="Empty trash bin"]'
+  '//*[@data-test-resource-name="%s"]//ancestor::tr//button[@aria-label="Empty trash bin"] | //*[@data-test-resource-name="%s"]//ancestor::li[contains(@class, "oc-tiles-item")]//button[@aria-label="Empty trash bin"]'
 const actionConfirmButton = '.oc-modal-body-actions-confirm'
-const footerTextSelector = '.oc-table-footer-row'
+const footerTextSelector = '//*[@data-testid="files-list-footer-info"]'
 
 export interface openTrashBinArgs {
   id: string
   page: Page
 }
+
 export const openTrashbinOfProjectSpace = async (args: openTrashBinArgs): Promise<void> => {
   const { id, page } = args
   await page.locator(util.format(spaceIdSelector, id)).click()
@@ -35,7 +36,7 @@ export const getEmptyTrashbinLocator = async ({
   page: Page
   space: string
 }): Promise<Locator> => {
-  return await page.locator(util.format(emptyTrashbinQuickActionBtn, space))
+  return await page.locator(util.format(emptyTrashbinQuickActionBtn, space, space))
 }
 
 export const emptyTrashbinUsingQuickAction = async ({
@@ -45,7 +46,7 @@ export const emptyTrashbinUsingQuickAction = async ({
   page: Page
   space: string
 }): Promise<void> => {
-  await page.locator(util.format(emptyTrashbinQuickActionBtn, space)).click()
+  await page.locator(util.format(emptyTrashbinQuickActionBtn, space, space)).click()
   await Promise.all([
     page.waitForResponse(
       (resp) =>

From 04d1696364f9b636ac2322af60d5d69d85295a58 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Mon, 6 Oct 2025 12:59:57 +0200
Subject: [PATCH 3/6] fix unit tests

---
 .../tests/unit/views/trash/Overview.spec.ts   | 10 ++-
 .../trash/__snapshots__/Overview.spec.ts.snap | 73 +++++++++++++++++++
 2 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap

diff --git a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
index 0af183cae8..e46ce3114c 100644
--- a/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
+++ b/packages/web-app-files/tests/unit/views/trash/Overview.spec.ts
@@ -1,4 +1,6 @@
 import TrashOverview from '../../../../src/views/trash/Overview.vue'
+import { useResourcesViewDefaults } from '../../../../src/composables'
+import { useResourcesViewDefaultsMock } from '../../../../tests/mocks/useResourcesViewDefaultsMock'
 import {
   defaultComponentMocks,
   defaultPlugins,
@@ -22,6 +24,8 @@ import {
   folderViewsTrashOverviewExtensionPoint
 } from '../../../../src/extensionPoints'
 
+vi.mock('../../../../src/composables')
+
 const spaceMocks = [
   {
     id: '1',
@@ -58,8 +62,9 @@ describe('TrashOverview', () => {
     await (wrapper.vm as any).loadResourcesTask.last
     expect(wrapper.find('no-content-message-stub').exists()).toBeTruthy()
   })
-  it('should navigate to single space trash if only one space exists', () => {
-    const { mocks } = getWrapper({ spaces: [spaceMocks[0]] })
+  it('should navigate to single space trash if only one space exists', async () => {
+    const { wrapper, mocks } = getWrapper({ spaces: [spaceMocks[0]] })
+    await (wrapper.vm as any).loadResourcesTask.last
     expect(mocks.$router.push).toHaveBeenCalledWith({
       name: 'files-trash-generic',
       params: { driveAliasAndItem: spaceMocks[0].getDriveAliasAndItem(undefined) },
@@ -129,6 +134,7 @@ function getWrapper({ spaces = spaceMocks }: { spaces?: SpaceResource[] } = {})
   }
 
   const plugins = [...defaultPlugins({ piniaOptions: { spacesState: { spaces } } })]
+  vi.mocked(useResourcesViewDefaults).mockImplementation(() => useResourcesViewDefaultsMock())
 
   const extensions = [
     {
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
new file mode 100644
index 0000000000..fc44986ae2
--- /dev/null
+++ b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
@@ -0,0 +1,73 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TrashOverview > view states > should render trash list 1`] = `
+"<div class="flex w-full">
+  <div class="files-view-wrapper relative grid grid-cols-1 flex-1 focus:outline-0 h-full overflow-y-auto gap-0">
+    <div id="files-view" class="outline-0 z-0">
+      <app-bar-stub viewmodedefault="resource-tiles" breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" viewmodes="[object Object]" hasbulkactions="false" hasviewoptions="true" hashiddenfiles="false" hasfileextensions="false" haspagination="false" showactionsonselection="false" issidebaropen="false" batchactionsloading="false"></app-bar-stub>
+      <div class="flex justify-end flex-wrap items-end mx-4 mb-4">
+        <div class="w-3xs"><label class="inline-block mb-0.5" for="trash-filter">Search
+            <!--v-if-->
+          </label>
+          <div class="relative">
+            <!--v-if--> <input id="trash-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input" type="text" value="">
+            <!--v-if-->
+          </div>
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+      </div>
+      <table data-v-3c9ab66c="" class="oc-table oc-table-hover oc-table-sticky has-item-context-menu trash-table files-table" sort-fields="" view-size="1" id="files-space-table" selection="">
+        <thead data-v-3c9ab66c="" class="oc-thead border-b">
+          <tr data-v-98c4aba8="" data-v-3c9ab66c="" class="oc-table-header-row h-10.5">
+            <th data-v-27e13406="" data-v-c53469a5="" data-v-3c9ab66c="" class="oc-table-cell text-left align-middle min-w-38 oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-name z-10 pl-4" style="top: 0px;" aria-sort="ascending"><button data-v-3c9ab66c="" type="button" aria-label="Sort by name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
+                <!--v-if-->
+                <!-- @slot Content of the button --> <span data-v-3c9ab66c="" class="oc-table-thead-content inline-table align-middle header-text">Name</span> <span data-v-3c9ab66c="" class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-4 p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
+      if (__props.accessibleLabel !== &quot;&quot;) {
+        const title = document.createElement(&quot;title&quot;);
+        title.setAttribute(&quot;id&quot;, svgTitleId.value);
+        title.appendChild(document.createTextNode(__props.accessibleLabel));
+        svg.insertBefore(title, svg.firstChild);
+      };
+      return svg;
+    }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
+              </button></th>
+            <th data-v-27e13406="" data-v-c53469a5="" data-v-3c9ab66c="" class="oc-table-cell text-right align-middle w-px oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-indicators z-10" style="top: 0px;">
+              <div data-v-3c9ab66c=""><span data-v-3c9ab66c="" class="oc-table-thead-content inline-table align-middle header-text">Status</span></div>
+            </th>
+            <th data-v-27e13406="" data-v-c53469a5="" data-v-3c9ab66c="" class="oc-table-cell text-right align-middle w-px oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-actions z-10 pr-4" style="top: 0px;">
+              <div data-v-3c9ab66c=""><span data-v-3c9ab66c="" class="oc-table-thead-content inline-table align-middle header-text">Actions</span></div>
+            </th>
+          </tr>
+        </thead>
+        <tbody data-v-3c9ab66c="" class="has-item-context-menu">
+          <tr data-v-98c4aba8="" data-v-3c9ab66c="" class="oc-tbody-tr oc-tbody-tr-1 border-t h-10.5" data-item-id="1" draggable="false">
+            <td data-v-27e13406="" data-v-98c4aba8="" class="oc-table-cell text-left align-middle oc-td" colspan="3"><span data-v-98c4aba8="" class="shimmer inline-block bg-role-shadow overflow-hidden absolute inset-x-2 inset-y-3 after:absolute after:inset-0 after:transform-[translateX(-100%)] opacity-10 after:animate-shimmer"></span></td>
+          </tr>
+          <tr data-v-98c4aba8="" data-v-3c9ab66c="" class="oc-tbody-tr oc-tbody-tr-2 border-t h-10.5" data-item-id="2" draggable="false">
+            <td data-v-27e13406="" data-v-98c4aba8="" class="oc-table-cell text-left align-middle oc-td" colspan="3"><span data-v-98c4aba8="" class="shimmer inline-block bg-role-shadow overflow-hidden absolute inset-x-2 inset-y-3 after:absolute after:inset-0 after:transform-[translateX(-100%)] opacity-10 after:animate-shimmer"></span></td>
+          </tr>
+          <tr data-v-98c4aba8="" data-v-3c9ab66c="" class="oc-tbody-tr oc-tbody-tr-3 border-t h-10.5" data-item-id="3" draggable="false">
+            <td data-v-27e13406="" data-v-98c4aba8="" class="oc-table-cell text-left align-middle oc-td" colspan="3"><span data-v-98c4aba8="" class="shimmer inline-block bg-role-shadow overflow-hidden absolute inset-x-2 inset-y-3 after:absolute after:inset-0 after:transform-[translateX(-100%)] opacity-10 after:animate-shimmer"></span></td>
+          </tr>
+        </tbody>
+        <tfoot data-v-3c9ab66c="" class="oc-table-footer border-t">
+          <tr data-v-3c9ab66c="" class="oc-table-footer-row h-10.5">
+            <td data-v-3c9ab66c="" colspan="3" class="oc-table-footer-cell p-1 text-sm text-role-on-surface-variant">
+              <!-- @slot Footer of the table -->
+              <!-- @slot Footer of the files table -->
+              <div class="text-center w-full my-2">
+                <p data-testid="files-list-footer-info" class="text-role-on-surface-variant">3 trash bins in total</p>
+                <!--v-if-->
+              </div>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+      <!--v-if-->
+    </div>
+  </div>
+  <!--v-if-->
+  <file-side-bar-stub isopen="false" activepanel=""></file-side-bar-stub>
+</div>"
+`;

From 1f2bf67f3d83add64e0e97e233584a6b6d910db0 Mon Sep 17 00:00:00 2001
From: Alex <abackermann91@gmail.com>
Date: Tue, 7 Oct 2025 19:30:36 +0200
Subject: [PATCH 4/6] GenericTrash.vue aktualisieren

Co-authored-by: Jannik Stehle <50302941+JammingBen@users.noreply.github.com>
---
 packages/web-app-files/src/views/spaces/GenericTrash.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/views/spaces/GenericTrash.vue b/packages/web-app-files/src/views/spaces/GenericTrash.vue
index 2e70c1355e..c773afa914 100644
--- a/packages/web-app-files/src/views/spaces/GenericTrash.vue
+++ b/packages/web-app-files/src/views/spaces/GenericTrash.vue
@@ -141,7 +141,7 @@ const folderView = computed(() => {
   const viewMode = unref(resourcesViewDefaults.viewMode)
   return unref(viewModes).find((v) => v.name === viewMode)
 })
-const appBarRef = ref<ComponentPublicInstance | null>()
+const appBarRef = useTemplateRef<ComponentPublicInstance<typeof AppBar>>('appBarRef')
 const folderViewStyle = computed(() => {
   return {
     ...(unref(folderView)?.isScrollable === false && {

From 4bde4434c79fdea99a4f5ef53451d220c06651f4 Mon Sep 17 00:00:00 2001
From: Alex <abackermann91@gmail.com>
Date: Tue, 7 Oct 2025 19:30:46 +0200
Subject: [PATCH 5/6] Overview.vue aktualisieren

Co-authored-by: Jannik Stehle <50302941+JammingBen@users.noreply.github.com>
---
 packages/web-app-files/src/views/trash/Overview.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index 33aa741601..4e1b079541 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -141,7 +141,7 @@ const viewModes = computed(() => {
   ]
 })
 
-const appBarRef = ref<ComponentPublicInstance | null>()
+const appBarRef = useTemplateRef<ComponentPublicInstance<typeof AppBar>>('appBarRef')```
 const folderViewStyle = computed(() => {
   return {
     ...(unref(folderView)?.isScrollable === false && {

From bebeeb6daf45a9d334d213e554c295e0f0a599d9 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Tue, 7 Oct 2025 19:46:44 +0200
Subject: [PATCH 6/6] fix bug from suggested change

---
 .../src/views/spaces/GenericTrash.vue              |  9 ++++++++-
 .../web-app-files/src/views/trash/Overview.vue     | 14 ++++++++++++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/GenericTrash.vue b/packages/web-app-files/src/views/spaces/GenericTrash.vue
index c773afa914..092435d551 100644
--- a/packages/web-app-files/src/views/spaces/GenericTrash.vue
+++ b/packages/web-app-files/src/views/spaces/GenericTrash.vue
@@ -76,7 +76,14 @@
 </template>
 
 <script setup lang="ts">
-import { ComponentPublicInstance, computed, onBeforeUnmount, onMounted, ref, unref } from 'vue'
+import {
+  ComponentPublicInstance,
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  unref,
+  useTemplateRef
+} from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { storeToRefs } from 'pinia'
 import {
diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index 4e1b079541..88df16f51f 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -2,6 +2,7 @@
   <div class="flex w-full">
     <files-view-wrapper>
       <app-bar
+        ref="appBarRef"
         :breadcrumbs="breadcrumbs"
         :has-view-options="true"
         :has-hidden-files="false"
@@ -77,7 +78,16 @@
 </template>
 
 <script setup lang="ts">
-import { ComponentPublicInstance, computed, nextTick, onMounted, ref, unref, watch } from 'vue'
+import {
+  ComponentPublicInstance,
+  computed,
+  nextTick,
+  onMounted,
+  ref,
+  unref,
+  useTemplateRef,
+  watch
+} from 'vue'
 import Mark from 'mark.js'
 import Fuse from 'fuse.js'
 import { useGettext } from 'vue3-gettext'
@@ -141,7 +151,7 @@ const viewModes = computed(() => {
   ]
 })
 
-const appBarRef = useTemplateRef<ComponentPublicInstance<typeof AppBar>>('appBarRef')```
+const appBarRef = useTemplateRef<ComponentPublicInstance<typeof AppBar>>('appBarRef')
 const folderViewStyle = computed(() => {
   return {
     ...(unref(folderView)?.isScrollable === false && {