From d6303596de0ef473c5ddbcff6a422a419b317f7a Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 16 May 2023 11:11:50 +0200
Subject: [PATCH 01/30] WIP

---
 .../components/OcBreadcrumb/OcBreadcrumb.vue  | 104 +++++++++++++-----
 .../design-system/src/helpers/constants.ts    |   1 +
 .../src/components/AppBar/AppBar.vue          |  19 +++-
 .../src/views/spaces/GenericSpace.vue         |   2 +
 4 files changed, 94 insertions(+), 32 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index e14c7c84a45..cb49bc2c41d 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -12,11 +12,13 @@
           'oc-flex',
           'oc-flex-middle',
           {
-            'oc-invisible-sr':
+            'oc-hidden':
               hiddenItems.indexOf(item) !== -1 ||
-              (item.isTruncationPlaceholder && hiddenItems.length === 0)
+              (item.isPreviousHiddenFolder && hiddenItems.length === 0)
           }
         ]"
+        @dragover="dragOver($event)"
+        @drop="dropRowEvent(item.to)"
       >
         <router-link
           v-if="item.to"
@@ -95,10 +97,24 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, nextTick, PropType, ref, unref, watch } from 'vue'
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  PropType,
+  ref,
+  unref,
+  watch
+} from 'vue'
 import { useGettext } from 'vue3-gettext'
 
-import { AVAILABLE_SIZES } from '../../helpers/constants'
+import {
+  AVAILABLE_SIZES,
+  EVENT_ITEM_DROPPED,
+  EVENT_ITEM_DROPPED_BREADCRUMB
+} from '../../helpers/constants'
 
 import OcButton from '../OcButton/OcButton.vue'
 import OcDrop from '../OcDrop/OcDrop.vue'
@@ -190,35 +206,43 @@ export default defineComponent({
       default: false
     }
   },
