From aa1ad01def83109624758873a68fc5babc35a779 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Wed, 4 Jan 2023 22:39:08 +0100
Subject: [PATCH 01/26] Rebase Proof-of-concept

---
 changelog/unreleased/enhancement-resources-tiles-view     | 7 +++++++
 packages/web-app-files/src/components/AppBar/AppBar.vue   | 6 +++++-
 .../src/components/FilesList/ResourceTable.vue            | 8 +++++---
 .../web-app-files/src/composables/viewMode/constants.ts   | 8 ++++++++
 4 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-resources-tiles-view

diff --git a/changelog/unreleased/enhancement-resources-tiles-view b/changelog/unreleased/enhancement-resources-tiles-view
new file mode 100644
index 00000000000..24eab745123
--- /dev/null
+++ b/changelog/unreleased/enhancement-resources-tiles-view
@@ -0,0 +1,7 @@
+Enhancement: Add tiles view for resource display
+
+We've added a switch to change from the known resource table to a tiles view.
+The change gets saved to the route and persisted across resource navigation.
+
+https://github.com/owncloud/web/pull/7991
+https://github.com/owncloud/web/issues/6378
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 7a7e89c66fa..05ce8ce1986 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -142,7 +142,11 @@ export default defineComponent({
       if (!this.displayViewModeSwitch) {
         return []
       }
-      return [ViewModeConstants.condensedTable, ViewModeConstants.default]
+      return [
+        ViewModeConstants.tilesView,
+        ViewModeConstants.condensedTable,
+        ViewModeConstants.default
+      ]
     }
   },
   mounted() {
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index ea9d41bbd66..56695b243fc 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -1,5 +1,6 @@
 <template>
-  <oc-table
+  <component
+    :is="displayMode"
     :class="[
       hoverableQuickActions && 'hoverable-quick-actions',
       { condensed: viewMode === ViewModeConstants.condensedTable.name }
@@ -178,7 +179,7 @@
       <!-- @slot Footer of the files table -->
       <slot name="footer" />
     </template>
-  </oc-table>
+  </component>
 </template>
 
 <script lang="ts">
@@ -217,10 +218,11 @@ import { basename, dirname } from 'path'
 import { useWindowSize } from '@vueuse/core'
 import ContextMenuQuickAction from 'web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue'
 
+import ResourceTiles from './ResourceTiles.vue'
 const TAGS_MINIMUM_SCREEN_WIDTH = 850
 
 export default defineComponent({
-  components: { ContextMenuQuickAction },
+  components: { ContextMenuQuickAction, ResourceTiles },
   mixins: [Rename],
   props: {
     /**
diff --git a/packages/web-app-files/src/composables/viewMode/constants.ts b/packages/web-app-files/src/composables/viewMode/constants.ts
index 58d87a68971..6f3ee0253ae 100644
--- a/packages/web-app-files/src/composables/viewMode/constants.ts
+++ b/packages/web-app-files/src/composables/viewMode/constants.ts
@@ -22,5 +22,13 @@ export abstract class ViewModeConstants {
       fillType: 'none'
     }
   }
+  static readonly tilesView: ViewMode = {
+    name: 'resource-tiles',
+    label: $gettext('Switch to tiles view'),
+    icon: {
+      name: 'apps-2',
+      fillType: 'line'
+    }
+  }
   static readonly queryName: string = 'view-mode'
 }

From b4e2efd131ec9a4e0777b173d0991d4ad05fd726 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Mon, 9 Jan 2023 20:48:10 +0100
Subject: [PATCH 02/26] Rebase after compat-mode-merge, alter approach of using
 ResourceTiles dynamically within ResourceTable

---
 .../src/components/OcTile/OcTile.vue          |  15 +--
 .../components/FilesList/ResourceTable.vue    | 113 ++++--------------
 .../components/FilesList/ResourceTiles.vue    |  33 +++--
 .../src/composables/filesList/index.ts        |  92 ++++++++++++++
 .../src/views/spaces/GenericSpace.vue         |  30 ++++-
 5 files changed, 177 insertions(+), 106 deletions(-)
 create mode 100644 packages/web-app-files/src/composables/filesList/index.ts

diff --git a/packages/design-system/src/components/OcTile/OcTile.vue b/packages/design-system/src/components/OcTile/OcTile.vue
index ccab464f752..8b1128efb64 100644
--- a/packages/design-system/src/components/OcTile/OcTile.vue
+++ b/packages/design-system/src/components/OcTile/OcTile.vue
@@ -9,7 +9,7 @@
       class="oc-card-media-top oc-border-b oc-flex oc-flex-center oc-flex-middle"
       :resource="resource"
       :folder-link="resourceRoute"
-      @click="$emit('click', $event)"
+      @click="$emit('click')"
     >
       <oc-tag
         v-if="resource.disabled"
@@ -31,12 +31,8 @@
     </oc-resource-link>
     <div class="oc-card-body oc-p-s">
       <div class="oc-flex oc-flex-between oc-flex-middle">
-        <div class="oc-flex oc-flex-middle oc-text-truncate">
-          <oc-resource
-            :resource="resource"
-            :folder-link="resourceRoute"
-            @click="$emit('click', $event)"
-          />
+        <div class="oc-flex oc-flex-middle oc-text-truncate resource-name-wrapper">
+          <oc-resource :resource="resource" :folder-link="resourceRoute" @click="$emit('click')" />
         </div>
         <div class="oc-flex oc-flex-middle">
           <!-- Slot for individual actions -->
@@ -128,9 +124,10 @@ export default defineComponent({
     }
   }
 
-  .resource-name {
-    overflow: hidden;
+  .resource-name-wrapper {
     color: var(--oc-color-text-default);
+    max-width: 60%;
+    overflow: hidden;
   }
 }
 </style>
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index 56695b243fc..211477d70be 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -1,6 +1,5 @@
 <template>
-  <component
-    :is="displayMode"
+  <oc-table
     :class="[
       hoverableQuickActions && 'hoverable-quick-actions',
       { condensed: viewMode === ViewModeConstants.condensedTable.name }
@@ -179,15 +178,16 @@
       <!-- @slot Footer of the files table -->
       <slot name="footer" />
     </template>
-  </component>
+  </oc-table>
 </template>
 
 <script lang="ts">
-import { eventBus } from 'web-pkg/src/services/eventBus'
 import { mapGetters, mapActions, mapState } from 'vuex'
-import { EVENT_TROW_MOUNTED, EVENT_FILE_DROPPED } from 'web-pkg/src/constants'
-import { SortDir } from '../../composables'
 import { determineSortFields } from '../../helpers/ui/resourceTable'
+import { basename, dirname } from 'path'
+import { defineComponent, PropType, computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+import { EVENT_FILE_DROPPED, EVENT_TROW_MOUNTED } from 'web-pkg/src/constants'
 import {
   useCapabilityFilesTags,
   useCapabilityProjectSpacesEnabled,
@@ -195,30 +195,28 @@ import {
   useStore,
   useUserContext
 } from 'web-pkg/src/composables'
-import { ViewModeConstants } from 'web-app-files/src/composables/viewMode'
+import { eventBus } from 'web-pkg/src/services/eventBus'
 
 import Rename from '../../mixins/actions/rename'
-import { defineComponent, PropType, computed } from 'vue'
 import { Resource } from 'web-client'
-import { ClipboardActions } from '../../helpers/clipboardActions'
-import { isResourceTxtFileAlmostEmpty } from '../../helpers/resources'
 import { ShareTypes } from 'web-client/src/helpers/share'
-import { createLocationSpaces, createLocationShares, createLocationCommon } from '../../router'
 import {
   displayPositionedDropdown,
   formatDateFromJSDate,
   formatRelativeDateFromJSDate
 } from 'web-pkg/src/helpers'
 import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
-import { buildShareSpaceResource, extractDomSelector, SpaceResource } from 'web-client/src/helpers'
-import { configurationManager } from 'web-pkg/src/configuration'
-import { CreateTargetRouteOptions } from '../../helpers/folderLink'
-import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
-import { basename, dirname } from 'path'
-import { useWindowSize } from '@vueuse/core'
+import { extractDomSelector, SpaceResource } from 'web-client/src/helpers'
 import ContextMenuQuickAction from 'web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue'
 
 import ResourceTiles from './ResourceTiles.vue'
+
+import { createLocationShares, createLocationCommon } from '../../router'
+import { SortDir } from '../../composables'
+import { ViewModeConstants } from '../../composables/viewMode'
+import { ClipboardActions } from '../../helpers/clipboardActions'
+import { isResourceTxtFileAlmostEmpty } from '../../helpers/resources'
+
 const TAGS_MINIMUM_SCREEN_WIDTH = 850
 
 export default defineComponent({
@@ -283,14 +281,6 @@ export default defineComponent({
       required: false,
       default: true
     },
-    /**
-     * Accepts a `path` and a `resource` param and returns a corresponding route object.
-     */
-    targetRouteCallback: {
-      type: Function,
-      required: false,
-      default: undefined
-    },
     /**
      * Asserts whether clicking on the resource name triggers any action
      */
@@ -400,19 +390,24 @@ export default defineComponent({
     'update:selectedIds',
     'update:modelValue'
   ],
-  setup() {
+  setup(props, context) {
     const store = useStore()
+
+    const spaces = computed(() => {
+      return store.getters['runtime/spaces/spaces']
+    })
+
     const { width } = useWindowSize()
     const hasTags = computed(
       () => useCapabilityFilesTags().value && width.value >= TAGS_MINIMUM_SCREEN_WIDTH
     )
 
     return {
-      ViewModeConstants,
       hasTags,
-      isUserContext: useUserContext({ store }),
       hasShareJail: useCapabilityShareJailEnabled(),
-      hasProjectSpaces: useCapabilityProjectSpacesEnabled()
+      hasProjectSpaces: useCapabilityProjectSpacesEnabled(),
+      isUserContext: useUserContext({ store }),
+      spaces
     }
   },
   data() {
@@ -644,36 +639,6 @@ export default defineComponent({
         resource: file
       })
     },
-    createFolderLink(options: CreateTargetRouteOptions) {
-      if (this.targetRouteCallback) {
-        return this.targetRouteCallback(options)
-      }
-
-      const { path, fileId, resource } = options
-      let space
-      if (resource.shareId) {
-        space = buildShareSpaceResource({
-          shareId: resource.shareId,
-          shareName: basename(resource.shareRoot),
-          serverUrl: configurationManager.serverUrl
-        })
-      } else if (!resource.shareId && !this.getInternalSpace(resource.storageId)) {
-        if (path === '/') {
-          return createLocationShares('files-shares-with-me')
-        }
-        // FIXME: This is a hacky way to resolve re-shares, but we don't have other options currently
-        return { name: 'resolvePrivateLink', params: { fileId } }
-      } else {
-        space = this.getMatchingSpace(resource)
-      }
-      if (!space) {
-        return {}
-      }
-      return createLocationSpaces(
-        'files-spaces-generic',
-        createFileRouteOptions(space, { path, fileId })
-      )
-    },
     fileDragged(file) {
       this.addSelectedResource(file)
     },
@@ -717,7 +682,7 @@ export default defineComponent({
        * @property {object} resource The resource which was mounted as table row
        * @property {object} component The table row component
        */
-      this.$emit('rowMounted', resource, component)
+      this.$emit(this.constants.EVENT_TROW_MOUNTED, resource, component)
     },
     fileClicked(data) {
       /**
@@ -758,20 +723,7 @@ export default defineComponent({
       this.emitSelect(this.resources.map((resource) => resource.id))
     },
     emitFileClick(resource) {
-      let space = this.getMatchingSpace(resource)
-      if (!space) {
-        space = buildShareSpaceResource({
-          shareId: resource.shareId,
-          shareName: resource.name,
-          serverUrl: configurationManager.serverUrl
-        })
-      }
-
-      /**
-       * 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] })
+      this.createFileAction(resource)
     },
     isResourceClickable(resourceId) {
       if (!this.areResourcesClickable) {
@@ -824,19 +776,6 @@ export default defineComponent({
         ownerName: resource.owner[0].displayName
       })
     },
-    getInternalSpace(storageId) {
-      return this.space || this.spaces.find((space) => space.id === storageId)
-    },
-    getMatchingSpace(resource: Resource): SpaceResource {
-      return (
-        this.getInternalSpace(resource.storageId) ||
-        buildShareSpaceResource({
-          shareId: resource.shareId,
-          shareName: resource.name,
-          serverUrl: configurationManager.serverUrl
-        })
-      )
-    },
     getDefaultParentFolderName(resource) {
       if (this.hasProjectSpaces) {
         const matchingSpace = this.getMatchingSpace(resource)
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 79f0b519e21..9b34f0d22ad 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -6,8 +6,8 @@
           :ref="`row-${index}`"
           :resource="resource"
           :resource-route="getRoute(resource)"
-          @click="tileResourceClicked(resource, $event)"
-          @contextmenu="$emit(EVENT_TROW_CONTEXTMENU, $refs[`row-${index}`][0], $event, resource)"
+          @contextmenu="$emit('contextmenuClicked', $refs[`row-${index}`][0], $event, resource)"
+          @click="emitTileClick(resource)"
         >
           <template #imageField="{ item }">
             <slot name="image" :item="item" />
@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { defineComponent, PropType, computed } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { createLocationSpaces } from 'web-app-files/src/router'
 import { Resource, SpaceResource } from 'web-client'
@@ -35,6 +35,7 @@ import { useStore } from 'web-pkg/src/composables'
 // Alignment regarding naming would be an API-breaking change and can
 // Be done at a later point in time?
 import { EVENT_TROW_CONTEXTMENU } from 'web-pkg/src/constants'
+import { useResourceRouteResolver } from '../../composables/filesList'
 
 export default defineComponent({
   name: 'ResourceTiles',
@@ -47,10 +48,17 @@ export default defineComponent({
       default: () => []
     }
   },
-  setup() {
+  emits: ['contextmenuClicked', 'fileClick'],
+  setup(props, context) {
     const store = useStore()
     const { $gettext } = useGettext()
 
+    const spaces = computed(() => {
+      return store.getters['runtime/spaces/spaces']
+    })
+
+    const resourceRouteResolver = useResourceRouteResolver({ spaces }, context)
+
     const getRoute = (resource) => {
       if (resource.type === 'space') {
         return resource.disabled
@@ -63,10 +71,17 @@ export default defineComponent({
               })
             )
       }
-      return { path: '#' }
+      if (resource.type === 'folder') {
+        return resourceRouteResolver.createFolderLink({
+          path: resource.path,
+          fileId: resource.fileId,
+          resource: resource
+        })
+      }
+      return { path: '' }
     }
 
-    const tileResourceClicked = (resource, event) => {
+    const emitTileClick = (resource) => {
       // Needs to handle file actions and potentially disabled folders also
       if (resource.disabled && resource.type === 'space') {
         store.dispatch('showMessage', {
@@ -74,12 +89,14 @@ export default defineComponent({
           status: 'warning'
         })
       }
+      if (resource.type !== 'space' && resource.type !== 'folder') {
+        resourceRouteResolver.createFileAction(resource)
+      }
     }
 
     return {
-      EVENT_TROW_CONTEXTMENU,
       getRoute,
-      tileResourceClicked
+      emitTileClick
     }
   }
 })
diff --git a/packages/web-app-files/src/composables/filesList/index.ts b/packages/web-app-files/src/composables/filesList/index.ts
new file mode 100644
index 00000000000..12bfdc5094c
--- /dev/null
+++ b/packages/web-app-files/src/composables/filesList/index.ts
@@ -0,0 +1,92 @@
+import { unref, Ref } from 'vue'
+import { basename } from 'path'
+
+import { ConfigurationManager } from 'web-pkg/src'
+import { useConfigurationManager } from 'web-pkg/src/composables/configuration'
+import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
+import { createLocationSpaces, createLocationShares } from '../../router'
+import { CreateTargetRouteOptions } from '../../helpers/folderLink/types'
+import { Resource, SpaceResource } from 'web-client/src'
+import { buildShareSpaceResource } from 'web-client/src/helpers'
+
+type ResourceRouteResolverOptions = {
+  configurationManager?: ConfigurationManager
+  targetRouteCallback?: Ref<any>
+  space?: Ref<SpaceResource>
+  spaces: Ref<SpaceResource[]>
+}
+
+export const useResourceRouteResolver = (options: ResourceRouteResolverOptions, context) => {
+  const configurationManager = options.configurationManager || useConfigurationManager()
+
+  const getInternalSpace = (storageId) => {
+    return unref(options.space) || unref(options.spaces).find((space) => space.id === storageId)
+  }
+
+  const getMatchingSpace = (resource: Resource): SpaceResource => {
+    return (
+      getInternalSpace(resource.storageId) ||
+      buildShareSpaceResource({
+        shareId: resource.shareId,
+        shareName: resource.name,
+        serverUrl: configurationManager.serverUrl
+      })
+    )
+  }
+
+  const targetRouteCallback = options.targetRouteCallback
+
+  const createFolderLink = (createTargetRouteOptions: CreateTargetRouteOptions) => {
+    if (unref(targetRouteCallback)) {
+      return unref(targetRouteCallback)(createTargetRouteOptions)
+    }
+
+    const { path, fileId, resource } = createTargetRouteOptions
+    let space
+    if (resource.shareId) {
+      space = buildShareSpaceResource({
+        shareId: resource.shareId,
+        shareName: basename(resource.shareRoot),
+        serverUrl: configurationManager.serverUrl
+      })
+    } else if (!resource.shareId && !getInternalSpace(resource.storageId)) {
+      if (path === '/') {
+        return createLocationShares('files-shares-with-me')
+      }
+      // FIXME: This is a hacky way to resolve re-shares, but we don't have other options currently
+      return { name: 'resolvePrivateLink', params: { fileId } }
+    } else {
+      space = getMatchingSpace(resource)
+    }
+    if (!space) {
+      return {}
+    }
+    return createLocationSpaces(
+      'files-spaces-generic',
+      createFileRouteOptions(space, { path, fileId })
+    )
+  }
+
+  const createFileAction = (resource: Resource) => {
+    let space = getMatchingSpace(resource)
+    if (!space) {
+      space = buildShareSpaceResource({
+        shareId: resource.shareId,
+        shareName: resource.name,
+        serverUrl: configurationManager.serverUrl
+      })
+    }
+    /**
+     * Triggered when a default action is triggered on a file
+     * @property {object} resource resource for which the event is triggered
+     */
+    context.emit('fileClick', { space, resources: [resource] })
+  }
+
+  return {
+    getInternalSpace,
+    getMatchingSpace,
+    createFileAction,
+    createFolderLink
+  }
+}
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index f9253428e5b..5796478f932 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -45,7 +45,7 @@
           </template>
         </no-content-message>
         <resource-table
-          v-else
+          v-else-if="viewMode !== 'resource-tiles'"
           id="files-space-table"
           v-model:selectedIds="selectedResourcesIds"
           class="files-table"
@@ -53,7 +53,6 @@
           :view-mode="viewMode"
           :are-thumbnails-displayed="displayThumbnails"
           :resources="paginatedResources"
-          :target-route-callback="resourceTargetRouteCallback"
           :header-position="fileListHeaderY"
           :drag-drop="true"
           :sort-by="sortBy"
@@ -90,6 +89,31 @@
             />
           </template>
         </resource-table>
+        <resource-tiles
+          v-else
+          :data="paginatedResources"
+          class="oc-px-m oc-pt-l"
+          @fileClick="$_fileActions_triggerDefaultAction"
+        >
+          <template #actions="{ item }">
+            <quick-actions
+              :class="item.preview"
+              class="oc-visible@s"
+              :item="item"
+              :actions="app.quickActions"
+            />
+          </template>
+          <template #footer>
+            <pagination :pages="paginationPages" :current-page="paginationPage" />
+            <list-info
+              v-if="paginatedResources.length > 0"
+              class="oc-width-1-1 oc-my-s"
+              :files="totalFilesCount.files"
+              :folders="totalFilesCount.folders"
+              :size="totalFilesSize"
+            />
+          </template>
+        </resource-tiles>
       </template>
     </files-view-wrapper>
     <side-bar :open="sideBarOpen" :active-panel="sideBarActivePanel" :space="space" />
@@ -113,6 +137,7 @@ import NotFoundMessage from '../../components/FilesList/NotFoundMessage.vue'
 import Pagination from '../../components/FilesList/Pagination.vue'
 import QuickActions from '../../components/FilesList/QuickActions.vue'
 import ResourceTable from '../../components/FilesList/ResourceTable.vue'
+import ResourceTiles from '../../components/FilesList/ResourceTiles.vue'
 import SideBar from '../../components/SideBar/SideBar.vue'
 import SpaceHeader from '../../components/Spaces/SpaceHeader.vue'
 import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
@@ -170,6 +195,7 @@ export default defineComponent({
     Pagination,
     QuickActions,
     ResourceTable,
+    ResourceTiles,
     SideBar,
     SpaceHeader
   },

From 16f2e5f589268168fc557ed42db5bc5a3c105884 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Tue, 10 Jan 2023 00:39:07 +0100
Subject: [PATCH 03/26] Extract contextMenu from Projects.vue to ResourceTiles,
 use on GenericSpace.vue

---
 .../src/components/OcTile/OcTile.vue          |   2 +
 .../components/FilesList/ResourceTiles.vue    | 113 ++++++++++++++++--
 .../src/views/spaces/GenericSpace.vue         |   9 +-
 .../src/views/spaces/Projects.vue             |  81 ++-----------
 4 files changed, 124 insertions(+), 81 deletions(-)

diff --git a/packages/design-system/src/components/OcTile/OcTile.vue b/packages/design-system/src/components/OcTile/OcTile.vue
index 8b1128efb64..d50e7e5e539 100644
--- a/packages/design-system/src/components/OcTile/OcTile.vue
+++ b/packages/design-system/src/components/OcTile/OcTile.vue
@@ -37,6 +37,8 @@
         <div class="oc-flex oc-flex-middle">
           <!-- Slot for individual actions -->
           <slot name="actions" :item="resource" />
+          <!-- Slot for contextmenu -->
+          <slot name="contextMenu" :item="resource" />
         </div>
       </div>
       <p
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 9b34f0d22ad..202bd4cb5f0 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -3,17 +3,53 @@
     <oc-list class="oc-tiles oc-flex">
       <li v-for="(resource, index) in data" :key="resource.id" class="oc-tiles-item">
         <oc-tile
-          :ref="`row-${index}`"
+          :ref="
+            (el) => {
+              tileRefs.tiles[index] = el
+            }
+          "
           :resource="resource"
           :resource-route="getRoute(resource)"
-          @contextmenu="$emit('contextmenuClicked', $refs[`row-${index}`][0], $event, resource)"
+          @contextmenu="showContextMenu($event, index, tileRefs.tiles[index])"
           @click="emitTileClick(resource)"
         >
-          <template #imageField="{ item }">
-            <slot name="image" :item="item" />
+          <template #imageField>
+            <slot name="image" :resource="resource" />
           </template>
-          <template #actions="{ item }">
-            <slot name="actions" :item="item" />
+          <template #actions>
+            <slot name="actions" :resource="resource" />
+          </template>
+          <template #contextMenu>
+            <div>
+              <oc-button
+                :id="`space-context-btn-${resource.getDomSelector()}`"
+                :ref="
+                  (el) => {
+                    tileRefs.dropBtns[index] = el
+                  }
+                "
+                v-oc-tooltip="contextMenuLabel"
+                :aria-label="contextMenuLabel"
+                appearance="raw"
+                @click="resetDropPosition($event, index, tileRefs.tiles[index])"
+              >
+                <oc-icon name="more-2" />
+              </oc-button>
+              <oc-drop
+                :ref="
+                  (el) => {
+                    tileRefs.dropEls[index] = el
+                  }
+                "
+                :drop-id="`space-context-drop-${resource.getDomSelector()}`"
+                close-on-click
+                mode="manual"
+                :options="{ delayHide: 0 }"
+                padding-size="small"
+              >
+                <slot name="contextMenuActions" :resource="resource" />
+              </oc-drop>
+            </div>
           </template>
         </oc-tile>
       </li>
@@ -24,7 +60,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, computed } from 'vue'
+import { onBeforeUpdate, defineComponent, PropType, computed, ref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { createLocationSpaces } from 'web-app-files/src/router'
 import { Resource, SpaceResource } from 'web-client'
@@ -48,11 +84,17 @@ export default defineComponent({
       default: () => []
     }
   },
-  emits: ['contextmenuClicked', 'fileClick'],
+  emits: ['fileClick', 'rowMounted'],
   setup(props, context) {
     const store = useStore()
     const { $gettext } = useGettext()
 
+    const tileRefs = ref({
+      tiles: [],
+      dropBtns: [],
+      dropEls: []
+    })
+
     const spaces = computed(() => {
       return store.getters['runtime/spaces/spaces']
     })
@@ -94,9 +136,62 @@ export default defineComponent({
       }
     }
 
+    const contextMenuLabel = computed(() => {
+      return $gettext('Show context menu')
+    })
+
+    const displayPositionedDropdown = (dropdown, event, reference) => {
+      const contextMenuButtonPos = reference.$el.getBoundingClientRect()
+
+      if (!dropdown || !contextMenuButtonPos) {
+        return
+      }
+
+      dropdown.tippy.setProps({
+        getReferenceClientRect: () => ({
+          width: 0,
+          height: 0,
+          top: event.clientY,
+          bottom: event.clientY,
+          left: event.type === 'contextmenu' ? event.clientX : contextMenuButtonPos.x,
+          right: event.type === 'contextmenu' ? event.clientX : contextMenuButtonPos.x
+        })
+      })
+      dropdown.show()
+    }
+
+    const resetDropPosition = (event, index, reference) => {
+      const drop = tileRefs.value.dropEls[index]
+
+      // Doesn't seem to work properly, second click on three dots doesn't close the menu anymore
+      if (drop === undefined) {
+        return
+      }
+      displayPositionedDropdown(drop, event, reference)
+    }
+
+    const showContextMenu = (event, index, reference) => {
+      event.preventDefault()
+      const drop = tileRefs.value.dropEls[index]
+
+      displayPositionedDropdown(drop, event, reference)
+    }
+
+    onBeforeUpdate(() => {
+      tileRefs.value = {
+        tiles: [],
+        dropBtns: [],
+        dropEls: []
+      }
+    })
+
     return {
+      contextMenuLabel,
+      emitTileClick,
       getRoute,
-      emitTileClick
+      resetDropPosition,
+      showContextMenu,
+      tileRefs
     }
   }
 })
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 5796478f932..f3cbef1b5b2 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -95,14 +95,17 @@
           class="oc-px-m oc-pt-l"
           @fileClick="$_fileActions_triggerDefaultAction"
         >
-          <template #actions="{ item }">
+          <template #actions="{ resource }">
             <quick-actions
-              :class="item.preview"
+              :class="resource.preview"
               class="oc-visible@s"
-              :item="item"
+              :item="resource"
               :actions="app.quickActions"
             />
           </template>
+          <template #contextMenuActions="{ resource }">
+            <context-actions :space="space" :items="[resource]" />
+          </template>
           <template #footer>
             <pagination :pages="paginationPages" :current-page="paginationPage" />
             <list-info
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index 4d30dd8c26a..b53c8aa4b4b 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -25,48 +25,29 @@
           </template>
         </no-content-message>
         <div v-else class="spaces-list oc-px-m oc-mt-l">
-          <resource-tiles :data="spaces" @contextmenu-clicked="showContextMenu">
-            <template #image="{ item }">
+          <resource-tiles :data="spaces">
+            <template #image="{ resource }">
               <img
-                v-if="imageContentObject[item.id]"
+                v-if="imageContentObject[resource.id]"
                 class="space-image tile-image oc-rounded-top"
-                :src="imageContentObject[item.id]['data']"
+                :src="imageContentObject[resource.id]['data']"
                 alt=""
               />
             </template>
-            <template #actions="{ item }">
+            <template #actions="{ resource }">
               <div>
                 <oc-button
                   v-oc-tooltip="showSpaceMemberLabel"
                   :aria-label="showSpaceMemberLabel"
                   appearance="raw"
-                  @click="openSidebarSharePanel(item)"
+                  @click="openSidebarSharePanel(resource)"
                 >
                   <oc-icon name="group" fill-type="line" />
                 </oc-button>
               </div>
-              <div>
-                <oc-button
-                  :id="`space-context-btn-${item.getDomSelector()}`"
-                  :ref="`spaceContextBtn-${item.getDomSelector()}`"
-                  v-oc-tooltip="contextMenuLabel"
-                  :aria-label="contextMenuLabel"
-                  appearance="raw"
-                  @click.stop.prevent="resetDropPosition($event, item)"
-                >
-                  <oc-icon name="more-2" />
-                </oc-button>
-                <oc-drop
-                  :ref="`spaceContextDrop-${item.getDomSelector()}`"
-                  :drop-id="`space-context-drop-${item.getDomSelector()}`"
-                  close-on-click
-                  mode="manual"
-                  :options="{ delayHide: 0 }"
-                  padding-size="small"
-                >
-                  <space-context-actions :space="item" :items="[item]" />
-                </oc-drop>
-              </div>
+            </template>
+            <template #contextMenuActions="{ resource }">
+              <space-context-actions :space="resource" :items="[resource]" />
             </template>
           </resource-tiles>
         </div>
@@ -102,13 +83,13 @@ import { useScrollTo } from 'web-app-files/src/composables/scrollTo'
 
 export default defineComponent({
   components: {
-    ResourceTiles,
-    FilesViewWrapper,
-    SideBar,
     AppBar,
     AppLoadingSpinner,
     CreateSpace,
+    FilesViewWrapper,
     NoContentMessage,
+    ResourceTiles,
+    SideBar,
     SpaceContextActions
   },
   setup() {
@@ -164,9 +145,6 @@ export default defineComponent({
     showSpaceMemberLabel() {
       return this.$gettext('Show members')
     },
-    contextMenuLabel() {
-      return this.$gettext('Show context menu')
-    },
     hasCreatePermission() {
       return this.$permissionManager.hasSpaceManagement()
     }
@@ -223,41 +201,6 @@ export default defineComponent({
   },
   methods: {
     ...mapMutations('Files', ['SET_FILE_SELECTION']),
-
-    resetDropPosition(event, item) {
-      const drop = this.$refs[`spaceContextDrop-${item.getDomSelector()}`]
-
-      if (drop === undefined) {
-        return
-      }
-      this.displayPositionedDropdown(drop, event, item)
-    },
-    showContextMenu(_row, event, item) {
-      event.preventDefault()
-      const drop = this.$refs[`spaceContextDrop-${item.getDomSelector()}`]
-
-      this.displayPositionedDropdown(drop, event, item)
-    },
-    displayPositionedDropdown(dropdown, event, item) {
-      const contextMenuButtonPos =
-        this.$refs[`spaceContextBtn-${item.getDomSelector()}`].$el.getBoundingClientRect()
-
-      if (!dropdown || !contextMenuButtonPos) {
-        return
-      }
-
-      dropdown.tippy.setProps({
-        getReferenceClientRect: () => ({
-          width: 0,
-          height: 0,
-          top: event.clientY,
-          bottom: event.clientY,
-          left: event.type === 'contextmenu' ? event.clientX : contextMenuButtonPos.x,
-          right: event.type === 'contextmenu' ? event.clientX : contextMenuButtonPos.x
-        })
-      })
-      dropdown.show()
-    },
     openSidebarSharePanel(space: SpaceResource) {
       this.SET_FILE_SELECTION([space])
       eventBus.publish(SideBarEventTopics.openWithPanel, 'space-share')

From 4eeb27fd2e15492d1fc7f28032cbcd31cadd8256 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Tue, 10 Jan 2023 08:31:34 +0100
Subject: [PATCH 04/26] Make lazy thumbnails work on ResourceTiles

---
 .../src/components/FilesList/ResourceTable.vue         | 10 ++++++++--
 .../src/components/FilesList/ResourceTiles.vue         |  7 +++++++
 .../web-app-files/src/views/spaces/GenericSpace.vue    |  5 +++--
 packages/web-pkg/src/constants.ts                      |  1 +
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index 211477d70be..a7b660bd3d5 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -187,7 +187,7 @@ import { determineSortFields } from '../../helpers/ui/resourceTable'
 import { basename, dirname } from 'path'
 import { defineComponent, PropType, computed } from 'vue'
 import { useWindowSize } from '@vueuse/core'
-import { EVENT_FILE_DROPPED, EVENT_TROW_MOUNTED } from 'web-pkg/src/constants'
+import { EVENT_FILE_DROPPED, EVENT_TROW_MOUNTED, ImageDimension } from 'web-pkg/src/constants'
 import {
   useCapabilityFilesTags,
   useCapabilityProjectSpacesEnabled,
@@ -413,6 +413,7 @@ export default defineComponent({
   data() {
     return {
       constants: {
+        ImageDimension,
         EVENT_TROW_MOUNTED
       }
     }
@@ -682,7 +683,12 @@ export default defineComponent({
        * @property {object} resource The resource which was mounted as table row
        * @property {object} component The table row component
        */
-      this.$emit(this.constants.EVENT_TROW_MOUNTED, resource, component)
+      this.$emit(
+        this.constants.EVENT_TROW_MOUNTED,
+        resource,
+        component,
+        this.constants.ImageDimension.Thumbnail
+      )
     },
     fileClicked(data) {
       /**
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 202bd4cb5f0..7ef567a5f39 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -10,6 +10,7 @@
           "
           :resource="resource"
           :resource-route="getRoute(resource)"
+          @hook:mounted="$emit('rowMounted', resource, tileRefs.tiles[index], ImageDimension.Tile)"
           @contextmenu="showContextMenu($event, index, tileRefs.tiles[index])"
           @click="emitTileClick(resource)"
         >
@@ -72,6 +73,7 @@ import { useStore } from 'web-pkg/src/composables'
 // Be done at a later point in time?
 import { EVENT_TROW_CONTEXTMENU } from 'web-pkg/src/constants'
 import { useResourceRouteResolver } from '../../composables/filesList'
+import { ImageDimension } from 'web-app-files/src/constants'
 
 export default defineComponent({
   name: 'ResourceTiles',
@@ -193,6 +195,11 @@ export default defineComponent({
       showContextMenu,
       tileRefs
     }
+  },
+  data() {
+    return {
+      ImageDimension
+    }
   }
 })
 </script>
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index f3cbef1b5b2..162e139e97e 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -93,6 +93,7 @@
           v-else
           :data="paginatedResources"
           class="oc-px-m oc-pt-l"
+          @rowMounted="rowMounted"
           @fileClick="$_fileActions_triggerDefaultAction"
         >
           <template #actions="{ resource }">
@@ -451,7 +452,7 @@ export default defineComponent({
       }
     },
 
-    rowMounted(resource, component) {
+    rowMounted(resource, component, dimensions) {
       if (!this.displayThumbnails) {
         return
       }
@@ -461,7 +462,7 @@ export default defineComponent({
         this.loadPreview({
           resource,
           isPublic: false,
-          dimensions: ImageDimension.Thumbnail,
+          dimensions,
           type: ImageType.Thumbnail
         })
       }, 250)
diff --git a/packages/web-pkg/src/constants.ts b/packages/web-pkg/src/constants.ts
index 6c9864974c2..1fd2b86e2db 100644
--- a/packages/web-pkg/src/constants.ts
+++ b/packages/web-pkg/src/constants.ts
@@ -4,6 +4,7 @@ export const EVENT_TROW_CONTEXTMENU = 'contextmenuClicked'
 
 export abstract class ImageDimension {
   static readonly Thumbnail: [number, number] = [36, 36]
+  static readonly Tile: [number, number] = [256, 256]
   static readonly Preview: [number, number] = [1200, 1200]
   static readonly Avatar: number = 64
 }

From ac5a09f3b810547e841fe8ac0d65c10159811393 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Tue, 10 Jan 2023 16:04:51 +0100
Subject: [PATCH 05/26] Remove code leftover && make OcTile image top corners
 rounded

---
 packages/design-system/src/components/OcTile/OcTile.vue  | 6 +++++-
 packages/web-app-files/src/views/spaces/GenericSpace.vue | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/OcTile/OcTile.vue b/packages/design-system/src/components/OcTile/OcTile.vue
index d50e7e5e539..58af4867c2d 100644
--- a/packages/design-system/src/components/OcTile/OcTile.vue
+++ b/packages/design-system/src/components/OcTile/OcTile.vue
@@ -20,7 +20,11 @@
       </oc-tag>
       <!-- Slot for resource image, renders resource type icon by default -->
       <slot name="imageField" :item="resource">
-        <oc-img v-if="resource.thumbnail" class="tile-preview" :src="resource.thumbnail" />
+        <oc-img
+          v-if="resource.thumbnail"
+          class="tile-preview oc-rounded-top"
+          :src="resource.thumbnail"
+        />
         <oc-resource-icon
           v-else
           :resource="resource"
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 162e139e97e..7b2d9a5a8f6 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -365,6 +365,7 @@ export default defineComponent({
     return {
       ...resourcesViewDefaults,
       resourceTargetRouteCallback,
+      ...useResourcesViewDefaults<Resource, any, any[]>(),
       breadcrumbs,
       hasSpaceHeader,
       performLoaderTask

From d977e4bcc0a722cfa4e8c99b750ade0f46cc5d0b Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Thu, 12 Jan 2023 20:00:54 +0100
Subject: [PATCH 06/26] Rebase and use 'displayPositionedDropdown' in
 ResourceTiles

---
 .../components/FilesList/ResourceTiles.vue    |  38 ++----
 .../src/views/spaces/GenericSpace.vue         | 117 +++++++++---------
 2 files changed, 69 insertions(+), 86 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 7ef567a5f39..134aa588f11 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -32,7 +32,7 @@
                 v-oc-tooltip="contextMenuLabel"
                 :aria-label="contextMenuLabel"
                 appearance="raw"
-                @click="resetDropPosition($event, index, tileRefs.tiles[index])"
+                @click="resetDropPosition($event, index, tileRefs.dropBtns[index])"
               >
                 <oc-icon name="more-2" />
               </oc-button>
@@ -63,17 +63,17 @@
 <script lang="ts">
 import { onBeforeUpdate, defineComponent, PropType, computed, ref } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import { createLocationSpaces } from 'web-app-files/src/router'
 import { Resource, SpaceResource } from 'web-client'
-import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import { useStore } from 'web-pkg/src/composables'
+import { ImageDimension } from 'web-pkg/src/constants'
+import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
+import { displayPositionedDropdown } from 'web-pkg/src/helpers/contextMenuDropdown'
+import { createLocationSpaces } from 'web-app-files/src/router'
 
 // Constants should match what is being used in OcTable/ResourceTable
 // Alignment regarding naming would be an API-breaking change and can
 // Be done at a later point in time?
-import { EVENT_TROW_CONTEXTMENU } from 'web-pkg/src/constants'
 import { useResourceRouteResolver } from '../../composables/filesList'
-import { ImageDimension } from 'web-app-files/src/constants'
 
 export default defineComponent({
   name: 'ResourceTiles',
@@ -142,30 +142,9 @@ export default defineComponent({
       return $gettext('Show context menu')
     })
 
-    const displayPositionedDropdown = (dropdown, event, reference) => {
-      const contextMenuButtonPos = reference.$el.getBoundingClientRect()
-
-      if (!dropdown || !contextMenuButtonPos) {
-        return
-      }
-
-      dropdown.tippy.setProps({
-        getReferenceClientRect: () => ({
-          width: 0,
-          height: 0,
-          top: event.clientY,
-          bottom: event.clientY,
-          left: event.type === 'contextmenu' ? event.clientX : contextMenuButtonPos.x,
-          right: event.type === 'contextmenu' ? event.clientX : contextMenuButtonPos.x
-        })
-      })
-      dropdown.show()
-    }
-
     const resetDropPosition = (event, index, reference) => {
-      const drop = tileRefs.value.dropEls[index]
+      const drop = tileRefs.value.dropEls[index].tippy
 
-      // Doesn't seem to work properly, second click on three dots doesn't close the menu anymore
       if (drop === undefined) {
         return
       }
@@ -176,7 +155,10 @@ export default defineComponent({
       event.preventDefault()
       const drop = tileRefs.value.dropEls[index]
 
-      displayPositionedDropdown(drop, event, reference)
+      if (drop === undefined) {
+        return
+      }
+      displayPositionedDropdown(drop.tippy, event, reference)
     }
 
     onBeforeUpdate(() => {
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 7b2d9a5a8f6..389d9739c11 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -44,8 +44,38 @@
             </span>
           </template>
         </no-content-message>
+        <resource-tiles
+          v-else-if="viewMode === ViewModeConstants.tilesView.name"
+          :data="paginatedResources"
+          class="oc-px-m oc-pt-l"
+          @rowMounted="rowMounted"
+          @fileClick="$_fileActions_triggerDefaultAction"
+        >
+          <!-- Share quickactions targets current folder, not resource... -->
+          <!-- <template #actions="{ resource }">
+            <quick-actions
+              :class="resource.preview"
+              class="oc-visible@s"
+              :item="resource"
+              :actions="app.quickActions"
+            />
+          </template> -->
+          <template #contextMenuActions="{ resource }">
+            <context-actions :space="space" :items="[resource]" />
+          </template>
+          <template #footer>
+            <pagination :pages="paginationPages" :current-page="paginationPage" />
+            <list-info
+              v-if="paginatedResources.length > 0"
+              class="oc-width-1-1 oc-my-s"
+              :files="totalFilesCount.files"
+              :folders="totalFilesCount.folders"
+              :size="totalFilesSize"
+            />
+          </template>
+        </resource-tiles>
         <resource-table
-          v-else-if="viewMode !== 'resource-tiles'"
+          v-else
           id="files-space-table"
           v-model:selectedIds="selectedResourcesIds"
           class="files-table"
@@ -89,35 +119,7 @@
             />
           </template>
         </resource-table>
-        <resource-tiles
-          v-else
-          :data="paginatedResources"
-          class="oc-px-m oc-pt-l"
-          @rowMounted="rowMounted"
-          @fileClick="$_fileActions_triggerDefaultAction"
-        >
-          <template #actions="{ resource }">
-            <quick-actions
-              :class="resource.preview"
-              class="oc-visible@s"
-              :item="resource"
-              :actions="app.quickActions"
-            />
-          </template>
-          <template #contextMenuActions="{ resource }">
-            <context-actions :space="space" :items="[resource]" />
-          </template>
-          <template #footer>
-            <pagination :pages="paginationPages" :current-page="paginationPage" />
-            <list-info
-              v-if="paginatedResources.length > 0"
-              class="oc-width-1-1 oc-my-s"
-              :files="totalFilesCount.files"
-              :folders="totalFilesCount.folders"
-              :size="totalFilesSize"
-            />
-          </template>
-        </resource-tiles>
+
       </template>
     </files-view-wrapper>
     <side-bar :open="sideBarOpen" :active-panel="sideBarActivePanel" :space="space" />
@@ -125,8 +127,28 @@
 </template>
 
 <script lang="ts">
-import { mapGetters, mapState, mapActions, mapMutations, useStore } from 'vuex'
 import { debounce } from 'lodash-es'
+import omit from 'lodash-es/omit'
+import { basename } from 'path'
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  PropType,
+  onBeforeUnmount,
+  onMounted,
+  unref
+} from 'vue'
+import { mapGetters, mapState, mapActions, mapMutations, useStore } from 'vuex'
+import { useGettext } from 'vue3-gettext'
+import { Resource } from 'web-client'
+import {
+  isPersonalSpaceResource,
+  isProjectSpaceResource,
+  isPublicSpaceResource,
+  isShareSpaceResource,
+  SpaceResource
+} from 'web-client/src/helpers'
 
 import MixinAccessibleBreadcrumb from '../../mixins/accessibleBreadcrumb'
 import MixinFileActions from '../../mixins/fileActions'
@@ -147,39 +169,17 @@ import SpaceHeader from '../../components/Spaces/SpaceHeader.vue'
 import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 
+import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
+import { useDocumentTitle } from 'web-pkg/src/composables/appDefaults/useDocumentTitle'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension, ImageType } from 'web-pkg/src/constants'
+import { ImageType } from 'web-pkg/src/constants'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { BreadcrumbItem, breadcrumbsFromPath, concatBreadcrumbs } from '../../helpers/breadcrumbs'
 import { createLocationPublic, createLocationSpaces } from '../../router'
-import { useResourcesViewDefaults } from '../../composables'
-import {
-  computed,
-  defineComponent,
-  getCurrentInstance,
-  PropType,
-  onBeforeUnmount,
-  onMounted,
-  unref
-} from 'vue'
+import { useResourcesViewDefaults, ViewModeConstants } from '../../composables'
 import { ResourceTransfer, TransferType } from '../../helpers/resource'
-import { Resource } from 'web-client'
 import { useRoute } from 'web-pkg/src/composables'
-import { Location } from 'vue-router'
-import {
-  isPersonalSpaceResource,
-  isProjectSpaceResource,
-  isPublicSpaceResource,
-  isShareSpaceResource,
-  SpaceResource
-} from 'web-client/src/helpers'
-import { CreateTargetRouteOptions } from '../../helpers/folderLink'
 import { FolderLoaderOptions } from '../../services/folder'
-import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
-import omit from 'lodash-es/omit'
-import { useDocumentTitle } from 'web-pkg/src/composables/appDefaults/useDocumentTitle'
-import { basename } from 'path'
-import { useGettext } from 'vue3-gettext'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -368,7 +368,8 @@ export default defineComponent({
       ...useResourcesViewDefaults<Resource, any, any[]>(),
       breadcrumbs,
       hasSpaceHeader,
-      performLoaderTask
+      performLoaderTask,
+      ViewModeConstants
     }
   },
 

From 0c93dd669634f737d8bab76d700bb5de4c084b08 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Thu, 12 Jan 2023 20:01:17 +0100
Subject: [PATCH 07/26] Add initial box-shadow to OcTile

WIP
---
 packages/design-system/src/components/OcTile/OcTile.vue  | 2 +-
 packages/web-app-files/src/views/spaces/GenericSpace.vue | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/OcTile/OcTile.vue b/packages/design-system/src/components/OcTile/OcTile.vue
index 58af4867c2d..48584e77fa6 100644
--- a/packages/design-system/src/components/OcTile/OcTile.vue
+++ b/packages/design-system/src/components/OcTile/OcTile.vue
@@ -95,8 +95,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .oc-tile-card {
-  box-shadow: none !important;
   background-color: var(--oc-color-background-highlight) !important;
+  box-shadow: 3px 0 10px rgb(0 0 0 / 15%);
   height: 100%;
 
   &.state-trashed {
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 389d9739c11..2763ecfcd51 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -119,7 +119,6 @@
             />
           </template>
         </resource-table>
-
       </template>
     </files-view-wrapper>
     <side-bar :open="sideBarOpen" :active-panel="sideBarActivePanel" :space="space" />

From 924d91e7f1e4c4d9ba166175c283c8ea502721d4 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Mon, 16 Jan 2023 21:34:00 +0100
Subject: [PATCH 08/26] Make icon/thumbnail optional in OcResource

---
 .../enhancement-oc-resource-optional-icon         |  5 +++++
 .../src/components/OcResource/OcResource.spec.ts  | 15 +++++++++++++++
 .../src/components/OcResource/OcResource.vue      | 12 ++++++++++--
 3 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 packages/design-system/changelog/unreleased/enhancement-oc-resource-optional-icon

diff --git a/packages/design-system/changelog/unreleased/enhancement-oc-resource-optional-icon b/packages/design-system/changelog/unreleased/enhancement-oc-resource-optional-icon
new file mode 100644
index 00000000000..cd9b3e8d2ce
--- /dev/null
+++ b/packages/design-system/changelog/unreleased/enhancement-oc-resource-optional-icon
@@ -0,0 +1,5 @@
+Enhancement: Add option to hide icon/thumbnail OcResource
+
+We added a property to the OcResource component so it can be displayed without icon/thumbnail.
+
+https://github.com/owncloud/web/pull/7991
diff --git a/packages/design-system/src/components/OcResource/OcResource.spec.ts b/packages/design-system/src/components/OcResource/OcResource.spec.ts
index 8c85981b5d8..bfe3225033e 100644
--- a/packages/design-system/src/components/OcResource/OcResource.spec.ts
+++ b/packages/design-system/src/components/OcResource/OcResource.spec.ts
@@ -128,4 +128,19 @@ describe('OcResource', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
   })
+
+  it('can be used without icon/thumbnail', () => {
+    const wrapper = mount(Resource, {
+      props: {
+        resource: fileResourceWithoutParentFoldername,
+        isIconDisplayed: false,
+        parentFolderNameDefault: 'Example parent folder name'
+      },
+      global: {
+        stubs
+      }
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
 })
diff --git a/packages/design-system/src/components/OcResource/OcResource.vue b/packages/design-system/src/components/OcResource/OcResource.vue
index 69e52772eb7..39c37783c91 100644
--- a/packages/design-system/src/components/OcResource/OcResource.vue
+++ b/packages/design-system/src/components/OcResource/OcResource.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="oc-resource oc-text-overflow">
     <oc-resource-link
+      v-if="isIconDisplayed"
       :resource="resource"
       :is-resource-clickable="isResourceClickable"
       :folder-link="folderLink"
@@ -16,7 +17,7 @@
       />
       <oc-resource-icon v-else :resource="resource" />
     </oc-resource-link>
-    <div class="oc-resource-details oc-text-overflow">
+    <div class="oc-resource-details oc-text-overflow" :class="'oc-pl-s' ? isIconDisplayed : ''">
       <oc-resource-link
         v-slot="{ opensInNewWindowDescriptionId }"
         :resource="resource"
@@ -139,6 +140,14 @@ export default defineComponent({
       required: false,
       default: true
     },
+    /**
+     * Asserts whether the resource thumbnail should be displayed
+     */
+    isIconDisplayed: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     /**
      * Asserts whether clicking on the resource name triggers any action
      */
@@ -206,7 +215,6 @@ export default defineComponent({
 
   &-details {
     display: block;
-    padding-left: var(--oc-space-small);
 
     a {
       text-decoration: none;

From 8d604b85b35fc98580787a9e19621e6b13bac7a0 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Mon, 16 Jan 2023 21:34:31 +0100
Subject: [PATCH 09/26] Move tilesView to end of viewMode switcher options

---
 packages/web-app-files/src/components/AppBar/AppBar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 05ce8ce1986..7f49c4d8b96 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -143,9 +143,9 @@ export default defineComponent({
         return []
       }
       return [
-        ViewModeConstants.tilesView,
         ViewModeConstants.condensedTable,
-        ViewModeConstants.default
+        ViewModeConstants.default,
+        ViewModeConstants.tilesView
       ]
     }
   },

From 93b0df84a45c6ffbef00f4ebfeb82c39f764f13f Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Mon, 16 Jan 2023 21:35:07 +0100
Subject: [PATCH 10/26] Make ImageDimension constant smaller, use it in
 Spaces-Projects view

---
 packages/web-app-files/src/views/spaces/Projects.vue | 2 +-
 packages/web-pkg/src/constants.ts                    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index b53c8aa4b4b..9db59d4566f 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -179,7 +179,7 @@ export default defineComponent({
           loadPreview({
             resource,
             isPublic: false,
-            dimensions: ImageDimension.Preview,
+            dimensions: ImageDimension.Tile,
             server: configurationManager.serverUrl,
             userId: this.user.id,
             token: this.accessToken
diff --git a/packages/web-pkg/src/constants.ts b/packages/web-pkg/src/constants.ts
index 1fd2b86e2db..25b15f293a9 100644
--- a/packages/web-pkg/src/constants.ts
+++ b/packages/web-pkg/src/constants.ts
@@ -4,7 +4,7 @@ export const EVENT_TROW_CONTEXTMENU = 'contextmenuClicked'
 
 export abstract class ImageDimension {
   static readonly Thumbnail: [number, number] = [36, 36]
-  static readonly Tile: [number, number] = [256, 256]
+  static readonly Tile: [number, number] = [180, 180]
   static readonly Preview: [number, number] = [1200, 1200]
   static readonly Avatar: number = 64
 }

From b603e0d54ee9efbc43b5180d7920d88964044299 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Mon, 16 Jan 2023 21:37:23 +0100
Subject: [PATCH 11/26] Hide icon/thumbnail in OcTile, replace box-shadow with
 outline, more styling updates

---
 .../src/components/OcTile/OcTile.vue           | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/design-system/src/components/OcTile/OcTile.vue b/packages/design-system/src/components/OcTile/OcTile.vue
index 48584e77fa6..169eb5cff1d 100644
--- a/packages/design-system/src/components/OcTile/OcTile.vue
+++ b/packages/design-system/src/components/OcTile/OcTile.vue
@@ -29,14 +29,19 @@
           v-else
           :resource="resource"
           size="xxlarge"
-          class="tile-default-image oc-p-m"
+          class="tile-default-image oc-pt-s"
         />
       </slot>
     </oc-resource-link>
     <div class="oc-card-body oc-p-s">
       <div class="oc-flex oc-flex-between oc-flex-middle">
         <div class="oc-flex oc-flex-middle oc-text-truncate resource-name-wrapper">
-          <oc-resource :resource="resource" :folder-link="resourceRoute" @click="$emit('click')" />
+          <oc-resource
+            :resource="resource"
+            :is-icon-displayed="false"
+            :folder-link="resourceRoute"
+            @click="$emit('click')"
+          />
         </div>
         <div class="oc-flex oc-flex-middle">
           <!-- Slot for individual actions -->
@@ -96,8 +101,9 @@ export default defineComponent({
 <style lang="scss" scoped>
 .oc-tile-card {
   background-color: var(--oc-color-background-highlight) !important;
-  box-shadow: 3px 0 10px rgb(0 0 0 / 15%);
+  box-shadow: none !important;
   height: 100%;
+  outline: 1px solid var(--oc-color-border);
 
   &.state-trashed {
     cursor: pointer;
@@ -123,16 +129,16 @@ export default defineComponent({
     }
 
     .tile-preview {
-      min-width: 252px;
-      height: auto;
       aspect-ratio: 16/9;
+      height: auto;
       object-fit: cover;
+      width: 100%;
     }
   }
 
   .resource-name-wrapper {
     color: var(--oc-color-text-default);
-    max-width: 60%;
+    max-width: 70%;
     overflow: hidden;
   }
 }

From 80bec7ad076c0adcbb39e1c03c67860c631e223b Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Mon, 16 Jan 2023 21:52:31 +0100
Subject: [PATCH 12/26] Add more related issues to tiles changelog item

---
 changelog/unreleased/enhancement-resources-tiles-view | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/changelog/unreleased/enhancement-resources-tiles-view b/changelog/unreleased/enhancement-resources-tiles-view
index 24eab745123..ec7fdedd61b 100644
--- a/changelog/unreleased/enhancement-resources-tiles-view
+++ b/changelog/unreleased/enhancement-resources-tiles-view
@@ -5,3 +5,5 @@ The change gets saved to the route and persisted across resource navigation.
 
 https://github.com/owncloud/web/pull/7991
 https://github.com/owncloud/web/issues/6378
+https://github.com/owncloud/web/issues/6379
+https://github.com/owncloud/web/issues/6380

From 1aa2b64bf9f800b55014fa119dd4c71065ac02e0 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Mon, 16 Jan 2023 22:05:36 +0100
Subject: [PATCH 13/26] Make tiles on non-projects views smaller by default

---
 .../components/FilesList/ResourceTiles.vue    | 25 +++++++++++++++----
 .../src/views/spaces/GenericSpace.vue         |  1 +
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 134aa588f11..f42ec99779c 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -1,7 +1,12 @@
 <template>
   <div>
     <oc-list class="oc-tiles oc-flex">
-      <li v-for="(resource, index) in data" :key="resource.id" class="oc-tiles-item">
+      <li
+        v-for="(resource, index) in data"
+        :key="resource.id"
+        class="oc-tiles-item"
+        :class="tileWidth === 'small' ? 'small-tiles' : ''"
+      >
         <oc-tile
           :ref="
             (el) => {
@@ -84,6 +89,10 @@ export default defineComponent({
     data: {
       type: Array as PropType<Resource[]>,
       default: () => []
+    },
+    tileWidth: {
+      type: String,
+      default: ''
     }
   },
   emits: ['fileClick', 'rowMounted'],
@@ -188,12 +197,18 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .oc-tiles {
-  flex-wrap: wrap;
-  gap: 15px;
-  justify-content: flex-start;
+  column-gap: 8px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 160px);
+  justify-content: space-between;
+  row-gap: 32px;
 
   .oc-tiles-item {
-    width: 252px;
+    width: 18rem;
+
+    &.small-tiles {
+      width: 12rem;
+    }
 
     @media (max-width: $oc-breakpoint-xsmall-max) {
       width: 100%;
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 2763ecfcd51..68ef6309556 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -48,6 +48,7 @@
           v-else-if="viewMode === ViewModeConstants.tilesView.name"
           :data="paginatedResources"
           class="oc-px-m oc-pt-l"
+          tile-width="small"
           @rowMounted="rowMounted"
           @fileClick="$_fileActions_triggerDefaultAction"
         >

From 851635e0e703e354a9045be672575f1df3f7300e Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Mon, 16 Jan 2023 23:36:11 +0100
Subject: [PATCH 14/26] Fix unit tests

---
 .../__snapshots__/OcResource.spec.ts.snap     | 21 ++++++++++
 .../OcTile/__snapshots__/OcTile.spec.ts.snap  |  6 ++-
 .../components/FilesList/ResourceTiles.vue    |  1 -
 .../AppBar/__snapshots__/AppBar.spec.ts.snap  |  2 +-
 .../FilesList/ResourceTiles.spec.ts           | 10 ++---
 .../__snapshots__/ResourceTiles.spec.ts.snap  |  6 +--
 .../tests/unit/views/spaces/Projects.spec.ts  | 38 ++++++++++++-------
 .../__snapshots__/Projects.spec.ts.snap       |  4 +-
 8 files changed, 60 insertions(+), 28 deletions(-)

diff --git a/packages/design-system/src/components/OcResource/__snapshots__/OcResource.spec.ts.snap b/packages/design-system/src/components/OcResource/__snapshots__/OcResource.spec.ts.snap
index 0c37995617b..433af8431db 100644
--- a/packages/design-system/src/components/OcResource/__snapshots__/OcResource.spec.ts.snap
+++ b/packages/design-system/src/components/OcResource/__snapshots__/OcResource.spec.ts.snap
@@ -1,5 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`OcResource can be used without icon/thumbnail 1`] = `
+<div class="oc-resource oc-text-overflow">
+  <!--v-if-->
+  <div class="oc-resource-details oc-text-overflow">
+    <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-passive oc-button-passive-raw oc-text-overflow" draggable="false" type="button">
+      <!-- @slot Content of the button -->
+      <!--v-if-->
+      <span class="oc-resource-name" data-test-resource-name="example.pdf" data-test-resource-path="example.pdf" data-test-resource-type="file" title="example.pdf">
+        <span class="oc-text-truncate">
+          <span class="oc-resource-basename">example</span>
+        </span>
+        <span class="oc-resource-extension">.pdf</span>
+      </span>
+    </button>
+    <div class="oc-resource-indicators">
+      <!--v-if-->
+    </div>
+  </div>
+</div>
+`;
+
 exports[`OcResource displays parent folder name default if calculated name is empty 1`] = `
 <div class="oc-resource oc-text-overflow">
   <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-passive oc-button-passive-raw" draggable="false" type="button">
diff --git a/packages/design-system/src/components/OcTile/__snapshots__/OcTile.spec.ts.snap b/packages/design-system/src/components/OcTile/__snapshots__/OcTile.spec.ts.snap
index 1ae481ae336..d5541bc14b9 100644
--- a/packages/design-system/src/components/OcTile/__snapshots__/OcTile.spec.ts.snap
+++ b/packages/design-system/src/components/OcTile/__snapshots__/OcTile.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`OcTile component renders default space correctly 1`] = `
   <oc-resource-link-stub class="oc-card-media-top oc-border-b oc-flex oc-flex-center oc-flex-middle" isresourceclickable="true" resource="[object Object]">
     <!--v-if-->
     <!-- Slot for resource image, renders resource type icon by default -->
-    <oc-resource-icon-stub class="tile-default-image oc-p-m" resource="[object Object]" size="xxlarge"></oc-resource-icon-stub>
+    <oc-resource-icon-stub class="tile-default-image oc-pt-s" resource="[object Object]" size="xxlarge"></oc-resource-icon-stub>
   </oc-resource-link-stub>
   <div class="oc-card-body oc-p-s">
     <div class="oc-flex oc-flex-between oc-flex-middle">
@@ -14,6 +14,7 @@ exports[`OcTile component renders default space correctly 1`] = `
       </div>
       <div class="oc-flex oc-flex-middle">
         <!-- Slot for individual actions -->
+        <!-- Slot for contextmenu -->
       </div>
     </div>
     <!--v-if-->
@@ -27,7 +28,7 @@ exports[`OcTile component renders disabled space correctly 1`] = `
     <oc-tag-stub class="resource-disabled-indicator oc-position-absolute" rounded="false" size="medium" type="span">
       <span>Disabled</span>
     </oc-tag-stub> <!-- Slot for resource image, renders resource type icon by default -->
-    <oc-resource-icon-stub class="tile-default-image oc-p-m" resource="[object Object]" size="xxlarge"></oc-resource-icon-stub>
+    <oc-resource-icon-stub class="tile-default-image oc-pt-s" resource="[object Object]" size="xxlarge"></oc-resource-icon-stub>
   </oc-resource-link-stub>
   <div class="oc-card-body oc-p-s">
     <div class="oc-flex oc-flex-between oc-flex-middle">
@@ -36,6 +37,7 @@ exports[`OcTile component renders disabled space correctly 1`] = `
       </div>
       <div class="oc-flex oc-flex-middle">
         <!-- Slot for individual actions -->
+        <!-- Slot for contextmenu -->
       </div>
     </div>
     <!--v-if-->
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index f42ec99779c..02ade53168f 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -135,7 +135,6 @@ export default defineComponent({
     }
 
     const emitTileClick = (resource) => {
-      // Needs to handle file actions and potentially disabled folders also
       if (resource.disabled && resource.type === 'space') {
         store.dispatch('showMessage', {
           title: $gettext('Disabled spaces cannot be entered'),
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
index 48ec8d16464..b89aebb5109 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
@@ -274,7 +274,7 @@ exports[`AppBar component renders viewoptions and sidebartoggle passes viewModes
       <!--v-if-->
       <!--v-if-->
       <div class="oc-flex">
-        <view-options-stub viewmodes="[object Object],[object Object]"></view-options-stub>
+        <view-options-stub viewmodes="[object Object],[object Object],[object Object]"></view-options-stub>
         <sidebar-toggle-stub sidebaropen="false"></sidebar-toggle-stub>
       </div>
     </div>
diff --git a/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts b/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts
index 97b8d2237ea..4543e19b275 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts
+++ b/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts
@@ -18,21 +18,21 @@ const spacesResources = [
   }
 ]
 
-describe('OcTileGrid component', () => {
+describe('ResourceTiles component', () => {
   it('renders an array of spaces correctly', () => {
     const wrapper = getWrapper({ data: spacesResources })
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('renders a footer slot', () => {
-    const wrapper = getWrapper({}, { footer: 'Hello, OcTileGrid footer!' })
+    const wrapper = getWrapper({}, { footer: 'Hello, ResourceTiles footer!' })
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('emits context menu event upon right click on tile', async () => {
+  it('emits fileClick event upon click on tile', async () => {
     const wrapper = getWrapper({ data: spacesResources })
-    await wrapper.find('oc-tile').trigger('contextmenu')
-    expect(wrapper.emitted().contextmenuClicked.length).toBe(1)
+    await wrapper.find('oc-tile').trigger('click')
+    expect(wrapper.emitted().click).toBeTruthy()
   })
 
   function getWrapper(props = {}, slots = {}) {
diff --git a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
index a8aa23bb736..d5fdae990fd 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`OcTileGrid component renders a footer slot 1`] = `
+exports[`ResourceTiles component renders a footer slot 1`] = `
 <div>
-  <oc-list class="oc-tiles oc-flex"></oc-list> <!-- @slot Footer of the tiles list --> Hello, OcTileGrid footer!
+  <oc-list class="oc-tiles oc-flex"></oc-list> <!-- @slot Footer of the tiles list --> Hello, ResourceTiles footer!
 </div>
 `;
 
-exports[`OcTileGrid component renders an array of spaces correctly 1`] = `
+exports[`ResourceTiles component renders an array of spaces correctly 1`] = `
 <div>
   <oc-list class="oc-tiles oc-flex">
     <li class="oc-tiles-item">
diff --git a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
index 27050f28030..a1947c5e7b0 100644
--- a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
+++ b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
@@ -11,6 +11,29 @@ import {
   RouteLocation
 } from 'web-test-helpers'
 
+const spacesResources = [
+  {
+    id: '1',
+    name: 'Some space',
+    driveType: 'project',
+    description: 'desc',
+    path: '',
+    type: 'space',
+    isFolder: true,
+    getDriveAliasAndItem: () => '1'
+  },
+  {
+    id: '2',
+    name: 'Some other space',
+    driveType: 'project',
+    description: 'desc',
+    path: '',
+    type: 'space',
+    isFolder: true,
+    getDriveAliasAndItem: () => '2'
+  }
+]
+
 describe('Projects view', () => {
   it('appBar always present', () => {
     const { wrapper } = getMountedWrapper()
@@ -32,20 +55,7 @@ describe('Projects view', () => {
       expect(wrapper.find('.no-content-message').exists()).toBeTruthy()
     })
     it('lists all available project spaces', async () => {
-      const spaces = [
-        mockDeep<SpaceResource>({
-          id: '1',
-          name: 'Some space',
-          driveType: 'project',
-          description: 'desc'
-        }),
-        mockDeep<SpaceResource>({
-          id: '2',
-          name: 'Some other space',
-          driveType: 'project',
-          description: 'desc'
-        })
-      ]
+      const spaces = spacesResources
       const { wrapper } = getMountedWrapper({ spaces })
       await wrapper.vm.loadResourcesTask.last
       // "space" is undefined for "space-context-actions", seems to be a bug because it's definitely not
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 2aac4162d09..7a29a8d9648 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
@@ -9,10 +9,10 @@ exports[`Projects view different files view states lists all available project s
         <div>
           <ul class="oc-list oc-my-rm oc-mx-rm oc-tiles oc-flex">
             <li class="oc-tiles-item">
-              <oc-tile-stub resource="undefined" resource-route="[object Object]"></oc-tile-stub>
+              <oc-tile-stub resource="[object Object]" resource-route="[object Object]"></oc-tile-stub>
             </li>
             <li class="oc-tiles-item">
-              <oc-tile-stub resource="undefined" resource-route="[object Object]"></oc-tile-stub>
+              <oc-tile-stub resource="[object Object]" resource-route="[object Object]"></oc-tile-stub>
             </li>
           </ul> <!-- @slot Footer of the tiles list -->
         </div>

From 114a7ffe6f783fa6301934212e8c08e9aa3f7f35 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Tue, 17 Jan 2023 20:00:12 +0100
Subject: [PATCH 15/26] Rebase & update tile sizing/display

---
 .../src/components/AppBar/ViewOptions.vue     |  7 +++--
 .../components/FilesList/ResourceTiles.vue    | 29 +++++--------------
 .../components/AppBar/ViewOptions.spec.ts     |  4 +--
 .../tests/unit/views/spaces/Projects.spec.ts  |  4 +--
 4 files changed, 17 insertions(+), 27 deletions(-)

diff --git a/packages/web-app-files/src/components/AppBar/ViewOptions.vue b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
index 08c15691b15..6783b36bba5 100644
--- a/packages/web-app-files/src/components/AppBar/ViewOptions.vue
+++ b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
@@ -2,8 +2,7 @@
   <div class="oc-flex oc-flex-middle">
     <div
       v-if="viewModes.length"
-      data-testid="viewmode-switch-buttons"
-      class="oc-button-group oc-visible@s oc-mr-s"
+      class="viewmode-switch-buttons oc-button-group oc-visible@s oc-mr-s"
     >
       <oc-button
         v-for="viewMode in viewModes"
@@ -148,6 +147,10 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.viewmode-switch-buttons {
+  flex-flow: initial;
+}
+
 #files-view-options-btn {
   vertical-align: middle;
   border: 3px solid transparent;
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 02ade53168f..f2f4774f9e7 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -1,12 +1,7 @@
 <template>
   <div>
-    <oc-list class="oc-tiles oc-flex">
-      <li
-        v-for="(resource, index) in data"
-        :key="resource.id"
-        class="oc-tiles-item"
-        :class="tileWidth === 'small' ? 'small-tiles' : ''"
-      >
+    <oc-list class="oc-tiles oc-flex" :class="tileWidth === 'small' ? 'small-tiles' : ''">
+      <li v-for="(resource, index) in data" :key="resource.id" class="oc-tiles-item">
         <oc-tile
           :ref="
             (el) => {
@@ -196,22 +191,14 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .oc-tiles {
-  column-gap: 8px;
+  column-gap: 1rem;
   display: grid;
-  grid-template-columns: repeat(auto-fill, 160px);
-  justify-content: space-between;
-  row-gap: 32px;
+  grid-template-columns: repeat(auto-fill, 14rem);
+  justify-content: flex-start;
+  row-gap: 1rem;
 
-  .oc-tiles-item {
-    width: 18rem;
-
-    &.small-tiles {
-      width: 12rem;
-    }
-
-    @media (max-width: $oc-breakpoint-xsmall-max) {
-      width: 100%;
-    }
+  &.small-tiles {
+    grid-template-columns: repeat(auto-fill, 12rem);
   }
 }
 </style>
diff --git a/packages/web-app-files/tests/unit/components/AppBar/ViewOptions.spec.ts b/packages/web-app-files/tests/unit/components/AppBar/ViewOptions.spec.ts
index b1a60d7d336..2c02598b988 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/ViewOptions.spec.ts
+++ b/packages/web-app-files/tests/unit/components/AppBar/ViewOptions.spec.ts
@@ -43,7 +43,7 @@ describe('ViewOptions component', () => {
   })
   it('initially does not show a viewmode switcher', () => {
     const { wrapper } = getWrapper()
-    expect(wrapper.find('[data-testid="viewmode-switch-buttons"]').exists()).toBeFalsy()
+    expect(wrapper.find('.viewmode-switch-buttons').exists()).toBeFalsy()
   })
   it('shows a viewmode switcher if more than one viewModes are passed', () => {
     const { wrapper } = getWrapper(
@@ -52,7 +52,7 @@ describe('ViewOptions component', () => {
         viewModes: [ViewModeConstants.condensedTable, ViewModeConstants.default]
       }
     )
-    const viewModeSwitchButtons = wrapper.find('[data-testid="viewmode-switch-buttons"]')
+    const viewModeSwitchButtons = wrapper.find('.viewmode-switch-buttons')
     expect(viewModeSwitchButtons.html()).toMatchSnapshot()
   })
 })
diff --git a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
index a1947c5e7b0..986cfd6c505 100644
--- a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
+++ b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
@@ -1,6 +1,6 @@
 import Projects from '../../../../src/views/spaces/Projects.vue'
-import { mock, mockDeep } from 'jest-mock-extended'
-import { SpaceResource } from 'web-client/src/helpers'
+import { mock } from 'jest-mock-extended'
+
 import {
   createStore,
   defaultPlugins,

From 3d04cea664b4dae2a763c2ab9ee842742503d801 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Wed, 18 Jan 2023 23:16:51 +0100
Subject: [PATCH 16/26] Rebase, refactor useResourceRouteResolver composable
 file structure, set tile Imagedimension to available size

---
 .../src/composables/filesList/index.ts        | 93 +------------------
 .../filesList/useResourceRouteResolver.ts     | 92 ++++++++++++++++++
 packages/web-pkg/src/constants.ts             |  2 +-
 3 files changed, 94 insertions(+), 93 deletions(-)
 create mode 100644 packages/web-app-files/src/composables/filesList/useResourceRouteResolver.ts

diff --git a/packages/web-app-files/src/composables/filesList/index.ts b/packages/web-app-files/src/composables/filesList/index.ts
index 12bfdc5094c..25cf331cd80 100644
--- a/packages/web-app-files/src/composables/filesList/index.ts
+++ b/packages/web-app-files/src/composables/filesList/index.ts
@@ -1,92 +1 @@
-import { unref, Ref } from 'vue'
-import { basename } from 'path'
-
-import { ConfigurationManager } from 'web-pkg/src'
-import { useConfigurationManager } from 'web-pkg/src/composables/configuration'
-import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
-import { createLocationSpaces, createLocationShares } from '../../router'
-import { CreateTargetRouteOptions } from '../../helpers/folderLink/types'
-import { Resource, SpaceResource } from 'web-client/src'
-import { buildShareSpaceResource } from 'web-client/src/helpers'
-
-type ResourceRouteResolverOptions = {
-  configurationManager?: ConfigurationManager
-  targetRouteCallback?: Ref<any>
-  space?: Ref<SpaceResource>
-  spaces: Ref<SpaceResource[]>
-}
-
-export const useResourceRouteResolver = (options: ResourceRouteResolverOptions, context) => {
-  const configurationManager = options.configurationManager || useConfigurationManager()
-
-  const getInternalSpace = (storageId) => {
-    return unref(options.space) || unref(options.spaces).find((space) => space.id === storageId)
-  }
-
-  const getMatchingSpace = (resource: Resource): SpaceResource => {
-    return (
-      getInternalSpace(resource.storageId) ||
-      buildShareSpaceResource({
-        shareId: resource.shareId,
-        shareName: resource.name,
-        serverUrl: configurationManager.serverUrl
-      })
-    )
-  }
-
-  const targetRouteCallback = options.targetRouteCallback
-
-  const createFolderLink = (createTargetRouteOptions: CreateTargetRouteOptions) => {
-    if (unref(targetRouteCallback)) {
-      return unref(targetRouteCallback)(createTargetRouteOptions)
-    }
-
-    const { path, fileId, resource } = createTargetRouteOptions
-    let space
-    if (resource.shareId) {
-      space = buildShareSpaceResource({
-        shareId: resource.shareId,
-        shareName: basename(resource.shareRoot),
-        serverUrl: configurationManager.serverUrl
-      })
-    } else if (!resource.shareId && !getInternalSpace(resource.storageId)) {
-      if (path === '/') {
-        return createLocationShares('files-shares-with-me')
-      }
-      // FIXME: This is a hacky way to resolve re-shares, but we don't have other options currently
-      return { name: 'resolvePrivateLink', params: { fileId } }
-    } else {
-      space = getMatchingSpace(resource)
-    }
-    if (!space) {
-      return {}
-    }
-    return createLocationSpaces(
-      'files-spaces-generic',
-      createFileRouteOptions(space, { path, fileId })
-    )
-  }
-
-  const createFileAction = (resource: Resource) => {
-    let space = getMatchingSpace(resource)
-    if (!space) {
-      space = buildShareSpaceResource({
-        shareId: resource.shareId,
-        shareName: resource.name,
-        serverUrl: configurationManager.serverUrl
-      })
-    }
-    /**
-     * Triggered when a default action is triggered on a file
-     * @property {object} resource resource for which the event is triggered
-     */
-    context.emit('fileClick', { space, resources: [resource] })
-  }
-
-  return {
-    getInternalSpace,
-    getMatchingSpace,
-    createFileAction,
-    createFolderLink
-  }
-}
+export * from './useResourceRouteResolver'
diff --git a/packages/web-app-files/src/composables/filesList/useResourceRouteResolver.ts b/packages/web-app-files/src/composables/filesList/useResourceRouteResolver.ts
new file mode 100644
index 00000000000..12bfdc5094c
--- /dev/null
+++ b/packages/web-app-files/src/composables/filesList/useResourceRouteResolver.ts
@@ -0,0 +1,92 @@
+import { unref, Ref } from 'vue'
+import { basename } from 'path'
+
+import { ConfigurationManager } from 'web-pkg/src'
+import { useConfigurationManager } from 'web-pkg/src/composables/configuration'
+import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
+import { createLocationSpaces, createLocationShares } from '../../router'
+import { CreateTargetRouteOptions } from '../../helpers/folderLink/types'
+import { Resource, SpaceResource } from 'web-client/src'
+import { buildShareSpaceResource } from 'web-client/src/helpers'
+
+type ResourceRouteResolverOptions = {
+  configurationManager?: ConfigurationManager
+  targetRouteCallback?: Ref<any>
+  space?: Ref<SpaceResource>
+  spaces: Ref<SpaceResource[]>
+}
+
+export const useResourceRouteResolver = (options: ResourceRouteResolverOptions, context) => {
+  const configurationManager = options.configurationManager || useConfigurationManager()
+
+  const getInternalSpace = (storageId) => {
+    return unref(options.space) || unref(options.spaces).find((space) => space.id === storageId)
+  }
+
+  const getMatchingSpace = (resource: Resource): SpaceResource => {
+    return (
+      getInternalSpace(resource.storageId) ||
+      buildShareSpaceResource({
+        shareId: resource.shareId,
+        shareName: resource.name,
+        serverUrl: configurationManager.serverUrl
+      })
+    )
+  }
+
+  const targetRouteCallback = options.targetRouteCallback
+
+  const createFolderLink = (createTargetRouteOptions: CreateTargetRouteOptions) => {
+    if (unref(targetRouteCallback)) {
+      return unref(targetRouteCallback)(createTargetRouteOptions)
+    }
+
+    const { path, fileId, resource } = createTargetRouteOptions
+    let space
+    if (resource.shareId) {
+      space = buildShareSpaceResource({
+        shareId: resource.shareId,
+        shareName: basename(resource.shareRoot),
+        serverUrl: configurationManager.serverUrl
+      })
+    } else if (!resource.shareId && !getInternalSpace(resource.storageId)) {
+      if (path === '/') {
+        return createLocationShares('files-shares-with-me')
+      }
+      // FIXME: This is a hacky way to resolve re-shares, but we don't have other options currently
+      return { name: 'resolvePrivateLink', params: { fileId } }
+    } else {
+      space = getMatchingSpace(resource)
+    }
+    if (!space) {
+      return {}
+    }
+    return createLocationSpaces(
+      'files-spaces-generic',
+      createFileRouteOptions(space, { path, fileId })
+    )
+  }
+
+  const createFileAction = (resource: Resource) => {
+    let space = getMatchingSpace(resource)
+    if (!space) {
+      space = buildShareSpaceResource({
+        shareId: resource.shareId,
+        shareName: resource.name,
+        serverUrl: configurationManager.serverUrl
+      })
+    }
+    /**
+     * Triggered when a default action is triggered on a file
+     * @property {object} resource resource for which the event is triggered
+     */
+    context.emit('fileClick', { space, resources: [resource] })
+  }
+
+  return {
+    getInternalSpace,
+    getMatchingSpace,
+    createFileAction,
+    createFolderLink
+  }
+}
diff --git a/packages/web-pkg/src/constants.ts b/packages/web-pkg/src/constants.ts
index 25b15f293a9..f2908e3c951 100644
--- a/packages/web-pkg/src/constants.ts
+++ b/packages/web-pkg/src/constants.ts
@@ -4,7 +4,7 @@ export const EVENT_TROW_CONTEXTMENU = 'contextmenuClicked'
 
 export abstract class ImageDimension {
   static readonly Thumbnail: [number, number] = [36, 36]
-  static readonly Tile: [number, number] = [180, 180]
+  static readonly Tile: [number, number] = [128, 128]
   static readonly Preview: [number, number] = [1200, 1200]
   static readonly Avatar: number = 64
 }

From 62ef059655e0f688113ff549197f2aa2ab16f692 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Wed, 25 Jan 2023 21:22:01 +0100
Subject: [PATCH 17/26] Rebase & update snapshot tests

---
 .../OcTile/__snapshots__/OcTile.spec.ts.snap  |  8 +-
 .../components/FilesList/ResourceTable.vue    | 84 ++++++++++++-------
 .../src/views/spaces/GenericSpace.vue         | 19 +----
 .../__snapshots__/ViewOptions.spec.ts.snap    |  2 +-
 4 files changed, 64 insertions(+), 49 deletions(-)

diff --git a/packages/design-system/src/components/OcTile/__snapshots__/OcTile.spec.ts.snap b/packages/design-system/src/components/OcTile/__snapshots__/OcTile.spec.ts.snap
index d5541bc14b9..c4feaf6e057 100644
--- a/packages/design-system/src/components/OcTile/__snapshots__/OcTile.spec.ts.snap
+++ b/packages/design-system/src/components/OcTile/__snapshots__/OcTile.spec.ts.snap
@@ -9,8 +9,8 @@ exports[`OcTile component renders default space correctly 1`] = `
   </oc-resource-link-stub>
   <div class="oc-card-body oc-p-s">
     <div class="oc-flex oc-flex-between oc-flex-middle">
-      <div class="oc-flex oc-flex-middle oc-text-truncate">
-        <oc-resource-stub isextensiondisplayed="true" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="true" parentfoldernamedefault="" resource="[object Object]"></oc-resource-stub>
+      <div class="oc-flex oc-flex-middle oc-text-truncate resource-name-wrapper">
+        <oc-resource-stub isextensiondisplayed="true" isicondisplayed="false" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="true" parentfoldernamedefault="" resource="[object Object]"></oc-resource-stub>
       </div>
       <div class="oc-flex oc-flex-middle">
         <!-- Slot for individual actions -->
@@ -32,8 +32,8 @@ exports[`OcTile component renders disabled space correctly 1`] = `
   </oc-resource-link-stub>
   <div class="oc-card-body oc-p-s">
     <div class="oc-flex oc-flex-between oc-flex-middle">
-      <div class="oc-flex oc-flex-middle oc-text-truncate">
-        <oc-resource-stub isextensiondisplayed="true" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="true" parentfoldernamedefault="" resource="[object Object]"></oc-resource-stub>
+      <div class="oc-flex oc-flex-middle oc-text-truncate resource-name-wrapper">
+        <oc-resource-stub isextensiondisplayed="true" isicondisplayed="false" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="true" parentfoldernamedefault="" resource="[object Object]"></oc-resource-stub>
       </div>
       <div class="oc-flex oc-flex-middle">
         <!-- Slot for individual actions -->
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index a7b660bd3d5..ce2e737f373 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -182,12 +182,14 @@
 </template>
 
 <script lang="ts">
+import { defineComponent, PropType, computed } from 'vue'
 import { mapGetters, mapActions, mapState } from 'vuex'
-import { determineSortFields } from '../../helpers/ui/resourceTable'
 import { basename, dirname } from 'path'
-import { defineComponent, PropType, computed } from 'vue'
 import { useWindowSize } from '@vueuse/core'
-import { EVENT_FILE_DROPPED, EVENT_TROW_MOUNTED, ImageDimension } from 'web-pkg/src/constants'
+import { Resource } from 'web-client'
+import { buildShareSpaceResource, extractDomSelector, SpaceResource } from 'web-client/src/helpers'
+import { ShareTypes } from 'web-client/src/helpers/share'
+
 import {
   useCapabilityFilesTags,
   useCapabilityProjectSpacesEnabled,
@@ -195,32 +197,30 @@ import {
   useStore,
   useUserContext
 } from 'web-pkg/src/composables'
+import { EVENT_TROW_MOUNTED, EVENT_FILE_DROPPED, ImageDimension } from 'web-pkg/src/constants'
 import { eventBus } from 'web-pkg/src/services/eventBus'
-
-import Rename from '../../mixins/actions/rename'
-import { Resource } from 'web-client'
-import { ShareTypes } from 'web-client/src/helpers/share'
 import {
   displayPositionedDropdown,
   formatDateFromJSDate,
   formatRelativeDateFromJSDate
 } from 'web-pkg/src/helpers'
 import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
-import { extractDomSelector, SpaceResource } from 'web-client/src/helpers'
+import { configurationManager } from 'web-pkg/src/configuration'
 import ContextMenuQuickAction from 'web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue'
 
-import ResourceTiles from './ResourceTiles.vue'
-
-import { createLocationShares, createLocationCommon } from '../../router'
-import { SortDir } from '../../composables'
-import { ViewModeConstants } from '../../composables/viewMode'
-import { ClipboardActions } from '../../helpers/clipboardActions'
-import { isResourceTxtFileAlmostEmpty } from '../../helpers/resources'
+import { SortDir } from 'web-app-files/src/composables'
+import { useResourceRouteResolver } from 'web-app-files/src/composables/filesList/useResourceRouteResolver'
+import { ViewModeConstants } from 'web-app-files/src/composables/viewMode'
+import { ClipboardActions } from 'web-app-files/src/helpers/clipboardActions'
+import { isResourceTxtFileAlmostEmpty } from 'web-app-files/src/helpers/resources'
+import { determineSortFields } from 'web-app-files/src/helpers/ui/resourceTable'
+import Rename from 'web-app-files/src/mixins/actions/rename'
+import { createLocationShares, createLocationCommon } from 'web-app-files/src/router'
 
 const TAGS_MINIMUM_SCREEN_WIDTH = 850
 
 export default defineComponent({
-  components: { ContextMenuQuickAction, ResourceTiles },
+  components: { ContextMenuQuickAction },
   mixins: [Rename],
   props: {
     /**
@@ -392,22 +392,23 @@ export default defineComponent({
   ],
   setup(props, context) {
     const store = useStore()
-
     const spaces = computed(() => {
       return store.getters['runtime/spaces/spaces']
     })
-
     const { width } = useWindowSize()
     const hasTags = computed(
       () => useCapabilityFilesTags().value && width.value >= TAGS_MINIMUM_SCREEN_WIDTH
     )
 
+    const resourceRouteResolver = useResourceRouteResolver({ spaces }, context)
+
     return {
+      resourceRouteResolver,
+      ViewModeConstants,
       hasTags,
       hasShareJail: useCapabilityShareJailEnabled(),
       hasProjectSpaces: useCapabilityProjectSpacesEnabled(),
-      isUserContext: useUserContext({ store }),
-      spaces
+      isUserContext: useUserContext({ store })
     }
   },
   data() {
@@ -627,14 +628,18 @@ export default defineComponent({
       eventBus.publish(SideBarEventTopics.openWithPanel, panelToOpen)
     },
     folderLink(file) {
-      return this.createFolderLink({ path: file.path, fileId: file.fileId, resource: file })
+      return this.resourceRouteResolver.createFolderLink({
+        path: file.path,
+        fileId: file.fileId,
+        resource: file
+      })
     },
     parentFolderLink(file) {
       if (file.shareId && file.path === '/') {
         return createLocationShares('files-shares-with-me')
       }
 
-      return this.createFolderLink({
+      return this.resourceRouteResolver.createFolderLink({
         path: dirname(file.path),
         ...(file.parentFolderId && { fileId: file.parentFolderId }),
         resource: file
@@ -683,12 +688,7 @@ export default defineComponent({
        * @property {object} resource The resource which was mounted as table row
        * @property {object} component The table row component
        */
-      this.$emit(
-        this.constants.EVENT_TROW_MOUNTED,
-        resource,
-        component,
-        this.constants.ImageDimension.Thumbnail
-      )
+      this.$emit('rowMounted', resource, component, this.constants.ImageDimension.Thumbnail)
     },
     fileClicked(data) {
       /**
@@ -729,7 +729,20 @@ export default defineComponent({
       this.emitSelect(this.resources.map((resource) => resource.id))
     },
     emitFileClick(resource) {
-      this.createFileAction(resource)
+      let space = this.getMatchingSpace(resource)
+      if (!space) {
+        space = buildShareSpaceResource({
+          shareId: resource.shareId,
+          shareName: resource.name,
+          serverUrl: configurationManager.serverUrl
+        })
+      }
+
+      /**
+       * 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] })
     },
     isResourceClickable(resourceId) {
       if (!this.areResourcesClickable) {
@@ -782,6 +795,19 @@ export default defineComponent({
         ownerName: resource.owner[0].displayName
       })
     },
+    getInternalSpace(storageId) {
+      return this.space || this.spaces.find((space) => space.id === storageId)
+    },
+    getMatchingSpace(resource: Resource): SpaceResource {
+      return (
+        this.getInternalSpace(resource.storageId) ||
+        buildShareSpaceResource({
+          shareId: resource.shareId,
+          shareName: resource.name,
+          serverUrl: configurationManager.serverUrl
+        })
+      )
+    },
     getDefaultParentFolderName(resource) {
       if (this.hasProjectSpaces) {
         const matchingSpace = this.getMatchingSpace(resource)
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 68ef6309556..67b92c5b58f 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -127,8 +127,7 @@
 </template>
 
 <script lang="ts">
-import { debounce } from 'lodash-es'
-import omit from 'lodash-es/omit'
+import { debounce, omit } from 'lodash-es'
 import { basename } from 'path'
 import {
   computed,
@@ -168,17 +167,16 @@ import SideBar from '../../components/SideBar/SideBar.vue'
 import SpaceHeader from '../../components/Spaces/SpaceHeader.vue'
 import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
-
-import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
+import { useRoute } from 'web-pkg/src/composables'
 import { useDocumentTitle } from 'web-pkg/src/composables/appDefaults/useDocumentTitle'
-import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageType } from 'web-pkg/src/constants'
+import { VisibilityObserver } from 'web-pkg/src/observer'
+import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { BreadcrumbItem, breadcrumbsFromPath, concatBreadcrumbs } from '../../helpers/breadcrumbs'
 import { createLocationPublic, createLocationSpaces } from '../../router'
 import { useResourcesViewDefaults, ViewModeConstants } from '../../composables'
 import { ResourceTransfer, TransferType } from '../../helpers/resource'
-import { useRoute } from 'web-pkg/src/composables'
 import { FolderLoaderOptions } from '../../services/folder'
 
 const visibilityObserver = new VisibilityObserver()
@@ -229,13 +227,6 @@ export default defineComponent({
     const store = useStore()
     let loadResourcesEventToken
 
-    const resourceTargetRouteCallback = ({ path, fileId }: CreateTargetRouteOptions): Location => {
-      const { params, query } = createFileRouteOptions(props.space, { path, fileId })
-      if (isPublicSpaceResource(props.space)) {
-        return createLocationPublic('files-public-link', { params, query })
-      }
-      return createLocationSpaces('files-spaces-generic', { params, query })
-    }
     const hasSpaceHeader = computed(() => {
       // for now the space header is only available in the root of a project space.
       return props.space.driveType === 'project' && props.item === '/'
@@ -364,8 +355,6 @@ export default defineComponent({
 
     return {
       ...resourcesViewDefaults,
-      resourceTargetRouteCallback,
-      ...useResourcesViewDefaults<Resource, any, any[]>(),
       breadcrumbs,
       hasSpaceHeader,
       performLoaderTask,
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/ViewOptions.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/ViewOptions.spec.ts.snap
index 074389064e5..51088c92133 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/ViewOptions.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/ViewOptions.spec.ts.snap
@@ -32,7 +32,7 @@ exports[`ViewOptions component sets the correct initial files page limit 1`] = `
 `;
 
 exports[`ViewOptions component shows a viewmode switcher if more than one viewModes are passed 1`] = `
-<div class="oc-button-group oc-visible@s oc-mr-s">
+<div class="viewmode-switch-buttons oc-button-group oc-visible@s oc-mr-s">
   <oc-button-stub appearance="outline" disabled="false" gapsize="medium" justifycontent="center" label="Switch to condensed table view" size="medium" submit="button" type="button" variation="passive"></oc-button-stub>
   <oc-button-stub appearance="outline" disabled="false" gapsize="medium" justifycontent="center" label="Switch to default table view" size="medium" submit="button" type="button" variation="passive"></oc-button-stub>
 </div>

From 13987f653b84a2b58fc5046c17f1b936f4747783 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Sun, 29 Jan 2023 21:51:58 +0100
Subject: [PATCH 18/26] Rebase, change wording in changelog, update snapshot
 tests

---
 .../enhancement-condensed-files-view          |  2 +-
 .../enhancement-resources-tiles-view          |  2 +-
 .../components/OcResource/OcResource.spec.ts  |  3 ++-
 .../src/components/OcResource/OcResource.vue  |  2 +-
 .../__snapshots__/OcResource.spec.ts.snap     | 23 +------------------
 5 files changed, 6 insertions(+), 26 deletions(-)

diff --git a/changelog/unreleased/enhancement-condensed-files-view b/changelog/unreleased/enhancement-condensed-files-view
index ffd6899e2bb..93b8cf44d24 100644
--- a/changelog/unreleased/enhancement-condensed-files-view
+++ b/changelog/unreleased/enhancement-condensed-files-view
@@ -1,7 +1,7 @@
 Enhancement: Add switch to enable condensed resource table
 
 We've added a switch to have a more condensed resource table. 
-The change gets saved to the route and persisted across folder 
+The change gets saved to the url and persisted across folder 
 navigation in all files, spaces and favorites views.
 
 https://github.com/owncloud/web/pull/7976
diff --git a/changelog/unreleased/enhancement-resources-tiles-view b/changelog/unreleased/enhancement-resources-tiles-view
index ec7fdedd61b..5c5d0fac35b 100644
--- a/changelog/unreleased/enhancement-resources-tiles-view
+++ b/changelog/unreleased/enhancement-resources-tiles-view
@@ -1,7 +1,7 @@
 Enhancement: Add tiles view for resource display
 
 We've added a switch to change from the known resource table to a tiles view.
-The change gets saved to the route and persisted across resource navigation.
+The change gets saved to the url and persisted across resource navigation.
 
 https://github.com/owncloud/web/pull/7991
 https://github.com/owncloud/web/issues/6378
diff --git a/packages/design-system/src/components/OcResource/OcResource.spec.ts b/packages/design-system/src/components/OcResource/OcResource.spec.ts
index bfe3225033e..9ebe182b25f 100644
--- a/packages/design-system/src/components/OcResource/OcResource.spec.ts
+++ b/packages/design-system/src/components/OcResource/OcResource.spec.ts
@@ -141,6 +141,7 @@ describe('OcResource', () => {
       }
     })
 
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.find('oc-resource-thumbnail').exists()).toBeFalsy()
+    expect(wrapper.find('oc-resource-icon').exists()).toBeFalsy()
   })
 })
diff --git a/packages/design-system/src/components/OcResource/OcResource.vue b/packages/design-system/src/components/OcResource/OcResource.vue
index 39c37783c91..f0c9bc6876a 100644
--- a/packages/design-system/src/components/OcResource/OcResource.vue
+++ b/packages/design-system/src/components/OcResource/OcResource.vue
@@ -17,7 +17,7 @@
       />
       <oc-resource-icon v-else :resource="resource" />
     </oc-resource-link>
-    <div class="oc-resource-details oc-text-overflow" :class="'oc-pl-s' ? isIconDisplayed : ''">
+    <div class="oc-resource-details oc-text-overflow" :class="{ 'oc-pl-s': isIconDisplayed }">
       <oc-resource-link
         v-slot="{ opensInNewWindowDescriptionId }"
         :resource="resource"
diff --git a/packages/design-system/src/components/OcResource/__snapshots__/OcResource.spec.ts.snap b/packages/design-system/src/components/OcResource/__snapshots__/OcResource.spec.ts.snap
index 433af8431db..d76bc4b9604 100644
--- a/packages/design-system/src/components/OcResource/__snapshots__/OcResource.spec.ts.snap
+++ b/packages/design-system/src/components/OcResource/__snapshots__/OcResource.spec.ts.snap
@@ -1,26 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`OcResource can be used without icon/thumbnail 1`] = `
-<div class="oc-resource oc-text-overflow">
-  <!--v-if-->
-  <div class="oc-resource-details oc-text-overflow">
-    <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-passive oc-button-passive-raw oc-text-overflow" draggable="false" type="button">
-      <!-- @slot Content of the button -->
-      <!--v-if-->
-      <span class="oc-resource-name" data-test-resource-name="example.pdf" data-test-resource-path="example.pdf" data-test-resource-type="file" title="example.pdf">
-        <span class="oc-text-truncate">
-          <span class="oc-resource-basename">example</span>
-        </span>
-        <span class="oc-resource-extension">.pdf</span>
-      </span>
-    </button>
-    <div class="oc-resource-indicators">
-      <!--v-if-->
-    </div>
-  </div>
-</div>
-`;
-
 exports[`OcResource displays parent folder name default if calculated name is empty 1`] = `
 <div class="oc-resource oc-text-overflow">
   <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-passive oc-button-passive-raw" draggable="false" type="button">
@@ -29,7 +8,7 @@ exports[`OcResource displays parent folder name default if calculated name is em
       <!---->
     </span>
   </button>
-  <div class="oc-resource-details oc-text-overflow">
+  <div class="oc-resource-details oc-text-overflow oc-pl-s">
     <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-passive oc-button-passive-raw oc-text-overflow" draggable="false" type="button">
       <!-- @slot Content of the button -->
       <!--v-if-->

From be50811bcfffadcfb104ec526ea97f2901034882 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Mon, 30 Jan 2023 22:50:51 +0100
Subject: [PATCH 19/26] Reintroduce resourceTargetRouteCallback to make public
 link navigation work for ResourceTable/ResourceTiles

---
 .../src/components/FilesList/ResourceTable.vue      | 13 ++++++++++++-
 .../src/components/FilesList/ResourceTiles.vue      | 10 +++++++++-
 .../web-app-files/src/views/spaces/GenericSpace.vue | 13 +++++++++++++
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index ce2e737f373..ccef4942345 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -281,6 +281,14 @@ export default defineComponent({
       required: false,
       default: true
     },
+    /**
+     * Accepts a `path` and a `resource` param and returns a corresponding route object.
+     */
+    targetRouteCallback: {
+      type: Function,
+      required: false,
+      default: undefined
+    },
     /**
      * Asserts whether clicking on the resource name triggers any action
      */
@@ -400,7 +408,10 @@ export default defineComponent({
       () => useCapabilityFilesTags().value && width.value >= TAGS_MINIMUM_SCREEN_WIDTH
     )
 
-    const resourceRouteResolver = useResourceRouteResolver({ spaces }, context)
+    const resourceRouteResolver = useResourceRouteResolver(
+      { spaces, targetRouteCallback: computed(() => props.targetRouteCallback) },
+      context
+    )
 
     return {
       resourceRouteResolver,
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index f2f4774f9e7..0f675d3c995 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -88,6 +88,11 @@ export default defineComponent({
     tileWidth: {
       type: String,
       default: ''
+    },
+    targetRouteCallback: {
+      type: Function,
+      required: false,
+      default: undefined
     }
   },
   emits: ['fileClick', 'rowMounted'],
@@ -105,7 +110,10 @@ export default defineComponent({
       return store.getters['runtime/spaces/spaces']
     })
 
-    const resourceRouteResolver = useResourceRouteResolver({ spaces }, context)
+    const resourceRouteResolver = useResourceRouteResolver(
+      { spaces, targetRouteCallback: computed(() => props.targetRouteCallback) },
+      context
+    )
 
     const getRoute = (resource) => {
       if (resource.type === 'space') {
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 67b92c5b58f..f2d005fa1be 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -49,6 +49,7 @@
           :data="paginatedResources"
           class="oc-px-m oc-pt-l"
           tile-width="small"
+          :target-route-callback="resourceTargetRouteCallback"
           @rowMounted="rowMounted"
           @fileClick="$_fileActions_triggerDefaultAction"
         >
@@ -84,6 +85,7 @@
           :view-mode="viewMode"
           :are-thumbnails-displayed="displayThumbnails"
           :resources="paginatedResources"
+          :target-route-callback="resourceTargetRouteCallback"
           :header-position="fileListHeaderY"
           :drag-drop="true"
           :sort-by="sortBy"
@@ -138,6 +140,7 @@ import {
   onMounted,
   unref
 } from 'vue'
+import { Location } from 'vue-router'
 import { mapGetters, mapState, mapActions, mapMutations, useStore } from 'vuex'
 import { useGettext } from 'vue3-gettext'
 import { Resource } from 'web-client'
@@ -178,6 +181,7 @@ import { createLocationPublic, createLocationSpaces } from '../../router'
 import { useResourcesViewDefaults, ViewModeConstants } from '../../composables'
 import { ResourceTransfer, TransferType } from '../../helpers/resource'
 import { FolderLoaderOptions } from '../../services/folder'
+import { CreateTargetRouteOptions } from 'web-app-files/src/helpers/folderLink/types'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -227,6 +231,14 @@ export default defineComponent({
     const store = useStore()
     let loadResourcesEventToken
 
+    const resourceTargetRouteCallback = ({ path, fileId }: CreateTargetRouteOptions): Location => {
+      const { params, query } = createFileRouteOptions(props.space, { path, fileId })
+      if (isPublicSpaceResource(props.space)) {
+        return createLocationPublic('files-public-link', { params, query })
+      }
+      return createLocationSpaces('files-spaces-generic', { params, query })
+    }
+
     const hasSpaceHeader = computed(() => {
       // for now the space header is only available in the root of a project space.
       return props.space.driveType === 'project' && props.item === '/'
@@ -357,6 +369,7 @@ export default defineComponent({
       ...resourcesViewDefaults,
       breadcrumbs,
       hasSpaceHeader,
+      resourceTargetRouteCallback,
       performLoaderTask,
       ViewModeConstants
     }

From 7191e0429882918d509294f47fd7445791075d34 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Mon, 30 Jan 2023 23:06:41 +0100
Subject: [PATCH 20/26] Make ResourceTile thumbnail preview work again after
 vue3 update

---
 .../web-app-files/src/components/FilesList/ResourceTiles.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 0f675d3c995..75c8fe7c556 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -10,7 +10,7 @@
           "
           :resource="resource"
           :resource-route="getRoute(resource)"
-          @hook:mounted="$emit('rowMounted', resource, tileRefs.tiles[index], ImageDimension.Tile)"
+          @vue:mounted="$emit('rowMounted', resource, tileRefs.tiles[index], ImageDimension.Tile)"
           @contextmenu="showContextMenu($event, index, tileRefs.tiles[index])"
           @click="emitTileClick(resource)"
         >

From 9ef257ec12df753705e990af958f7dfa8f131382 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Tue, 31 Jan 2023 22:49:54 +0100
Subject: [PATCH 21/26] Increase Tile ImageDimension

---
 packages/web-pkg/src/constants.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-pkg/src/constants.ts b/packages/web-pkg/src/constants.ts
index f2908e3c951..0c0c673cd39 100644
--- a/packages/web-pkg/src/constants.ts
+++ b/packages/web-pkg/src/constants.ts
@@ -4,7 +4,7 @@ export const EVENT_TROW_CONTEXTMENU = 'contextmenuClicked'
 
 export abstract class ImageDimension {
   static readonly Thumbnail: [number, number] = [36, 36]
-  static readonly Tile: [number, number] = [128, 128]
+  static readonly Tile: [number, number] = [1000, 1000]
   static readonly Preview: [number, number] = [1200, 1200]
   static readonly Avatar: number = 64
 }

From 9b014e37346ba59e6b032d3277a7856d51fba853 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Tue, 31 Jan 2023 22:50:18 +0100
Subject: [PATCH 22/26] Fix resourceRouteResolver usage in ResourceTable

---
 .../components/FilesList/ResourceTable.vue    | 24 ++++++-------------
 1 file changed, 7 insertions(+), 17 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index ccef4942345..1fbdfea8583 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -622,7 +622,10 @@ export default defineComponent({
         .length
     },
     openRenameDialog(item) {
-      this.$_rename_trigger({ resources: [item] }, this.getMatchingSpace(item))
+      this.$_rename_trigger(
+        { resources: [item] },
+        this.resourceRouteResolver.getMatchingSpace(item)
+      )
     },
     openTagsSidebar() {
       eventBus.publish(SideBarEventTopics.open)
@@ -740,7 +743,7 @@ export default defineComponent({
       this.emitSelect(this.resources.map((resource) => resource.id))
     },
     emitFileClick(resource) {
-      let space = this.getMatchingSpace(resource)
+      let space = this.resourceRouteResolver.getMatchingSpace(resource)
       if (!space) {
         space = buildShareSpaceResource({
           shareId: resource.shareId,
@@ -806,22 +809,9 @@ export default defineComponent({
         ownerName: resource.owner[0].displayName
       })
     },
-    getInternalSpace(storageId) {
-      return this.space || this.spaces.find((space) => space.id === storageId)
-    },
-    getMatchingSpace(resource: Resource): SpaceResource {
-      return (
-        this.getInternalSpace(resource.storageId) ||
-        buildShareSpaceResource({
-          shareId: resource.shareId,
-          shareName: resource.name,
-          serverUrl: configurationManager.serverUrl
-        })
-      )
-    },
     getDefaultParentFolderName(resource) {
       if (this.hasProjectSpaces) {
-        const matchingSpace = this.getMatchingSpace(resource)
+        const matchingSpace = this.resourceRouteResolver.getMatchingSpace(resource)
         if (matchingSpace?.driveType === 'project') {
           return matchingSpace.name
         }
@@ -837,7 +827,7 @@ export default defineComponent({
           : basename(resource.shareRoot)
       }
 
-      if (!this.getInternalSpace(resource.storageId)) {
+      if (!this.resourceRouteResolver.getInternalSpace(resource.storageId)) {
         return this.$gettext('Shared with me')
       }
 

From 8eab9dc5ccdba9437f4eee35ff068a0dc8ae900f Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Wed, 1 Feb 2023 16:24:12 +0100
Subject: [PATCH 23/26] Add basic E2E test for tiles viewMode

---
 .../src/components/AppBar/ViewOptions.vue     |  3 ++-
 .../__snapshots__/ViewOptions.spec.ts.snap    |  4 +--
 .../e2e/cucumber/features/smoke/tiles.feature | 27 +++++++++++++++++++
 tests/e2e/cucumber/steps/ui/resources.ts      | 19 +++++++++++++
 .../objects/app-files/resource/actions.ts     | 16 +++++++++++
 .../objects/app-files/resource/index.ts       | 14 ++++++++--
 6 files changed, 78 insertions(+), 5 deletions(-)
 create mode 100644 tests/e2e/cucumber/features/smoke/tiles.feature

diff --git a/packages/web-app-files/src/components/AppBar/ViewOptions.vue b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
index 6783b36bba5..16b54225140 100644
--- a/packages/web-app-files/src/components/AppBar/ViewOptions.vue
+++ b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
@@ -6,10 +6,11 @@
     >
       <oc-button
         v-for="viewMode in viewModes"
+        :class="viewMode.name"
         :key="viewMode.name"
         v-oc-tooltip="$gettext(viewMode.label)"
         :appearance="viewModeCurrent === viewMode.name ? 'filled' : 'outline'"
-        :label="$gettext(viewMode.label)"
+        :aria-label="$gettext(viewMode.label)"
         @click="setViewMode(viewMode)"
       >
         <oc-icon :name="viewMode.icon.name" :fill-type="viewMode.icon.fillType" size="small" />
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/ViewOptions.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/ViewOptions.spec.ts.snap
index 51088c92133..b8ffee2832e 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/ViewOptions.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/ViewOptions.spec.ts.snap
@@ -33,7 +33,7 @@ exports[`ViewOptions component sets the correct initial files page limit 1`] = `
 
 exports[`ViewOptions component shows a viewmode switcher if more than one viewModes are passed 1`] = `
 <div class="viewmode-switch-buttons oc-button-group oc-visible@s oc-mr-s">
-  <oc-button-stub appearance="outline" disabled="false" gapsize="medium" justifycontent="center" label="Switch to condensed table view" size="medium" submit="button" type="button" variation="passive"></oc-button-stub>
-  <oc-button-stub appearance="outline" disabled="false" gapsize="medium" justifycontent="center" label="Switch to default table view" size="medium" submit="button" type="button" variation="passive"></oc-button-stub>
+  <oc-button-stub appearance="outline" arialabel="Switch to condensed table view" class="resource-table-condensed" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive"></oc-button-stub>
+  <oc-button-stub appearance="outline" arialabel="Switch to default table view" class="resource-table" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive"></oc-button-stub>
 </div>
 `;
diff --git a/tests/e2e/cucumber/features/smoke/tiles.feature b/tests/e2e/cucumber/features/smoke/tiles.feature
new file mode 100644
index 00000000000..306d7617ffe
--- /dev/null
+++ b/tests/e2e/cucumber/features/smoke/tiles.feature
@@ -0,0 +1,27 @@
+Feature: Tiles
+    As a user
+    I want to view and navigate resources displayed as tiles
+    So that I can identify them better
+
+    Background:
+        Given "Admin" creates following users
+            | id    |
+            | Alice |
+
+    Scenario: Users can navigate web via tiles
+        Given "Admin" creates following users
+            | id    |
+            | Alice |
+        And "Alice" logs in
+        And "Alice" opens the "files" app
+        And "Alice" creates the following resources
+            | resource    | type   |
+            | tile_folder | folder |
+        And "Alice" switches to the tiles-view
+        And "Alice" sees the resources displayed as tiles
+        And "Alice" opens folder "tile_folder"
+        And "Alice" creates the following resources
+            | resource     | type   |
+            | tile_folder2 | folder |
+        And "Alice" sees the resources displayed as tiles
+        And "Alice" logs out
diff --git a/tests/e2e/cucumber/steps/ui/resources.ts b/tests/e2e/cucumber/steps/ui/resources.ts
index 35d180ac9d6..7bd3204173d 100644
--- a/tests/e2e/cucumber/steps/ui/resources.ts
+++ b/tests/e2e/cucumber/steps/ui/resources.ts
@@ -262,6 +262,25 @@ When(
   }
 )
 
+When(
+  '{string} switches to the tiles-view',
+  async function (this: World, stepUser: string): Promise<void> {
+    const { page } = this.actorsEnvironment.getActor({ key: stepUser })
+    const resourceObject = new objects.applicationFiles.Resource({ page })
+    await resourceObject.switchToTilesViewMode()
+  }
+)
+
+When(
+  '{string} sees the resources displayed as tiles',
+  async function (this: World, stepUser: string): Promise<void> {
+    const { page } = this.actorsEnvironment.getActor({ key: stepUser })
+    const resourceObject = new objects.applicationFiles.Resource({ page })
+    const isVisible = await resourceObject.areResourcesShownAsTiles()
+    expect(isVisible).toBe(true)
+  }
+)
+
 export const processDownload = async (
   stepTable: DataTable,
   pageObject: any,
diff --git a/tests/e2e/support/objects/app-files/resource/actions.ts b/tests/e2e/support/objects/app-files/resource/actions.ts
index 6b31dfb5a35..cadf3293eb1 100644
--- a/tests/e2e/support/objects/app-files/resource/actions.ts
+++ b/tests/e2e/support/objects/app-files/resource/actions.ts
@@ -60,6 +60,7 @@ const tagInInputForm =
   '//span[contains(@class, "vs__selected")]//span[text()="%s"]//ancestor::span/button[contains(@class, "vs__deselect")]'
 const tagFormInput = '#tags-form input'
 const compareDialogConfirmBtn = '.compare-save-dialog-confirm-btn'
+const resourcesAsTiles = '#files-view .oc-tiles'
 
 export const clickResource = async ({
   page,
@@ -766,6 +767,21 @@ export const getDisplayedResourcesFromFilesList = async (page): Promise<string[]
   return files
 }
 
+export interface switchViewModeArgs {
+  page: Page
+  target: 'resource-table' | 'resource-tiles'
+}
+
+export const clickViewModeToggle = async (args: switchViewModeArgs): Promise<void> => {
+  const { page, target } = args
+  await page.locator(`.viewmode-switch-buttons .${target}`).click()
+}
+
+export const getTilesVisibility = async (args): Promise<boolean> => {
+  const { page } = args
+  return await page.locator(resourcesAsTiles).isVisible()
+}
+
 export const showHiddenResources = async (page): Promise<void> => {
   await page.locator(filesViewOptionButton).click()
   await page.locator(hiddenFilesToggleButton).click()
diff --git a/tests/e2e/support/objects/app-files/resource/index.ts b/tests/e2e/support/objects/app-files/resource/index.ts
index ac3e66fa954..2bb323ec347 100644
--- a/tests/e2e/support/objects/app-files/resource/index.ts
+++ b/tests/e2e/support/objects/app-files/resource/index.ts
@@ -40,7 +40,9 @@ import {
   clickResourceTag,
   getDisplayedResourcesArgs,
   getDisplayedResourcesFromFilesList,
-  resourceTagsArgs
+  resourceTagsArgs,
+  clickViewModeToggle,
+  getTilesVisibility
 } from './actions'
 
 export class Resource {
@@ -54,7 +56,7 @@ export class Resource {
     const startUrl = this.#page.url()
     await createResources({ ...args, page: this.#page })
     await this.#page.goto(startUrl)
-    await this.#page.waitForSelector('.files-table')
+    await this.#page.waitForSelector('#files-view')
   }
 
   async upload(args: Omit<uploadResourceArgs, 'page'>): Promise<void> {
@@ -184,6 +186,14 @@ export class Resource {
     await clickResource({ page: this.#page, path: resource })
   }
 
+  async switchToTilesViewMode(): Promise<void> {
+    await clickViewModeToggle({ page: this.#page, target: 'resource-tiles' })
+  }
+
+  async areResourcesShownAsTiles(): Promise<boolean> {
+    return await getTilesVisibility({ page: this.#page })
+  }
+
   async showHiddenFiles(): Promise<void> {
     await showHiddenResources(this.#page)
   }

From bdd4dc2f7197c2505629ed810ec965a0e91d712f Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Wed, 1 Feb 2023 16:41:44 +0100
Subject: [PATCH 24/26] Respect public/private context for loading thumbnails
 in GenericSpace

---
 packages/web-app-files/src/components/AppBar/ViewOptions.vue | 2 +-
 packages/web-app-files/src/views/spaces/GenericSpace.vue     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/components/AppBar/ViewOptions.vue b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
index 16b54225140..7e89aa5e891 100644
--- a/packages/web-app-files/src/components/AppBar/ViewOptions.vue
+++ b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
@@ -6,9 +6,9 @@
     >
       <oc-button
         v-for="viewMode in viewModes"
-        :class="viewMode.name"
         :key="viewMode.name"
         v-oc-tooltip="$gettext(viewMode.label)"
+        :class="viewMode.name"
         :appearance="viewModeCurrent === viewMode.name ? 'filled' : 'outline'"
         :aria-label="$gettext(viewMode.label)"
         @click="setViewMode(viewMode)"
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index f2d005fa1be..e1f5b3fc34f 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -465,7 +465,7 @@ export default defineComponent({
         unobserve()
         this.loadPreview({
           resource,
-          isPublic: false,
+          isPublic: isPublicSpaceResource(this.space),
           dimensions,
           type: ImageType.Thumbnail
         })

From a883c88619d6c2989d83976a2d0c4dc0159b6cbe Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Wed, 1 Feb 2023 18:36:57 +0100
Subject: [PATCH 25/26] Fix tiles E2E test

---
 tests/e2e/support/objects/app-files/resource/actions.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/tests/e2e/support/objects/app-files/resource/actions.ts b/tests/e2e/support/objects/app-files/resource/actions.ts
index cadf3293eb1..ec2af611992 100644
--- a/tests/e2e/support/objects/app-files/resource/actions.ts
+++ b/tests/e2e/support/objects/app-files/resource/actions.ts
@@ -13,7 +13,8 @@ const downloadFolderButtonSidedBar =
 const downloadButtonBatchAction = '.oc-files-actions-download-archive-trigger'
 const checkBox = `//*[@data-test-resource-name="%s"]//ancestor::tr//input`
 const checkBoxForTrashbin = `//*[@data-test-resource-path="%s"]//ancestor::tr//input`
-export const fileRow = '//ancestor::tr'
+export const fileRow =
+  '//ancestor::*[(contains(@class, "oc-tile-card") or contains(@class, "oc-tbody-tr"))]'
 export const resourceNameSelector = `[data-test-resource-name="%s"]`
 const addNewResourceButton = `#new-file-menu-btn`
 const createNewFolderButton = '#new-folder-btn'
@@ -71,6 +72,8 @@ export const clickResource = async ({
 }): Promise<void> => {
   const paths = path.split('/')
   for (const name of paths) {
+    // const isTiles = await getTilesVisibility(page)
+    // console.log(isTiles)
     const resource = await page.locator(util.format(resourceNameSelector, name))
     const itemId = await resource.locator(fileRow).getAttribute('data-item-id')
     await Promise.all([

From 93e9d76cf1ad8de221fe3bf2c951d84a69784229 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Wed, 1 Feb 2023 20:50:23 +0100
Subject: [PATCH 26/26] Fix resourceResolve for fileclick by passing current
 space to component

---
 .../src/components/FilesList/ResourceTable.vue        |  7 ++++++-
 .../src/components/FilesList/ResourceTiles.vue        | 11 ++++++++++-
 packages/web-app-files/src/helpers/breadcrumbs.ts     |  4 ++--
 .../web-app-files/src/views/spaces/GenericSpace.vue   |  8 ++++++--
 .../e2e/support/objects/app-files/resource/actions.ts |  5 +----
 5 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index 1fbdfea8583..af40165daf2 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -216,6 +216,7 @@ import { isResourceTxtFileAlmostEmpty } from 'web-app-files/src/helpers/resource
 import { determineSortFields } from 'web-app-files/src/helpers/ui/resourceTable'
 import Rename from 'web-app-files/src/mixins/actions/rename'
 import { createLocationShares, createLocationCommon } from 'web-app-files/src/router'
+import { ref } from 'vue'
 
 const TAGS_MINIMUM_SCREEN_WIDTH = 850
 
@@ -409,7 +410,11 @@ export default defineComponent({
     )
 
     const resourceRouteResolver = useResourceRouteResolver(
-      { spaces, targetRouteCallback: computed(() => props.targetRouteCallback) },
+      {
+        space: ref(props.space),
+        spaces,
+        targetRouteCallback: computed(() => props.targetRouteCallback)
+      },
       context
     )
 
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 75c8fe7c556..d9d9006eeca 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -93,6 +93,11 @@ export default defineComponent({
       type: Function,
       required: false,
       default: undefined
+    },
+    space: {
+      type: Object as PropType<SpaceResource>,
+      required: false,
+      default: null
     }
   },
   emits: ['fileClick', 'rowMounted'],
@@ -111,7 +116,11 @@ export default defineComponent({
     })
 
     const resourceRouteResolver = useResourceRouteResolver(
-      { spaces, targetRouteCallback: computed(() => props.targetRouteCallback) },
+      {
+        space: ref(props.space),
+        spaces,
+        targetRouteCallback: computed(() => props.targetRouteCallback)
+      },
       context
     )
 
diff --git a/packages/web-app-files/src/helpers/breadcrumbs.ts b/packages/web-app-files/src/helpers/breadcrumbs.ts
index e2f5587f304..d541e81bfb6 100644
--- a/packages/web-app-files/src/helpers/breadcrumbs.ts
+++ b/packages/web-app-files/src/helpers/breadcrumbs.ts
@@ -1,10 +1,10 @@
 import { eventBus } from 'web-pkg/src/services/eventBus'
-import { RouteLocation } from 'vue-router'
+import { RouteLocation, RouteLocationRaw } from 'vue-router'
 import omit from 'lodash-es/omit'
 
 export interface BreadcrumbItem {
   text: string
-  to?: RouteLocation
+  to?: RouteLocationRaw
   allowContextActions?: boolean
   onClick?: () => void
 }
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index e1f5b3fc34f..90d69526517 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -50,6 +50,7 @@
           class="oc-px-m oc-pt-l"
           tile-width="small"
           :target-route-callback="resourceTargetRouteCallback"
+          :space="space"
           @rowMounted="rowMounted"
           @fileClick="$_fileActions_triggerDefaultAction"
         >
@@ -140,7 +141,7 @@ import {
   onMounted,
   unref
 } from 'vue'
-import { Location } from 'vue-router'
+import { RouteLocationNamedRaw } from 'vue-router'
 import { mapGetters, mapState, mapActions, mapMutations, useStore } from 'vuex'
 import { useGettext } from 'vue3-gettext'
 import { Resource } from 'web-client'
@@ -231,7 +232,10 @@ export default defineComponent({
     const store = useStore()
     let loadResourcesEventToken
 
-    const resourceTargetRouteCallback = ({ path, fileId }: CreateTargetRouteOptions): Location => {
+    const resourceTargetRouteCallback = ({
+      path,
+      fileId
+    }: CreateTargetRouteOptions): RouteLocationNamedRaw => {
       const { params, query } = createFileRouteOptions(props.space, { path, fileId })
       if (isPublicSpaceResource(props.space)) {
         return createLocationPublic('files-public-link', { params, query })
diff --git a/tests/e2e/support/objects/app-files/resource/actions.ts b/tests/e2e/support/objects/app-files/resource/actions.ts
index ec2af611992..767a1de974e 100644
--- a/tests/e2e/support/objects/app-files/resource/actions.ts
+++ b/tests/e2e/support/objects/app-files/resource/actions.ts
@@ -72,8 +72,6 @@ export const clickResource = async ({
 }): Promise<void> => {
   const paths = path.split('/')
   for (const name of paths) {
-    // const isTiles = await getTilesVisibility(page)
-    // console.log(isTiles)
     const resource = await page.locator(util.format(resourceNameSelector, name))
     const itemId = await resource.locator(fileRow).getAttribute('data-item-id')
     await Promise.all([
@@ -83,8 +81,7 @@ export const clickResource = async ({
       )
     ])
 
-    // toDo: remove me
-    // @jannik: please have a look here what we can wait for to be sure that it's there
+    // TODO: Refactor so the line below becomes unnecessary
     await new Promise((resolve) => setTimeout(resolve, 250))
   }
 }