-  setup(props) {
+  emits: [EVENT_ITEM_DROPPED_BREADCRUMB],
+  setup(props, { emit }) {
     const { $gettext } = useGettext()
-    const visibleItems = ref<BreadcrumbItem[]>([])
-    const hiddenItems = ref<BreadcrumbItem[]>([])
-    const displayItems = ref<BreadcrumbItem[]>(props.items.slice())
+    const visibleItems = ref([])
+    const hiddenItems = ref([])
+    const displayItems = ref(props.items.slice())
 
-    const getBreadcrumbElement = (id): HTMLElement => {
-      return document.querySelector(`.oc-breadcrumb-list [data-item-id="${id}"]`)
+    const getBreadcrumbElement = (key): HTMLElement => {
+      return document.querySelector(`[data-key="${key}"]`)
+    }
+
+    const dragOver = (event) => {
+      event.preventDefault()
+    }
+
+    const dropRowEvent = (item) => {
+      emit(EVENT_ITEM_DROPPED_BREADCRUMB, item)
     }
 
     const calculateTotalBreadcrumbWidth = () => {
-      let totalBreadcrumbWidth = 100 // 100px margin to the right to avoid breadcrumb from getting too close to the controls
-      visibleItems.value.forEach((item) => {
-        const breadcrumbElement = getBreadcrumbElement(item.id)
-        const itemClientWidth = breadcrumbElement?.getBoundingClientRect()?.width || 0
-        totalBreadcrumbWidth += itemClientWidth
+      let totalBreadcrumbWidth = 0
+      visibleItems.value.forEach((item, index) => {
+        const breadcrumbElement = getBreadcrumbElement(index)
+        const itemClientWidth = breadcrumbElement?.offsetWidth + 10
+        const itemWidth = itemClientWidth
+        totalBreadcrumbWidth += itemWidth
       })
       return totalBreadcrumbWidth
     }
 
     const reduceBreadcrumb = (offsetIndex) => {
       const breadcrumbMaxWidth = props.maxWidth
-      if (!breadcrumbMaxWidth) {
-        return
-      }
+      document.getElementById(props.id)?.style.setProperty('--max-width', `${breadcrumbMaxWidth}px`)
       const totalBreadcrumbWidth = calculateTotalBreadcrumbWidth()
 
       const isOverflowing = breadcrumbMaxWidth < totalBreadcrumbWidth
-      if (!isOverflowing || visibleItems.value.length <= props.truncationOffset + 1) {
+      if (!isOverflowing || visibleItems.value.length <= 3) {
         return
       }
       // Remove from the left side
@@ -228,29 +252,47 @@ export default defineComponent({
       reduceBreadcrumb(offsetIndex)
     }
 
-    const lastHiddenItem = computed(() =>
-      hiddenItems.value.length >= 1 ? unref(hiddenItems)[unref(hiddenItems).length - 1] : { to: {} }
-    )
+    const lastHiddenItem = computed(() => {
+      if (hiddenItems.value.length >= 1) {
+        return unref(hiddenItems)[unref(hiddenItems).length - 1]
+      }
+      return { to: {} }
+    })
 
     const renderBreadcrumb = () => {
-      displayItems.value = [...props.items]
-      if (displayItems.value.length > props.truncationOffset - 1) {
-        displayItems.value.splice(props.truncationOffset - 1, 0, {
+      displayItems.value = props.items.slice()
+      if (displayItems.value.length > 1) {
+        displayItems.value.splice(1, 0, {
           text: '...',
           allowContextActions: false,
           to: {},
-          isTruncationPlaceholder: true
+          isPreviousHiddenFolder: true
         })
       }
-      visibleItems.value = [...displayItems.value]
+      visibleItems.value = displayItems.value.slice()
       hiddenItems.value = []
 
       nextTick(() => {
-        reduceBreadcrumb(props.truncationOffset)
+        reduceBreadcrumb(2)
       })
     }
 
-    watch([() => props.maxWidth, () => props.items], renderBreadcrumb, { immediate: true })
+    watch(
+      () => props.maxWidth,
+      () => renderBreadcrumb()
+    )
+    watch(
+      () => props.items,
+      () => renderBreadcrumb()
+    )
+    onMounted(() => {
+      renderBreadcrumb()
+      window.addEventListener('resize', renderBreadcrumb)
+    })
+
+    onBeforeUnmount(() => {
+      window.removeEventListener('resize', renderBreadcrumb)
+    })
 
     const currentFolder = computed<BreadcrumbItem>(() => {
       if (props.items.length === 0 || !props.items) {
@@ -279,7 +321,9 @@ export default defineComponent({
       hiddenItems,
       renderBreadcrumb,
       displayItems,
-      lastHiddenItem
+      lastHiddenItem,
+      dropRowEvent,
+      dragOver
     }
   }
 })
diff --git a/packages/design-system/src/helpers/constants.ts b/packages/design-system/src/helpers/constants.ts
index 97974fff559..abc3071d72d 100644
--- a/packages/design-system/src/helpers/constants.ts
+++ b/packages/design-system/src/helpers/constants.ts
@@ -3,6 +3,7 @@ export const EVENT_TROW_CLICKED = 'highlight' as const
 export const EVENT_TROW_MOUNTED = 'rowMounted' as const
 export const EVENT_TROW_CONTEXTMENU = 'contextmenuClicked' as const
 export const EVENT_ITEM_DROPPED = 'itemDropped' as const
+export const EVENT_ITEM_DROPPED_BREADCRUMB = 'itemDroppedBreadcrumb' as const
 export const EVENT_ITEM_DRAGGED = 'itemDragged' as const
 export const EVENT_FILE_DROPPED = 'fileDropped' as const
 export const EVENT_SORT = 'sort' as const
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index ce601b0f60d..5882244392b 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -70,6 +70,7 @@ import { computed, defineComponent, inject, PropType, ref, Ref, unref } from 'vu
 import { mapGetters, mapState, mapMutations } from 'vuex'
 import { Resource } from 'web-client'
 import {
+  buildResource,
   isPersonalSpaceResource,
   isProjectSpaceResource,
   isShareSpaceResource,
@@ -94,9 +95,11 @@ import {
   useFileActionsMove,
   useFileActionsRestore
 } from 'web-app-files/src/composables/actions'
-import { useRouter, useStore } from 'web-pkg/src'
+import { useClientService, useRouter, useStore } from 'web-pkg/src'
 import { BreadcrumbItem } from 'design-system/src/components/OcBreadcrumb/types'
 import { useActiveLocation } from 'web-app-files/src/composables'
+import { WebDAV } from 'web-client/src/webdav'
+import { EVENT_ITEM_DROPPED } from 'design-system/src/helpers'
 
 export default defineComponent({
   components: {
@@ -137,6 +140,7 @@ export default defineComponent({
   setup(props) {
     const store = useStore()
     const router = useRouter()
+    const clientService = useClientService()
 
     const { actions: acceptShareActions } = useFileActionsAcceptShare({ store })
     const { actions: clearSelectionActions } = useFileActionsClearSelection({ store })
@@ -200,13 +204,24 @@ export default defineComponent({
         ? 3
         : 2
     })
+    const fileDroppedBreadcrumb = (data) => {
+      console.log(data)
+      const t = (clientService.webdav as WebDAV)
+        .getFileInfo(props.space, {
+          path: decodeURIComponent(data.path.replace('/files/spaces/personal/admin/', ''))
+        })
+        .then((targetResource) => {
+          emit(EVENT_ITEM_DROPPED, targetResource.fileId)
+        })
+    }
 
     return {
       batchActions,
       showBreadcrumb,
       showMobileNav,
       breadcrumbMaxWidth,
-      breadcrumbTruncationOffset
+      breadcrumbTruncationOffset,
+      fileDroppedBreadcrumb
     }
   },
   data: function () {
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 4380fe19191..a121c4e12d3 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -13,6 +13,7 @@
         :side-bar-open="sideBarOpen"
         :space="space"
         :view-modes="viewModes"
+        @item-dropped="fileDropped"
       >
         <template #actions="{ limitedScreenSpace }">
           <create-and-upload
@@ -553,6 +554,7 @@ export default defineComponent({
     ...mapMutations('Files', ['REMOVE_FILES', 'REMOVE_FILES_FROM_SEARCHED', 'RESET_SELECTION']),
 
     async fileDropped(fileIdTarget) {
+      alert(fileIdTarget)
       const selected = [...this.selectedResources]
       const targetFolder = this.paginatedResources.find((e) => e.id === fileIdTarget)
       const isTargetSelected = selected.some((e) => e.id === fileIdTarget)

From 316bf860b47741522383f5f903c232227e0c6bc4 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 16 May 2023 12:00:03 +0200
Subject: [PATCH 02/30] WIP

---
 packages/web-app-files/src/components/AppBar/AppBar.vue  | 2 +-
 packages/web-app-files/src/views/spaces/GenericSpace.vue | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 5882244392b..aea382526bc 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -211,7 +211,7 @@ export default defineComponent({
           path: decodeURIComponent(data.path.replace('/files/spaces/personal/admin/', ''))
         })
         .then((targetResource) => {
-          emit(EVENT_ITEM_DROPPED, targetResource.fileId)
+          emit(EVENT_ITEM_DROPPED, targetResource)
         })
     }
 
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index a121c4e12d3..c96437f8800 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -555,9 +555,12 @@ export default defineComponent({
 
     async fileDropped(fileIdTarget) {
       alert(fileIdTarget)
+      if (typeof param === 'string' || param instanceof Object) {
       const selected = [...this.selectedResources]
       const targetFolder = this.paginatedResources.find((e) => e.id === fileIdTarget)
+      if(!targetFolder)
       const isTargetSelected = selected.some((e) => e.id === fileIdTarget)
+      console.log('targetFolder', targetFolder)
       if (isTargetSelected) {
         return
       }

From 07dc25faf51838543ac31c9818b26965ee5091e2 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 16 May 2023 13:55:53 +0200
Subject: [PATCH 03/30] Moving folders works

---
 .../src/views/spaces/GenericSpace.vue         | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index c96437f8800..61d0f1b32a7 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -553,15 +553,19 @@ export default defineComponent({
     ...mapActions(['showMessage', 'createModal', 'hideModal']),
     ...mapMutations('Files', ['REMOVE_FILES', 'REMOVE_FILES_FROM_SEARCHED', 'RESET_SELECTION']),
 
-    async fileDropped(fileIdTarget) {
-      alert(fileIdTarget)
-      if (typeof param === 'string' || param instanceof Object) {
+    async fileDropped(fileTarget) {
       const selected = [...this.selectedResources]
-      const targetFolder = this.paginatedResources.find((e) => e.id === fileIdTarget)
-      if(!targetFolder)
-      const isTargetSelected = selected.some((e) => e.id === fileIdTarget)
-      console.log('targetFolder', targetFolder)
-      if (isTargetSelected) {
+      let targetFolder = null
+      if (typeof fileTarget === 'string') {
+        targetFolder = this.paginatedResources.find((e) => e.id === fileTarget)
+        const isTargetSelected = selected.some((e) => e.id === fileTarget)
+        if (isTargetSelected) {
+          return
+        }
+      } else if (fileTarget instanceof Object) {
+        targetFolder = fileTarget
+      }
+      if (!targetFolder) {
         return
       }
       if (targetFolder.type !== 'folder') {

From 1c13e2f97f3c89fb82f4d5c920cb1b6d434a4a35 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 16 May 2023 14:56:32 +0200
Subject: [PATCH 04/30] Refactor breadcrumb dropped method

---
 .../src/components/AppBar/AppBar.vue           | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index aea382526bc..3aa0f1f38f3 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -77,7 +77,7 @@ import {
   SpaceResource
 } from 'web-client/src/helpers'
 import BatchActions from 'web-pkg/src/components/BatchActions.vue'
-import { isLocationTrashActive } from '../../router'
+import { createLocationSpaces, isLocationTrashActive } from '../../router'
 import ContextActions from '../FilesList/ContextActions.vue'
 import SharesNavigation from './SharesNavigation.vue'
 import SidebarToggle from './SidebarToggle.vue'
@@ -205,10 +205,20 @@ export default defineComponent({
         : 2
     })
     const fileDroppedBreadcrumb = (data) => {
-      console.log(data)
-      const t = (clientService.webdav as WebDAV)
+      const spaceRootRoutePath = router.resolve(
+        createLocationSpaces('files-spaces-generic', {
+          params: {
+            driveAliasAndItem: props.space.driveAlias
+          }
+        })
+      ).path
+
+      const splitIndex = data.path.indexOf(spaceRootRoutePath) + spaceRootRoutePath.length
+      const path = decodeURIComponent(data.path.slice(splitIndex, data.path.length))
+
+      clientService.webdav
         .getFileInfo(props.space, {
-          path: decodeURIComponent(data.path.replace('/files/spaces/personal/admin/', ''))
+          path
         })
         .then((targetResource) => {
           emit(EVENT_ITEM_DROPPED, targetResource)

From 1b7034467deaa28d6afceaf7472d1f2f95d00494 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 16 May 2023 15:34:37 +0200
Subject: [PATCH 05/30] Implement drop hover effect

---
 .../components/OcBreadcrumb/OcBreadcrumb.vue  | 31 ++++++++++++++++---
 .../src/components/AppBar/AppBar.vue          |  2 --
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index cb49bc2c41d..9784d36c55a 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -18,7 +18,10 @@
           }
         ]"
         @dragover="dragOver($event)"
-        @drop="dropRowEvent(item.to)"
+        @dragenter.prevent="dropItemStyling(index, false, $event)"
+        @dragleave.prevent="dropItemStyling(index, true, $event)"
+        @mouseleave="dropItemStyling(index, true, $event)"
+        @drop="dropItemEvent(item.to)"
       >
         <router-link
           v-if="item.to"
@@ -221,7 +224,7 @@ export default defineComponent({
       event.preventDefault()
     }
 
-    const dropRowEvent = (item) => {
+    const dropItemEvent = (item) => {
       emit(EVENT_ITEM_DROPPED_BREADCRUMB, item)
     }
 
@@ -312,6 +315,18 @@ export default defineComponent({
       return props.items.length - 1 === index ? 'page' : null
     }
 
+    const dropItemStyling = (key, leaving, event) => {
+      const hasFilePayload = (event.dataTransfer?.types || []).some((e) => e === 'Files')
+      if (hasFilePayload) return
+      if (event.currentTarget?.contains(event.relatedTarget)) {
+        return
+      }
+
+      const classList = getBreadcrumbElement(key).children[0].classList
+      const className = 'testclass'
+      leaving ? classList.remove(className) : classList.add(className)
+    }
+
     return {
       currentFolder,
       parentFolderTo,
@@ -322,14 +337,22 @@ export default defineComponent({
       renderBreadcrumb,
       displayItems,
       lastHiddenItem,
-      dropRowEvent,
-      dragOver
+      dropItemEvent,
+      dragOver,
+      dropItemStyling
     }
   }
 })
 </script>
 
 <style lang="scss">
+.testclass {
+  background-color: var(--oc-color-background-highlight);
+  border: 5px solid var(--oc-color-background-highlight);
+  border-top-width: 2px;
+  border-bottom-width: 2px;
+  border-radius: 5px;
+}
 .oc-breadcrumb {
   overflow: hidden;
   &-item-text {
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 3aa0f1f38f3..f46322ecbe2 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -70,7 +70,6 @@ import { computed, defineComponent, inject, PropType, ref, Ref, unref } from 'vu
 import { mapGetters, mapState, mapMutations } from 'vuex'
 import { Resource } from 'web-client'
 import {
-  buildResource,
   isPersonalSpaceResource,
   isProjectSpaceResource,
   isShareSpaceResource,
@@ -98,7 +97,6 @@ import {
 import { useClientService, useRouter, useStore } from 'web-pkg/src'
 import { BreadcrumbItem } from 'design-system/src/components/OcBreadcrumb/types'
 import { useActiveLocation } from 'web-app-files/src/composables'
-import { WebDAV } from 'web-client/src/webdav'
 import { EVENT_ITEM_DROPPED } from 'design-system/src/helpers'
 
 export default defineComponent({

From b31887f425d996024dd7db0d10a8028938aebcb3 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 17 May 2023 10:13:31 +0200
Subject: [PATCH 06/30] Implement edge case error handling: same folder name

---
 .../components/OcBreadcrumb/OcBreadcrumb.vue  |  1 +
 .../src/helpers/resource/actions/transfer.ts  | 22 ++++++++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 9784d36c55a..e9b05c33298 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -347,6 +347,7 @@ export default defineComponent({
 
 <style lang="scss">
 .testclass {
+  transition: background 0.06s, border 0s 0.08s, border-color 0s, border-width 0.06s;
   background-color: var(--oc-color-background-highlight);
   border: 5px solid var(--oc-color-background-highlight);
   border-top-width: 2px;
diff --git a/packages/web-app-files/src/helpers/resource/actions/transfer.ts b/packages/web-app-files/src/helpers/resource/actions/transfer.ts
index f6161402e7e..ece4743470d 100644
--- a/packages/web-app-files/src/helpers/resource/actions/transfer.ts
+++ b/packages/web-app-files/src/helpers/resource/actions/transfer.ts
@@ -1,5 +1,5 @@
 import { Resource } from 'web-client'
-import { join } from 'path'
+import { basename, dirname, join } from 'path'
 import { SpaceResource } from 'web-client/src/helpers'
 import { ClientService, LoadingService, LoadingTaskCallbackArguments } from 'web-pkg/src/services'
 import {
@@ -96,6 +96,11 @@ export class ResourceTransfer extends ConflictDialog {
   }
 
   async perform(transferType: TransferType): Promise<Resource[]> {
+    // TODO: Check if parent resource still exists after moving
+    // One check before and one after moving
+    const parentDirPath = dirname(this.resourcesToMove[0].path)
+    const targetPath = this.targetFolder.path
+    console.log()
     if (this.hasRecursion()) {
       this.showRecursionErrorMessage()
       return []
@@ -128,6 +133,16 @@ export class ResourceTransfer extends ConflictDialog {
     )
   }
 
+  // This is for an edge case if an user moves a subfolder with the same name as the parent folder into the parent of the parent folder (which is not possible because of the backend)
+  private isOverwritingParentFolder(resource, targetFolder, targetFolderResources) {
+    if (resource.type !== 'folder') {
+      return
+    }
+    const folderName = basename(resource.path)
+    const newPath = join(targetFolder.path, folderName)
+    return targetFolderResources.some((resource) => resource.path === newPath)
+  }
+
   private async moveResources(
     resolvedConflicts: FileConflict[],
     targetFolderResources: Resource[],
@@ -140,6 +155,7 @@ export class ResourceTransfer extends ConflictDialog {
     for (let [i, resource] of this.resourcesToMove.entries()) {
       // shallow copy of resources to prevent modifying existing rows
       resource = { ...resource }
+
       const hasConflict = resolvedConflicts.some((e) => e.resource.id === resource.id)
       let targetName = resource.name
       let overwriteTarget = false
@@ -151,6 +167,10 @@ export class ResourceTransfer extends ConflictDialog {
           continue
         }
         if (resolveStrategy === ResolveStrategy.REPLACE) {
+          if (this.isOverwritingParentFolder(resource, this.targetFolder, targetFolderResources)) {
+            errors.push({ resourceName: resource.name })
+            continue
+          }
           overwriteTarget = true
         }
         if (resolveStrategy === ResolveStrategy.KEEP_BOTH) {

From 9d3f042cfca9a0ea4d5b437f40d4071d26940b01 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 17 May 2023 10:14:35 +0200
Subject: [PATCH 07/30] Remove dev leftover

---
 .../web-app-files/src/helpers/resource/actions/transfer.ts   | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/web-app-files/src/helpers/resource/actions/transfer.ts b/packages/web-app-files/src/helpers/resource/actions/transfer.ts
index ece4743470d..36fffdb180e 100644
--- a/packages/web-app-files/src/helpers/resource/actions/transfer.ts
+++ b/packages/web-app-files/src/helpers/resource/actions/transfer.ts
@@ -96,11 +96,6 @@ export class ResourceTransfer extends ConflictDialog {
   }
 
   async perform(transferType: TransferType): Promise<Resource[]> {
-    // TODO: Check if parent resource still exists after moving
-    // One check before and one after moving
-    const parentDirPath = dirname(this.resourcesToMove[0].path)
-    const targetPath = this.targetFolder.path
-    console.log()
     if (this.hasRecursion()) {
       this.showRecursionErrorMessage()
       return []

From a4e332a73c0bde8f0c76fb4273b34401a9d1ddf9 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 17 May 2023 10:50:49 +0200
Subject: [PATCH 08/30] Implement experimental styling

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue             | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index e9b05c33298..d7025d4495d 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -355,6 +355,11 @@ export default defineComponent({
   border-radius: 5px;
 }
 .oc-breadcrumb {
+  background: rgba(180, 180, 180, 0.1);
+  padding: 2px;
+  padding-left: 10px;
+  padding-right: 10px;
+  border-radius: 5px;
   overflow: hidden;
   &-item-text {
     max-width: 200px;

From 2bde9190239bb0528eb66debe766852200f8dc3f Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 17 May 2023 11:24:11 +0200
Subject: [PATCH 09/30] remove border, undo experimental breadcrumb styling

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue         | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index d7025d4495d..80d186062b7 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -349,17 +349,10 @@ export default defineComponent({
 .testclass {
   transition: background 0.06s, border 0s 0.08s, border-color 0s, border-width 0.06s;
   background-color: var(--oc-color-background-highlight);
-  border: 5px solid var(--oc-color-background-highlight);
-  border-top-width: 2px;
-  border-bottom-width: 2px;
+  box-shadow: 0 0 0 5px var(--oc-color-background-highlight);
   border-radius: 5px;
 }
 .oc-breadcrumb {
-  background: rgba(180, 180, 180, 0.1);
-  padding: 2px;
-  padding-left: 10px;
-  padding-right: 10px;
-  border-radius: 5px;
   overflow: hidden;
   &-item-text {
     max-width: 200px;

From 28f7bfb18871900c7a85cfa49375ca7cc42ce782 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 17 May 2023 11:32:09 +0200
Subject: [PATCH 10/30] Make drop on root work

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue      | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 80d186062b7..f73522ab2ed 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -21,7 +21,7 @@
         @dragenter.prevent="dropItemStyling(index, false, $event)"
         @dragleave.prevent="dropItemStyling(index, true, $event)"
         @mouseleave="dropItemStyling(index, true, $event)"
-        @drop="dropItemEvent(item.to)"
+        @drop="dropItemEvent(item.to, index)"
       >
         <router-link
           v-if="item.to"
@@ -224,7 +224,11 @@ export default defineComponent({
       event.preventDefault()
     }
 
-    const dropItemEvent = (item) => {
+    const dropItemEvent = (item, index) => {
+      if (index === unref(displayItems).length - 1) {
+        return
+      }
+      item.path = item.path ? item.path : '/'
       emit(EVENT_ITEM_DROPPED_BREADCRUMB, item)
     }
 
@@ -316,6 +320,9 @@ export default defineComponent({
     }
 
     const dropItemStyling = (key, leaving, event) => {
+      if (key === unref(displayItems).length - 1) {
+        return
+      }
       const hasFilePayload = (event.dataTransfer?.types || []).some((e) => e === 'Files')
       if (hasFilePayload) return
       if (event.currentTarget?.contains(event.relatedTarget)) {

From 5949692bf8e53123ad5eeec5ab5d6a8c26515d47 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 17 May 2023 12:06:03 +0200
Subject: [PATCH 11/30] Add unittests for edge case

---
 .../src/helpers/resource/actions/transfer.ts  |  4 +-
 .../resource/resourcesTransfer.spec.ts        | 40 ++++++++++++++++++-
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-files/src/helpers/resource/actions/transfer.ts b/packages/web-app-files/src/helpers/resource/actions/transfer.ts
index 36fffdb180e..48fb1b8a08a 100644
--- a/packages/web-app-files/src/helpers/resource/actions/transfer.ts
+++ b/packages/web-app-files/src/helpers/resource/actions/transfer.ts
@@ -129,9 +129,9 @@ export class ResourceTransfer extends ConflictDialog {
   }
 
   // This is for an edge case if an user moves a subfolder with the same name as the parent folder into the parent of the parent folder (which is not possible because of the backend)
-  private isOverwritingParentFolder(resource, targetFolder, targetFolderResources) {
+  public isOverwritingParentFolder(resource, targetFolder, targetFolderResources) {
     if (resource.type !== 'folder') {
-      return
+      return false
     }
     const folderName = basename(resource.path)
     const newPath = join(targetFolder.path, folderName)
diff --git a/packages/web-app-files/tests/unit/helpers/resource/resourcesTransfer.spec.ts b/packages/web-app-files/tests/unit/helpers/resource/resourcesTransfer.spec.ts
index 5f501a0ae70..0dae7862a73 100644
--- a/packages/web-app-files/tests/unit/helpers/resource/resourcesTransfer.spec.ts
+++ b/packages/web-app-files/tests/unit/helpers/resource/resourcesTransfer.spec.ts
@@ -27,7 +27,8 @@ describe('resourcesTransfer', () => {
       {
         id: 'a',
         name: 'a',
-        path: '/a'
+        path: '/a',
+        type: 'folder'
       },
       {
         id: 'b',
@@ -149,4 +150,41 @@ describe('resourcesTransfer', () => {
 
     expect(resourcesTransfer.resolveFileExists).toHaveBeenCalled()
   })
+  it('should show error message if trying to overwrite parent', async () => {
+    const targetFolderItems = [
+      {
+        id: 'a',
+        path: 'target/a',
+        webDavPath: '/target/a',
+        name: '/target/a'
+      }
+    ]
+    const resourcesTransfer = new ResourceTransfer(
+      sourceSpace,
+      resourcesToMove,
+      targetSpace,
+      resourcesToMove[0],
+      clientServiceMock,
+      loadingServiceMock,
+      jest.fn(),
+      jest.fn(),
+      jest.fn(),
+      jest.fn(),
+      jest.fn(),
+      jest.fn()
+    )
+    const namingClash = await resourcesTransfer.isOverwritingParentFolder(
+      resourcesToMove[0],
+      targetFolder,
+      targetFolderItems
+    )
+    const noNamingClash = await resourcesTransfer.isOverwritingParentFolder(
+      resourcesToMove[1],
+      targetFolder,
+      targetFolderItems
+    )
+
+    expect(namingClash).toBeTruthy()
+    expect(noNamingClash).toBeFalsy()
+  })
 })

From 77a1fa1e7ef61a52c8dad5c6d6d1ba418e614a74 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 26 May 2023 10:06:12 +0200
Subject: [PATCH 12/30] Fix rebase errors

---
 .../components/OcBreadcrumb/OcBreadcrumb.vue  | 63 ++++++++-----------
 1 file changed, 26 insertions(+), 37 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index f73522ab2ed..50126a433e1 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -12,9 +12,9 @@
           'oc-flex',
           'oc-flex-middle',
           {
-            'oc-hidden':
+            'oc-invisible-sr':
               hiddenItems.indexOf(item) !== -1 ||
-              (item.isPreviousHiddenFolder && hiddenItems.length === 0)
+              (item.isTruncationPlaceholder && hiddenItems.length === 0)
           }
         ]"
         @dragover="dragOver($event)"
@@ -212,12 +212,12 @@ export default defineComponent({
   emits: [EVENT_ITEM_DROPPED_BREADCRUMB],
   setup(props, { emit }) {
     const { $gettext } = useGettext()
-    const visibleItems = ref([])
-    const hiddenItems = ref([])
-    const displayItems = ref(props.items.slice())
+    const visibleItems = ref<BreadcrumbItem[]>([])
+    const hiddenItems = ref<BreadcrumbItem[]>([])
+    const displayItems = ref<BreadcrumbItem[]>(props.items.slice())
 
-    const getBreadcrumbElement = (key): HTMLElement => {
-      return document.querySelector(`[data-key="${key}"]`)
+    const getBreadcrumbElement = (id): HTMLElement => {
+      return document.querySelector(`.oc-breadcrumb-list [data-item-id="${id}"]`)
     }
 
     const dragOver = (event) => {
@@ -233,23 +233,24 @@ export default defineComponent({
     }
 
     const calculateTotalBreadcrumbWidth = () => {
-      let totalBreadcrumbWidth = 0
-      visibleItems.value.forEach((item, index) => {
-        const breadcrumbElement = getBreadcrumbElement(index)
-        const itemClientWidth = breadcrumbElement?.offsetWidth + 10
-        const itemWidth = itemClientWidth
-        totalBreadcrumbWidth += itemWidth
+      let totalBreadcrumbWidth = 100 // 100px margin to the right to avoid breadcrumb from getting too close to the controls
+      visibleItems.value.forEach((item) => {
+        const breadcrumbElement = getBreadcrumbElement(item.id)
+        const itemClientWidth = breadcrumbElement?.getBoundingClientRect()?.width || 0
+        totalBreadcrumbWidth += itemClientWidth
       })
       return totalBreadcrumbWidth
     }
 
     const reduceBreadcrumb = (offsetIndex) => {
       const breadcrumbMaxWidth = props.maxWidth
-      document.getElementById(props.id)?.style.setProperty('--max-width', `${breadcrumbMaxWidth}px`)
+      if (!breadcrumbMaxWidth) {
+        return
+      }
       const totalBreadcrumbWidth = calculateTotalBreadcrumbWidth()
 
       const isOverflowing = breadcrumbMaxWidth < totalBreadcrumbWidth
-      if (!isOverflowing || visibleItems.value.length <= 3) {
+      if (!isOverflowing || visibleItems.value.length <= props.truncationOffset + 1) {
         return
       }
       // Remove from the left side
@@ -259,41 +260,29 @@ export default defineComponent({
       reduceBreadcrumb(offsetIndex)
     }
 
-    const lastHiddenItem = computed(() => {
-      if (hiddenItems.value.length >= 1) {
-        return unref(hiddenItems)[unref(hiddenItems).length - 1]
-      }
-      return { to: {} }
-    })
+    const lastHiddenItem = computed(() =>
+      hiddenItems.value.length >= 1 ? unref(hiddenItems)[unref(hiddenItems).length - 1] : { to: {} }
+    )
 
     const renderBreadcrumb = () => {
-      displayItems.value = props.items.slice()
-      if (displayItems.value.length > 1) {
-        displayItems.value.splice(1, 0, {
+      displayItems.value = [...props.items]
+      if (displayItems.value.length > props.truncationOffset - 1) {
+        displayItems.value.splice(props.truncationOffset - 1, 0, {
           text: '...',
           allowContextActions: false,
           to: {},
-          isPreviousHiddenFolder: true
+          isTruncationPlaceholder: true
         })
       }
-      visibleItems.value = displayItems.value.slice()
+      visibleItems.value = [...displayItems.value]
       hiddenItems.value = []
-
       nextTick(() => {
-        reduceBreadcrumb(2)
+        reduceBreadcrumb(props.truncationOffset)
       })
     }
 
-    watch(
-      () => props.maxWidth,
-      () => renderBreadcrumb()
-    )
-    watch(
-      () => props.items,
-      () => renderBreadcrumb()
-    )
+    watch([() => props.maxWidth, () => props.items], renderBreadcrumb, { immediate: true })
     onMounted(() => {
-      renderBreadcrumb()
       window.addEventListener('resize', renderBreadcrumb)
     })
 

From 31b2819e949087d7879cd2bab908d66e847f845a Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 26 May 2023 10:31:06 +0200
Subject: [PATCH 13/30] Fix rebase issues

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue           | 7 ++++---
 packages/web-app-files/src/components/AppBar/AppBar.vue    | 3 ++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 50126a433e1..1a48d1fcecc 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -18,9 +18,9 @@
           }
         ]"
         @dragover="dragOver($event)"
-        @dragenter.prevent="dropItemStyling(index, false, $event)"
-        @dragleave.prevent="dropItemStyling(index, true, $event)"
-        @mouseleave="dropItemStyling(index, true, $event)"
+        @dragenter.prevent="dropItemStyling(item.id, false, $event)"
+        @dragleave.prevent="dropItemStyling(item.id, true, $event)"
+        @mouseleave="dropItemStyling(item.id, true, $event)"
         @drop="dropItemEvent(item.to, index)"
       >
         <router-link
@@ -225,6 +225,7 @@ export default defineComponent({
     }
 
     const dropItemEvent = (item, index) => {
+      console.log(item, index)
       if (index === unref(displayItems).length - 1) {
         return
       }
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index f46322ecbe2..0320968c805 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -20,6 +20,7 @@
           :items="breadcrumbs"
           :max-width="breadcrumbMaxWidth"
           :truncation-offset="breadcrumbTruncationOffset"
+          @item-dropped-breadcrumb="fileDroppedBreadcrumb"
         >
           <template #contextMenu>
             <context-actions
@@ -135,7 +136,7 @@ export default defineComponent({
       default: null
     }
   },
-  setup(props) {
+  setup(props, { emit }) {
     const store = useStore()
     const router = useRouter()
     const clientService = useClientService()

From 92c42c930b5c4fd38473dd2659c4e8a4e3141e48 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 26 May 2023 10:34:05 +0200
Subject: [PATCH 14/30] Fix disable drag/drop on current folder

---
 .../components/OcBreadcrumb/OcBreadcrumb.vue  | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 1a48d1fcecc..2941061b30d 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -18,9 +18,9 @@
           }
         ]"
         @dragover="dragOver($event)"
-        @dragenter.prevent="dropItemStyling(item.id, false, $event)"
-        @dragleave.prevent="dropItemStyling(item.id, true, $event)"
-        @mouseleave="dropItemStyling(item.id, true, $event)"
+        @dragenter.prevent="dropItemStyling(item.id, index, false, $event)"
+        @dragleave.prevent="dropItemStyling(item.id, index, true, $event)"
+        @mouseleave="dropItemStyling(item.id, index, true, $event)"
         @drop="dropItemEvent(item.to, index)"
       >
         <router-link
@@ -113,11 +113,7 @@ import {
 } from 'vue'
 import { useGettext } from 'vue3-gettext'
 
-import {
-  AVAILABLE_SIZES,
-  EVENT_ITEM_DROPPED,
-  EVENT_ITEM_DROPPED_BREADCRUMB
-} from '../../helpers/constants'
+import { AVAILABLE_SIZES, EVENT_ITEM_DROPPED_BREADCRUMB } from '../../helpers/constants'
 
 import OcButton from '../OcButton/OcButton.vue'
 import OcDrop from '../OcDrop/OcDrop.vue'
@@ -225,7 +221,6 @@ export default defineComponent({
     }
 
     const dropItemEvent = (item, index) => {
-      console.log(item, index)
       if (index === unref(displayItems).length - 1) {
         return
       }
@@ -309,8 +304,8 @@ export default defineComponent({
       return props.items.length - 1 === index ? 'page' : null
     }
 
-    const dropItemStyling = (key, leaving, event) => {
-      if (key === unref(displayItems).length - 1) {
+    const dropItemStyling = (id, index, leaving, event) => {
+      if (index === unref(displayItems).length - 1) {
         return
       }
       const hasFilePayload = (event.dataTransfer?.types || []).some((e) => e === 'Files')
@@ -319,7 +314,7 @@ export default defineComponent({
         return
       }
 
-      const classList = getBreadcrumbElement(key).children[0].classList
+      const classList = getBreadcrumbElement(id).children[0].classList
       const className = 'testclass'
       leaving ? classList.remove(className) : classList.add(className)
     }

From 4527951ec2f9df22eaf716cf6ae6b8b62c23244e Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 26 May 2023 10:58:49 +0200
Subject: [PATCH 15/30] Remove unused import / linting

---
 packages/web-app-files/src/helpers/resource/actions/transfer.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/helpers/resource/actions/transfer.ts b/packages/web-app-files/src/helpers/resource/actions/transfer.ts
index 48fb1b8a08a..dc5848c7fed 100644
--- a/packages/web-app-files/src/helpers/resource/actions/transfer.ts
+++ b/packages/web-app-files/src/helpers/resource/actions/transfer.ts
@@ -1,5 +1,5 @@
 import { Resource } from 'web-client'
-import { basename, dirname, join } from 'path'
+import { basename, join } from 'path'
 import { SpaceResource } from 'web-client/src/helpers'
 import { ClientService, LoadingService, LoadingTaskCallbackArguments } from 'web-pkg/src/services'
 import {

From 5143c3c6762e002123a96fda600a7c03dde67c40 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 26 May 2023 11:49:56 +0200
Subject: [PATCH 16/30] Implement e2e tests

---
 .../cucumber/features/smoke/copyMove.feature  | 15 ++++++++----
 tests/e2e/cucumber/steps/ui/resources.ts      |  2 +-
 .../objects/app-files/resource/actions.ts     | 23 +++++++++++++++++++
 3 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/tests/e2e/cucumber/features/smoke/copyMove.feature b/tests/e2e/cucumber/features/smoke/copyMove.feature
index 666e06c88b4..fa3333b7d39 100644
--- a/tests/e2e/cucumber/features/smoke/copyMove.feature
+++ b/tests/e2e/cucumber/features/smoke/copyMove.feature
@@ -9,11 +9,12 @@ Feature: Copy
       | Alice |
     And "Alice" logs in
     And "Alice" creates the following folders in personal space using API
-      | name        |
-      | PARENTCopy1 |
-      | PARENTCopy2 |
-      | PARENTMove  |
-      | PARENTCopy3 |
+      | name              |
+      | PARENTCopy1       |
+      | PARENTCopy2       |
+      | PARENTMove        |
+      | PARENTCopy3       |
+      | PARENTCopy4/Child |
     And "Alice" creates the following files into personal space using API
       | pathToFile              | content                             |
       | PARENTCopy3/example.txt | example text                        |
@@ -43,4 +44,8 @@ Feature: Copy
     And "Alice" moves the following resource using sidebar-panel
       | resource    | to         |
       | PARENTCopy3 | PARENTMove |
+    And "Alice" opens folder "PARENTCopy4"
+    And "Alice" moves the following resource using drag-drop-breadcrumb
+      | resource | to       |
+      | Child    | Personal |
     And "Alice" logs out
diff --git a/tests/e2e/cucumber/steps/ui/resources.ts b/tests/e2e/cucumber/steps/ui/resources.ts
index 05f119edcf3..4de7deb015f 100644
--- a/tests/e2e/cucumber/steps/ui/resources.ts
+++ b/tests/e2e/cucumber/steps/ui/resources.ts
@@ -106,7 +106,7 @@ When(
 )
 
 When(
-  /^"([^"]*)" (copies|moves) the following resource(?:s)? using (keyboard|drag-drop|sidebar-panel|dropdown-menu)$/,
+  /^"([^"]*)" (copies|moves) the following resource(?:s)? using (keyboard|drag-drop|drag-drop-breadcrumb|sidebar-panel|dropdown-menu)$/,
   async function (
     this: World,
     stepUser: string,
diff --git a/tests/e2e/support/objects/app-files/resource/actions.ts b/tests/e2e/support/objects/app-files/resource/actions.ts
index 56bc6a74281..961a2343d7d 100644
--- a/tests/e2e/support/objects/app-files/resource/actions.ts
+++ b/tests/e2e/support/objects/app-files/resource/actions.ts
@@ -24,6 +24,8 @@ export const fileRow =
   '//ancestor::*[(contains(@class, "oc-tile-card") or contains(@class, "oc-tbody-tr"))]'
 export const resourceNameSelector =
   ':is(#files-space-table, .oc-tiles-item, #files-shared-with-me-accepted-section) [data-test-resource-name="%s"]'
+const breadcrumbResourceNameSelector =
+  '//span[contains(@class, "oc-breadcrumb-item-text") and text()="%s"]'
 const addNewResourceButton = `#new-file-menu-btn`
 const createNewFolderButton = '#new-folder-btn'
 const createNewTxtFileButton = '.new-file-btn-txt'
@@ -600,6 +602,27 @@ export const moveOrCopyResource = async (args: moveOrCopyResourceArgs): Promise<
         page.locator(util.format(resourceNameSelector, newLocation)).click()
       ])
 
+      break
+    }
+    case 'drag-drop-breadcrumb': {
+      const source = page.locator(util.format(resourceNameSelector, resourceBase))
+      const target = page.locator(util.format(breadcrumbResourceNameSelector, newLocation))
+
+      await Promise.all([
+        page.waitForResponse(
+          (resp) =>
+            resp.url().endsWith(resource) &&
+            resp.status() === 201 &&
+            resp.request().method() === 'MOVE'
+        ),
+        source.dragTo(target)
+      ])
+
+      await Promise.all([
+        page.locator(util.format(resourceNameSelector, resourceBase)),
+        page.locator(util.format(breadcrumbResourceNameSelector, newLocation)).click()
+      ])
+
       break
     }
   }

From c2f09947ecbfe4fa15133376f067f0bee1ef06f6 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 26 May 2023 12:12:49 +0200
Subject: [PATCH 17/30] Rename dragover class

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 2941061b30d..3057cc49a77 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -315,7 +315,7 @@ export default defineComponent({
       }
 
       const classList = getBreadcrumbElement(id).children[0].classList
-      const className = 'testclass'
+      const className = 'oc-breadcrumb-item-dragover'
       leaving ? classList.remove(className) : classList.add(className)
     }
 
@@ -338,14 +338,14 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.testclass {
-  transition: background 0.06s, border 0s 0.08s, border-color 0s, border-width 0.06s;
-  background-color: var(--oc-color-background-highlight);
-  box-shadow: 0 0 0 5px var(--oc-color-background-highlight);
-  border-radius: 5px;
-}
 .oc-breadcrumb {
   overflow: hidden;
+  &-item-dragover {
+    transition: background 0.06s, border 0s 0.08s, border-color 0s, border-width 0.06s;
+    background-color: var(--oc-color-background-highlight);
+    box-shadow: 0 0 0 5px var(--oc-color-background-highlight);
+    border-radius: 5px;
+  }
   &-item-text {
     max-width: 200px;
     white-space: nowrap;

From 075561bcb5bb0a2160d3491be3f63588ccada4b1 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 26 May 2023 12:14:39 +0200
Subject: [PATCH 18/30] Add changelog

---
 changelog/unreleased/enhancement-drag-drop-parent-folder | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 changelog/unreleased/enhancement-drag-drop-parent-folder

diff --git a/changelog/unreleased/enhancement-drag-drop-parent-folder b/changelog/unreleased/enhancement-drag-drop-parent-folder
new file mode 100644
index 00000000000..e4380c4f574
--- /dev/null
+++ b/changelog/unreleased/enhancement-drag-drop-parent-folder
@@ -0,0 +1,6 @@
+Enhancement: Drag & drop on parent folder
+
+We've added the possibility to drag & drop files onto the breadcrumb to move items faster.
+
+https://github.com/owncloud/web/pull/9052
+https://github.com/owncloud/web/issues/9043

From 14b1f3bfb16ff9c9c3074f33d4eb143ec4929d02 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 30 May 2023 11:20:49 +0200
Subject: [PATCH 19/30] Address PR issues

---
 .../enhancement-drag-drop-parent-folder       |  2 +-
 .../components/OcBreadcrumb/OcBreadcrumb.vue  | 36 +++++++++++--------
 .../src/components/OcBreadcrumb/types.ts      |  1 +
 .../src/components/AppBar/AppBar.vue          | 15 ++++----
 .../web-app-files/src/helpers/breadcrumbs.ts  |  7 ++--
 .../src/views/spaces/GenericSpace.vue         | 12 ++++---
 .../src/views/spaces/Projects.vue             |  3 +-
 7 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/changelog/unreleased/enhancement-drag-drop-parent-folder b/changelog/unreleased/enhancement-drag-drop-parent-folder
index e4380c4f574..dcdd1db136e 100644
--- a/changelog/unreleased/enhancement-drag-drop-parent-folder
+++ b/changelog/unreleased/enhancement-drag-drop-parent-folder
@@ -1,6 +1,6 @@
 Enhancement: Drag & drop on parent folder
 
-We've added the possibility to drag & drop files onto the breadcrumb to move items faster.
+We've added the possibility to drag & drop files onto the breadcrumb to move items into parent folders in a fast and intuitive way.
 
 https://github.com/owncloud/web/pull/9052
 https://github.com/owncloud/web/issues/9043
diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 3057cc49a77..8aa46b1d8fd 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -17,11 +17,11 @@
               (item.isTruncationPlaceholder && hiddenItems.length === 0)
           }
         ]"
-        @dragover="dragOver($event)"
-        @dragenter.prevent="dropItemStyling(item.id, index, false, $event)"
-        @dragleave.prevent="dropItemStyling(item.id, index, true, $event)"
-        @mouseleave="dropItemStyling(item.id, index, true, $event)"
-        @drop="dropItemEvent(item.to, index)"
+        @dragover.prevent
+        @dragenter.prevent="dropItemStyling(item, index, false, $event)"
+        @dragleave.prevent="dropItemStyling(item, index, true, $event)"
+        @mouseleave="dropItemStyling(item, index, true, $event)"
+        @drop="dropItemEvent(item, index)"
       >
         <router-link
           v-if="item.to"
@@ -216,16 +216,23 @@ export default defineComponent({
       return document.querySelector(`.oc-breadcrumb-list [data-item-id="${id}"]`)
     }
 
-    const dragOver = (event) => {
-      event.preventDefault()
+    const isDropAllowed = (item, index): boolean => {
+      if (
+        !item.id ||
+        index === unref(displayItems).length - 1 ||
+        item.isTruncationPlaceholder ||
+        item.isStaticNav
+      ) {
+        return false
+      }
+      return true
     }
-
     const dropItemEvent = (item, index) => {
-      if (index === unref(displayItems).length - 1) {
+      if (!isDropAllowed(item, index)) {
         return
       }
-      item.path = item.path ? item.path : '/'
-      emit(EVENT_ITEM_DROPPED_BREADCRUMB, item)
+      item.to.path = item.to.path ? item.to.path : '/'
+      emit(EVENT_ITEM_DROPPED_BREADCRUMB, item.to)
     }
 
     const calculateTotalBreadcrumbWidth = () => {
@@ -304,8 +311,8 @@ export default defineComponent({
       return props.items.length - 1 === index ? 'page' : null
     }
 
-    const dropItemStyling = (id, index, leaving, event) => {
-      if (index === unref(displayItems).length - 1) {
+    const dropItemStyling = (item, index, leaving, event) => {
+      if (!isDropAllowed(item, index)) {
         return
       }
       const hasFilePayload = (event.dataTransfer?.types || []).some((e) => e === 'Files')
@@ -314,7 +321,7 @@ export default defineComponent({
         return
       }
 
-      const classList = getBreadcrumbElement(id).children[0].classList
+      const classList = getBreadcrumbElement(item.id).children[0].classList
       const className = 'oc-breadcrumb-item-dragover'
       leaving ? classList.remove(className) : classList.add(className)
     }
@@ -330,7 +337,6 @@ export default defineComponent({
       displayItems,
       lastHiddenItem,
       dropItemEvent,
-      dragOver,
       dropItemStyling
     }
   }
diff --git a/packages/design-system/src/components/OcBreadcrumb/types.ts b/packages/design-system/src/components/OcBreadcrumb/types.ts
index 30e4608be98..6d1fc16a011 100644
--- a/packages/design-system/src/components/OcBreadcrumb/types.ts
+++ b/packages/design-system/src/components/OcBreadcrumb/types.ts
@@ -7,4 +7,5 @@ export interface BreadcrumbItem {
   allowContextActions?: boolean
   onClick?: () => void
   isTruncationPlaceholder?: boolean
+  isStaticNav?: boolean
 }
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 0320968c805..1b69c3d1a78 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -203,7 +203,7 @@ export default defineComponent({
         ? 3
         : 2
     })
-    const fileDroppedBreadcrumb = (data) => {
+    const fileDroppedBreadcrumb = async (data) => {
       const spaceRootRoutePath = router.resolve(
         createLocationSpaces('files-spaces-generic', {
           params: {
@@ -215,13 +215,12 @@ export default defineComponent({
       const splitIndex = data.path.indexOf(spaceRootRoutePath) + spaceRootRoutePath.length
       const path = decodeURIComponent(data.path.slice(splitIndex, data.path.length))
 
-      clientService.webdav
-        .getFileInfo(props.space, {
-          path
-        })
-        .then((targetResource) => {
-          emit(EVENT_ITEM_DROPPED, targetResource)
-        })
+      try {
+        const targetResource = await clientService.webdav.getFileInfo(props.space, { path })
+        emit(EVENT_ITEM_DROPPED, targetResource)
+      } catch (e) {
+        console.error(e)
+      }
     }
 
     return {
diff --git a/packages/web-app-files/src/helpers/breadcrumbs.ts b/packages/web-app-files/src/helpers/breadcrumbs.ts
index ee8ae0fc267..46cee701b40 100644
--- a/packages/web-app-files/src/helpers/breadcrumbs.ts
+++ b/packages/web-app-files/src/helpers/breadcrumbs.ts
@@ -21,7 +21,8 @@ export const breadcrumbsFromPath = (
         to: {
           path: '/' + [...current].splice(0, current.length - resource.length + i + 1).join('/'),
           query: omit(currentRoute.query, 'fileId', 'page') // TODO: we need the correct fileId in the query. until we have that we must omit it because otherwise we would correct the path to the one of the (wrong) fileId.
-        }
+        },
+        isStaticNav: false
       } as BreadcrumbItem)
   )
 }
@@ -35,7 +36,9 @@ export const concatBreadcrumbs = (...items: BreadcrumbItem[]): BreadcrumbItem[]
       id: uuidv4(),
       allowContextActions: last.allowContextActions,
       text: last.text,
-      onClick: () => eventBus.publish('app.files.list.load')
+      onClick: () => eventBus.publish('app.files.list.load'),
+      isTruncationPlaceholder: last.isTruncationPlaceholder,
+      isStaticNav: last.isStaticNav
     }
   ]
 }
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 61d0f1b32a7..c197fbad2bc 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -286,19 +286,22 @@ export default defineComponent({
         rootBreadcrumbItems.push({
           id: uuidv4(),
           text: $gettext('Spaces'),
-          to: createLocationSpaces('files-spaces-projects')
+          to: createLocationSpaces('files-spaces-projects'),
+          isStaticNav: true
         })
       } else if (isShareSpaceResource(space)) {
         rootBreadcrumbItems.push(
           {
             id: uuidv4(),
             text: $gettext('Shares'),
-            to: { path: '/files/shares' }
+            to: { path: '/files/shares' },
+            isStaticNav: true
           },
           {
             id: uuidv4(),
             text: $gettext('Shared with me'),
-            to: { path: '/files/shares/with-me' }
+            to: { path: '/files/shares/with-me' },
+            isStaticNav: true
           }
         )
       }
@@ -332,7 +335,8 @@ export default defineComponent({
           to: createLocationPublic('files-public-link', {
             params,
             query
-          })
+          }),
+          isStaticNav: true
         }
       } else {
         spaceBreadcrumbItem = {
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index 4e4d24a4154..3615e7c7c04 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -174,7 +174,8 @@ export default defineComponent({
       return [
         {
           text: this.$gettext('Spaces'),
-          onClick: () => this.loadResourcesTask.perform()
+          onClick: () => this.loadResourcesTask.perform(),
+          isStativNav: true
         }
       ]
     },

From 95d10a9a15302dc12e7a41e3f35da6cee71bfaff Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 30 May 2023 11:43:06 +0200
Subject: [PATCH 20/30] Fix unittest

---
 packages/web-app-files/tests/unit/helpers/breadcrumbs.spec.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web-app-files/tests/unit/helpers/breadcrumbs.spec.ts b/packages/web-app-files/tests/unit/helpers/breadcrumbs.spec.ts
index e8be979d593..9f0b9f9cfbf 100644
--- a/packages/web-app-files/tests/unit/helpers/breadcrumbs.spec.ts
+++ b/packages/web-app-files/tests/unit/helpers/breadcrumbs.spec.ts
@@ -10,6 +10,7 @@ describe('builds an array of breadcrumbitems', () => {
     expect(breadCrumbs).toEqual([
       {
         id: expect.anything(),
+        isStaticNav: false,
         allowContextActions: true,
         text: 'test',
         to: { path: '/files/spaces/personal/home/test', query: {} }

From 2ad0eda7e220032a6ffc024407782bb62a68090b Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 30 May 2023 13:19:29 +0200
Subject: [PATCH 21/30] Fix e2e test for oc10

---
 .../cucumber/features/smoke/copyMove.feature    | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/tests/e2e/cucumber/features/smoke/copyMove.feature b/tests/e2e/cucumber/features/smoke/copyMove.feature
index fa3333b7d39..36834d72fb1 100644
--- a/tests/e2e/cucumber/features/smoke/copyMove.feature
+++ b/tests/e2e/cucumber/features/smoke/copyMove.feature
@@ -9,12 +9,12 @@ Feature: Copy
       | Alice |
     And "Alice" logs in
     And "Alice" creates the following folders in personal space using API
-      | name              |
-      | PARENTCopy1       |
-      | PARENTCopy2       |
-      | PARENTMove        |
-      | PARENTCopy3       |
-      | PARENTCopy4/Child |
+      | name                  |
+      | PARENTCopy1           |
+      | PARENTCopy2           |
+      | PARENTMove            |
+      | PARENTCopy3           |
+      | PARENTCopy4/Sub1/Sub2 |
     And "Alice" creates the following files into personal space using API
       | pathToFile              | content                             |
       | PARENTCopy3/example.txt | example text                        |
@@ -45,7 +45,8 @@ Feature: Copy
       | resource    | to         |
       | PARENTCopy3 | PARENTMove |
     And "Alice" opens folder "PARENTCopy4"
+    And "Alice" opens folder "Sub1"
     And "Alice" moves the following resource using drag-drop-breadcrumb
-      | resource | to       |
-      | Child    | Personal |
+      | resource | to          |
+      | Sub2     | PARENTCopy4 |
     And "Alice" logs out

From 5d2b905803c42de522cf8c290a36071bfebb0952 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 30 May 2023 15:52:01 +0200
Subject: [PATCH 22/30] Address PR issue

---
 .../design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 8aa46b1d8fd..1099497afb9 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -231,7 +231,7 @@ export default defineComponent({
       if (!isDropAllowed(item, index)) {
         return
       }
-      item.to.path = item.to.path ? item.to.path : '/'
+      item.to.path = item.to.path || '/'
       emit(EVENT_ITEM_DROPPED_BREADCRUMB, item.to)
     }
 

From df7c34862fdc1e1c8932194233b053237e0d43f8 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 30 May 2023 16:31:25 +0200
Subject: [PATCH 23/30] Set overflow visible

---
 .../design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 1099497afb9..792aace17f0 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -345,7 +345,7 @@ export default defineComponent({
 
 <style lang="scss">
 .oc-breadcrumb {
-  overflow: hidden;
+  overflow: visible;
   &-item-dragover {
     transition: background 0.06s, border 0s 0.08s, border-color 0s, border-width 0.06s;
     background-color: var(--oc-color-background-highlight);

From 7a47a32e0a1cd85144a6c31faa084e09656b3429 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 31 May 2023 10:15:42 +0200
Subject: [PATCH 24/30] Fix buttons having different font feature settings

---
 packages/design-system/src/styles/theme/oc-text.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/design-system/src/styles/theme/oc-text.scss b/packages/design-system/src/styles/theme/oc-text.scss
index 957b1980f66..cf4584c44b6 100644
--- a/packages/design-system/src/styles/theme/oc-text.scss
+++ b/packages/design-system/src/styles/theme/oc-text.scss
@@ -18,6 +18,10 @@ html {
   font-size: var(--oc-font-size-default);
 }
 
+button {
+  font-feature-settings: "cv11";
+}
+
 a {
   color: var(--oc-color-swatch-primary-default);
   text-decoration: none;

From 634bc784fb386fe20227d53e62017c17274506be Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 31 May 2023 10:38:50 +0200
Subject: [PATCH 25/30] Address PR issue

---
 packages/design-system/src/styles/theme/oc-text.scss | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/design-system/src/styles/theme/oc-text.scss b/packages/design-system/src/styles/theme/oc-text.scss
index cf4584c44b6..909eca13963 100644
--- a/packages/design-system/src/styles/theme/oc-text.scss
+++ b/packages/design-system/src/styles/theme/oc-text.scss
@@ -13,15 +13,11 @@ html * {
   font-family: var(--oc-font-family);
 }
 
-html {
+html, button {
   font-feature-settings: "cv11";
   font-size: var(--oc-font-size-default);
 }
 
-button {
-  font-feature-settings: "cv11";
-}
-
 a {
   color: var(--oc-color-swatch-primary-default);
   text-decoration: none;

From f775e06fc17b1d68555bdbc02930ccdfe36bb719 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 31 May 2023 10:55:19 +0200
Subject: [PATCH 26/30] Refactor AppBar drop logic into GenericSpace

---
 .../src/components/AppBar/AppBar.vue          | 18 +-------------
 .../src/views/spaces/GenericSpace.vue         | 24 ++++++++++++++++---
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 1b69c3d1a78..1b28d72a6ae 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -204,23 +204,7 @@ export default defineComponent({
         : 2
     })
     const fileDroppedBreadcrumb = async (data) => {
-      const spaceRootRoutePath = router.resolve(
-        createLocationSpaces('files-spaces-generic', {
-          params: {
-            driveAliasAndItem: props.space.driveAlias
-          }
-        })
-      ).path
-
-      const splitIndex = data.path.indexOf(spaceRootRoutePath) + spaceRootRoutePath.length
-      const path = decodeURIComponent(data.path.slice(splitIndex, data.path.length))
-
-      try {
-        const targetResource = await clientService.webdav.getFileInfo(props.space, { path })
-        emit(EVENT_ITEM_DROPPED, targetResource)
-      } catch (e) {
-        console.error(e)
-      }
+      emit(EVENT_ITEM_DROPPED, data)
     }
 
     return {
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index c197fbad2bc..d665242c17c 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -171,7 +171,7 @@ import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import WhitespaceContextMenu from 'web-app-files/src/components/Spaces/WhitespaceContextMenu.vue'
 import Pagination from 'web-pkg/src/components/Pagination.vue'
-import { useRoute, useRouteQuery } from 'web-pkg/src/composables'
+import { useRoute, useRouteQuery, useClientService } from 'web-pkg/src/composables'
 import { useDocumentTitle } from 'web-pkg/src/composables/appDefaults/useDocumentTitle'
 import { ImageType } from 'web-pkg/src/constants'
 import { VisibilityObserver } from 'web-pkg/src/observer'
@@ -234,6 +234,7 @@ export default defineComponent({
     const { $gettext, $ngettext, interpolate: $gettextInterpolate } = useGettext()
     const { getDefaultEditorAction } = useFileActions()
     const openWithDefaultAppQuery = useRouteQuery('openWithDefaultApp')
+    const clientService = useClientService()
     let loadResourcesEventToken
 
     const canUpload = computed(() => {
@@ -494,7 +495,8 @@ export default defineComponent({
       uploadHint: $gettext(
         'Drag files and folders here or use the "New" or "Upload" buttons to add files'
       ),
-      whitespaceContextMenu
+      whitespaceContextMenu,
+      clientService
     }
   },
 
@@ -567,7 +569,23 @@ export default defineComponent({
           return
         }
       } else if (fileTarget instanceof Object) {
-        targetFolder = fileTarget
+        const spaceRootRoutePath = this.$router.resolve(
+          createLocationSpaces('files-spaces-generic', {
+            params: {
+              driveAliasAndItem: this.space.driveAlias
+            }
+          })
+        ).path
+
+        const splitIndex = fileTarget.path.indexOf(spaceRootRoutePath) + spaceRootRoutePath.length
+        const path = decodeURIComponent(fileTarget.path.slice(splitIndex, fileTarget.path.length))
+
+        try {
+          targetFolder = await this.clientService.webdav.getFileInfo(this.space, { path })
+        } catch (e) {
+          console.error(e)
+          return
+        }
       }
       if (!targetFolder) {
         return

From 2d94e068861766bb23345076f55792f7deeab78d Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 31 May 2023 11:11:01 +0200
Subject: [PATCH 27/30] Remove unused import

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

diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 1b28d72a6ae..b99cae7224a 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -77,7 +77,7 @@ import {
   SpaceResource
 } from 'web-client/src/helpers'
 import BatchActions from 'web-pkg/src/components/BatchActions.vue'
-import { createLocationSpaces, isLocationTrashActive } from '../../router'
+import { isLocationTrashActive } from '../../router'
 import ContextActions from '../FilesList/ContextActions.vue'
 import SharesNavigation from './SharesNavigation.vue'
 import SidebarToggle from './SidebarToggle.vue'

From 9c13573c56aeb28d0920a9f8edb7cb5df12e794d Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 31 May 2023 12:49:37 +0200
Subject: [PATCH 28/30] Address PR issues

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue      | 11 ++++-------
 .../src/helpers/resource/actions/transfer.ts          |  2 +-
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 792aace17f0..698231124e8 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -216,16 +216,13 @@ export default defineComponent({
       return document.querySelector(`.oc-breadcrumb-list [data-item-id="${id}"]`)
     }
 
-    const isDropAllowed = (item, index): boolean => {
-      if (
+    const isDropAllowed = (item: BreadcrumbItem, index: number): boolean => {
+      return !(
         !item.id ||
         index === unref(displayItems).length - 1 ||
         item.isTruncationPlaceholder ||
         item.isStaticNav
-      ) {
-        return false
-      }
-      return true
+      )
     }
     const dropItemEvent = (item, index) => {
       if (!isDropAllowed(item, index)) {
@@ -311,7 +308,7 @@ export default defineComponent({
       return props.items.length - 1 === index ? 'page' : null
     }
 
-    const dropItemStyling = (item, index, leaving, event) => {
+    const dropItemStyling = (item: BreadcrumbItem, index: number, leaving: boolean, event) => {
       if (!isDropAllowed(item, index)) {
         return
       }
diff --git a/packages/web-app-files/src/helpers/resource/actions/transfer.ts b/packages/web-app-files/src/helpers/resource/actions/transfer.ts
index dc5848c7fed..505001e5bca 100644
--- a/packages/web-app-files/src/helpers/resource/actions/transfer.ts
+++ b/packages/web-app-files/src/helpers/resource/actions/transfer.ts
@@ -128,7 +128,7 @@ export class ResourceTransfer extends ConflictDialog {
     )
   }
 
-  // This is for an edge case if an user moves a subfolder with the same name as the parent folder into the parent of the parent folder (which is not possible because of the backend)
+  // This is for an edge case if a user moves a subfolder with the same name as the parent folder into the parent of the parent folder (which is not possible because of the backend)
   public isOverwritingParentFolder(resource, targetFolder, targetFolderResources) {
     if (resource.type !== 'folder') {
       return false

From 937194e719676dbeeb14e75d687db1760c49b4a5 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 31 May 2023 13:06:17 +0200
Subject: [PATCH 29/30] remove unused resize event listener

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue           | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 698231124e8..ffe1c0f55f7 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -282,13 +282,6 @@ export default defineComponent({
     }
 
     watch([() => props.maxWidth, () => props.items], renderBreadcrumb, { immediate: true })
-    onMounted(() => {
-      window.addEventListener('resize', renderBreadcrumb)
-    })
-
-    onBeforeUnmount(() => {
-      window.removeEventListener('resize', renderBreadcrumb)
-    })
 
     const currentFolder = computed<BreadcrumbItem>(() => {
       if (props.items.length === 0 || !props.items) {

From 50375f442c6f9a6355a3f2945982b9e0b957c546 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 31 May 2023 14:36:27 +0200
Subject: [PATCH 30/30] Make linter happy

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue     | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index ffe1c0f55f7..2bc4f15bdde 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -100,17 +100,7 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  PropType,
-  ref,
-  unref,
-  watch
-} from 'vue'
+import { computed, defineComponent, nextTick, PropType, ref, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 
 import { AVAILABLE_SIZES, EVENT_ITEM_DROPPED_BREADCRUMB } from '../../helpers/constants'