diff --git a/apps/files/src/FilesApp.vue b/apps/files/src/FilesApp.vue
index e83d4999c2425..ccd8c2c440e7d 100644
--- a/apps/files/src/FilesApp.vue
+++ b/apps/files/src/FilesApp.vue
@@ -3,9 +3,9 @@
  - SPDX-License-Identifier: AGPL-3.0-or-later
  -->
 <template>
-	<NcContent app-name="files">
+	<NcContent appName="files">
 		<FilesNavigation v-if="!isPublic" />
-		<FilesList :is-public="isPublic" />
+		<RouterView />
 		<FilesSidebar v-if="!isPublic" />
 	</NcContent>
 </template>
@@ -13,7 +13,6 @@
 <script setup lang="ts">
 import { isPublicShare } from '@nextcloud/sharing/public'
 import NcContent from '@nextcloud/vue/components/NcContent'
-import FilesList from './views/FilesList.vue'
 import FilesNavigation from './views/FilesNavigation.vue'
 import FilesSidebar from './views/FilesSidebar.vue'
 import { useHotKeys } from './composables/useHotKeys.ts'
diff --git a/apps/files/src/actions/deleteUtils.ts b/apps/files/src/actions/deleteUtils.ts
index 6b1cbb9138b10..46f010e6146b0 100644
--- a/apps/files/src/actions/deleteUtils.ts
+++ b/apps/files/src/actions/deleteUtils.ts
@@ -11,7 +11,7 @@ import { getCapabilities } from '@nextcloud/capabilities'
 import { emit } from '@nextcloud/event-bus'
 import { FileType } from '@nextcloud/files'
 import { n, t } from '@nextcloud/l10n'
-import { getPinia } from '../store/index.ts'
+import { pinia } from '../store/index.ts'
 import { useUserConfigStore } from '../store/userconfig.ts'
 
 export const isTrashbinEnabled = () => (getCapabilities() as Capabilities)?.files?.undelete === true
@@ -134,7 +134,7 @@ export function displayName({ nodes, view }: { nodes: INode[], view: IView }) {
  *
  */
 export function shouldAskForConfirmation() {
-	const userConfig = useUserConfigStore(getPinia())
+	const userConfig = useUserConfigStore(pinia)
 	return userConfig.userConfig.show_dialog_deletion !== false
 }
 
diff --git a/apps/files/src/actions/downloadAction.ts b/apps/files/src/actions/downloadAction.ts
index 63f943ddcedb3..14a476676758e 100644
--- a/apps/files/src/actions/downloadAction.ts
+++ b/apps/files/src/actions/downloadAction.ts
@@ -12,7 +12,7 @@ import { emit } from '@nextcloud/event-bus'
 import { DefaultType, FileType } from '@nextcloud/files'
 import { t } from '@nextcloud/l10n'
 import { useFilesStore } from '../store/files.ts'
-import { getPinia } from '../store/index.ts'
+import { pinia } from '../store/index.ts'
 import { usePathsStore } from '../store/paths.ts'
 import { logger } from '../utils/logger.ts'
 import { isDownloadable } from '../utils/permissions.ts'
@@ -161,8 +161,8 @@ async function downloadNodes(nodes: INode[]) {
  * @return The current directory node or null if not found
  */
 function getCurrentDirectory(view: IView, directory: string): INode | null {
-	const filesStore = useFilesStore(getPinia())
-	const pathsStore = usePathsStore(getPinia())
+	const filesStore = useFilesStore(pinia)
+	const pathsStore = usePathsStore(pinia)
 	if (!view?.id) {
 		return null
 	}
diff --git a/apps/files/src/actions/favoriteAction.ts b/apps/files/src/actions/favoriteAction.ts
index 668bbad5e3e3d..60413fe2552f3 100644
--- a/apps/files/src/actions/favoriteAction.ts
+++ b/apps/files/src/actions/favoriteAction.ts
@@ -15,7 +15,6 @@ import { encodePath } from '@nextcloud/paths'
 import { generateUrl } from '@nextcloud/router'
 import { isPublicShare } from '@nextcloud/sharing/public'
 import PQueue from 'p-queue'
-import Vue from 'vue'
 import { logger } from '../utils/logger.ts'
 
 const queue = new PQueue({ concurrency: 5 })
@@ -106,7 +105,7 @@ export async function favoriteNode(node: INode, view: IView, willFavorite: boole
 		}
 
 		// Update the node webdav attribute
-		Vue.set(node.attributes, 'favorite', willFavorite ? 1 : 0)
+		node.attributes.favorite = willFavorite ? 1 : 0
 		emit('files:node:updated', node)
 
 		// Dispatch event to whoever is interested
diff --git a/apps/files/src/actions/moveOrCopyAction.ts b/apps/files/src/actions/moveOrCopyAction.ts
index e676a71e67ba7..34ebb4ad543fd 100644
--- a/apps/files/src/actions/moveOrCopyAction.ts
+++ b/apps/files/src/actions/moveOrCopyAction.ts
@@ -16,9 +16,8 @@ import { FileType, getUniqueName, NodeStatus, Permission } from '@nextcloud/file
 import { defaultRootPath, getClient, getDefaultPropfind, resultToNode } from '@nextcloud/files/dav'
 import { n, t } from '@nextcloud/l10n'
 import { basename, join } from '@nextcloud/paths'
-import { getConflicts } from '@nextcloud/upload'
-import Vue from 'vue'
 import { getContents } from '../services/Files.ts'
+import { getConflicts } from '../utils/conflicts.ts'
 import { logger } from '../utils/logger.ts'
 import { canCopy, canMove, getQueue, MoveCopyAction } from './moveOrCopyActionUtils.ts'
 
@@ -165,7 +164,7 @@ export async function* handleCopyMoveNodesTo(nodes: INode[], destination: IFolde
 	try {
 		for (const node of nodes) {
 			// Set loading state
-			Vue.set(node, 'status', NodeStatus.LOADING)
+			node.status = NodeStatus.LOADING
 			yield queue.add(async () => {
 				try {
 					const client = getClient()
@@ -211,7 +210,7 @@ export async function* handleCopyMoveNodesTo(nodes: INode[], destination: IFolde
 					}
 					throw error
 				} finally {
-					Vue.set(node, 'status', undefined)
+					node.status = undefined
 				}
 			})
 		}
diff --git a/apps/files/src/actions/renameAction.spec.ts b/apps/files/src/actions/renameAction.spec.ts
index 1f25b86d4ebea..89e3f01001f7e 100644
--- a/apps/files/src/actions/renameAction.spec.ts
+++ b/apps/files/src/actions/renameAction.spec.ts
@@ -9,7 +9,7 @@ import * as eventBus from '@nextcloud/event-bus'
 import { File, Folder, Permission } from '@nextcloud/files'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
 import { useFilesStore } from '../store/files.ts'
-import { getPinia } from '../store/index.ts'
+import { pinia } from '../store/index.ts'
 import { action } from './renameAction.ts'
 
 const view = {
@@ -25,7 +25,7 @@ beforeEach(() => {
 		permissions: Permission.CREATE,
 		root: '/files/admin',
 	})
-	const files = useFilesStore(getPinia())
+	const files = useFilesStore(pinia)
 	files.setRoot({ service: 'files', root })
 })
 
diff --git a/apps/files/src/actions/renameAction.ts b/apps/files/src/actions/renameAction.ts
index 28b2bcd29a853..b63f4e9fb2be5 100644
--- a/apps/files/src/actions/renameAction.ts
+++ b/apps/files/src/actions/renameAction.ts
@@ -11,7 +11,7 @@ import { Permission } from '@nextcloud/files'
 import { translate as t } from '@nextcloud/l10n'
 import { dirname } from 'path'
 import { useFilesStore } from '../store/files.ts'
-import { getPinia } from '../store/index.ts'
+import { pinia } from '../store/index.ts'
 
 export const ACTION_RENAME = 'rename'
 
@@ -31,7 +31,7 @@ export const action: IFileAction = {
 		}
 
 		const node = nodes[0]
-		const filesStore = useFilesStore(getPinia())
+		const filesStore = useFilesStore(pinia)
 		const parentNode = node.dirname === '/'
 			? filesStore.getRoot(view.id)
 			: filesStore.getNode(dirname(node.source))
diff --git a/apps/files/src/components/BreadCrumbs.vue b/apps/files/src/components/BreadCrumbs.vue
index 39bd54da0d6c5..567aecd337981 100644
--- a/apps/files/src/components/BreadCrumbs.vue
+++ b/apps/files/src/components/BreadCrumbs.vue
@@ -14,14 +14,14 @@
 			v-for="(section, index) in sections"
 			:key="section.dir"
 			v-bind="section"
+			v-model:open="isMenuOpen"
 			dir="auto"
 			:to="section.to"
-			:force-icon-text="index === 0 && !isNarrow"
-			force-menu
-			:open.sync="isMenuOpen"
+			:forceIconText="index === 0 && !isNarrow"
+			forceMenu
 			:title="titleForSection(index, section)"
 			:aria-description="ariaForSection(section)"
-			@dragover.native="onDragOver($event, section.dir)"
+			@dragover="onDragOver($event, section.dir)"
 			@drop="onDrop($event, section.dir)">
 			<template v-if="index === 0" #icon>
 				<NcIconSvgWrapper
@@ -33,7 +33,7 @@
 			</template>
 			<template v-if="index === sections.length - 1" #default>
 				<!-- Sharing button -->
-				<NcActionButton v-if="canShare" close-after-click @click="openSharingSidebar">
+				<NcActionButton v-if="canShare" closeAfterClick @click="openSharingSidebar">
 					<template #icon>
 						<NcIconSvgWrapper :path="mdiAccountPlus" />
 					</template>
@@ -41,7 +41,7 @@
 				</NcActionButton>
 
 				<!-- Reload button -->
-				<NcActionButton close-after-click @click="$emit('reload')">
+				<NcActionButton closeAfterClick @click="$emit('reload')">
 					<template #icon>
 						<NcIconSvgWrapper :path="mdiReload" />
 					</template>
diff --git a/apps/files/src/components/DragAndDropNotice.vue b/apps/files/src/components/DragAndDropNotice.vue
index 44da33323f7cb..184edeef1d04c 100644
--- a/apps/files/src/components/DragAndDropNotice.vue
+++ b/apps/files/src/components/DragAndDropNotice.vue
@@ -32,8 +32,8 @@ import type { PropType } from 'vue'
 
 import { showError } from '@nextcloud/dialogs'
 import { Permission } from '@nextcloud/files'
-import { translate as t } from '@nextcloud/l10n'
-import { UploadStatus } from '@nextcloud/upload'
+import { UploadStatus } from '@nextcloud/files/upload'
+import { t } from '@nextcloud/l10n'
 import debounce from 'debounce'
 import { defineComponent } from 'vue'
 import TrayArrowDownIcon from 'vue-material-design-icons/TrayArrowDown.vue'
diff --git a/apps/files/src/components/DragAndDropPreview.vue b/apps/files/src/components/DragAndDropPreview.vue
index df0c0487b346b..7b5ccc6b40e34 100644
--- a/apps/files/src/components/DragAndDropPreview.vue
+++ b/apps/files/src/components/DragAndDropPreview.vue
@@ -17,12 +17,12 @@
 import type { Node } from '@nextcloud/files'
 
 import { FileType, formatFileSize } from '@nextcloud/files'
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 import FileMultipleIcon from 'vue-material-design-icons/FileMultiple.vue'
 import FolderIcon from 'vue-material-design-icons/Folder.vue'
 import { getSummaryFor } from '../utils/fileUtils.ts'
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'DragAndDropPreview',
 
 	components: {
@@ -30,6 +30,8 @@ export default Vue.extend({
 		FolderIcon,
 	},
 
+	emits: ['loaded'],
+
 	data() {
 		return {
 			nodes: [] as Node[],
diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
index d3f78c1dc56a2..ab042ef8f9214 100644
--- a/apps/files/src/components/FileEntry.vue
+++ b/apps/files/src/components/FileEntry.vue
@@ -22,7 +22,7 @@
 		<!-- Checkbox -->
 		<FileEntryCheckbox
 			:fileid="fileid"
-			:is-loading="isLoading"
+			:isLoading="isLoading"
 			:nodes="nodes"
 			:source="source" />
 
@@ -33,24 +33,24 @@
 				ref="preview"
 				:source="source"
 				:dragover="dragover"
-				@auxclick.native="execDefaultAction"
-				@click.native="execDefaultAction" />
+				@auxclick="execDefaultAction"
+				@click="execDefaultAction" />
 
 			<FileEntryName
 				ref="name"
 				:basename="basename"
 				:extension="extension"
 				:source="source"
-				@auxclick.native="execDefaultAction"
-				@click.native="execDefaultAction" />
+				@auxclick="execDefaultAction"
+				@click="execDefaultAction" />
 		</td>
 
 		<!-- Actions -->
 		<FileEntryActions
 			v-show="!isRenamingSmallScreen"
 			ref="actions"
+			v-model:opened="openedMenu"
 			:class="`files-list__row-actions-${uniqueId}`"
-			:opened.sync="openedMenu"
 			:source="source" />
 
 		<!-- Mime -->
@@ -82,7 +82,7 @@
 			@click="openDetailsIfAvailable">
 			<NcDateTime
 				v-if="mtime"
-				ignore-seconds
+				ignoreSeconds
 				:timestamp="mtime" />
 			<span v-else>{{ t('files', 'Unknown date') }}</span>
 		</td>
@@ -96,8 +96,8 @@
 			:data-cy-files-list-row-column-custom="column.id"
 			@click="openDetailsIfAvailable">
 			<CustomElementRender
-				:active-folder="activeFolder"
-				:active-view="activeView"
+				:activeFolder="activeFolder"
+				:activeView="activeView"
 				:render="adaptColumnRenderToCustomElementRender(column)"
 				:source="source" />
 		</td>
diff --git a/apps/files/src/components/FileEntry/FileEntryActions.vue b/apps/files/src/components/FileEntry/FileEntryActions.vue
index 7d27e86163af2..f6c948789c1b7 100644
--- a/apps/files/src/components/FileEntry/FileEntryActions.vue
+++ b/apps/files/src/components/FileEntry/FileEntryActions.vue
@@ -11,8 +11,8 @@
 			v-for="action in enabledRenderActions"
 			:key="action.id"
 			:class="'files-list__row-action-' + action.id"
-			:active-folder="activeStore.activeFolder"
-			:active-view="activeStore.activeView"
+			:activeFolder="activeStore.activeFolder"
+			:activeView="activeStore.activeView"
 			:render="action.renderInline"
 			:source="source"
 			class="files-list__row-action--inline" />
@@ -20,11 +20,11 @@
 		<!-- Menu actions -->
 		<NcActions
 			ref="actionsMenu"
-			:boundaries-element="getBoundariesElement"
+			:boundariesElement="getBoundariesElement"
 			:container="getBoundariesElement"
-			:force-name="true"
+			:forceName="true"
 			variant="tertiary"
-			:force-menu="enabledInlineActions.length === 0 /* forceMenu only if no inline actions */"
+			:forceMenu="enabledInlineActions.length === 0 /* forceMenu only if no inline actions */"
 			:inline="enabledInlineActions.length"
 			:open="openedMenu"
 			@close="onMenuClose"
@@ -41,9 +41,9 @@
 					'files-list__row-action--inline': index < enabledInlineActions.length,
 					'files-list__row-action--menu': isValidMenu(action),
 				}"
-				:close-after-click="!isValidMenu(action)"
+				:closeAfterClick="!isValidMenu(action)"
 				:data-cy-files-list-row-action="action.id"
-				:is-menu="isValidMenu(action)"
+				:isMenu="isValidMenu(action)"
 				:aria-label="action.title?.(actionContext)"
 				:title="action.title?.(actionContext)"
 				@click="onActionClick(action)">
@@ -70,9 +70,9 @@
 						'files-list__row-action--inline': index < enabledInlineActions.length,
 						'files-list__row-action--menu': isValidMenu(action),
 					}"
-					:close-after-click="!isValidMenu(action)"
+					:closeAfterClick="!isValidMenu(action)"
 					:data-cy-files-list-row-action="action.id"
-					:is-menu="isValidMenu(action)"
+					:isMenu="isValidMenu(action)"
 					:aria-label="action.title?.(actionContext)"
 					:title="action.title?.(actionContext)"
 					@click="onActionClick(action)">
@@ -104,7 +104,7 @@
 					:key="action.id"
 					:class="`files-list__row-action-${action.id}`"
 					class="files-list__row-action--submenu"
-					close-after-click
+					closeAfterClick
 					:data-cy-files-list-row-action="action.id"
 					:aria-label="action.title?.(actionContext)"
 					:title="action.title?.(actionContext)"
diff --git a/apps/files/src/components/FileEntry/FileEntryCheckbox.vue b/apps/files/src/components/FileEntry/FileEntryCheckbox.vue
index a901aefbc7d33..ab52a4144e83b 100644
--- a/apps/files/src/components/FileEntry/FileEntryCheckbox.vue
+++ b/apps/files/src/components/FileEntry/FileEntryCheckbox.vue
@@ -10,7 +10,7 @@
 		<NcCheckboxRadioSwitch
 			v-else
 			:aria-label="ariaLabel"
-			:model-value="isSelected"
+			:modelValue="isSelected"
 			data-cy-files-list-row-checkbox
 			@update:modelValue="onSelectionChange" />
 	</td>
diff --git a/apps/files/src/components/FileEntry/FileEntryName.vue b/apps/files/src/components/FileEntry/FileEntryName.vue
index f0f50cc14d335..5e53a2342d42d 100644
--- a/apps/files/src/components/FileEntry/FileEntryName.vue
+++ b/apps/files/src/components/FileEntry/FileEntryName.vue
@@ -40,12 +40,13 @@
 
 <script lang="ts">
 import type { IFileAction, Node, TFileType } from '@nextcloud/files'
-import type { PropType } from 'vue'
+import type { ComponentPublicInstance, PropType } from 'vue'
 
 import { showError } from '@nextcloud/dialogs'
 import { FileType, NodeStatus } from '@nextcloud/files'
 import { translate as t } from '@nextcloud/l10n'
 import { basename } from '@nextcloud/paths'
+import { vOnClickOutside } from '@vueuse/components'
 import { defineComponent, inject } from 'vue'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
 import { useFileListWidth } from '../../composables/useFileListWidth.ts'
@@ -62,6 +63,10 @@ export default defineComponent({
 		NcTextField,
 	},
 
+	directives: {
+		onClickOutside: vOnClickOutside,
+	},
+
 	props: {
 		/**
 		 * The filename without extension
@@ -186,7 +191,7 @@ export default defineComponent({
 		newName() {
 			// Check validity of the new name
 			const newName = this.newName.trim?.() || ''
-			const input = (this.$refs.renameInput as Vue | undefined)?.$el.querySelector('input')
+			const input = (this.$refs.renameInput as ComponentPublicInstance | undefined)?.$el.querySelector('input')
 			if (!input) {
 				return
 			}
@@ -214,7 +219,7 @@ export default defineComponent({
 		startRenaming() {
 			this.$nextTick(() => {
 				// Using split to get the true string length
-				const input = (this.$refs.renameInput as Vue | undefined)?.$el.querySelector('input')
+				const input = (this.$refs.renameInput as ComponentPublicInstance | undefined)?.$el.querySelector('input')
 				if (!input) {
 					logger.error('Could not find the rename input')
 					return
diff --git a/apps/files/src/components/FileEntryGrid.spec.ts b/apps/files/src/components/FileEntryGrid.spec.ts
index c5d037d36a450..dddc47b8d451b 100644
--- a/apps/files/src/components/FileEntryGrid.spec.ts
+++ b/apps/files/src/components/FileEntryGrid.spec.ts
@@ -7,9 +7,9 @@ import { File, Folder, Permission } from '@nextcloud/files'
 import { createTestingPinia } from '@pinia/testing'
 import { shallowMount } from '@vue/test-utils'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
-import { nextTick } from 'vue'
+import { nextTick, toRaw } from 'vue'
 import FileEntryGrid from './FileEntryGrid.vue'
-import router from '../router/router.ts'
+import { router } from '../router/router.ts'
 import { useActiveStore } from '../store/active.ts'
 
 // useFileListWidth builds its ResizeObserver while the module is evaluated, so
@@ -52,18 +52,20 @@ describe('FileEntryGrid.vue', () => {
 	// was first rendered rather than the one the file lives in.
 	test('follows the active folder after navigating', async () => {
 		const wrapper = shallowMount(FileEntryGrid, {
-			propsData: { source, nodes: [source] },
-			mocks: { t: (_: string, text: string) => text },
-			router,
-			pinia: createTestingPinia({ createSpy: vi.fn }),
+			props: { source, nodes: [source] },
+			global: {
+				mocks: { t: (_: string, text: string) => text },
+				plugins: [router, createTestingPinia({ createSpy: vi.fn })],
+			},
 		})
 		const activeStore = useActiveStore()
 
-		expect(wrapper.vm.activeFolder).not.toBe(nestedFolder)
+		expect(toRaw(wrapper.vm.activeFolder)).not.toBe(nestedFolder)
 
 		activeStore.activeFolder = nestedFolder
 		await nextTick()
 
-		expect(wrapper.vm.activeFolder).toBe(nestedFolder)
+		// the store hands out a reactive proxy of the folder, so compare the raw object
+		expect(toRaw(wrapper.vm.activeFolder)).toBe(nestedFolder)
 	})
 })
diff --git a/apps/files/src/components/FileEntryGrid.vue b/apps/files/src/components/FileEntryGrid.vue
index 278def2a7fab1..48ac34d546c41 100644
--- a/apps/files/src/components/FileEntryGrid.vue
+++ b/apps/files/src/components/FileEntryGrid.vue
@@ -23,7 +23,7 @@
 		<!-- Checkbox -->
 		<FileEntryCheckbox
 			:fileid="fileid"
-			:is-loading="isLoading"
+			:isLoading="isLoading"
 			:nodes="nodes"
 			:source="source" />
 
@@ -33,18 +33,18 @@
 			<FileEntryPreview
 				ref="preview"
 				:dragover="dragover"
-				:grid-mode="true"
+				:gridMode="true"
 				:source="source"
-				@auxclick.native="execDefaultAction"
-				@click.native="execDefaultAction" />
+				@auxclick="execDefaultAction"
+				@click="execDefaultAction" />
 
 			<FileEntryName
 				ref="name"
 				:basename="basename"
 				:extension="extension"
 				:source="source"
-				@auxclick.native="execDefaultAction"
-				@click.native="execDefaultAction" />
+				@auxclick="execDefaultAction"
+				@click="execDefaultAction" />
 		</td>
 
 		<!-- Mtime -->
@@ -56,16 +56,16 @@
 			@click="openDetailsIfAvailable">
 			<NcDateTime
 				v-if="mtime"
-				ignore-seconds
+				ignoreSeconds
 				:timestamp="mtime" />
 		</td>
 
 		<!-- Actions -->
 		<FileEntryActions
 			ref="actions"
-			:opened.sync="openedMenu"
+			v-model:opened="openedMenu"
 			:class="`files-list__row-actions-${uniqueId}`"
-			:grid-mode="true"
+			:gridMode="true"
 			:source="source" />
 	</tr>
 </template>
diff --git a/apps/files/src/components/FileEntryMixin.ts b/apps/files/src/components/FileEntryMixin.ts
index 2471ced400989..381a4e2f276a4 100644
--- a/apps/files/src/components/FileEntryMixin.ts
+++ b/apps/files/src/components/FileEntryMixin.ts
@@ -11,9 +11,8 @@ import { FileType, Folder, File as NcFile, Node, NodeStatus, Permission } from '
 import { t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { isPublicShare } from '@nextcloud/sharing/public'
-import { vOnClickOutside } from '@vueuse/components'
 import { extname } from 'path'
-import Vue, { computed, defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
 import { action as sidebarAction } from '../actions/sidebarAction.ts'
 import { dataTransferToFileTree, onDropExternalFiles, onDropInternalFiles } from '../services/DropService.ts'
 import { getDragAndDropPreview } from '../utils/dragUtils.ts'
@@ -21,8 +20,6 @@ import { hashCode } from '../utils/hashUtils.ts'
 import { logger } from '../utils/logger.ts'
 import { isDownloadable } from '../utils/permissions.ts'
 
-Vue.directive('onClickOutside', vOnClickOutside)
-
 export default defineComponent({
 	props: {
 		source: {
@@ -287,7 +284,7 @@ export default defineComponent({
 		},
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		this.resetState()
 	},
 
diff --git a/apps/files/src/components/FileListFilter/FileListFilterChips.vue b/apps/files/src/components/FileListFilter/FileListFilterChips.vue
index 5ddbbf9866eb4..6c1fd4e881b86 100644
--- a/apps/files/src/components/FileListFilter/FileListFilterChips.vue
+++ b/apps/files/src/components/FileListFilter/FileListFilterChips.vue
@@ -22,13 +22,13 @@ const activeChips = computed(() => filterStore.activeChips)
 		<li v-for="(chip, index) of activeChips" :key="index">
 			<NcChip
 				:aria-label-close="t('files', 'Remove filter')"
-				:icon-svg="chip.icon"
+				:iconSvg="chip.icon"
 				:text="chip.text"
 				@close="chip.onclick">
 				<template v-if="chip.user" #icon>
 					<NcAvatar
-						disable-menu
-						hide-status
+						disableMenu
+						hideStatus
 						:size="24"
 						:user="chip.user" />
 				</template>
diff --git a/apps/files/src/components/FileListFilter/FileListFilterModified.vue b/apps/files/src/components/FileListFilter/FileListFilterModified.vue
index e7d5b6cda13e3..2f30ab22a4ad0 100644
--- a/apps/files/src/components/FileListFilter/FileListFilterModified.vue
+++ b/apps/files/src/components/FileListFilter/FileListFilterModified.vue
@@ -17,7 +17,7 @@
 		<NcDateTimePicker
 			v-if="selectedOption?.id === 'custom'"
 			v-model="timeRange"
-			append-to-body
+			appendToBody
 			:aria-label="t('files', 'Custom date range')"
 			type="date-range" />
 	</div>
diff --git a/apps/files/src/components/FileListFilter/FileListFilterToSearch.vue b/apps/files/src/components/FileListFilter/FileListFilterToSearch.vue
index 695f9c8ae76c5..882aca89d46e5 100644
--- a/apps/files/src/components/FileListFilter/FileListFilterToSearch.vue
+++ b/apps/files/src/components/FileListFilter/FileListFilterToSearch.vue
@@ -13,10 +13,10 @@
 import { t } from '@nextcloud/l10n'
 import { computed } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
-import { getPinia } from '../../store/index.ts'
+import { pinia } from '../../store/index.ts'
 import { useSearchStore } from '../../store/search.ts'
 
-const searchStore = useSearchStore(getPinia())
+const searchStore = useSearchStore(pinia)
 
 const isVisible = computed(() => searchStore.query.length >= 3 && searchStore.scope === 'filter')
 
diff --git a/apps/files/src/components/FileListFilter/FileListFilterType.vue b/apps/files/src/components/FileListFilter/FileListFilterType.vue
index 3e4803e5b1f3f..2fb233b7ee65b 100644
--- a/apps/files/src/components/FileListFilter/FileListFilterType.vue
+++ b/apps/files/src/components/FileListFilter/FileListFilterType.vue
@@ -56,10 +56,15 @@ onUnmounted(() => {
 })
 
 /**
- * Handler for reset event from filter
+ * Handler for reset event from filter.
+ *
+ * Assigning a new array unconditionally would re-trigger the watcher above,
+ * which calls back into `setPresets` and so dispatches `reset` again.
  */
 function resetFilter() {
-	selectedOptions.value = []
+	if (selectedOptions.value.length > 0) {
+		selectedOptions.value = []
+	}
 }
 
 /**
diff --git a/apps/files/src/components/FileListFilter/FileListFilters.vue b/apps/files/src/components/FileListFilter/FileListFilters.vue
index 82b42a19f93a5..0c141865f9a07 100644
--- a/apps/files/src/components/FileListFilter/FileListFilters.vue
+++ b/apps/files/src/components/FileListFilter/FileListFilters.vue
@@ -50,7 +50,7 @@ const boundary = document.getElementById('app-content-vue')!
 		<NcPopover
 			v-else
 			:boundary="boundary"
-			:popup-role="selectedFilter ? 'dialog' : 'menu'"
+			:popupRole="selectedFilter ? 'dialog' : 'menu'"
 			@update:shown="selectedFilter = undefined">
 			<template #trigger>
 				<NcButton
diff --git a/apps/files/src/components/FilesListHeader.vue b/apps/files/src/components/FilesListHeader.vue
index 084458c259cae..865e8148b5f9f 100644
--- a/apps/files/src/components/FilesListHeader.vue
+++ b/apps/files/src/components/FilesListHeader.vue
@@ -86,7 +86,7 @@ export default {
 		})
 	},
 
-	destroyed() {
+	unmounted() {
 		logger.debug(`Destroyed ${this.header.id} FilesListHeader`, { header: this.header })
 	},
 
diff --git a/apps/files/src/components/FilesListTableHeader.vue b/apps/files/src/components/FilesListTableHeader.vue
index 3fdd62417b40e..6935f060b3fed 100644
--- a/apps/files/src/components/FilesListTableHeader.vue
+++ b/apps/files/src/components/FilesListTableHeader.vue
@@ -12,7 +12,7 @@
 			<NcCheckboxRadioSwitch
 				v-bind="selectAllBind"
 				data-cy-files-list-selection-checkbox
-				@update:model-value="onToggleAll" />
+				@update:modelValue="onToggleAll" />
 
 			<!-- Batch selection UI lives in the select-all cell so column headers
 			     stay valid and Tab order stays in document flow
@@ -22,8 +22,8 @@
 					{{ n('files', '{count} selected', '{count} selected', selectedNodes.length, { count: selectedNodes.length }) }}
 				</span>
 				<FilesListTableHeaderActions
-					:current-view="currentView"
-					:selected-nodes="selectedNodes" />
+					:currentView="currentView"
+					:selectedNodes="selectedNodes" />
 			</template>
 		</th>
 
@@ -118,9 +118,9 @@ import { defineComponent } from 'vue'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import FilesListTableHeaderActions from './FilesListTableHeaderActions.vue'
 import FilesListTableHeaderButton from './FilesListTableHeaderButton.vue'
+import { useFilesSorting } from '../composables/filesSorting.ts'
 import { useFileListWidth } from '../composables/useFileListWidth.ts'
 import { useRouteParameters } from '../composables/useRouteParameters.ts'
-import filesSortingMixin from '../mixins/filesSorting.ts'
 import { useActiveStore } from '../store/active.ts'
 import { useFilesStore } from '../store/files.ts'
 import { useSelectionStore } from '../store/selection.ts'
@@ -135,10 +135,6 @@ export default defineComponent({
 		NcCheckboxRadioSwitch,
 	},
 
-	mixins: [
-		filesSortingMixin,
-	],
-
 	props: {
 		currentView: {
 			type: Object as PropType<View>,
@@ -181,6 +177,8 @@ export default defineComponent({
 
 			directory,
 			isNarrow,
+
+			...useFilesSorting(),
 		}
 	},
 
@@ -202,8 +200,8 @@ export default defineComponent({
 			const label = t('files', 'Toggle selection for all files and folders')
 			return {
 				'aria-label': label,
-				checked: this.isAllSelected,
 				indeterminate: this.isSomeSelected,
+				modelValue: this.isAllSelected,
 				title: label,
 			}
 		},
diff --git a/apps/files/src/components/FilesListTableHeaderActions.vue b/apps/files/src/components/FilesListTableHeaderActions.vue
index d3a01f32c7c86..0a0f84dc11ad4 100644
--- a/apps/files/src/components/FilesListTableHeaderActions.vue
+++ b/apps/files/src/components/FilesListTableHeaderActions.vue
@@ -6,13 +6,13 @@
 	<div class="files-list__column files-list__row-actions-batch" data-cy-files-list-selection-actions>
 		<NcActions
 			ref="actionsMenu"
-			:open.sync="openedMenu"
+			v-model:open="openedMenu"
 			container="#app-content-vue"
-			:boundaries-element="boundariesElement"
+			:boundariesElement="boundariesElement"
 			:disabled="!!loading || areSomeNodesLoading"
-			:force-name="true"
+			:forceName="true"
 			:inline="enabledInlineActions.length"
-			:menu-name="enabledInlineActions.length <= 1 ? t('files', 'Actions') : undefined"
+			:menuName="enabledInlineActions.length <= 1 ? t('files', 'Actions') : undefined"
 			@close="openedSubmenu = null">
 			<!-- Default actions list-->
 			<NcActionButton
@@ -23,9 +23,9 @@
 					[`files-list__row-actions-batch-${action.id}`]: true,
 					[`files-list__row-actions-batch--menu`]: isValidMenu(action),
 				}"
-				:close-after-click="!isValidMenu(action)"
+				:closeAfterClick="!isValidMenu(action)"
 				:data-cy-files-list-selection-action="action.id"
-				:is-menu="isValidMenu(action)"
+				:isMenu="isValidMenu(action)"
 				:aria-label="action.displayName(actionContext) + ' ' + t('files', '(selected)') /** TRANSLATORS: Selected like 'selected files and folders' */"
 				:title="action.title?.(actionContext)"
 				@click="onActionClick(action)">
@@ -53,7 +53,7 @@
 					:key="action.id"
 					:class="`files-list__row-actions-batch-${action.id}`"
 					class="files-list__row-actions-batch--submenu"
-					close-after-click
+					closeAfterClick
 					:data-cy-files-list-selection-action="action.id"
 					:aria-label="action.displayName(actionContext) + ' ' + t('files', '(selected)') /** TRANSLATORS: Selected like 'selected files and folders' */"
 					:title="action.title?.(actionContext)"
@@ -298,7 +298,7 @@ export default defineComponent({
 				// Set loading markers
 				this.loading = action.id
 				this.nodes.forEach((node) => {
-					this.$set(node, 'status', NodeStatus.LOADING)
+					node.status = NodeStatus.LOADING
 				})
 
 				// Dispatch action execution
@@ -338,7 +338,7 @@ export default defineComponent({
 				// Remove loading markers
 				this.loading = null
 				this.nodes.forEach((node) => {
-					this.$set(node, 'status', undefined)
+					node.status = undefined
 				})
 			}
 		},
diff --git a/apps/files/src/components/FilesListTableHeaderButton.vue b/apps/files/src/components/FilesListTableHeaderButton.vue
index c37c685446b2f..dea93fa79b76f 100644
--- a/apps/files/src/components/FilesListTableHeaderButton.vue
+++ b/apps/files/src/components/FilesListTableHeaderButton.vue
@@ -21,43 +21,28 @@
 	</NcButton>
 </template>
 
-<script lang="ts">
-import { translate } from '@nextcloud/l10n'
-import { defineComponent } from 'vue'
+<script setup lang="ts">
 import NcButton from '@nextcloud/vue/components/NcButton'
 import MenuDown from 'vue-material-design-icons/MenuDown.vue'
 import MenuUp from 'vue-material-design-icons/MenuUp.vue'
-import filesSortingMixin from '../mixins/filesSorting.ts'
+import { useFilesSorting } from '../composables/filesSorting.ts'
 
-export default defineComponent({
-	name: 'FilesListTableHeaderButton',
+defineProps<{
+	/**
+	 * The display name of the column this button represents.
+	 */
+	name: string
+	/**
+	 * The sorting mode this button represents.
+	 */
+	mode: string
+}>()
 
-	components: {
-		MenuDown,
-		MenuUp,
-		NcButton,
-	},
-
-	mixins: [
-		filesSortingMixin,
-	],
-
-	props: {
-		name: {
-			type: String,
-			required: true,
-		},
-
-		mode: {
-			type: String,
-			required: true,
-		},
-	},
-
-	methods: {
-		t: translate,
-	},
-})
+const {
+	sortingMode,
+	isAscSorting,
+	toggleSortBy,
+} = useFilesSorting()
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index 813e014b04254..ee212c5a9cb29 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -8,14 +8,14 @@
 		:data-component="userConfig.grid_view ? FileEntryGrid : FileEntry"
 		data-key="source"
 		:data-sources="nodes"
-		:grid-mode="userConfig.grid_view"
-		:extra-props="{
+		:gridMode="userConfig.grid_view"
+		:extraProps="{
 			isMimeAvailable,
 			isMtimeAvailable,
 			isSizeAvailable,
 			nodes,
 		}"
-		:scroll-to-index="scrollToIndex"
+		:scrollToIndex="scrollToIndex"
 		:caption="caption">
 		<!-- eslint-disable-next-line vue/singleline-html-element-content-newline -- no space allowed as otherwise `:empty` css selector does not trigger! -->
 		<template #filters><FileListFilterToSearch /><FileListFilterChips /></template>
@@ -25,8 +25,8 @@
 			<FilesListHeader
 				v-for="header in headers"
 				:key="header.id"
-				:current-folder="currentFolder"
-				:current-view="currentView"
+				:currentFolder="currentFolder"
+				:currentView="currentView"
 				:header="header" />
 		</template>
 
@@ -35,10 +35,10 @@
 			<!-- Table header and sort buttons -->
 			<FilesListTableHeader
 				ref="thead"
-				:current-view="currentView"
-				:is-mime-available="isMimeAvailable"
-				:is-mtime-available="isMtimeAvailable"
-				:is-size-available="isSizeAvailable"
+				:currentView="currentView"
+				:isMimeAvailable="isMimeAvailable"
+				:isMtimeAvailable="isMtimeAvailable"
+				:isSizeAvailable="isSizeAvailable"
 				:nodes="nodes" />
 		</template>
 
@@ -50,10 +50,10 @@
 		<!-- Tfoot-->
 		<template #footer>
 			<FilesListTableFooter
-				:current-view="currentView"
-				:is-mime-available="isMimeAvailable"
-				:is-mtime-available="isMtimeAvailable"
-				:is-size-available="isSizeAvailable"
+				:currentView="currentView"
+				:isMimeAvailable="isMimeAvailable"
+				:isMtimeAvailable="isMtimeAvailable"
+				:isSizeAvailable="isSizeAvailable"
 				:nodes="nodes"
 				:summary="summary" />
 		</template>
diff --git a/apps/files/src/components/FilesNavigationList.spec.ts b/apps/files/src/components/FilesNavigationList.spec.ts
index 9d728a59f8ff6..dc8165355b15f 100644
--- a/apps/files/src/components/FilesNavigationList.spec.ts
+++ b/apps/files/src/components/FilesNavigationList.spec.ts
@@ -4,12 +4,12 @@
  */
 
 import { getNavigation, View } from '@nextcloud/files'
-import { enableAutoDestroy, shallowMount } from '@vue/test-utils'
+import { enableAutoUnmount, shallowMount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, test } from 'vitest'
 import { nextTick } from 'vue'
 import FilesNavigationList from './FilesNavigationList.vue'
 
-enableAutoDestroy(afterEach)
+enableAutoUnmount(afterEach)
 
 describe('FilesNavigationList.vue', () => {
 	beforeEach(() => {
@@ -27,7 +27,7 @@ describe('FilesNavigationList.vue', () => {
 
 		navigation.register(view1)
 
-		const wrapper = shallowMount(FilesNavigationList)
+		const wrapper = shallowMount(FilesNavigationList, { global: { renderStubDefaultSlot: true } })
 		let items = wrapper.findAllComponents({ name: 'FilesNavigationListItem' })
 		expect(items).toHaveLength(1)
 		expect(items.at(0).props('view').id).toBe('view-1')
@@ -49,7 +49,7 @@ describe('FilesNavigationList.vue', () => {
 		navigation.register(view2)
 		navigation.register(view1)
 
-		const wrapper = shallowMount(FilesNavigationList)
+		const wrapper = shallowMount(FilesNavigationList, { global: { renderStubDefaultSlot: true } })
 		const items = wrapper.findAllComponents({ name: 'FilesNavigationListItem' })
 		expect(items).toHaveLength(2)
 		expect(items.at(0).props('view').id).toBe('view-1')
@@ -72,7 +72,7 @@ describe('FilesNavigationList.vue', () => {
 		navigation.register(view2)
 		navigation.register(view1)
 
-		const wrapper = shallowMount(FilesNavigationList)
+		const wrapper = shallowMount(FilesNavigationList, { global: { renderStubDefaultSlot: true } })
 		const items = wrapper.findAllComponents({ name: 'FilesNavigationListItem' })
 		expect(items).toHaveLength(2)
 		expect(items.at(0).props('view').id).toBe('view-1')
@@ -87,7 +87,7 @@ describe('FilesNavigationList.vue', () => {
 		navigation.register(view2)
 		navigation.register(view1)
 
-		const wrapper = shallowMount(FilesNavigationList)
+		const wrapper = shallowMount(FilesNavigationList, { global: { renderStubDefaultSlot: true } })
 		const items = wrapper.findAllComponents({ name: 'FilesNavigationListItem' })
 		expect(items).toHaveLength(2)
 		expect(items.at(0).props('view').id).toBe('view-1')
diff --git a/apps/files/src/components/FilesNavigationListItem.vue b/apps/files/src/components/FilesNavigationListItem.vue
index deaf5e0174869..7e0169c670bea 100644
--- a/apps/files/src/components/FilesNavigationListItem.vue
+++ b/apps/files/src/components/FilesNavigationListItem.vue
@@ -63,7 +63,7 @@ const sortedChildViews = computed(() => childViews.value.slice().sort((a, b) =>
 }))
 const hasChildViews = computed(() => childViews.value.length > 0)
 const activeViewId = inject('currentNavigationView', ref<string | undefined>(undefined))
-const isActiveView = computed(() => activeViewId.value.id === props.view.id)
+const isActiveView = computed(() => activeViewId.value === props.view.id)
 
 const navigationRoute = computed(() => {
 	if (props.view.params) {
@@ -130,21 +130,15 @@ const collator = Intl.Collator(
 	[getLanguage(), getCanonicalLocale()],
 	{ numeric: true, usage: 'sort' },
 )
-
-// TODO: Remove this with Vue 3 - the name is inferred by the filename!
-export default {
-	name: 'FilesNavigationListItem',
-}
 </script>
 
 <template>
 	<NcAppNavigationItem
 		class="files-navigation__item"
+		:data-cy-files-navigation-item="view.id"
 		:active="isActiveView"
-		allow-collapse
+		allowCollapse
 		:loading="isLoading"
-		:data-cy-files-navigation-item="view.id"
-		:exact="hasChildViews"
 		:name="view.name"
 		:open="isExpanded"
 		:pinned="view.sticky"
@@ -154,17 +148,13 @@ export default {
 			<NcIconSvgWrapper :svg="view.icon" />
 		</template>
 
-		<!-- Hack to force the collapse icon to be displayed -->
-		<li
-			v-if="!hasChildViews && !childViewsLoaded && view.loadChildViews"
-			v-show="false"
-			role="presentation" />
-
 		<!-- Recursively nest child views -->
-		<FilesNavigationListItem
-			v-for="childView in sortedChildViews"
-			:key="childView.id"
-			:level="level + 1"
-			:view="childView" />
+		<template v-if="hasChildViews || (!childViewsLoaded && view.loadChildViews)" #default>
+			<FilesNavigationListItem
+				v-for="childView in sortedChildViews"
+				:key="childView.id"
+				:level="level + 1"
+				:view="childView" />
+		</template>
 	</NcAppNavigationItem>
 </template>
diff --git a/apps/files/src/components/FilesNavigationSearch.vue b/apps/files/src/components/FilesNavigationSearch.vue
index 114910faceb7b..0dedc67eddd97 100644
--- a/apps/files/src/components/FilesNavigationSearch.vue
+++ b/apps/files/src/components/FilesNavigationSearch.vue
@@ -20,10 +20,12 @@ const activeStore = useActiveStore()
 const searchStore = useSearchStore()
 
 /**
- * When the route is changed from search view to something different
- * we need to clear the search box.
+ * When the route is changed from search view to something different we need to clear the search box.
+ *
+ * This component is rendered by the navigation, not by a `RouterView`, so the
+ * in-component guards do not apply to it and a global guard is needed.
  */
-onBeforeNavigation((to, from, next) => {
+onBeforeNavigation((to, from) => {
 	if (to.params.view !== VIEW_ID
 		&& (from.params.view === VIEW_ID || from.query.dir !== to.query.dir)) {
 		// we are leaving the search view or navigate to another directory -> unset the query
@@ -32,17 +34,15 @@ onBeforeNavigation((to, from, next) => {
 	} else if (to.params.view === VIEW_ID && from.params.view === VIEW_ID) {
 		// fix the query if the user refreshed the view
 		if (searchStore.query && !to.query.query) {
-			// @ts-expect-error This is a weird issue with vue-router v4 and will be fixed in v5 (vue 3)
-			return next({
+			return {
 				...to,
 				query: {
 					...to.query,
 					query: searchStore.query,
 				},
-			})
+			}
 		}
 	}
-	next()
 })
 
 /**
@@ -69,13 +69,13 @@ const searchLabel = computed(() => {
 				<template #icon>
 					<NcIconSvgWrapper :path="searchStore.scope === 'globally' ? mdiSearchWeb : mdiMagnify" />
 				</template>
-				<NcActionButton close-after-click @click="searchStore.scope = 'filter'">
+				<NcActionButton closeAfterClick @click="searchStore.scope = 'filter'">
 					<template #icon>
 						<NcIconSvgWrapper :path="mdiMagnify" />
 					</template>
 					{{ t('files', 'Search here') }}
 				</NcActionButton>
-				<NcActionButton close-after-click @click="searchStore.scope = 'globally'">
+				<NcActionButton closeAfterClick @click="searchStore.scope = 'globally'">
 					<template #icon>
 						<NcIconSvgWrapper :path="mdiSearchWeb" />
 					</template>
diff --git a/apps/files/src/components/FilesSidebar/FilesSidebarSubname.vue b/apps/files/src/components/FilesSidebar/FilesSidebarSubname.vue
index 5c3420ce48a31..e445842ada03a 100644
--- a/apps/files/src/components/FilesSidebar/FilesSidebarSubname.vue
+++ b/apps/files/src/components/FilesSidebar/FilesSidebarSubname.vue
@@ -41,7 +41,7 @@ const size = computed(() => formatFileSize(props.node.size ?? 0))
 				:class="$style.filesSidebarSubname__userBubble"
 				:title="t('files', 'Owner')"
 				:user="node.owner"
-				:display-name="node.attributes['owner-display-name']" />
+				:displayName="node.attributes['owner-display-name']" />
 		</template>
 	</div>
 </template>
diff --git a/apps/files/src/components/NavigationQuota.vue b/apps/files/src/components/NavigationQuota.vue
index 90f2149621e7f..758bbe31bd9d5 100644
--- a/apps/files/src/components/NavigationQuota.vue
+++ b/apps/files/src/components/NavigationQuota.vue
@@ -2,163 +2,157 @@
  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  - SPDX-License-Identifier: AGPL-3.0-or-later
  -->
-<template>
-	<NcAppNavigationItem
-		v-if="storageStats"
-		:aria-description="t('files', 'Storage information')"
-		:class="{ 'app-navigation-entry__settings-quota--not-unlimited': storageStats.quota >= 0 }"
-		:loading="loadingStorageStats"
-		:name="storageStatsTitle"
-		:title="storageStatsTooltip"
-		class="app-navigation-entry__settings-quota"
-		data-cy-files-navigation-settings-quota
-		@click.stop.prevent="debounceUpdateStorageStats">
-		<ChartPie slot="icon" :size="20" />
 
-		<!-- Progress bar -->
-		<NcProgressBar
-			v-if="storageStats.quota >= 0"
-			slot="extra"
-			:aria-label="t('files', 'Storage quota')"
-			:error="storageStats.relative > 80"
-			:value="Math.min(storageStats.relative, 100)" />
-	</NcAppNavigationItem>
-</template>
-
-<script>
+<script setup lang="ts">
 import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
-import { subscribe } from '@nextcloud/event-bus'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { formatFileSize } from '@nextcloud/files'
 import { loadState } from '@nextcloud/initial-state'
-import { translate } from '@nextcloud/l10n'
+import { t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
-import { debounce, throttle } from 'throttle-debounce'
+import { useThrottleFn } from '@vueuse/core'
+import { computed, onBeforeMount, onMounted, onUnmounted, ref } from 'vue'
 import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem'
 import NcProgressBar from '@nextcloud/vue/components/NcProgressBar'
 import ChartPie from 'vue-material-design-icons/ChartPieOutline.vue'
 import { logger } from '../utils/logger.ts'
 
-export default {
-	name: 'NavigationQuota',
+type StorageStats = {
+	used: number
+	free: number
+	total: number
+	quota: number
+	relative: number
+}
+
+const loadingStorageStats = ref(false)
+const storageStats = ref(loadState<StorageStats | null>('files', 'storageStats', null))
+
+const storageStatsTitle = computed(() => {
+	const usedQuotaByte = formatFileSize(storageStats.value?.used ?? 0, false, false)
+	const quotaByte = formatFileSize(storageStats.value?.total ?? 0, false, false)
 
-	components: {
-		ChartPie,
-		NcAppNavigationItem,
-		NcProgressBar,
-	},
+	// If no quota set
+	if (storageStats.value === null || storageStats.value?.quota < 0) {
+		return t('files', '{usedQuotaByte} used', { usedQuotaByte })
+	}
 
-	data() {
-		return {
-			loadingStorageStats: false,
-			storageStats: loadState('files', 'storageStats', null),
+	return t('files', '{used} of {quota} used', {
+		used: usedQuotaByte,
+		quota: quotaByte,
+	})
+})
+
+const storageStatsTooltip = computed(() => {
+	if (!storageStats.value?.relative) {
+		return ''
+	}
+
+	return t('files', '{relative}% used', storageStats.value)
+})
+
+const throttleUpdateStorageStats = useThrottleFn(updateStorageStats, 2000)
+onBeforeMount(() => {
+	subscribe('files:node:created', throttleUpdateStorageStats)
+	subscribe('files:node:deleted', throttleUpdateStorageStats)
+	subscribe('files:node:moved', throttleUpdateStorageStats)
+	subscribe('files:node:updated', throttleUpdateStorageStats)
+})
+onUnmounted(() => {
+	unsubscribe('files:node:created', throttleUpdateStorageStats)
+	unsubscribe('files:node:deleted', throttleUpdateStorageStats)
+	unsubscribe('files:node:moved', throttleUpdateStorageStats)
+	unsubscribe('files:node:updated', throttleUpdateStorageStats)
+})
+
+onMounted(() => {
+	// If the user has a quota set, warn if the available account storage is <=0
+	//
+	// NOTE: This doesn't catch situations where actual *server*
+	// disk (non-quota) space is low, but those should probably
+	// be handled differently anyway since a regular user can't
+	// can't do much about them (If we did want to indicate server disk
+	// space matters to users, we'd probably want to use a warning
+	// specific to that situation anyhow. So this covers warning covers
+	// our primary day-to-day concern (individual account quota usage).
+	//
+	if (storageStats.value && storageStats.value?.quota > 0 && storageStats.value?.free === 0) {
+		showStorageFullWarning()
+	}
+})
+
+/**
+ * Update the storage stats
+ * Throttled at max 1 refresh per minute
+ *
+ * @param event - If user interaction
+ */
+async function updateStorageStats(event?: unknown) {
+	if (loadingStorageStats.value) {
+		return
+	}
+
+	loadingStorageStats.value = true
+	try {
+		const response = await axios.get(generateUrl('/apps/files/api/v1/stats'))
+		if (!response?.data?.data) {
+			throw new Error('Invalid storage stats')
+		}
+
+		// Warn the user if the available account storage changed from > 0 to 0
+		// (unless only because quota was intentionally set to 0 by admin in the interim)
+		if (storageStats.value && storageStats.value?.free > 0 && response.data.data?.free === 0 && response.data.data?.quota > 0) {
+			showStorageFullWarning()
 		}
-	},
-
-	computed: {
-		storageStatsTitle() {
-			const usedQuotaByte = formatFileSize(this.storageStats?.used, false, false)
-			const quotaByte = formatFileSize(this.storageStats?.total, false, false)
-
-			// If no quota set
-			if (this.storageStats?.quota < 0) {
-				return this.t('files', '{usedQuotaByte} used', { usedQuotaByte })
-			}
-
-			return this.t('files', '{used} of {quota} used', {
-				used: usedQuotaByte,
-				quota: quotaByte,
-			})
-		},
-
-		storageStatsTooltip() {
-			if (!this.storageStats.relative) {
-				return ''
-			}
-
-			return this.t('files', '{relative}% used', this.storageStats)
-		},
-	},
-
-	beforeMount() {
-		subscribe('files:node:created', this.throttleUpdateStorageStats)
-		subscribe('files:node:deleted', this.throttleUpdateStorageStats)
-		subscribe('files:node:moved', this.throttleUpdateStorageStats)
-		subscribe('files:node:updated', this.throttleUpdateStorageStats)
-	},
-
-	mounted() {
-		// If the user has a quota set, warn if the available account storage is <=0
-		//
-		// NOTE: This doesn't catch situations where actual *server*
-		// disk (non-quota) space is low, but those should probably
-		// be handled differently anyway since a regular user can't
-		// can't do much about them (If we did want to indicate server disk
-		// space matters to users, we'd probably want to use a warning
-		// specific to that situation anyhow. So this covers warning covers
-		// our primary day-to-day concern (individual account quota usage).
-		//
-		if (this.storageStats?.quota > 0 && this.storageStats?.free === 0) {
-			this.showStorageFullWarning()
+
+		storageStats.value = response.data.data
+	} catch (error) {
+		logger.error('Could not refresh storage stats', { error })
+		// Only show to the user if it was manually triggered
+		if (event) {
+			showError(t('files', 'Could not refresh storage stats'))
 		}
-	},
-
-	methods: {
-		// From user input
-		debounceUpdateStorageStats: debounce(200, function(event) {
-			this.updateStorageStats(event)
-		}),
-
-		// From interval or event bus
-		throttleUpdateStorageStats: throttle(1000, function(event) {
-			this.updateStorageStats(event)
-		}),
-
-		/**
-		 * Update the storage stats
-		 * Throttled at max 1 refresh per minute
-		 *
-		 * @param {Event} [event] if user interaction
-		 */
-		async updateStorageStats(event = null) {
-			if (this.loadingStorageStats) {
-				return
-			}
-
-			this.loadingStorageStats = true
-			try {
-				const response = await axios.get(generateUrl('/apps/files/api/v1/stats'))
-				if (!response?.data?.data) {
-					throw new Error('Invalid storage stats')
-				}
-
-				// Warn the user if the available account storage changed from > 0 to 0
-				// (unless only because quota was intentionally set to 0 by admin in the interim)
-				if (this.storageStats?.free > 0 && response.data.data?.free === 0 && response.data.data?.quota > 0) {
-					this.showStorageFullWarning()
-				}
-
-				this.storageStats = response.data.data
-			} catch (error) {
-				logger.error('Could not refresh storage stats', { error })
-				// Only show to the user if it was manually triggered
-				if (event) {
-					showError(t('files', 'Could not refresh storage stats'))
-				}
-			} finally {
-				this.loadingStorageStats = false
-			}
-		},
-
-		showStorageFullWarning() {
-			showError(this.t('files', 'Your storage is full, files can not be updated or synced anymore!'))
-		},
-
-		t: translate,
-	},
+	} finally {
+		loadingStorageStats.value = false
+	}
+}
+
+/**
+ * Show a warning that the user's storage is full and files can not be updated or synced anymore
+ */
+function showStorageFullWarning() {
+	showError(t('files', 'Your storage is full, files can not be updated or synced anymore!'))
 }
 </script>
 
+<template>
+	<NcAppNavigationItem
+		v-if="storageStats"
+		:aria-description="t('files', 'Storage information')"
+		:class="{ 'app-navigation-entry__settings-quota--not-unlimited': storageStats.quota >= 0 }"
+		:loading="loadingStorageStats"
+		:name="storageStatsTitle"
+		:title="storageStatsTooltip"
+		class="app-navigation-entry__settings-quota"
+		data-cy-files-navigation-settings-quota
+		@click.stop.prevent="throttleUpdateStorageStats">
+		<template #icon>
+			<ChartPie :size="20" />
+		</template>
+
+		<!-- Progress bar -->
+		<template #extra>
+			<NcProgressBar
+				v-if="storageStats.quota >= 0"
+
+				:aria-label="t('files', 'Storage quota')"
+				:error="storageStats.relative > 80"
+				:value="Math.min(storageStats.relative, 100)" />
+		</template>
+	</NcAppNavigationItem>
+</template>
+
 <style lang="scss" scoped>
 // User storage stats display
 .app-navigation-entry__settings-quota {
diff --git a/apps/files/src/components/NewNodeDialog.vue b/apps/files/src/components/NewNodeDialog.vue
index 21a15a0a74ce6..0e0404624f5ab 100644
--- a/apps/files/src/components/NewNodeDialog.vue
+++ b/apps/files/src/components/NewNodeDialog.vue
@@ -7,8 +7,8 @@
 		data-cy-files-new-node-dialog
 		:name="name"
 		:open="open"
-		close-on-click-outside
-		out-transition
+		closeOnClickOutside
+		outTransition
 		@update:open="emit('close', null)">
 		<template #actions>
 			<NcButton
@@ -28,7 +28,7 @@
 				v-model="localDefaultName"
 				data-cy-files-new-node-dialog-input
 				:error="validity !== ''"
-				:helper-text="validity"
+				:helperText="validity"
 				:label="label" />
 
 			<!-- Hidden file warning -->
diff --git a/apps/files/src/components/Settings/SettingsSanitizeFilenames.vue b/apps/files/src/components/Settings/SettingsSanitizeFilenames.vue
index 878500e46fb7d..84661ae65352e 100644
--- a/apps/files/src/components/Settings/SettingsSanitizeFilenames.vue
+++ b/apps/files/src/components/Settings/SettingsSanitizeFilenames.vue
@@ -142,7 +142,7 @@ async function refreshStatus() {
 			<NcInputField
 				v-model="renameLimit"
 				:label="t('files', 'Limit')"
-				:helper-text="t('files', 'This allows to configure how many users should be processed in one background job run.')"
+				:helperText="t('files', 'This allows to configure how many users should be processed in one background job run.')"
 				min="1"
 				type="number" />
 
diff --git a/apps/files/src/components/TemplateFiller.vue b/apps/files/src/components/TemplateFiller.vue
index 41a5d54116aa4..5eb59b45967bb 100644
--- a/apps/files/src/components/TemplateFiller.vue
+++ b/apps/files/src/components/TemplateFiller.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<NcModal label-id="template-field-modal__label">
+	<NcModal labelId="template-field-modal__label">
 		<div class="template-field-modal__content">
 			<form>
 				<h3 id="template-field-modal__label">
diff --git a/apps/files/src/components/TemplateFiller/TemplateRichTextField.vue b/apps/files/src/components/TemplateFiller/TemplateRichTextField.vue
index 45acea9c304d1..3315b954519ed 100644
--- a/apps/files/src/components/TemplateFiller/TemplateRichTextField.vue
+++ b/apps/files/src/components/TemplateFiller/TemplateRichTextField.vue
@@ -14,7 +14,7 @@
 			v-model="value"
 			type="text"
 			:label="fieldLabel"
-			:label-outside="true"
+			:labelOutside="true"
 			:placeholder="field.content"
 			@input="input" />
 	</div>
diff --git a/apps/files/src/components/TemplatePreview.vue b/apps/files/src/components/TemplatePreview.vue
index c3af69053088d..ebc04e0db3abc 100644
--- a/apps/files/src/components/TemplatePreview.vue
+++ b/apps/files/src/components/TemplatePreview.vue
@@ -87,6 +87,8 @@ export default {
 		},
 	},
 
+	emits: ['check', 'confirmClick'],
+
 	data() {
 		return {
 			failedPreview: false,
@@ -143,7 +145,7 @@ export default {
 
 		onClick() {
 			if (this.checked) {
-				this.$emit('confirm-click', this.fileid)
+				this.$emit('confirmClick', this.fileid)
 			}
 		},
 	},
diff --git a/apps/files/src/components/TransferOwnershipDialogue.vue b/apps/files/src/components/TransferOwnershipDialogue.vue
index c8aa55224db9f..d181849ca0a9c 100644
--- a/apps/files/src/components/TransferOwnershipDialogue.vue
+++ b/apps/files/src/components/TransferOwnershipDialogue.vue
@@ -160,7 +160,7 @@ async function submit() {
 			:label="t('files', 'Transfer ownership of a file or folder')">
 			<NcFormBox v-slot="{ itemClass }">
 				<NcFormBoxButton
-					inverted-accent
+					invertedAccent
 					:label="t('files', 'File or folder to transfer')"
 					:description="nodeForTransfer?.displayname ?? t('files', 'No file or folder selected')"
 					@click="chooseNodeForTransfer">
@@ -173,7 +173,7 @@ async function submit() {
 					<NcSelectUsers
 						v-model="selectedUser"
 						:class="$style.transferOwnership__newOwnerSelect"
-						:input-label="t('files', 'New owner')"
+						:inputLabel="t('files', 'New owner')"
 						:loading="loadingUsers"
 						:options="userSuggestions"
 						@search="searchUsersDebounced" />
diff --git a/apps/files/src/components/VirtualList.vue b/apps/files/src/components/VirtualList.vue
index 9121f55e105e1..fa38ac0eed0ee 100644
--- a/apps/files/src/components/VirtualList.vue
+++ b/apps/files/src/components/VirtualList.vue
@@ -319,7 +319,7 @@ export default defineComponent({
 		})
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		if (this.resizeObserver) {
 			this.resizeObserver.disconnect()
 		}
diff --git a/apps/files/src/composables/filesSorting.ts b/apps/files/src/composables/filesSorting.ts
new file mode 100644
index 0000000000000..2acaff4c01bc6
--- /dev/null
+++ b/apps/files/src/composables/filesSorting.ts
@@ -0,0 +1,65 @@
+/*!
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { computed } from 'vue'
+import { useActiveStore } from '../store/active.ts'
+import { useViewConfigStore } from '../store/viewConfig.ts'
+
+/**
+ * Composable to get and set the sorting mode and direction for the current view.
+ */
+export function useFilesSorting() {
+	const activeStore = useActiveStore()
+	const viewConfigStore = useViewConfigStore()
+
+	/**
+	 * Get the sorting mode for the current view
+	 */
+	const sortingMode = computed(() => {
+		if (!activeStore.activeView) {
+			return 'basename'
+		}
+
+		return viewConfigStore.getConfig(activeStore.activeView.id)?.sorting_mode as string
+			|| activeStore.activeView?.defaultSortKey
+			|| 'basename'
+	})
+
+	/**
+	 * Get the sorting direction for the current view
+	 */
+	const isAscSorting = computed(() => {
+		if (!activeStore.activeView) {
+			return true
+		}
+
+		const sortingDirection = viewConfigStore.getConfig(activeStore.activeView.id)?.sorting_direction
+		return sortingDirection !== 'desc'
+	})
+
+	/**
+	 * Toogle sorting by a given key.
+	 *
+	 * If we're already sorting by this key, toggle the direction.
+	 * Otherwise, sort ASC by this key.
+	 *
+	 * @param key - The key to sort by
+	 */
+	function toggleSortBy(key: string) {
+		// If we're already sorting by this key, flip the direction
+		if (sortingMode.value === key) {
+			viewConfigStore.toggleSortingDirection(activeStore.activeView?.id)
+			return
+		}
+		// else sort ASC by this new key
+		viewConfigStore.setSortingBy(key, activeStore.activeView?.id)
+	}
+
+	return {
+		toggleSortBy,
+		sortingMode,
+		isAscSorting,
+	}
+}
diff --git a/apps/files/src/composables/useBeforeNavigation.ts b/apps/files/src/composables/useBeforeNavigation.ts
index 38b72e40fb33a..a8f9c4aa3a096 100644
--- a/apps/files/src/composables/useBeforeNavigation.ts
+++ b/apps/files/src/composables/useBeforeNavigation.ts
@@ -6,10 +6,13 @@
 import type { NavigationGuard } from 'vue-router'
 
 import { onUnmounted } from 'vue'
-import { useRouter } from 'vue-router/composables'
+import { useRouter } from 'vue-router'
 
 /**
- * Helper until we use Vue-Router v4 (Vue3).
+ * Register a global navigation guard for the lifetime of the calling component.
+ *
+ * For components that are not rendered by a `RouterView` - such as the ones in
+ * the app navigation - the in-component guards never run, so they need this.
  *
  * @param fn - The navigation guard
  */
diff --git a/apps/files/src/composables/useFileActions.ts b/apps/files/src/composables/useFileActions.ts
index 05a77d701233d..7308fafac0566 100644
--- a/apps/files/src/composables/useFileActions.ts
+++ b/apps/files/src/composables/useFileActions.ts
@@ -4,12 +4,10 @@
  */
 
 import type { ActionContext, IFileAction } from '@nextcloud/files'
-import type { MaybeRefOrGetter } from '@vueuse/core'
-import type { Ref } from 'vue'
+import type { MaybeRefOrGetter, Ref } from 'vue'
 
 import { getFileActions, getFilesRegistry } from '@nextcloud/files'
-import { toValue } from '@vueuse/core'
-import { computed, readonly, ref } from 'vue'
+import { computed, readonly, ref, toValue } from 'vue'
 
 const actions = ref<IFileAction[] | undefined>()
 
diff --git a/apps/files/src/composables/useFileListActions.ts b/apps/files/src/composables/useFileListActions.ts
index 1dda302f61824..24cb2c5d3514c 100644
--- a/apps/files/src/composables/useFileListActions.ts
+++ b/apps/files/src/composables/useFileListActions.ts
@@ -4,12 +4,10 @@
  */
 
 import type { IFileListAction, IFolder, INode, IView } from '@nextcloud/files'
-import type { MaybeRefOrGetter } from '@vueuse/core'
-import type { ComputedRef } from 'vue'
+import type { ComputedRef, MaybeRefOrGetter } from 'vue'
 
 import { getFileListActions, getFilesRegistry } from '@nextcloud/files'
-import { toValue } from '@vueuse/core'
-import { computed, ref } from 'vue'
+import { computed, ref, toValue } from 'vue'
 
 const actions = ref<IFileListAction[]>()
 const sorted = computed(() => [...(actions.value ?? [])].sort((a, b) => a.order - b.order))
diff --git a/apps/files/src/composables/useHotKeys.spec.ts b/apps/files/src/composables/useHotKeys.spec.ts
index 4b9cf837eef92..f9de8dd8b5302 100644
--- a/apps/files/src/composables/useHotKeys.spec.ts
+++ b/apps/files/src/composables/useHotKeys.spec.ts
@@ -4,17 +4,18 @@
  */
 
 import type { View } from '@nextcloud/files'
-import type { Location } from 'vue-router'
+import type * as vueRouter from 'vue-router'
+import type { RouteLocation } from 'vue-router'
 
 import axios from '@nextcloud/axios'
 import { File, Folder, Permission, registerFileAction } from '@nextcloud/files'
-import { enableAutoDestroy, mount } from '@vue/test-utils'
+import { enableAutoUnmount, mount } from '@vue/test-utils'
 import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent, nextTick } from 'vue'
 import { action as deleteAction } from '../actions/deleteAction.ts'
 import { useActiveStore } from '../store/active.ts'
 import { useFilesStore } from '../store/files.ts'
-import { getPinia } from '../store/index.ts'
+import { pinia } from '../store/index.ts'
 import { useUserConfigStore } from '../store/userconfig.ts'
 import { useHotKeys } from './useHotKeys.ts'
 
@@ -32,7 +33,7 @@ const route = vi.hoisted(() => ({
 
 // mocked router
 const router = vi.hoisted(() => ({
-	push: vi.fn<(route: Location) => void>(),
+	push: vi.fn<(route: RouteLocation) => void>(),
 }))
 
 vi.mock('../actions/sidebarAction.ts', { spy: true })
@@ -40,7 +41,8 @@ vi.mock('../actions/deleteAction.ts', { spy: true })
 vi.mock('../actions/favoriteAction.ts', { spy: true })
 vi.mock('../actions/renameAction.ts', { spy: true })
 
-vi.mock('vue-router/composables', () => ({
+vi.mock('vue-router', async (importOriginal) => ({
+	...await importOriginal<typeof vueRouter>(),
 	useRoute: vi.fn(() => route),
 	useRouter: vi.fn(() => router),
 }))
@@ -72,12 +74,12 @@ beforeAll(() => {
 })
 
 describe('HotKeysService testing', () => {
-	const activeStore = useActiveStore(getPinia())
+	const activeStore = useActiveStore(pinia)
 
 	let initialState: HTMLInputElement
 	let component: ReturnType<typeof mount>
 
-	enableAutoDestroy(afterEach)
+	enableAutoUnmount(afterEach)
 
 	afterEach(() => {
 		document.body.removeChild(initialState)
@@ -105,7 +107,7 @@ describe('HotKeysService testing', () => {
 			permissions: Permission.CREATE,
 		})
 
-		const files = useFilesStore(getPinia())
+		const files = useFilesStore(pinia)
 		files.setRoot({ service: 'files', root })
 
 		// Setting the view first as it reset the active node
@@ -129,7 +131,7 @@ describe('HotKeysService testing', () => {
 	// tests for register action handling
 
 	it('registeres actions', () => {
-		component.destroy()
+		component.unmount()
 		registerFileAction(deleteAction)
 		component = mount(TestComponent)
 
@@ -146,7 +148,7 @@ describe('HotKeysService testing', () => {
 	})
 
 	it('passes the hotkey trigger to the action', () => {
-		component.destroy()
+		component.unmount()
 		registerFileAction(deleteAction)
 		component = mount(TestComponent)
 
@@ -169,7 +171,7 @@ describe('HotKeysService testing', () => {
 	it('Pressing v should toggle grid view', async () => {
 		vi.spyOn(axios, 'put').mockImplementationOnce(() => Promise.resolve())
 
-		const userConfigStore = useUserConfigStore(getPinia())
+		const userConfigStore = useUserConfigStore(pinia)
 		userConfigStore.userConfig.grid_view = false
 		expect(userConfigStore.userConfig.grid_view).toBe(false)
 
@@ -185,7 +187,7 @@ describe('HotKeysService testing', () => {
 	])('Pressing v with modifier key %s should not toggle grid view', async (modifier: string) => {
 		vi.spyOn(axios, 'put').mockImplementationOnce(() => Promise.resolve())
 
-		const userConfigStore = useUserConfigStore(getPinia())
+		const userConfigStore = useUserConfigStore(pinia)
 		userConfigStore.userConfig.grid_view = false
 		expect(userConfigStore.userConfig.grid_view).toBe(false)
 
diff --git a/apps/files/src/composables/useHotKeys.ts b/apps/files/src/composables/useHotKeys.ts
index 17f189bce58cc..c4008db213b75 100644
--- a/apps/files/src/composables/useHotKeys.ts
+++ b/apps/files/src/composables/useHotKeys.ts
@@ -6,7 +6,7 @@
 import { getFileActions } from '@nextcloud/files'
 import { useHotKey } from '@nextcloud/vue/composables/useHotKey'
 import { dirname } from 'path'
-import { useRoute, useRouter } from 'vue-router/composables'
+import { useRoute, useRouter } from 'vue-router'
 import { useUserConfigStore } from '../store/userconfig.ts'
 import { executeAction } from '../utils/actionUtils.ts'
 import { logger } from '../utils/logger.ts'
diff --git a/apps/files/src/composables/useNewFileMenuActions.spec.ts b/apps/files/src/composables/useNewFileMenuActions.spec.ts
new file mode 100644
index 0000000000000..e038a4e4fc531
--- /dev/null
+++ b/apps/files/src/composables/useNewFileMenuActions.spec.ts
@@ -0,0 +1,93 @@
+/*!
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { addNewFileMenuEntry, INode } from '@nextcloud/files'
+import type * as composable from './useNewFileMenuActions.ts'
+
+import { File, Folder, NewMenuEntryCategory, Permission } from '@nextcloud/files'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+interface Context {
+	useNewFileMenuActions: typeof composable.useNewFileMenuActions
+	addNewFileMenuEntry: typeof addNewFileMenuEntry
+}
+
+const folder = new Folder({
+	id: 1,
+	owner: 'admin',
+	permissions: Permission.ALL,
+	root: '/files/admin',
+	source: 'http://nextcloud.local/remote.php/dav/files/admin/folder',
+})
+
+describe('useNewFileMenuActions', () => {
+	beforeEach(async (context: Context) => {
+		delete globalThis._nc_files_scope
+		// reset modules to reset the scoped globals of the library (the new file menu)
+		vi.resetModules()
+		context.useNewFileMenuActions = (await import('./useNewFileMenuActions.ts')).useNewFileMenuActions
+		context.addNewFileMenuEntry = (await import('@nextcloud/files')).addNewFileMenuEntry
+	})
+
+	it<Context>('has no actions without a folder', ({ useNewFileMenuActions, addNewFileMenuEntry }) => {
+		addNewFileMenuEntry({ id: 'new', displayName: 'New', iconSvgInline: '<svg />', handler: vi.fn() })
+
+		expect(useNewFileMenuActions(ref(undefined), ref([])).value).toStrictEqual([])
+	})
+
+	it<Context>('groups the entries by category', ({ useNewFileMenuActions, addNewFileMenuEntry }) => {
+		addNewFileMenuEntry({ id: 'other', category: NewMenuEntryCategory.Other, displayName: 'Other', iconSvgInline: '<svg />', handler: vi.fn() })
+		addNewFileMenuEntry({ id: 'upload', category: NewMenuEntryCategory.UploadFromDevice, displayName: 'Upload', iconSvgInline: '<svg />', handler: vi.fn() })
+		// entries without a category default to "create new"
+		addNewFileMenuEntry({ id: 'new', displayName: 'New', iconSvgInline: '<svg />', handler: vi.fn() })
+
+		const actions = useNewFileMenuActions(ref(folder), ref([]))
+		expect(actions.value.map(({ caption, actions }) => [caption, actions.map(({ label }) => label)]))
+			.toStrictEqual([
+				['Upload from device', ['Upload']],
+				['Create new', ['New']],
+				['Other', ['Other']],
+			])
+	})
+
+	it<Context>('skips empty groups', ({ useNewFileMenuActions, addNewFileMenuEntry }) => {
+		addNewFileMenuEntry({ id: 'new', displayName: 'New', iconSvgInline: '<svg />', handler: vi.fn() })
+
+		const actions = useNewFileMenuActions(ref(folder), ref([]))
+		expect(actions.value.map(({ caption }) => caption)).toStrictEqual(['Create new'])
+	})
+
+	it<Context>('entries are sorted and filtered by the entry conditions', ({ useNewFileMenuActions, addNewFileMenuEntry }) => {
+		addNewFileMenuEntry({ id: 'second', order: 2, displayName: 'Second', iconSvgInline: '<svg />', handler: vi.fn() })
+		addNewFileMenuEntry({ id: 'first', order: 1, displayName: 'First', iconSvgInline: '<svg />', handler: vi.fn() })
+		addNewFileMenuEntry({ id: 'disabled', displayName: 'Disabled', iconSvgInline: '<svg />', enabled: () => false, handler: vi.fn() })
+
+		const actions = useNewFileMenuActions(ref(folder), ref([]))
+		expect(actions.value[0]!.actions.map(({ label }) => label)).toStrictEqual(['First', 'Second'])
+	})
+
+	it<Context>('provides the icon of an entry', ({ useNewFileMenuActions, addNewFileMenuEntry }) => {
+		addNewFileMenuEntry({ id: 'icon', displayName: 'With icon', iconSvgInline: '<svg id="icon" />', handler: vi.fn() })
+
+		const actions = useNewFileMenuActions(ref(folder), ref([]))
+		expect(actions.value[0]!.actions.map(({ iconSvg }) => iconSvg)).toStrictEqual(['<svg id="icon" />'])
+	})
+
+	it<Context>('calls the entry handler with the current folder and its contents', ({ useNewFileMenuActions, addNewFileMenuEntry }) => {
+		const handler = vi.fn()
+		addNewFileMenuEntry({ id: 'new', displayName: 'New', iconSvgInline: '<svg />', handler })
+
+		const contents = ref<INode[]>([])
+		const actions = useNewFileMenuActions(ref(folder), contents)
+
+		// the contents are resolved on click, so also nodes added after the menu was built are passed
+		const node = new File({ mime: 'text/plain', owner: 'admin', root: '/files/admin', source: `${folder.source}/file.txt` })
+		contents.value = [node]
+
+		actions.value[0]!.actions[0]!.onClick()
+		expect(handler).toHaveBeenCalledWith(folder, [node])
+	})
+})
diff --git a/apps/files/src/composables/useNewFileMenuActions.ts b/apps/files/src/composables/useNewFileMenuActions.ts
new file mode 100644
index 0000000000000..11ad0aeacf5a8
--- /dev/null
+++ b/apps/files/src/composables/useNewFileMenuActions.ts
@@ -0,0 +1,54 @@
+/*!
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { IFolder, INode, NewMenuEntry } from '@nextcloud/files'
+import type { FilePickerItem, FilePickerItemGroup } from '@nextcloud/vue/components/NcUploadPicker'
+import type { ComputedRef, MaybeRefOrGetter } from 'vue'
+
+import { getNewFileMenuEntries, NewMenuEntryCategory } from '@nextcloud/files'
+import { t } from '@nextcloud/l10n'
+import { computed, toValue } from 'vue'
+
+/**
+ * Get the registered "new"-menu entries of a folder as actions for the upload picker,
+ * grouped by the category of the entries.
+ *
+ * @param folder - The folder the new nodes are created in
+ * @param contents - The current contents of that folder, passed to the entry handlers
+ */
+export function useNewFileMenuActions(
+	folder: MaybeRefOrGetter<IFolder | undefined>,
+	contents: MaybeRefOrGetter<INode[]>,
+): ComputedRef<FilePickerItemGroup[]> {
+	return computed(() => {
+		const context = toValue(folder)
+		if (context === undefined) {
+			return []
+		}
+
+		const entries = getNewFileMenuEntries(context)
+
+		/**
+		 * Map a menu entry to a picker action.
+		 * The folder contents are resolved on click to also pass nodes added after the menu was built.
+		 *
+		 * @param entry - The menu entry to map
+		 */
+		const toAction = (entry: NewMenuEntry): FilePickerItem => ({
+			label: entry.displayName,
+			iconSvg: entry.iconSvgInline ?? '',
+			onClick: () => entry.handler(context, toValue(contents)),
+		})
+
+		return [
+			{ caption: t('files', 'Upload from device'), category: NewMenuEntryCategory.UploadFromDevice },
+			{ caption: t('files', 'Create new'), category: NewMenuEntryCategory.CreateNew },
+			{ caption: t('files', 'Other'), category: NewMenuEntryCategory.Other },
+		].map(({ caption, category }) => ({
+			caption,
+			actions: entries.filter((entry) => entry.category === category).map(toAction),
+		})).filter(({ actions }) => actions.length > 0)
+	})
+}
diff --git a/apps/files/src/composables/usePreviewImage.ts b/apps/files/src/composables/usePreviewImage.ts
index 692474113ae8d..f515d8f960500 100644
--- a/apps/files/src/composables/usePreviewImage.ts
+++ b/apps/files/src/composables/usePreviewImage.ts
@@ -4,13 +4,12 @@
  */
 
 import type { INode } from '@nextcloud/files'
-import type { MaybeRefOrGetter } from '@vueuse/core'
+import type { MaybeRefOrGetter } from 'vue'
 
 import { FileType } from '@nextcloud/files'
 import { generateUrl } from '@nextcloud/router'
 import { getSharingToken, isPublicShare } from '@nextcloud/sharing/public'
-import { toValue } from '@vueuse/core'
-import { computed } from 'vue'
+import { computed, toValue } from 'vue'
 
 /**
  * Get the preview URL for a given node.
diff --git a/apps/files/src/composables/useRouteParameters.ts b/apps/files/src/composables/useRouteParameters.ts
index ec94928abcb6f..e3e5cc4d6feca 100644
--- a/apps/files/src/composables/useRouteParameters.ts
+++ b/apps/files/src/composables/useRouteParameters.ts
@@ -4,7 +4,7 @@
  */
 
 import { computed } from 'vue'
-import { useRoute } from 'vue-router/composables'
+import { useRoute } from 'vue-router'
 
 /**
  * Get information about the current route
@@ -23,7 +23,7 @@ export function useRouteParameters() {
 	 * Get the current fileId used on the route
 	 */
 	const fileId = computed<number | null>(() => {
-		const fileId = Number.parseInt(route.params.fileid ?? '0') || null
+		const fileId = Number.parseInt([route.params.fileid ?? '0'].flat()[0]) || null
 		return Number.isNaN(fileId) ? null : fileId
 	})
 
diff --git a/apps/files/src/composables/useViews.spec.ts b/apps/files/src/composables/useViews.spec.ts
index c263dbc022130..cd782489956a5 100644
--- a/apps/files/src/composables/useViews.spec.ts
+++ b/apps/files/src/composables/useViews.spec.ts
@@ -4,7 +4,7 @@
  */
 
 import { getNavigation, View } from '@nextcloud/files'
-import { enableAutoDestroy, mount } from '@vue/test-utils'
+import { enableAutoUnmount, mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { defineComponent } from 'vue'
 import { useViews, useVisibleViews } from './useViews.ts'
@@ -20,7 +20,7 @@ const TestComponent = defineComponent({
 	},
 })
 
-enableAutoDestroy(afterEach)
+enableAutoUnmount(afterEach)
 
 describe('Composables: useViews', () => {
 	const navigation = getNavigation()
diff --git a/apps/files/src/filters/FilenameFilter.ts b/apps/files/src/filters/FilenameFilter.ts
index 4bbc3c10da570..4985b7fd4a963 100644
--- a/apps/files/src/filters/FilenameFilter.ts
+++ b/apps/files/src/filters/FilenameFilter.ts
@@ -7,7 +7,7 @@ import type { IFileListFilterChip, INode } from '@nextcloud/files'
 
 import { subscribe } from '@nextcloud/event-bus'
 import { FileListFilter, registerFileListFilter } from '@nextcloud/files'
-import { getPinia } from '../store/index.ts'
+import { pinia } from '../store/index.ts'
 import { useSearchStore } from '../store/search.ts'
 
 /**
@@ -55,7 +55,7 @@ class FilenameFilter extends FileListFilter {
 				})
 			} else {
 				// make sure to also reset the search store when pressing the "X" on the filter chip
-				const store = useSearchStore(getPinia())
+				const store = useSearchStore(pinia)
 				if (store.scope === 'filter') {
 					store.query = ''
 				}
diff --git a/apps/files/src/filters/ModifiedFilter.ts b/apps/files/src/filters/ModifiedFilter.ts
index e78dacbd37d36..95bbd36962e87 100644
--- a/apps/files/src/filters/ModifiedFilter.ts
+++ b/apps/files/src/filters/ModifiedFilter.ts
@@ -8,8 +8,7 @@ import type { IFileListFilterChip, IFileListFilterWithUi, INode } from '@nextclo
 import svgCalendarRangeOutline from '@mdi/svg/svg/calendar-range-outline.svg?raw'
 import { FileListFilter, registerFileListFilter } from '@nextcloud/files'
 import { t } from '@nextcloud/l10n'
-import wrap from '@vue/web-component-wrapper'
-import Vue from 'vue'
+import { defineCustomElement } from 'vue'
 import FileListFilterModified from '../components/FileListFilter/FileListFilterModified.vue'
 
 export interface ITimePreset {
@@ -21,7 +20,7 @@ export interface ITimePreset {
 const tagName = 'files-file-list-filter-modified'
 
 class ModifiedFilter extends FileListFilter implements IFileListFilterWithUi {
-	private currentInstance?: Vue
+	private currentInstance?: InstanceType<typeof FileListFilterModified>
 	private currentPreset?: ITimePreset
 
 	public readonly displayName = t('files', 'Modified')
@@ -72,20 +71,7 @@ export type { ModifiedFilter }
  * Register the file list filter by modification date
  */
 export function registerModifiedFilter() {
-	const WrappedComponent = wrap(Vue, FileListFilterModified)
-	// In Vue 2, wrap doesn't support disabling shadow :(
-	// Disable with a hack
-	Object.defineProperty(WrappedComponent.prototype, 'attachShadow', {
-		value() {
-			return this
-		},
-	})
-	Object.defineProperty(WrappedComponent.prototype, 'shadowRoot', {
-		get() {
-			return this
-		},
-	})
-
+	const WrappedComponent = defineCustomElement(FileListFilterModified, { shadowRoot: false })
 	customElements.define(tagName, WrappedComponent)
 	registerFileListFilter(new ModifiedFilter())
 }
diff --git a/apps/files/src/filters/TypeFilter.spec.ts b/apps/files/src/filters/TypeFilter.spec.ts
new file mode 100644
index 0000000000000..54040c7e2d71d
--- /dev/null
+++ b/apps/files/src/filters/TypeFilter.spec.ts
@@ -0,0 +1,74 @@
+/*!
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { TypeFilter } from './TypeFilter.ts'
+
+import { getFileListFilters } from '@nextcloud/files'
+import { beforeAll, describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
+import { registerTypeFilter } from './TypeFilter.ts'
+
+const TAG_NAME = 'files-file-list-filter-type'
+
+/** Mount the filter's custom element the way `FileListFilters.vue` does. */
+async function mountFilterElement(filter: TypeFilter) {
+	const element = document.createElement(TAG_NAME) as HTMLElement & { filter?: TypeFilter }
+	// The Vue renderer assigns `.prop` bindings before inserting the element
+	element.filter = filter
+	document.body.appendChild(element)
+	await nextTick()
+	await nextTick()
+	return element
+}
+
+describe('TypeFilter', () => {
+	let filter: TypeFilter
+
+	beforeAll(() => {
+		window.OC = { ...window.OC, MimeTypeList: { aliases: {} } }
+		registerTypeFilter()
+		filter = getFileListFilters().find(({ id }) => id === 'files:type') as TypeFilter
+	})
+
+	it('registers the filter and its custom element', () => {
+		expect(filter).toBeTruthy()
+		expect(filter.tagName).toBe(TAG_NAME)
+		expect(customElements.get(TAG_NAME)).toBeTruthy()
+	})
+
+	it('renders the type presets', async () => {
+		const element = await mountFilterElement(filter)
+
+		expect(element.textContent).toContain('Folders')
+		expect(element.textContent).toContain('Spreadsheets')
+	})
+
+	// Resetting an empty selection used to re-enter `setPresets()`, which resets
+	// the filter again — an endless update loop that left the filter unusable.
+	it('does not loop when resetting an empty selection', async () => {
+		const element = await mountFilterElement(filter)
+
+		filter.reset()
+		await nextTick()
+
+		expect(filter.presets).toEqual([])
+		expect(element.textContent).toContain('Folders')
+	})
+
+	it('filters nodes by the selected presets', async () => {
+		await mountFilterElement(filter)
+
+		filter.setPresets([{ id: 'folder', label: 'Folders', icon: '', mime: ['httpd/unix-directory'] }])
+
+		const nodes = [
+			{ mime: 'httpd/unix-directory' },
+			{ mime: 'text/plain' },
+		] as Parameters<TypeFilter['filter']>[0]
+		expect(filter.filter(nodes)).toEqual([{ mime: 'httpd/unix-directory' }])
+
+		filter.setPresets([])
+		expect(filter.filter(nodes)).toEqual(nodes)
+	})
+})
diff --git a/apps/files/src/filters/TypeFilter.ts b/apps/files/src/filters/TypeFilter.ts
index a49d0935d5d42..cd92bfee06a61 100644
--- a/apps/files/src/filters/TypeFilter.ts
+++ b/apps/files/src/filters/TypeFilter.ts
@@ -8,8 +8,7 @@ import type { IFileListFilterChip, IFileListFilterWithUi, INode } from '@nextclo
 import svgFileOutline from '@mdi/svg/svg/file-outline.svg?raw'
 import { FileListFilter, registerFileListFilter } from '@nextcloud/files'
 import { t } from '@nextcloud/l10n'
-import wrap from '@vue/web-component-wrapper'
-import Vue from 'vue'
+import { defineCustomElement } from 'vue'
 import FileListFilterType from '../components/FileListFilter/FileListFilterType.vue'
 import { logger } from '../utils/logger.ts'
 
@@ -23,7 +22,6 @@ export interface ITypePreset {
 const tagName = 'files-file-list-filter-type'
 
 class TypeFilter extends FileListFilter implements IFileListFilterWithUi {
-	private currentInstance?: Vue
 	private currentPresets: ITypePreset[]
 
 	public readonly displayName = t('files', 'Type')
@@ -71,12 +69,6 @@ class TypeFilter extends FileListFilter implements IFileListFilterWithUi {
 		logger.debug('TypeFilter: setting presets', { presets })
 
 		this.currentPresets = presets ?? []
-		if (this.currentInstance !== undefined) {
-			// could be called before the instance was created
-			// (meaning the files list is not mounted yet)
-			this.currentInstance.$props.presets = presets
-		}
-
 		this.filterUpdated()
 
 		const chips: IFileListFilterChip[] = []
@@ -89,7 +81,7 @@ class TypeFilter extends FileListFilter implements IFileListFilterWithUi {
 				})
 			}
 		} else {
-			(this.currentInstance as { resetFilter: () => void } | undefined)?.resetFilter()
+			this.reset()
 		}
 		this.updateChips(chips)
 	}
@@ -113,20 +105,7 @@ export type { TypeFilter }
  * Register the file list filter by file type
  */
 export function registerTypeFilter() {
-	const WrappedComponent = wrap(Vue, FileListFilterType)
-	// In Vue 2, wrap doesn't support disabling shadow :(
-	// Disable with a hack
-	Object.defineProperty(WrappedComponent.prototype, 'attachShadow', {
-		value() {
-			return this
-		},
-	})
-	Object.defineProperty(WrappedComponent.prototype, 'shadowRoot', {
-		get() {
-			return this
-		},
-	})
-
+	const WrappedComponent = defineCustomElement(FileListFilterType, { shadowRoot: false })
 	window.customElements.define(tagName, WrappedComponent)
 	registerFileListFilter(new TypeFilter())
 }
diff --git a/apps/files/src/main-settings-admin.ts b/apps/files/src/main-settings-admin.ts
index 93db0c9c1869f..e5de867ee5ca3 100644
--- a/apps/files/src/main-settings-admin.ts
+++ b/apps/files/src/main-settings-admin.ts
@@ -3,14 +3,12 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { getCSPNonce } from '@nextcloud/auth'
 import { t } from '@nextcloud/l10n'
-import Vue from 'vue'
+import { createApp } from 'vue'
 import PersonalSettings from './views/SettingsAdmin.vue'
 
-__webpack_nonce__ = getCSPNonce()
+import 'vite/modulepreload-polyfill'
 
-Vue.prototype.t = t
-const View = Vue.extend(PersonalSettings)
-const instance = new View()
-instance.$mount('#files-admin-settings')
+const app = createApp(PersonalSettings)
+app.config.globalProperties.t = t
+app.mount('#files-admin-settings')
diff --git a/apps/files/src/main-settings-personal.ts b/apps/files/src/main-settings-personal.ts
index 768b17d01c945..e48b558692daa 100644
--- a/apps/files/src/main-settings-personal.ts
+++ b/apps/files/src/main-settings-personal.ts
@@ -3,14 +3,12 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { getCSPNonce } from '@nextcloud/auth'
 import { t } from '@nextcloud/l10n'
-import Vue from 'vue'
+import { createApp } from 'vue'
 import PersonalSettings from './components/PersonalSettings.vue'
 
-__webpack_nonce__ = getCSPNonce()
+import 'vite/modulepreload-polyfill'
 
-Vue.prototype.t = t
-const View = Vue.extend(PersonalSettings)
-const instance = new View()
-instance.$mount('#files-personal-settings')
+const app = createApp(PersonalSettings)
+app.config.globalProperties.t = t
+app.mount('#files-personal-settings')
diff --git a/apps/files/src/main.ts b/apps/files/src/main.ts
index bc76d8bcffcfc..6f508700842d8 100644
--- a/apps/files/src/main.ts
+++ b/apps/files/src/main.ts
@@ -3,17 +3,15 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { getCSPNonce } from '@nextcloud/auth'
-import { PiniaVuePlugin } from 'pinia'
-import Vue from 'vue'
+import { createApp } from 'vue'
 import FilesApp from './FilesApp.vue'
 import SettingsModel from './models/Setting.ts'
-import router from './router/router.ts'
+import { router } from './router/router.ts'
 import RouterService from './services/RouterService.ts'
 import SettingsService from './services/Settings.js'
-import { getPinia } from './store/index.ts'
+import { pinia } from './store/index.ts'
 
-__webpack_nonce__ = getCSPNonce()
+import 'vite/modulepreload-polyfill'
 
 // Init private and public Files namespace
 window.OCA.Files = window.OCA.Files ?? {}
@@ -25,16 +23,12 @@ if (!window.OCP.Files.Router) {
 	Object.assign(window.OCP.Files, { Router })
 }
 
-// Init Pinia store
-Vue.use(PiniaVuePlugin)
-
 // Init Files App Settings Service
 const Settings = new SettingsService()
 Object.assign(window.OCA.Files, { Settings })
 Object.assign(window.OCA.Files.Settings, { Setting: SettingsModel })
 
-const FilesAppVue = Vue.extend(FilesApp)
-new FilesAppVue({
-	router: (window.OCP.Files.Router as RouterService)._router,
-	pinia: getPinia(),
-}).$mount('#content')
+const app = createApp(FilesApp)
+app.use(pinia)
+app.use((window.OCP.Files.Router as RouterService)._router)
+app.mount('#content')
diff --git a/apps/files/src/mixins/filesSorting.ts b/apps/files/src/mixins/filesSorting.ts
deleted file mode 100644
index 92fc91197af83..0000000000000
--- a/apps/files/src/mixins/filesSorting.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/*!
- * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { mapState } from 'pinia'
-import Vue from 'vue'
-import { useActiveStore } from '../store/active.ts'
-import { useViewConfigStore } from '../store/viewConfig.ts'
-
-export default Vue.extend({
-	setup() {
-		const activeStore = useActiveStore()
-
-		return {
-			activeStore,
-		}
-	},
-
-	computed: {
-		...mapState(useViewConfigStore, ['getConfig', 'setSortingBy', 'toggleSortingDirection']),
-
-		/**
-		 * Get the sorting mode for the current view
-		 */
-		sortingMode(): string {
-			return this.getConfig(this.activeStore.activeView?.id)?.sorting_mode as string
-				|| this.activeStore.activeView?.defaultSortKey
-				|| 'basename'
-		},
-
-		/**
-		 * Get the sorting direction for the current view
-		 */
-		isAscSorting(): boolean {
-			const sortingDirection = this.getConfig(this.activeStore.activeView?.id)?.sorting_direction
-			return sortingDirection !== 'desc'
-		},
-	},
-
-	methods: {
-		toggleSortBy(key: string) {
-			// If we're already sorting by this key, flip the direction
-			if (this.sortingMode === key) {
-				this.toggleSortingDirection(this.activeStore.activeView?.id)
-				return
-			}
-			// else sort ASC by this new key
-			this.setSortingBy(key, this.activeStore.activeView?.id)
-		},
-	},
-})
diff --git a/apps/files/src/newMenu/newFromTemplate.ts b/apps/files/src/newMenu/newFromTemplate.ts
index 761319897ed30..1d7a07107f60d 100644
--- a/apps/files/src/newMenu/newFromTemplate.ts
+++ b/apps/files/src/newMenu/newFromTemplate.ts
@@ -4,19 +4,19 @@
  */
 
 import type { IFolder, INode, NewMenuEntry } from '@nextcloud/files'
-import type { ComponentInstance } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
 import type { TemplateFile } from '../types.ts'
 
 import { addNewFileMenuEntry, Permission } from '@nextcloud/files'
 import { loadState } from '@nextcloud/initial-state'
 import { translate as t } from '@nextcloud/l10n'
 import { isPublicShare } from '@nextcloud/sharing/public'
-import Vue, { defineAsyncComponent } from 'vue'
+import { createApp, defineAsyncComponent, h } from 'vue'
 import { newNodeName } from '../utils/newNodeDialog.ts'
 
 // async to reduce bundle size
 const TemplatePickerVue = defineAsyncComponent(() => import('../views/TemplatePicker.vue'))
-let TemplatePicker: ComponentInstance & { open: (n: string, t: TemplateFile) => void } | null = null
+let TemplatePicker: ComponentPublicInstance & { open: (n: string, t: TemplateFile) => void } | null = null
 
 /**
  *
@@ -30,19 +30,14 @@ async function getTemplatePicker(context: IFolder) {
 		document.body.appendChild(mountingPoint)
 
 		// Init vue app
-		TemplatePicker = new Vue({
-			render: (h) => h(
-				TemplatePickerVue,
-				{
-					ref: 'picker',
-					props: {
-						parent: context,
-					},
-				},
-			),
+		const app = createApp({
 			methods: { open(...args) { this.$refs.picker.open(...args) } },
-			el: mountingPoint,
+			render: () => h(TemplatePickerVue, {
+				ref: 'picker',
+				parent: context,
+			}),
 		})
+		TemplatePicker = app.mount(mountingPoint) as ComponentPublicInstance & { open: (n: string, t: TemplateFile) => void }
 	}
 	return TemplatePicker
 }
diff --git a/apps/files/src/reference-files.ts b/apps/files/src/reference-files.ts
index 094cbcbbcd422..9c8941db6c10c 100644
--- a/apps/files/src/reference-files.ts
+++ b/apps/files/src/reference-files.ts
@@ -3,39 +3,33 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import type { App } from 'vue'
+
 import { t } from '@nextcloud/l10n'
-import Vue from 'vue'
+import { createApp } from 'vue'
 import { NcCustomPickerRenderResult, registerCustomPickerElement, registerWidget } from '@nextcloud/vue/components/NcRichText'
 import FileReferencePickerElement from './views/FileReferencePickerElement.vue'
 import FileWidget from './views/ReferenceFileWidget.vue'
 
-Vue.mixin({
-	methods: {
-		t,
-	},
-})
-
 registerWidget('file', (el, { richObjectType, richObject, accessible, interactive }) => {
-	const Widget = Vue.extend(FileWidget)
-	new Widget({
-		propsData: {
-			richObjectType,
-			richObject,
-			accessible,
-			interactive,
-		},
-	}).$mount(el)
+	const app = createApp(FileWidget, {
+		richObjectType,
+		richObject,
+		accessible,
+		interactive,
+	})
+	app.mixin({ methods: { t } })
+	app.mount(el)
 }, () => {}, { hasInteractiveView: true, isResizable: true })
 
 registerCustomPickerElement('files', (el, { providerId, accessible }) => {
-	const Element = Vue.extend(FileReferencePickerElement)
-	const vueElement = new Element({
-		propsData: {
-			providerId,
-			accessible,
-		},
-	}).$mount(el)
-	return new NcCustomPickerRenderResult(vueElement.$el, vueElement)
+	const app = createApp(FileReferencePickerElement, {
+		providerId,
+		accessible,
+	})
+	app.mixin({ methods: { t } })
+	app.mount(el)
+	return new NcCustomPickerRenderResult(el, app)
 }, (el, renderResult) => {
-	renderResult.object.$destroy()
+	(renderResult.object as App).unmount()
 })
diff --git a/apps/files/src/router/router.ts b/apps/files/src/router/router.ts
index 94becd075382e..8070f595e9d41 100644
--- a/apps/files/src/router/router.ts
+++ b/apps/files/src/router/router.ts
@@ -4,61 +4,36 @@
  */
 
 import type { INode } from '@nextcloud/files'
-import type { RawLocation, Route } from 'vue-router'
 
 import { subscribe } from '@nextcloud/event-bus'
 import { generateUrl } from '@nextcloud/router'
 import { relative } from 'path'
-import queryString from 'query-string'
-import Vue from 'vue'
-import Router, { isNavigationFailure, NavigationFailureType } from 'vue-router'
+import { createRouter, createWebHistory, isNavigationFailure, NavigationFailureType, stringifyQuery } from 'vue-router'
 import { useFilesStore } from '../store/files.ts'
-import { getPinia } from '../store/index.ts'
+import { pinia } from '../store/index.ts'
 import { usePathsStore } from '../store/paths.ts'
 import { defaultView } from '../utils/filesViews.ts'
 import { logger } from '../utils/logger.ts'
 
-Vue.use(Router)
-
-// Prevent router from throwing errors when we're already on the page we're trying to go to
-const originalPush = Router.prototype.push
-Router.prototype.push = (function(this: Router, ...args: Parameters<typeof originalPush>) {
-	if (args.length > 1) {
-		return originalPush.call(this, ...args)
-	}
-	return originalPush.call<Router, [RawLocation], Promise<Route>>(this, args[0]).catch(ignoreDuplicateNavigation)
-}) as typeof originalPush
-
-const originalReplace = Router.prototype.replace
-Router.prototype.replace = (function(this: Router, ...args: Parameters<typeof originalReplace>) {
-	if (args.length > 1) {
-		return originalReplace.call(this, ...args)
-	}
-	return originalReplace.call<Router, [RawLocation], Promise<Route>>(this, args[0]).catch(ignoreDuplicateNavigation)
-}) as typeof originalReplace
+const FilesListComponent = () => import('../views/FilesList.vue')
 
 /**
- * Ignore duplicated- and redirected-navigation errors but forward real exceptions
+ * Stringify the query the way Nextcloud URLs have always looked: spaces as
+ * "%20" rather than "+". A literal "+" is already encoded as "%2B" by then, so
+ * this cannot corrupt a file name.
  *
- * @param error The thrown error
+ * @param query - The query to stringify
  */
-function ignoreDuplicateNavigation(error: unknown): void {
-	if (isNavigationFailure(error, NavigationFailureType.duplicated)
-		|| isNavigationFailure(error, NavigationFailureType.redirected)) {
-		logger.debug('Ignoring duplicated/redirected navigation from vue-router', { error })
-	} else {
-		throw error
-	}
+function stringifyNextcloudQuery(query: Parameters<typeof stringifyQuery>[0]): string {
+	return stringifyQuery(query).replace(/\+/g, '%20')
 }
 
-const router = new Router({
-	mode: 'history',
-
+export const router = createRouter({
 	// if index.php is in the url AND we got this far, then it's working:
 	// let's keep using index.php in the url
-	base: generateUrl('/apps/files'),
+	history: createWebHistory(generateUrl('/apps/files')),
 	linkActiveClass: 'active',
-
+	stringifyQuery: stringifyNextcloudQuery,
 	routes: [
 		{
 			path: '/',
@@ -69,20 +44,15 @@ const router = new Router({
 			path: '/:view/:fileid(\\d+)?',
 			name: 'filelist',
 			props: true,
+			component: FilesListComponent,
 		},
 	],
-
-	// Custom stringifyQuery to prevent encoding of slashes in the url
-	stringifyQuery(query) {
-		const result = queryString.stringify(query).replace(/%2F/gmi, '/')
-		return result ? ('?' + result) : ''
-	},
 })
 
 // Handle aborted navigation (NavigationGuards) gracefully
 router.onError((error) => {
 	if (isNavigationFailure(error, NavigationFailureType.aborted)) {
-		logger.debug('Navigation was aboorted', { error })
+		logger.debug('Navigation was aborted', { error })
 	} else {
 		throw error
 	}
@@ -91,15 +61,10 @@ router.onError((error) => {
 // If navigating back from a folder to a parent folder,
 // we need to keep the current dir fileid so it's highlighted
 // and scrolled into view.
-router.beforeResolve((to, from, next) => {
-	if (to.params?.parentIntercept) {
-		delete to.params.parentIntercept
-		return next()
-	}
-
+router.beforeResolve((to, from) => {
 	if (to.params.view !== from.params.view) {
 		// skip if different views
-		return next()
+		return
 	}
 
 	const fromDir = (from.query?.dir || '/') as string
@@ -112,47 +77,47 @@ router.beforeResolve((to, from, next) => {
 
 		if (!from.params.view) {
 			logger.error('No current view id found, cannot navigate to parent directory', { fromDir, toDir })
-			return next()
+			return
 		}
 
 		// Get the previous parent's file id
-		const fromSource = getPath(from.params.view, fromDir)
+		const fromSource = getPath(from.params.view as string, fromDir)
 		if (!fromSource) {
 			logger.error('No source found for the parent directory', { fromDir, toDir })
-			return next()
+			return
 		}
 
 		const fileId = getNode(fromSource)?.fileid
+		if (to.params.fileid === String(fileId)) {
+			// prevent infinite loop of navigating to the same parent directory
+			return
+		}
+
 		if (!fileId) {
 			logger.error('No fileid found for the parent directory', { fromDir, toDir, fromSource })
-			return next()
+			return
 		}
 
 		logger.debug('Navigating back to parent directory', { fromDir, toDir, fileId })
-		return next({
+		return {
 			name: 'filelist',
 			query: to.query,
 			params: {
 				...to.params,
 				fileid: String(fileId),
-				// Prevents the beforeEach from being called again
-				parentIntercept: 'true',
 			},
 			// Replace the current history entry
 			replace: true,
-		})
+		}
 	}
-
-	// else, we just continue
-	next()
 })
 
 subscribe('files:node:deleted', (node: INode) => {
-	if (router.currentRoute.params.fileid === String(node.fileid)) {
-		const params = { ...router.currentRoute.params }
-		const { getPath } = usePathsStore(getPinia())
-		const { getNode } = useFilesStore(getPinia())
-		const source = getPath(router.currentRoute.params.view, node.dirname)
+	if (router.currentRoute.value.params.fileid === String(node.fileid)) {
+		const params = { ...router.currentRoute.value.params }
+		const { getPath } = usePathsStore(pinia)
+		const { getNode } = useFilesStore(pinia)
+		const source = getPath(router.currentRoute.value.params.view as string, node.dirname)
 		const parentFolder = getNode(source!)
 		if (source && parentFolder) {
 			params.fileid = String(parentFolder.fileid)
@@ -160,17 +125,14 @@ subscribe('files:node:deleted', (node: INode) => {
 			delete params.fileid
 		}
 
-		const query = { ...router.currentRoute.query }
+		const query = { ...router.currentRoute.value.query }
 		delete query.opendetails
 		delete query.openfile
 
 		router.replace({
-			...router.currentRoute,
-			name: router.currentRoute.name as string,
+			name: router.currentRoute.value.name as string,
 			params,
 			query,
 		})
 	}
 })
-
-export default router
diff --git a/apps/files/src/services/DropService.spec.ts b/apps/files/src/services/DropService.spec.ts
new file mode 100644
index 0000000000000..40ed196e6da99
--- /dev/null
+++ b/apps/files/src/services/DropService.spec.ts
@@ -0,0 +1,72 @@
+/*!
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { RootDirectory } from './DropServiceUtils.ts'
+
+import { Folder, Permission } from '@nextcloud/files'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { Directory } from './DropServiceUtils.ts'
+
+const uploader = {
+	destination: null as Folder | null,
+	pause: vi.fn(),
+	start: vi.fn(),
+	upload: vi.fn(),
+}
+
+vi.mock('@nextcloud/files/upload', () => ({
+	getUploader: () => uploader,
+}))
+
+const { onDropExternalFiles } = await import('./DropService.ts')
+
+/** Build a folder node for `/{name}` owned by the test user. */
+function folder(name: string) {
+	return new Folder({
+		id: 1,
+		owner: 'test',
+		permissions: Permission.ALL,
+		root: '/files/test',
+		source: `https://cloud.example.com/remote.php/dav/files/test/${name}`,
+	})
+}
+
+describe('onDropExternalFiles', () => {
+	beforeEach(() => {
+		vi.clearAllMocks()
+		uploader.destination = folder('current')
+		uploader.upload.mockImplementation(async () => ({}))
+	})
+
+	it('uploads into the drop target and restores the uploader destination', async () => {
+		const target = folder('subfolder')
+		const root = new Directory('root') as RootDirectory
+		root.contents.push(new File(['content'], 'dropped.txt'))
+		uploader.upload.mockImplementation(async () => {
+			// the destination has to point at the drop target while queueing
+			expect(uploader.destination).toBe(target)
+			return {}
+		})
+
+		await onDropExternalFiles(root, target, [])
+
+		expect(uploader.upload).toHaveBeenCalledWith('/dropped.txt', expect.any(File))
+		expect(uploader.destination?.source).toBe(folder('current').source)
+		expect(uploader.start).toHaveBeenCalledOnce()
+	})
+
+	it('restores the uploader destination if queueing fails', async () => {
+		const target = folder('subfolder')
+		const root = new Directory('root') as RootDirectory
+		root.contents.push(new File(['content'], 'dropped.txt'))
+		uploader.upload.mockImplementation(() => {
+			throw new Error('nope')
+		})
+
+		await expect(onDropExternalFiles(root, target, [])).rejects.toThrow('nope')
+
+		expect(uploader.destination?.source).toBe(folder('current').source)
+	})
+})
diff --git a/apps/files/src/services/DropService.ts b/apps/files/src/services/DropService.ts
index c408f183ac37d..f71fdff270e65 100644
--- a/apps/files/src/services/DropService.ts
+++ b/apps/files/src/services/DropService.ts
@@ -3,16 +3,17 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import type { IFolder, INode } from '@nextcloud/files'
-import type { Upload } from '@nextcloud/upload'
+import type { Folder, IFolder, INode } from '@nextcloud/files'
+import type { IUpload } from '@nextcloud/files/upload'
 import type { RootDirectory } from './DropServiceUtils.ts'
 
 import { showError, showInfo, showSuccess, showWarning } from '@nextcloud/dialogs'
+import { getUploader } from '@nextcloud/files/upload'
 import { t } from '@nextcloud/l10n'
 import { join } from '@nextcloud/paths'
-import { getUploader, hasConflict } from '@nextcloud/upload'
 import { handleCopyMoveNodesTo, HintException } from '../actions/moveOrCopyAction.ts'
 import { MoveCopyAction } from '../actions/moveOrCopyActionUtils.ts'
+import { getConflicts } from '../utils/conflicts.ts'
 import { logger } from '../utils/logger.ts'
 import { createDirectoryIfNotExists, Directory, resolveConflict, traverseTree } from './DropServiceUtils.ts'
 
@@ -93,11 +94,11 @@ export async function dataTransferToFileTree(items: DataTransferItem[]): Promise
  * @param destination - The destination folder
  * @param contents - The contents of the destination folder
  */
-export async function onDropExternalFiles(root: RootDirectory, destination: IFolder, contents: INode[]): Promise<Upload[]> {
+export async function onDropExternalFiles(root: RootDirectory, destination: IFolder, contents: INode[]): Promise<IUpload[]> {
 	const uploader = getUploader()
 
 	// Check for conflicts on root elements
-	if (await hasConflict(root.contents, contents)) {
+	if (getConflicts(root.contents, contents).length !== 0) {
 		root.contents = await resolveConflict(root.contents, destination, contents)
 		if (root.contents.length === 0) {
 			// user cancelled the upload
@@ -111,7 +112,7 @@ export async function onDropExternalFiles(root: RootDirectory, destination: IFol
 
 	// Let's process the files
 	logger.debug(`Uploading files to ${destination.path}`, { root, contents: root.contents })
-	const queue = [] as Promise<Upload>[]
+	const queue = [] as Promise<IUpload>[]
 
 	const uploadDirectoryContents = async (directory: Directory, path: string) => {
 		for (const file of directory.contents) {
@@ -136,8 +137,7 @@ export async function onDropExternalFiles(root: RootDirectory, destination: IFol
 			// If we've reached a file, we can upload it
 			logger.debug('Uploading file to ' + join(destination.path, relativePath), { file })
 
-			// Overriding the root to avoid changing the current uploader context
-			queue.push(uploader.upload(relativePath, file, destination.source))
+			queue.push(uploader.upload(relativePath, file))
 		}
 	}
 
@@ -145,10 +145,19 @@ export async function onDropExternalFiles(root: RootDirectory, destination: IFol
 	// while we compute the queue
 	uploader.pause()
 
-	// Upload the files. Using '/' as the starting point
-	// as we already adjusted the uploader destination
-	await uploadDirectoryContents(root, '/')
-	uploader.start()
+	// The uploader resolves every upload path against its own destination, so it
+	// has to be pointed at the drop target while the queue is built. Dropping on
+	// a folder row uploads into that folder, not into the folder being browsed.
+	const previousDestination = uploader.destination
+	uploader.destination = destination as Folder
+	try {
+		// Upload the files. Using '/' as the starting point
+		// as we already adjusted the uploader destination
+		await uploadDirectoryContents(root, '/')
+	} finally {
+		uploader.destination = previousDestination
+		uploader.start()
+	}
 
 	// Wait for all promises to settle
 	const results = await Promise.allSettled(queue)
@@ -177,7 +186,7 @@ export async function onDropExternalFiles(root: RootDirectory, destination: IFol
  */
 export async function onDropInternalFiles(nodes: INode[], destination: IFolder, contents: INode[], isCopy = false) {
 	// Check for conflicts on root elements
-	if (await hasConflict(nodes, contents)) {
+	if (getConflicts(nodes, contents).length !== 0) {
 		nodes = await resolveConflict(nodes, destination, contents)
 	}
 
diff --git a/apps/files/src/services/DropServiceUtils.ts b/apps/files/src/services/DropServiceUtils.ts
index 448923755f3b6..138bcacabeacc 100644
--- a/apps/files/src/services/DropServiceUtils.ts
+++ b/apps/files/src/services/DropServiceUtils.ts
@@ -7,11 +7,11 @@ import type { IFolder, INode } from '@nextcloud/files'
 import type { FileStat, ResponseDataDetailed } from 'webdav'
 
 import { showInfo, showWarning } from '@nextcloud/dialogs'
+import { openConflictPicker } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { defaultRemoteURL, defaultRootPath, getClient, getDefaultPropfind, resultToNode } from '@nextcloud/files/dav'
 import { t } from '@nextcloud/l10n'
 import { join } from '@nextcloud/paths'
-import { openConflictPicker } from '@nextcloud/upload'
 import { logger } from '../utils/logger.ts'
 
 /**
@@ -171,12 +171,11 @@ export async function resolveConflict<T extends ((Directory | File) | INode)>(fi
 		})
 
 		// Let the user choose what to do with the conflicting files
-		const { selected, renamed } = await openConflictPicker(destination.path, conflicts, contents)
-
-		logger.debug('Conflict resolution', { uploads, selected, renamed })
+		const conflictResults = await openConflictPicker(destination.path, conflicts, contents)
+		logger.debug('Conflict resolution', { uploads, conflictResults })
 
 		// If the user selected nothing, we cancel the upload
-		if (selected.length === 0 && renamed.length === 0 && uploads.length === 0) {
+		if (conflictResults === null || (conflictResults.selected.length === 0 && conflictResults.renamed.length === 0 && uploads.length === 0)) {
 			// User skipped
 			showInfo(t('files', 'Conflicts resolution skipped'))
 			logger.info('User skipped the conflict resolution')
@@ -184,7 +183,7 @@ export async function resolveConflict<T extends ((Directory | File) | INode)>(fi
 		}
 
 		// Update the list of files to upload
-		return [...uploads, ...selected, ...renamed] as (typeof files)
+		return [...uploads, ...conflictResults.selected, ...conflictResults.renamed] as (typeof files)
 	} catch (error) {
 		// User cancelled
 		logger.warn('User cancelled the upload', { error })
diff --git a/apps/files/src/services/Files.ts b/apps/files/src/services/Files.ts
index 3941ee20ede96..e80a9d60b9aa0 100644
--- a/apps/files/src/services/Files.ts
+++ b/apps/files/src/services/Files.ts
@@ -8,7 +8,7 @@ import type { FileStat, ResponseDataDetailed } from 'webdav'
 import { getDefaultPropfind, getRootPath, resultToNode } from '@nextcloud/files/dav'
 import { join } from 'path'
 import { useFilesStore } from '../store/files.ts'
-import { getPinia } from '../store/index.ts'
+import { pinia } from '../store/index.ts'
 import { useSearchStore } from '../store/search.ts'
 import { logger } from '../utils/logger.ts'
 import { client } from './WebdavClient.ts'
@@ -23,7 +23,7 @@ import { searchNodes } from './WebDavSearch.ts'
  * @param options.signal - Abort signal to cancel the request
  */
 export async function getContents(path = '/', options?: { signal: AbortSignal }): Promise<ContentsWithRoot> {
-	const searchStore = useSearchStore(getPinia())
+	const searchStore = useSearchStore(pinia)
 
 	if (searchStore.query.length < 3) {
 		return await defaultGetContents(path, options)
@@ -78,7 +78,7 @@ export async function defaultGetContents(path: string, options?: { signal: Abort
  * @param signal - The aboort signal
  */
 async function getLocalSearch(path: string, query: string, signal?: AbortSignal): Promise<ContentsWithRoot> {
-	const filesStore = useFilesStore(getPinia())
+	const filesStore = useFilesStore(pinia)
 	let folder = filesStore.getDirectoryByPath('files', path)
 	if (!folder) {
 		const rootPath = join(getRootPath(), path)
diff --git a/apps/files/src/services/Recent.ts b/apps/files/src/services/Recent.ts
index 9bdf674b111cf..6673dacffee9c 100644
--- a/apps/files/src/services/Recent.ts
+++ b/apps/files/src/services/Recent.ts
@@ -9,7 +9,7 @@ import { getCurrentUser } from '@nextcloud/auth'
 import { Folder, Permission } from '@nextcloud/files'
 import { getRecentSearch, getRemoteURL, getRootPath, resultToNode } from '@nextcloud/files/dav'
 import { loadState } from '@nextcloud/initial-state'
-import { getPinia } from '../store/index.ts'
+import { pinia } from '../store/index.ts'
 import { useUserConfigStore } from '../store/userconfig.ts'
 import { logger } from '../utils/logger.ts'
 import { client } from './WebdavClient.ts'
@@ -27,8 +27,8 @@ const recentLimit = loadState<number>('files', 'recent_limit', 100)
  * @param options Options including abort signal
  * @param options.signal Abort signal to cancel the request
  */
-export async function getContents(path = '/', options: { signal: AbortSignal }): Promise<ContentsWithRoot> {
-	const store = useUserConfigStore(getPinia())
+export async function getContents(path = '/', options?: { signal: AbortSignal }): Promise<ContentsWithRoot> {
+	const store = useUserConfigStore(pinia)
 
 	/**
 	 * Filter function that returns only the visible nodes - or hidden if explicitly configured
@@ -41,7 +41,7 @@ export async function getContents(path = '/', options: { signal: AbortSignal }):
 
 	try {
 		const contentsResponse = await client.search('/', {
-			signal: options.signal,
+			signal: options?.signal,
 			details: true,
 			data: getRecentSearch(lastTwoWeeksTimestamp, recentLimit),
 		}) as ResponseDataDetailed<SearchResult>
@@ -65,7 +65,7 @@ export async function getContents(path = '/', options: { signal: AbortSignal }):
 			contents,
 		}
 	} catch (error) {
-		if (options.signal.aborted) {
+		if (options?.signal.aborted) {
 			logger.info('Fetching recent files aborted')
 			throw new DOMException('Aborted', 'AbortError')
 		}
diff --git a/apps/files/src/services/RouterService.spec.ts b/apps/files/src/services/RouterService.spec.ts
new file mode 100644
index 0000000000000..a135531cbcfdd
--- /dev/null
+++ b/apps/files/src/services/RouterService.spec.ts
@@ -0,0 +1,104 @@
+/*!
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type VueRouter from 'vue-router'
+
+import { describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+import RouterService from './RouterService.ts'
+
+const route = {
+	name: 'filelist',
+	params: { view: 'files', fileid: '42' },
+	query: { dir: '/folder' },
+}
+
+/** A vue-router 5 router, where `currentRoute` is a ref. */
+function routerWithRefRoute() {
+	return {
+		currentRoute: ref(route),
+		push: vi.fn().mockResolvedValue(undefined),
+		replace: vi.fn().mockResolvedValue(undefined),
+	} as unknown as VueRouter
+}
+
+/** A vue-router 3 router (public share bundle), where `currentRoute` is the route. */
+function routerWithPlainRoute() {
+	return {
+		currentRoute: route,
+		push: vi.fn().mockResolvedValue(undefined),
+		replace: vi.fn().mockResolvedValue(undefined),
+	} as unknown as VueRouter
+}
+
+describe('RouterService', () => {
+	it.each([
+		['vue-router 5 (ref)', routerWithRefRoute],
+		['vue-router 3 (plain object)', routerWithPlainRoute],
+	])('exposes the current route for %s', (_name, createRouter) => {
+		const service = new RouterService(createRouter())
+
+		expect(service.name).toBe('filelist')
+		expect(service.params).toEqual({ view: 'files', fileid: '42' })
+		expect(service.query).toEqual({ dir: '/folder' })
+	})
+
+	it('keeps the current route name when navigating without one', () => {
+		const router = routerWithRefRoute()
+		const service = new RouterService(router)
+
+		service.goToRoute(null, { view: 'files', fileid: '7' }, { dir: '/other' })
+
+		expect(router.push).toHaveBeenCalledWith({
+			name: 'filelist',
+			params: { view: 'files', fileid: '7' },
+			query: { dir: '/other' },
+		})
+	})
+
+	it('replaces the current entry when asked to', () => {
+		const router = routerWithRefRoute()
+		const service = new RouterService(router)
+
+		service.goToRoute('filelist', { view: 'files' }, undefined, true)
+
+		expect(router.replace).toHaveBeenCalledOnce()
+		expect(router.push).not.toHaveBeenCalled()
+	})
+
+	// vue-router navigates asynchronously, so two stores reacting to the same
+	// state change would otherwise both merge into the pre-navigation route and
+	// the second would drop what the first had set.
+	it('reports a requested route before the navigation is applied', async () => {
+		const router = routerWithRefRoute()
+		const service = new RouterService(router)
+
+		const navigation = service.goToRoute(null, { view: 'files', fileid: '7' }, { dir: '/other' })
+
+		expect(service.params).toEqual({ view: 'files', fileid: '7' })
+		expect(service.query).toEqual({ dir: '/other' })
+
+		// a second consumer merges its own change on top of the requested route
+		service.goToRoute(null, service.params, { ...service.query, opendetails: 'true' }, true)
+
+		expect(router.replace).toHaveBeenCalledWith({
+			name: 'filelist',
+			params: { view: 'files', fileid: '7' },
+			query: { dir: '/other', opendetails: 'true' },
+		})
+
+		await navigation
+	})
+
+	it('falls back to the applied route once the navigation settled', async () => {
+		const router = routerWithRefRoute()
+		const service = new RouterService(router)
+
+		await service.goToRoute(null, { view: 'files', fileid: '7' }, { dir: '/other' })
+
+		expect(service.params).toEqual({ view: 'files', fileid: '42' })
+		expect(service.query).toEqual({ dir: '/folder' })
+	})
+})
diff --git a/apps/files/src/services/RouterService.ts b/apps/files/src/services/RouterService.ts
index 764e4726b9f2d..5dabe5be46f5d 100644
--- a/apps/files/src/services/RouterService.ts
+++ b/apps/files/src/services/RouterService.ts
@@ -6,25 +6,49 @@
 import type { Location, Route } from 'vue-router'
 import type VueRouter from 'vue-router'
 
+import { unref } from 'vue'
+
 export default class RouterService {
 	// typescript compiles this to `#router` to make it private even in JS,
 	// but in TS it needs to be called without the visibility specifier
 	private router: VueRouter
 
+	/**
+	 * The location of a navigation that was requested but is not applied yet.
+	 *
+	 * vue-router applies navigations asynchronously, so `currentRoute` still
+	 * holds the previous route until the navigation resolves. Several stores
+	 * react to the same state change and each merges its own change into the
+	 * route it reads here, so without this they would all read the route from
+	 * before the first navigation and overwrite each other's parameters.
+	 */
+	private pendingLocation?: Location
+
 	constructor(router: VueRouter) {
 		this.router = router
 	}
 
+	/**
+	 * The route the wrapped router is currently on.
+	 *
+	 * This service is shared between the files app (vue-router 5, where
+	 * `currentRoute` is a ref) and the public share bundle (vue-router 3, where
+	 * it is the route itself), so the value has to be unwrapped.
+	 */
+	private get route(): Route {
+		return unref(this.router.currentRoute) as Route
+	}
+
 	get name(): string | null | undefined {
-		return this.router.currentRoute.name
+		return this.pendingLocation?.name ?? this.route.name
 	}
 
 	get query(): Record<string, string | (string | null)[] | null | undefined> {
-		return this.router.currentRoute.query || {}
+		return this.pendingLocation?.query ?? this.route.query ?? {}
 	}
 
 	get params(): Record<string, string> {
-		return this.router.currentRoute.params || {}
+		return (this.pendingLocation?.params ?? this.route.params ?? {}) as Record<string, string>
 	}
 
 	/**
@@ -43,6 +67,7 @@ export default class RouterService {
 	 * @see https://router.vuejs.org/guide/essentials/navigation.html#navigate-to-a-different-location
 	 */
 	goTo(path: string, replace = false): Promise<Route> {
+		this.pendingLocation = undefined
 		return this.router.push({
 			path,
 			replace,
@@ -64,11 +89,19 @@ export default class RouterService {
 		query?: Record<string, string | (string | null)[] | null | undefined>,
 		replace?: boolean,
 	): Promise<Route> {
-		name ??= this.router.currentRoute.name as string
+		name ??= this.name as string
 		const location: Location = { name, query, params }
-		if (replace) {
-			return this._router.replace(location)
-		}
-		return this._router.push(location)
+		this.pendingLocation = location
+
+		const navigation = replace
+			? this._router.replace(location)
+			: this._router.push(location)
+
+		return navigation.finally(() => {
+			// only the newest request may clear it, an older one is already obsolete
+			if (this.pendingLocation === location) {
+				this.pendingLocation = undefined
+			}
+		})
 	}
 }
diff --git a/apps/files/src/services/Search.ts b/apps/files/src/services/Search.ts
index ade5ef2b245be..b211bc088c91d 100644
--- a/apps/files/src/services/Search.ts
+++ b/apps/files/src/services/Search.ts
@@ -8,7 +8,7 @@ import type { ContentsWithRoot } from '@nextcloud/files'
 import { getCurrentUser } from '@nextcloud/auth'
 import { Folder, Permission } from '@nextcloud/files'
 import { defaultRemoteURL, getRootPath } from '@nextcloud/files/dav'
-import { getPinia } from '../store/index.ts'
+import { pinia } from '../store/index.ts'
 import { useSearchStore } from '../store/search.ts'
 import { logger } from '../utils/logger.ts'
 import { searchNodes } from './WebDavSearch.ts'
@@ -21,7 +21,7 @@ import { searchNodes } from './WebDavSearch.ts'
  * @param options.signal - Abort signal to cancel the request
  */
 export async function getContents(path, options: { signal: AbortSignal }): Promise<ContentsWithRoot> {
-	const searchStore = useSearchStore(getPinia())
+	const searchStore = useSearchStore(pinia)
 
 	try {
 		const contents = await searchNodes(searchStore.query, { signal: options.signal })
diff --git a/apps/files/src/sidebar.ts b/apps/files/src/sidebar.ts
index c8c98cc7940ff..008d92b687763 100644
--- a/apps/files/src/sidebar.ts
+++ b/apps/files/src/sidebar.ts
@@ -5,9 +5,9 @@
 
 import type { ISidebar } from '@nextcloud/files'
 
-import { getPinia } from './store/index.ts'
+import { pinia } from './store/index.ts'
 import { useSidebarStore } from './store/sidebar.ts'
 
 // Provide sidebar implementation which is proxied by the `@nextcloud/files` library for app usage.
 window.OCA.Files ??= {}
-window.OCA.Files._sidebar = () => useSidebarStore(getPinia()) satisfies Omit<ISidebar, 'available' | 'registerAction' | 'registerTab' | 'registerAction'>
+window.OCA.Files._sidebar = () => useSidebarStore(pinia) satisfies Omit<ISidebar, 'available' | 'registerAction' | 'registerTab' | 'registerAction'>
diff --git a/apps/files/src/store/dragging.ts b/apps/files/src/store/dragging.ts
index d7679d2aadea7..7183272339525 100644
--- a/apps/files/src/store/dragging.ts
+++ b/apps/files/src/store/dragging.ts
@@ -6,7 +6,6 @@
 import type { DragAndDropStore, FileSource } from '../types.ts'
 
 import { defineStore } from 'pinia'
-import Vue from 'vue'
 
 export const useDragAndDropStore = defineStore('dragging', {
 	state: () => ({
@@ -20,14 +19,14 @@ export const useDragAndDropStore = defineStore('dragging', {
 		 * @param selection array of node sources
 		 */
 		set(selection = [] as FileSource[]) {
-			Vue.set(this, 'dragging', selection)
+			this.dragging = selection
 		},
 
 		/**
 		 * Reset the selection
 		 */
 		reset() {
-			Vue.set(this, 'dragging', [])
+			this.dragging = []
 		},
 	},
 })
diff --git a/apps/files/src/store/files.ts b/apps/files/src/store/files.ts
index 6ea456fb6bdb0..cc34b5813f532 100644
--- a/apps/files/src/store/files.ts
+++ b/apps/files/src/store/files.ts
@@ -8,7 +8,7 @@ import type { FileSource, FilesStore, RootOptions, RootsStore, Service } from '.
 
 import { subscribe } from '@nextcloud/event-bus'
 import { defineStore } from 'pinia'
-import Vue, { ref } from 'vue'
+import { ref } from 'vue'
 import { fetchNode } from '../services/WebdavClient.ts'
 import { logger } from '../utils/logger.ts'
 import { useActiveStore } from './active.ts'
@@ -251,7 +251,7 @@ export const useFilesStore = defineStore('files', () => {
 	function onAddFavorite(node: INode) {
 		const ourNode = getNode(node.source)
 		if (ourNode) {
-			Vue.set(ourNode.attributes, 'favorite', 1)
+			ourNode.attributes.favorite = 1
 		}
 	}
 
@@ -263,7 +263,7 @@ export const useFilesStore = defineStore('files', () => {
 	function onRemoveFavorite(node: INode) {
 		const ourNode = getNode(node.source)
 		if (ourNode) {
-			Vue.set(ourNode.attributes, 'favorite', 0)
+			ourNode.attributes.favorite = 0
 		}
 	}
 })
diff --git a/apps/files/src/store/index.ts b/apps/files/src/store/index.ts
index e80661bdd16e8..b80efcdad15ba 100644
--- a/apps/files/src/store/index.ts
+++ b/apps/files/src/store/index.ts
@@ -6,13 +6,6 @@
 import { createPinia } from 'pinia'
 
 /**
- * Get the Pinia instance for the Files app.
+ * The Pinia instance for the Files app.
  */
-export function getPinia() {
-	if (window._nc_files_pinia) {
-		return window._nc_files_pinia
-	}
-
-	window._nc_files_pinia = createPinia()
-	return window._nc_files_pinia
-}
+export const pinia = createPinia()
diff --git a/apps/files/src/store/keyboard.ts b/apps/files/src/store/keyboard.ts
index ee8ff289e437e..053490eea3994 100644
--- a/apps/files/src/store/keyboard.ts
+++ b/apps/files/src/store/keyboard.ts
@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 import { defineStore } from 'pinia'
-import Vue from 'vue'
 
 /**
  * Observe various events and save the current
@@ -26,10 +25,10 @@ export function useKeyboardStore(...args) {
 				if (!event) {
 					event = window.event as MouseEvent | KeyboardEvent
 				}
-				Vue.set(this, 'altKey', !!event.altKey)
-				Vue.set(this, 'ctrlKey', !!event.ctrlKey)
-				Vue.set(this, 'metaKey', !!event.metaKey)
-				Vue.set(this, 'shiftKey', !!event.shiftKey)
+				this.altKey = !!event.altKey
+				this.ctrlKey = !!event.ctrlKey
+				this.metaKey = !!event.metaKey
+				this.shiftKey = !!event.shiftKey
 			},
 		},
 	})
diff --git a/apps/files/src/store/paths.ts b/apps/files/src/store/paths.ts
index e97e103932db0..68c33c5d74d93 100644
--- a/apps/files/src/store/paths.ts
+++ b/apps/files/src/store/paths.ts
@@ -10,7 +10,6 @@ import { subscribe } from '@nextcloud/event-bus'
 import { File, FileType, getNavigation } from '@nextcloud/files'
 import { dirname } from '@nextcloud/paths'
 import { defineStore } from 'pinia'
-import Vue from 'vue'
 import { logger } from '../utils/logger.ts'
 import { useFilesStore } from './files.ts'
 
@@ -41,11 +40,11 @@ export function usePathsStore(...args) {
 			addPath(payload: PathOptions) {
 				// If it doesn't exists, init the service state
 				if (!this.paths[payload.service]) {
-					Vue.set(this.paths, payload.service, {})
+					this.paths[payload.service] = {}
 				}
 
 				// Now we can set the provided path
-				Vue.set(this.paths[payload.service], payload.path, payload.source)
+				this.paths[payload.service][payload.path] = payload.source
 			},
 
 			deletePath(service: Service, path: string) {
@@ -54,7 +53,7 @@ export function usePathsStore(...args) {
 					return
 				}
 
-				Vue.delete(this.paths[service], path)
+				delete this.paths[service][path]
 			},
 
 			onCreatedNode(node: Node) {
@@ -133,7 +132,7 @@ export function usePathsStore(...args) {
 					// ensure sources are unique
 					const children = new Set(folder._children ?? [])
 					children.delete(node.source)
-					Vue.set(folder, '_children', [...children.values()])
+					folder._children = [...children.values()]
 					logger.debug('Children updated', { parent: folder, node, children: folder._children })
 					return
 				}
@@ -151,7 +150,7 @@ export function usePathsStore(...args) {
 					// ensure sources are unique
 					const children = new Set(folder._children ?? [])
 					children.add(node.source)
-					Vue.set(folder, '_children', [...children.values()])
+					folder._children = [...children.values()]
 					logger.debug('Children updated', { parent: folder, node, children: folder._children })
 					return
 				}
diff --git a/apps/files/src/store/renaming.ts b/apps/files/src/store/renaming.ts
index 5e85a728098b5..64231cee81a02 100644
--- a/apps/files/src/store/renaming.ts
+++ b/apps/files/src/store/renaming.ts
@@ -12,7 +12,7 @@ import { t } from '@nextcloud/l10n'
 import { basename, dirname, extname } from '@nextcloud/paths'
 import { spawnDialog } from '@nextcloud/vue/functions/dialog'
 import { defineStore } from 'pinia'
-import Vue, { defineAsyncComponent, ref } from 'vue'
+import { defineAsyncComponent, ref } from 'vue'
 import { fetchNode } from '../services/WebdavClient.ts'
 import { logger } from '../utils/logger.ts'
 import { useUserConfigStore } from './userconfig.ts'
@@ -58,7 +58,7 @@ export const useRenamingStore = defineStore('renaming', () => {
 
 		const userConfig = useUserConfigStore()
 		let node = renamingNode.value
-		Vue.set(node, 'status', NodeStatus.LOADING)
+		node.status = NodeStatus.LOADING
 		try {
 			if (userConfig.userConfig.show_dialog_file_extension) {
 				const oldExtension = extname(oldName)
@@ -139,7 +139,7 @@ export const useRenamingStore = defineStore('renaming', () => {
 			// Unknown error
 			throw new Error(t('files', 'Could not rename "{oldName}"', { oldName }), { cause: error })
 		} finally {
-			Vue.set(node, 'status', undefined)
+			node.status = undefined
 			isRenaming.value = false
 		}
 	}
@@ -174,13 +174,10 @@ export const useRenamingStore = defineStore('renaming', () => {
  * @param newExtension the new file name extension
  */
 async function showFileExtensionDialog(oldExtension: string, newExtension: string): Promise<boolean> {
-	const { promise, resolve } = Promise.withResolvers<boolean>()
-	await spawnDialog(
+	return await spawnDialog(
 		defineAsyncComponent(() => import('../views/DialogConfirmFileExtension.vue')),
 		{ oldExtension, newExtension },
-		resolve,
 	)
-	return promise
 }
 
 /**
@@ -189,11 +186,8 @@ async function showFileExtensionDialog(oldExtension: string, newExtension: strin
  * @param filename - The new filename
  */
 async function showHiddenFileDialog(filename: string): Promise<boolean> {
-	const { promise, resolve } = Promise.withResolvers<boolean>()
-	await spawnDialog(
+	return await spawnDialog(
 		defineAsyncComponent(() => import('../views/DialogConfirmFileHidden.vue')),
 		{ filename },
-		resolve,
 	)
-	return promise
 }
diff --git a/apps/files/src/store/selection.ts b/apps/files/src/store/selection.ts
index 50de2cdb1da80..55e5209684897 100644
--- a/apps/files/src/store/selection.ts
+++ b/apps/files/src/store/selection.ts
@@ -6,7 +6,6 @@
 import type { FileSource, SelectionStore } from '../types.ts'
 
 import { defineStore } from 'pinia'
-import Vue from 'vue'
 
 export const useSelectionStore = defineStore('selection', {
 	state: () => ({
@@ -22,7 +21,7 @@ export const useSelectionStore = defineStore('selection', {
 		 * @param selection
 		 */
 		set(selection = [] as FileSource[]) {
-			Vue.set(this, 'selected', [...new Set(selection)])
+			this.selected = [...new Set(selection)]
 		},
 
 		/**
@@ -32,17 +31,17 @@ export const useSelectionStore = defineStore('selection', {
 		 */
 		setLastIndex(lastSelectedIndex = null as number | null) {
 			// Update the last selection if we provided a new selection starting point
-			Vue.set(this, 'lastSelection', lastSelectedIndex ? this.selected : [])
-			Vue.set(this, 'lastSelectedIndex', lastSelectedIndex)
+			this.lastSelection = lastSelectedIndex ? this.selected : []
+			this.lastSelectedIndex = lastSelectedIndex
 		},
 
 		/**
 		 * Reset the selection
 		 */
 		reset() {
-			Vue.set(this, 'selected', [])
-			Vue.set(this, 'lastSelection', [])
-			Vue.set(this, 'lastSelectedIndex', null)
+			this.selected = []
+			this.lastSelection = []
+			this.lastSelectedIndex = null
 		},
 	},
 })
diff --git a/apps/files/src/store/uploader.ts b/apps/files/src/store/uploader.ts
index dc6f638bdceca..0caaa01352189 100644
--- a/apps/files/src/store/uploader.ts
+++ b/apps/files/src/store/uploader.ts
@@ -3,10 +3,10 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import type { Uploader } from '@nextcloud/upload'
+import type { Uploader } from '@nextcloud/files/upload'
 import type { UploaderStore } from '../types.ts'
 
-import { getUploader } from '@nextcloud/upload'
+import { getUploader } from '@nextcloud/files/upload'
 import { defineStore } from 'pinia'
 
 let uploader: Uploader
diff --git a/apps/files/src/store/userconfig.ts b/apps/files/src/store/userconfig.ts
index 00fd45e67ac7b..bea47439bdc6d 100644
--- a/apps/files/src/store/userconfig.ts
+++ b/apps/files/src/store/userconfig.ts
@@ -11,7 +11,7 @@ import { emit, subscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 import { generateUrl } from '@nextcloud/router'
 import { defineStore } from 'pinia'
-import { ref, set } from 'vue'
+import { ref } from 'vue'
 
 const initialUserConfig = loadState<UserConfig>('files', 'config', {
 	crop_image_previews: true,
@@ -38,7 +38,7 @@ export const useUserConfigStore = defineStore('userconfig', () => {
 	 * @param value The new value
 	 */
 	function onUpdate<Key extends string>(key: Key, value: UserConfig[Key]): void {
-		set(userConfig.value, key, value)
+		userConfig.value[key] = value
 	}
 
 	/**
diff --git a/apps/files/src/store/viewConfig.ts b/apps/files/src/store/viewConfig.ts
index d624584e5dc14..e95e045385570 100644
--- a/apps/files/src/store/viewConfig.ts
+++ b/apps/files/src/store/viewConfig.ts
@@ -11,7 +11,7 @@ import { emit, subscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 import { generateUrl } from '@nextcloud/router'
 import { defineStore } from 'pinia'
-import { ref, set } from 'vue'
+import { ref } from 'vue'
 
 const initialViewConfig = loadState('files', 'viewConfigs', {}) as ViewConfigs
 
@@ -36,9 +36,9 @@ export const useViewConfigStore = defineStore('viewconfig', () => {
 	 */
 	function onUpdate(viewId: ViewId, key: string, value: string | number | boolean): void {
 		if (!(viewId in viewConfigs.value)) {
-			set(viewConfigs.value, viewId, {})
+			viewConfigs.value[viewId] = {}
 		}
-		set(viewConfigs.value[viewId], key, value)
+		viewConfigs.value[viewId][key] = value
 	}
 
 	/**
diff --git a/apps/files/src/types.ts b/apps/files/src/types.ts
index f87c0c4b8e7c9..68f2da7d190e0 100644
--- a/apps/files/src/types.ts
+++ b/apps/files/src/types.ts
@@ -4,7 +4,7 @@
  */
 
 import type { IFileAction, IFolder, INode, IView } from '@nextcloud/files'
-import type { Upload } from '@nextcloud/upload'
+import type { IUpload } from '@nextcloud/files/upload'
 
 // Global definitions
 export type Service = string
@@ -102,7 +102,7 @@ export interface RenamingStore {
 
 // Uploader store
 export interface UploaderStore {
-	queue: Upload[]
+	queue: IUpload[]
 }
 
 // Drag and drop store
diff --git a/apps/files/src/utils/actionUtils.ts b/apps/files/src/utils/actionUtils.ts
index 93b4169b95926..3386c3c8ad6b5 100644
--- a/apps/files/src/utils/actionUtils.ts
+++ b/apps/files/src/utils/actionUtils.ts
@@ -7,7 +7,6 @@ import type { ActionContextSingle, IFileAction } from '@nextcloud/files'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { NodeStatus } from '@nextcloud/files'
 import { t } from '@nextcloud/l10n'
-import Vue from 'vue'
 import { useActiveStore } from '../store/active.ts'
 import { logger } from '../utils/logger.ts'
 
@@ -70,7 +69,7 @@ export async function executeAction(action: IFileAction, trigger?: ActionTrigger
 
 	try {
 		// Set the loading marker
-		Vue.set(currentNode, 'status', NodeStatus.LOADING)
+		currentNode.status = NodeStatus.LOADING
 		activeStore.activeAction = action
 
 		const success = await action.exec(context)
@@ -90,7 +89,7 @@ export async function executeAction(action: IFileAction, trigger?: ActionTrigger
 		showError(t('files', '{displayName}: failed', { displayName }))
 	} finally {
 		// Reset the loading marker
-		Vue.set(currentNode, 'status', undefined)
+		currentNode.status = undefined
 		activeStore.activeAction = undefined
 	}
 }
diff --git a/apps/files/src/utils/conflicts.ts b/apps/files/src/utils/conflicts.ts
new file mode 100644
index 0000000000000..be6939b48bd7b
--- /dev/null
+++ b/apps/files/src/utils/conflicts.ts
@@ -0,0 +1,19 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { INode } from '@nextcloud/files'
+
+type ConflictInput = INode | File | FileSystemEntry
+
+/**
+ * Check if there are conflicts between two sets of nodes
+ *
+ * @param sourceNodes - The nodes that might conflict
+ * @param targetNodes - The nodes in the target directory
+ */
+export function getConflicts<T extends ConflictInput>(sourceNodes: T[], targetNodes: INode[]): T[] {
+	const targetNames = targetNodes.map((node) => node.basename)
+	return sourceNodes.filter((node) => targetNames.includes('basename' in node ? node.basename : node.name))
+}
diff --git a/apps/files/src/utils/dragUtils.ts b/apps/files/src/utils/dragUtils.ts
index 897842f814924..8ae909ca98c0b 100644
--- a/apps/files/src/utils/dragUtils.ts
+++ b/apps/files/src/utils/dragUtils.ts
@@ -3,12 +3,15 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 import type { Node } from '@nextcloud/files'
+import type { ComponentPublicInstance } from 'vue'
 
-import Vue from 'vue'
+import { createApp } from 'vue'
 import DragAndDropPreview from '../components/DragAndDropPreview.vue'
 
-const Preview = Vue.extend(DragAndDropPreview)
-let preview: Vue
+type PreviewInstance = ComponentPublicInstance & { update: (nodes: Node[]) => void }
+
+let preview: PreviewInstance | undefined
+let onLoaded: ((el: Element) => void) | undefined
 
 /**
  *
@@ -17,14 +20,15 @@ let preview: Vue
 export async function getDragAndDropPreview(nodes: Node[]): Promise<Element> {
 	return new Promise((resolve) => {
 		if (!preview) {
-			preview = new Preview().$mount()
-			document.body.appendChild(preview.$el)
+			const mountingPoint = document.createElement('div')
+			document.body.appendChild(mountingPoint)
+			const app = createApp(DragAndDropPreview, {
+				onLoaded: (el: Element) => onLoaded?.(el),
+			})
+			preview = app.mount(mountingPoint) as PreviewInstance
 		}
 
+		onLoaded = resolve
 		preview.update(nodes)
-		preview.$on('loaded', () => {
-			resolve(preview.$el)
-			preview.$off('loaded')
-		})
 	})
 }
diff --git a/apps/files/src/utils/generateUrl.spec.ts b/apps/files/src/utils/generateUrl.spec.ts
new file mode 100644
index 0000000000000..8c76386b60273
--- /dev/null
+++ b/apps/files/src/utils/generateUrl.spec.ts
@@ -0,0 +1,42 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { generateFileUrl } from './generateUrl.ts'
+
+const getCapabilities = vi.hoisted(() => vi.fn())
+vi.mock('@nextcloud/capabilities', () => ({ getCapabilities }))
+
+describe('generateFileUrl', () => {
+	beforeEach(() => window._oc_webroot = '')
+
+	/**
+	 * Regression test of https://github.com/nextcloud/server/issues/56374
+	 */
+	it('should work without globalscale and webroot', () => {
+		window._oc_webroot = '/nextcloud'
+		getCapabilities.mockReturnValue({ globalscale: null })
+		const url = generateFileUrl(12345)
+		expect(url).toBe('http://nextcloud.local/nextcloud/index.php/f/12345')
+	})
+
+	it('should work without globalscale', () => {
+		getCapabilities.mockReturnValue({ globalscale: null })
+		const url = generateFileUrl(12345)
+		expect(url).toBe('http://nextcloud.local/index.php/f/12345')
+	})
+
+	it('should work with older globalscale', () => {
+		getCapabilities.mockReturnValue({ globalscale: { enabled: true } })
+		const url = generateFileUrl(12345)
+		expect(url).toBe('http://nextcloud.local/index.php/f/12345')
+	})
+
+	it('should work with globalscale', () => {
+		getCapabilities.mockReturnValue({ globalscale: { enabled: true, token: 'abc123' } })
+		const url = generateFileUrl(12345)
+		expect(url).toBe('http://nextcloud.local/index.php/gf/abc123/12345')
+	})
+})
diff --git a/apps/files/src/utils/generateUrl.ts b/apps/files/src/utils/generateUrl.ts
new file mode 100644
index 0000000000000..267442af2c7a0
--- /dev/null
+++ b/apps/files/src/utils/generateUrl.ts
@@ -0,0 +1,32 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { getCapabilities } from '@nextcloud/capabilities'
+import { generateUrl, getBaseUrl } from '@nextcloud/router'
+
+interface IGlobalScaleCapabilities {
+	token?: string
+}
+
+/**
+ * @param fileid - The file ID to generate the direct file link for
+ */
+export function generateFileUrl(fileid: number): string {
+	const baseURL = getBaseUrl()
+
+	const { globalscale } = getCapabilities() as { globalscale?: IGlobalScaleCapabilities }
+	if (globalscale?.token) {
+		return generateUrl('/gf/{token}/{fileid}', {
+			token: globalscale.token,
+			fileid,
+		}, { baseURL })
+	}
+
+	return generateUrl('/f/{fileid}', {
+		fileid,
+	}, {
+		baseURL,
+	})
+}
diff --git a/apps/files/src/utils/newNodeDialog.spec.ts b/apps/files/src/utils/newNodeDialog.spec.ts
new file mode 100644
index 0000000000000..03530c6da3245
--- /dev/null
+++ b/apps/files/src/utils/newNodeDialog.spec.ts
@@ -0,0 +1,43 @@
+/*!
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { INode } from '@nextcloud/files'
+
+import { describe, expect, it, vi } from 'vitest'
+
+const spawnDialog = vi.fn()
+vi.mock('@nextcloud/vue/functions/dialog', () => ({ spawnDialog }))
+
+const { newNodeName } = await import('./newNodeDialog.ts')
+
+describe('newNodeName', () => {
+	it('resolves with the name the dialog was closed with', async () => {
+		spawnDialog.mockResolvedValueOnce('New folder (2)')
+
+		await expect(newNodeName('New folder', [])).resolves.toBe('New folder (2)')
+	})
+
+	it('resolves with null when the dialog is dismissed', async () => {
+		spawnDialog.mockResolvedValueOnce(null)
+
+		await expect(newNodeName('New folder', [])).resolves.toBeNull()
+	})
+
+	it('passes the other node names so the dialog can suggest a unique one', async () => {
+		spawnDialog.mockResolvedValueOnce(null)
+		const content = [{ basename: 'foo.txt' }, { basename: 'bar' }] as INode[]
+
+		await newNodeName('New folder', content, { isFolder: true })
+
+		expect(spawnDialog).toHaveBeenCalledWith(
+			expect.anything(),
+			expect.objectContaining({
+				defaultName: 'New folder',
+				isFolder: true,
+				otherNames: ['foo.txt', 'bar'],
+			}),
+		)
+	})
+})
diff --git a/apps/files/src/utils/newNodeDialog.ts b/apps/files/src/utils/newNodeDialog.ts
index 30e26a0f9b649..88ce7cbd1d3f2 100644
--- a/apps/files/src/utils/newNodeDialog.ts
+++ b/apps/files/src/utils/newNodeDialog.ts
@@ -32,16 +32,12 @@ interface NewNodeDialogOptions {
  * @param options Options for the dialog
  * @return string if successful otherwise null if aborted
  */
-export function newNodeName(defaultName: string, folderContent: INode[], options: NewNodeDialogOptions = {}) {
+export async function newNodeName(defaultName: string, folderContent: INode[], options: NewNodeDialogOptions = {}): Promise<string | null> {
 	const contentNames = folderContent.map((node: INode) => node.basename)
 
-	return new Promise<string | null>((resolve) => {
-		spawnDialog(NewNodeDialog, {
-			...options,
-			defaultName,
-			otherNames: contentNames,
-		}, (folderName) => {
-			resolve(folderName as string | null)
-		})
+	return await spawnDialog(NewNodeDialog, {
+		...options,
+		defaultName,
+		otherNames: contentNames,
 	})
 }
diff --git a/apps/files/src/views/DialogConfirmFileExtension.spec.ts b/apps/files/src/views/DialogConfirmFileExtension.spec.ts
index 4fba503767b66..889de2227da2b 100644
--- a/apps/files/src/views/DialogConfirmFileExtension.spec.ts
+++ b/apps/files/src/views/DialogConfirmFileExtension.spec.ts
@@ -71,9 +71,7 @@ describe('DialogConfirmFileExtension', () => {
 			props: {
 				oldExtension: '.old',
 				newExtension: '.new',
-			},
-			listeners: {
-				close: onclose,
+				onClose: onclose,
 			},
 			global: {
 				plugins: [createTestingPinia({
@@ -93,9 +91,7 @@ describe('DialogConfirmFileExtension', () => {
 			props: {
 				oldExtension: '.old',
 				newExtension: '.new',
-			},
-			listeners: {
-				close: onclose,
+				onClose: onclose,
 			},
 			global: {
 				plugins: [createTestingPinia({
diff --git a/apps/files/src/views/DialogConfirmFileExtension.vue b/apps/files/src/views/DialogConfirmFileExtension.vue
index 50a3095a173b0..bbc210cff0f22 100644
--- a/apps/files/src/views/DialogConfirmFileExtension.vue
+++ b/apps/files/src/views/DialogConfirmFileExtension.vue
@@ -66,7 +66,7 @@ function closeDialog(value: boolean) {
 	<NcDialog
 		:buttons="buttons"
 		:open="open"
-		no-close
+		noClose
 		:name="t('files', 'Change file extension')"
 		size="small">
 		<p v-if="newExtension && oldExtension">
diff --git a/apps/files/src/views/DialogConfirmFileHidden.spec.ts b/apps/files/src/views/DialogConfirmFileHidden.spec.ts
index bc74eef619823..eef1985c474eb 100644
--- a/apps/files/src/views/DialogConfirmFileHidden.spec.ts
+++ b/apps/files/src/views/DialogConfirmFileHidden.spec.ts
@@ -35,9 +35,7 @@ describe('DialogConfirmFileHidden', () => {
 		const component = render(DialogConfirmFileHidden, {
 			props: {
 				filename: '.filename.txt',
-			},
-			listeners: {
-				close: onclose,
+				onClose: onclose,
 			},
 			global: {
 				plugins: [createTestingPinia({
@@ -56,9 +54,7 @@ describe('DialogConfirmFileHidden', () => {
 		const component = render(DialogConfirmFileHidden, {
 			props: {
 				filename: '.filename.txt',
-			},
-			listeners: {
-				close: onclose,
+				onClose: onclose,
 			},
 			global: {
 				plugins: [createTestingPinia({
diff --git a/apps/files/src/views/DialogConfirmFileHidden.vue b/apps/files/src/views/DialogConfirmFileHidden.vue
index 5178cb55f7e22..c6d217f128351 100644
--- a/apps/files/src/views/DialogConfirmFileHidden.vue
+++ b/apps/files/src/views/DialogConfirmFileHidden.vue
@@ -41,7 +41,7 @@ function closeDialog(value: boolean) {
 
 <template>
 	<NcDialog
-		no-close
+		noClose
 		:open="open"
 		:name="t('files', 'Rename file to hidden')"
 		size="small">
diff --git a/apps/files/src/views/FileReferencePickerElement.vue b/apps/files/src/views/FileReferencePickerElement.vue
index e2a621b181eee..22d2581038883 100644
--- a/apps/files/src/views/FileReferencePickerElement.vue
+++ b/apps/files/src/views/FileReferencePickerElement.vue
@@ -9,16 +9,18 @@
 
 <script setup lang="ts">
 import type { IFilePickerButton } from '@nextcloud/dialogs'
-import type { Node as NcNode } from '@nextcloud/files'
+import type { INode } from '@nextcloud/files'
 
 import { FilePickerBuilder } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 import { onMounted } from 'vue'
-import { generateFileUrl } from '../../../files_sharing/src/utils/generateUrl.ts'
+import { generateFileUrl } from '../utils/generateUrl.ts'
 import { logger } from '../utils/logger.ts'
 
 defineProps<{
+	// eslint-disable-next-line vue/no-unused-properties -- Provided as per API but not used
 	providerId: string
+	// eslint-disable-next-line vue/no-unused-properties -- Provided as per API but not used
 	accessible: boolean
 }>()
 
@@ -51,7 +53,7 @@ onMounted(async () => {
  *
  * @param selected - currently selected nodes
  */
-function buttonFactory(selected: NcNode[]): IFilePickerButton[] {
+function buttonFactory(selected: INode[]): IFilePickerButton[] {
 	const buttons = [] as IFilePickerButton[]
 	const node = selected[0]
 	if (node === undefined) {
@@ -73,7 +75,7 @@ function buttonFactory(selected: NcNode[]): IFilePickerButton[] {
 /**
  * @param node - selected node
  */
-function onSubmit(node: NcNode) {
+function onSubmit(node: INode) {
 	emit('submit', generateFileUrl(node.fileid!))
 }
 </script>
diff --git a/apps/files/src/views/FilesAppSettings.vue b/apps/files/src/views/FilesAppSettings.vue
index 7772b3d89c220..140f780537b49 100644
--- a/apps/files/src/views/FilesAppSettings.vue
+++ b/apps/files/src/views/FilesAppSettings.vue
@@ -48,9 +48,9 @@ async function showKeyboardShortcuts() {
 	<NcAppSettingsDialog
 		:legacy="false"
 		:name="t('files', 'Files settings')"
-		no-version
+		noVersion
 		:open="open"
-		show-navigation
+		showNavigation
 		@update:open="emit('close')">
 		<FilesAppSettingsGeneral />
 		<FilesAppSettingsAppearance />
diff --git a/apps/files/src/views/FilesList.vue b/apps/files/src/views/FilesList.vue
index a57b726a057c5..c67cea3ae5138 100644
--- a/apps/files/src/views/FilesList.vue
+++ b/apps/files/src/views/FilesList.vue
@@ -3,24 +3,24 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcAppContent :page-heading="pageHeading" data-cy-files-content>
+	<NcAppContent :pageHeading="pageHeading" data-cy-files-content>
 		<div class="files-list__header" :class="{ 'files-list__header--public': isPublic }">
 			<!-- Uploader -->
-			<component :is="isNarrow ? 'Teleport' : 'div'" :to="isNarrow ? 'body' : undefined">
-				<UploadPicker
+			<Teleport :disabled="!isNarrow" to="body">
+				<NcUploadPicker
 					v-if="canUpload && !isQuotaExceeded && currentFolder"
-					allow-folders
-					:no-label="isNarrow"
+					:actions="newFileMenuActions"
+					directory
+					:iconOnly="isNarrow"
 					class="files-list__header-upload-button"
 					:class="{ 'files-list__header-upload-button--narrow': isNarrow }"
 					:content="getContent"
 					:destination="currentFolder"
-					:forbidden-characters="forbiddenCharacters"
 					multiple
-					primary
-					@failed="onUploadFail"
-					@uploaded="onUpload" />
-			</component>
+					variant="primary"
+					data-cy-upload-picker
+					@upload:finished="onUploadFinished" />
+			</Teleport>
 
 			<!-- Current folder breadcrumbs -->
 			<BreadCrumbs :path="directory" @reload="fetchContent" />
@@ -36,19 +36,19 @@
 				class="files-list__header-actions"
 				:inline="1"
 				variant="tertiary"
-				force-name>
+				forceName>
 				<NcActionButton
 					v-for="action in enabledFileListActions"
 					:key="action.id"
 					:disabled="!!loadingAction"
 					:data-cy-files-list-action="action.id"
-					close-after-click
+					closeAfterClick
 					@click="execFileListAction(action)">
 					<template #icon>
 						<NcLoadingIcon v-if="loadingAction === action.id" :size="18" />
 						<NcIconSvgWrapper
 							v-else-if="action.iconSvgInline !== undefined && currentView"
-							:svg="action.iconSvgInline(currentView)" />
+							:svg="action.iconSvgInline(currentView /* TODO: FIXME */)" />
 					</template>
 					{{ actionDisplayName(action) }}
 				</NcActionButton>
@@ -73,7 +73,7 @@
 		</div>
 
 		<!-- Drag and drop notice -->
-		<DragAndDropNotice v-if="!loading && canUpload && currentFolder" :current-folder="currentFolder" />
+		<DragAndDropNotice v-if="!loading && canUpload && currentFolder" :currentFolder />
 
 		<!--
 			Initial current view loading0. This should never happen,
@@ -90,8 +90,8 @@
 		<FilesListVirtual
 			v-else
 			ref="filesListVirtual"
-			:current-folder="currentFolder"
-			:current-view="currentView"
+			:currentFolder
+			:currentView
 			:nodes="dirContentsSorted"
 			:summary="summary">
 			<template #empty>
@@ -130,16 +130,16 @@
 					data-cy-files-content-empty>
 					<template v-if="directory !== '/'" #action>
 						<!-- Uploader -->
-						<UploadPicker
+						<NcUploadPicker
 							v-if="canUpload && !isQuotaExceeded"
-							allow-folders
+							:actions="newFileMenuActions"
+							directory
 							class="files-list__header-upload-button"
 							:content="getContent"
 							:destination="currentFolder"
-							:forbidden-characters="forbiddenCharacters"
 							multiple
-							@failed="onUploadFail"
-							@uploaded="onUpload" />
+							data-cy-upload-picker
+							@upload:finished="onUploadFinished" />
 						<NcButton v-else :to="toPreviousDir" variant="primary">
 							{{ t('files', 'Go back') }}
 						</NcButton>
@@ -154,24 +154,23 @@
 </template>
 
 <script lang="ts">
-import type { ContentsWithRoot, FileListAction, INode, Node } from '@nextcloud/files'
-import type { Upload } from '@nextcloud/upload'
+import type { ContentsWithRoot, IFileListAction, INode, Node } from '@nextcloud/files'
+import type { IUpload } from '@nextcloud/files/upload'
 import type { ComponentPublicInstance } from 'vue'
-import type { Route } from 'vue-router'
+import type { RouteLocationRaw } from 'vue-router'
 import type { UserConfig } from '../types.ts'
 
-import { showError, showSuccess, showWarning } from '@nextcloud/dialogs'
+import { showError, showSuccess } from '@nextcloud/dialogs'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { Permission, sortNodes } from '@nextcloud/files'
+import { UploadStatus } from '@nextcloud/files/upload'
 import { loadState } from '@nextcloud/initial-state'
 import { translate as t } from '@nextcloud/l10n'
-import { dirname, join } from '@nextcloud/paths'
+import { basename, dirname, join } from '@nextcloud/paths'
 import { ShareType } from '@nextcloud/sharing'
-import { UploadPicker, UploadStatus } from '@nextcloud/upload'
 import { useThrottleFn } from '@vueuse/core'
 import { normalize, relative } from 'path'
 import { computed, defineComponent, nextTick, watch } from 'vue'
-import Teleport from 'vue2-teleport' // TODO: replace with native Vue Teleport when we switch to Vue 3
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcAppContent from '@nextcloud/vue/components/NcAppContent'
@@ -179,6 +178,7 @@ import NcButton from '@nextcloud/vue/components/NcButton'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcUploadPicker from '@nextcloud/vue/components/NcUploadPicker'
 import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
 import ListViewIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
 import IconReload from 'vue-material-design-icons/Reload.vue'
@@ -187,10 +187,11 @@ import BreadCrumbs from '../components/BreadCrumbs.vue'
 import DragAndDropNotice from '../components/DragAndDropNotice.vue'
 import FileListFilters from '../components/FileListFilter/FileListFilters.vue'
 import FilesListVirtual from '../components/FilesListVirtual.vue'
+import { useFilesSorting } from '../composables/filesSorting.ts'
 import { useEnabledFileListActions } from '../composables/useFileListActions.ts'
 import { useFileListWidth } from '../composables/useFileListWidth.ts'
+import { useNewFileMenuActions } from '../composables/useNewFileMenuActions.ts'
 import { useRouteParameters } from '../composables/useRouteParameters.ts'
-import filesSortingMixin from '../mixins/filesSorting.ts'
 import { useActiveStore } from '../store/active.ts'
 import { useFilesStore } from '../store/files.ts'
 import { useFiltersStore } from '../store/filters.ts'
@@ -221,17 +222,12 @@ export default defineComponent({
 		NcEmptyContent,
 		NcIconSvgWrapper,
 		NcLoadingIcon,
-		Teleport,
-		UploadPicker,
+		NcUploadPicker,
 		ViewGridIcon,
 		IconAlertCircleOutline,
 		IconReload,
 	},
 
-	mixins: [
-		filesSortingMixin,
-	],
-
 	props: {
 		isPublic: {
 			type: Boolean,
@@ -254,7 +250,6 @@ export default defineComponent({
 		const { directory, fileId } = useRouteParameters()
 
 		const enableGridView = (loadState('core', 'config', [])['enable_non-accessible_features'] ?? true)
-		const forbiddenCharacters = loadState<string[]>('files', 'forbiddenCharacters', [])
 
 		const currentView = computed(() => activeStore.activeView)
 		const currentFolder = computed(() => activeStore.activeFolder)
@@ -270,6 +265,8 @@ export default defineComponent({
 			currentView,
 		)
 
+		const newFileMenuActions = useNewFileMenuActions(currentFolder, dirContents)
+
 		// wait until the current folder is set up to notifiy the list is initialized
 		const stopWatching = watch(currentFolder, () => {
 			if (currentFolder.value.fileid !== undefined && currentFolder.value.fileid! > 0) {
@@ -286,6 +283,7 @@ export default defineComponent({
 			enabledFileListActions,
 			fileId,
 			isNarrow,
+			newFileMenuActions,
 
 			sidebar,
 			activeStore,
@@ -297,9 +295,10 @@ export default defineComponent({
 			userConfigStore,
 			viewConfigStore,
 
+			...useFilesSorting(),
+
 			// non reactive data
 			enableGridView,
-			forbiddenCharacters,
 			ShareType,
 			t,
 		}
@@ -415,7 +414,7 @@ export default defineComponent({
 		/**
 		 * Route to the previous directory.
 		 */
-		toPreviousDir(): Route {
+		toPreviousDir(): RouteLocationRaw {
 			const dir = this.directory.split('/').slice(0, -1).join('/') || '/'
 			return { ...this.$route, query: { dir } }
 		},
@@ -554,7 +553,7 @@ export default defineComponent({
 				window.addEventListener('DOMContentLoaded', () => {
 					if (!this.currentView) {
 						logger.warn('No current view after DOMContentLoaded, redirecting to the default view')
-						window.OCP.Files.Router.goToRoute(null, { view: defaultView() })
+						window.OCP.Files.Router.goToRoute(null, { view: defaultView()! })
 					}
 				}, { once: true })
 				return
@@ -580,7 +579,7 @@ export default defineComponent({
 
 				// Define current directory children
 				// TODO: make it more official
-				this.$set(folder, '_children', contents.map((node) => node.source))
+				folder._children = contents.map((node) => node.source)
 
 				// If we're in the root dir, define the root
 				if (dir === '/') {
@@ -612,66 +611,29 @@ export default defineComponent({
 		},
 
 		/**
-		 * The upload manager have finished handling the queue
+		 * An upload of the upload manager has finished - successfully, failed or cancelled.
 		 *
-		 * @param upload the uploaded data
+		 * @param upload - The upload that finished
 		 */
-		onUpload(upload: Upload) {
-			// Let's only refresh the current Folder
-			// Navigating to a different folder will refresh it anyway
-			const needsRefresh = dirname(upload.source) === this.currentFolder!.source
-
-			// TODO: fetch uploaded files data only
-			// Use parseInt(upload.response?.headers?.['oc-fileid']) to get the fileid
-			if (needsRefresh) {
-				// fetchContent will cancel the previous ongoing promise
-				this.fetchContent()
-			}
-		},
-
-		async onUploadFail(upload: Upload) {
-			const status = upload.response?.status || 0
-
-			if (upload.status === UploadStatus.CANCELLED) {
-				showWarning(t('files', 'Upload was cancelled by user'))
+		onUploadFinished(upload: IUpload) {
+			if (upload.status === UploadStatus.FAILED) {
+				logger.error('Upload failed', { upload })
+				showError(t('files', 'Could not upload "{name}"', { name: basename(upload.source) }))
 				return
 			}
 
-			// Check known status codes
-			if (status === 507) {
-				showError(t('files', 'Not enough free space'))
-				return
-			} else if (status === 404 || status === 409) {
-				showError(t('files', 'Target folder does not exist any more'))
-				return
-			} else if (status === 403) {
-				showError(t('files', 'Operation is blocked by access control'))
+			// Cancelled uploads are user initiated and do not add any content
+			if (upload.status !== UploadStatus.FINISHED) {
 				return
 			}
 
-			// Else we try to parse the response error message
-			if (typeof upload.response?.data === 'string') {
-				try {
-					const parser = new DOMParser()
-					const doc = parser.parseFromString(upload.response.data, 'text/xml')
-					const message = doc.getElementsByTagName('s:message')[0]?.textContent ?? ''
-					if (message.trim() !== '') {
-						// The server message is also translated
-						showError(t('files', 'Error during upload: {message}', { message }))
-						return
-					}
-				} catch (error) {
-					logger.error('Could not parse message', { error })
-				}
-			}
-
-			// Finally, check the status code if we have one
-			if (status !== 0) {
-				showError(t('files', 'Error during upload, status code {status}', { status }))
-				return
+			// Let's only refresh the current Folder
+			// Navigating to a different folder will refresh it anyway
+			// TODO: fetch uploaded files data only
+			if (dirname(upload.source) === this.currentFolder!.source) {
+				// fetchContent will cancel the previous ongoing promise
+				this.fetchContent()
 			}
-
-			showError(t('files', 'Unknown error during upload'))
 		},
 
 		/**
@@ -697,7 +659,7 @@ export default defineComponent({
 			this.dirContentsFiltered = nodes
 		},
 
-		actionDisplayName(action: FileListAction): string {
+		actionDisplayName(action: IFileListAction): string {
 			let displayName = action.id
 			try {
 				displayName = action.displayName(this.currentView!)
@@ -707,13 +669,12 @@ export default defineComponent({
 			return displayName
 		},
 
-		async execFileListAction(action: FileListAction) {
+		async execFileListAction(action: IFileListAction) {
 			this.loadingAction = action.id
 
 			const displayName = this.actionDisplayName(action)
 			try {
 				const success = await action.exec({
-					nodes: [this.source],
 					view: this.currentView,
 					folder: this.currentFolder,
 					contents: this.dirContents,
diff --git a/apps/files/src/views/FilesNavigation.spec.ts b/apps/files/src/views/FilesNavigation.spec.ts
index b6b239560a8d3..9abb8bd658a59 100644
--- a/apps/files/src/views/FilesNavigation.spec.ts
+++ b/apps/files/src/views/FilesNavigation.spec.ts
@@ -11,7 +11,7 @@ import { createTestingPinia } from '@pinia/testing'
 import { cleanup, fireEvent, getAllByRole, render } from '@testing-library/vue'
 import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
 import NavigationView from './FilesNavigation.vue'
-import router from '../router/router.ts'
+import { router } from '../router/router.ts'
 import RouterService from '../services/RouterService.ts'
 import { useViewConfigStore } from '../store/viewConfig.ts'
 
@@ -41,9 +41,8 @@ describe('Navigation', () => {
 
 	it('renders navigation with settings button and search', async () => {
 		const component = render(NavigationView, {
-			router,
 			global: {
-				plugins: [createTestingPinia({
+				plugins: [router, createTestingPinia({
 					createSpy: vi.fn,
 				})],
 			},
@@ -59,9 +58,8 @@ describe('Navigation', () => {
 
 	it('renders no quota without storage stats', () => {
 		const component = render(NavigationView, {
-			router,
 			global: {
-				plugins: [createTestingPinia({
+				plugins: [router, createTestingPinia({
 					createSpy: vi.fn,
 				})],
 			},
@@ -78,9 +76,8 @@ describe('Navigation', () => {
 		})
 
 		const component = render(NavigationView, {
-			router,
 			global: {
-				plugins: [createTestingPinia({
+				plugins: [router, createTestingPinia({
 					createSpy: vi.fn,
 				})],
 			},
@@ -101,9 +98,8 @@ describe('Navigation', () => {
 		})
 
 		const component = render(NavigationView, {
-			router,
 			global: {
-				plugins: [createTestingPinia({
+				plugins: [router, createTestingPinia({
 					createSpy: vi.fn,
 				})],
 			},
@@ -123,9 +119,8 @@ describe('Navigation', () => {
 		})
 
 		const component = render(NavigationView, {
-			router,
 			global: {
-				plugins: [createTestingPinia({
+				plugins: [router, createTestingPinia({
 					createSpy: vi.fn,
 				})],
 			},
@@ -151,9 +146,9 @@ describe('Navigation API', () => {
 		navigation.register(createView('files', 'Files'))
 
 		const component = render(NavigationView, {
-			router,
 			global: {
 				plugins: [
+					router,
 					createTestingPinia({
 						createSpy: vi.fn,
 					}),
@@ -179,9 +174,9 @@ describe('Navigation API', () => {
 		navigation.register(createView('sharing', 'Sharing'))
 
 		const component = render(NavigationView, {
-			router,
 			global: {
 				plugins: [
+					router,
 					createTestingPinia({
 						createSpy: vi.fn,
 					}),
@@ -207,9 +202,9 @@ describe('Navigation API', () => {
 		navigation.register(createView('sharingin', 'Shared with me', 'sharing'))
 
 		const component = render(NavigationView, {
-			router,
 			global: {
 				plugins: [
+					router,
 					createTestingPinia({
 						createSpy: vi.fn,
 					}),
diff --git a/apps/files/src/views/FilesNavigation.vue b/apps/files/src/views/FilesNavigation.vue
index 3c1f37baddf62..fb71cdd81f5ce 100644
--- a/apps/files/src/views/FilesNavigation.vue
+++ b/apps/files/src/views/FilesNavigation.vue
@@ -15,7 +15,7 @@
 
 			<!-- Settings modal-->
 			<FilesAppSettings
-				:open.sync="settingsOpened"
+				v-model:open="settingsOpened"
 				data-cy-files-navigation-settings
 				@close="settingsOpened = false" />
 		</template>
@@ -31,7 +31,9 @@
 					:name="t('files', 'Files settings')"
 					data-cy-files-navigation-settings-button
 					@click.prevent.stop="settingsOpened = true">
-					<IconCog slot="icon" :size="20" />
+					<template #icon>
+						<IconCog :size="20" />
+					</template>
 				</NcAppNavigationItem>
 			</ul>
 		</template>
@@ -43,7 +45,7 @@ import { emit } from '@nextcloud/event-bus'
 import { getNavigation } from '@nextcloud/files'
 import { t } from '@nextcloud/l10n'
 import { computed, provide, ref, watchEffect } from 'vue'
-import { useRoute } from 'vue-router/composables'
+import { useRoute } from 'vue-router'
 import NcAppNavigation from '@nextcloud/vue/components/NcAppNavigation'
 import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem'
 import IconCog from 'vue-material-design-icons/CogOutline.vue'
@@ -79,15 +81,15 @@ const currentNavigationViewId = computed(() => {
 		.sort((a, b) => Object.keys(b.params!).length - Object.keys(a.params!).length)
 	// if we have a full match use that
 	if (matchingParams.length > 0) {
-		return matchingParams[0]
+		return matchingParams[0]!.id
 	}
 	// otherwise check if at least view + dir matches
 	const matchingDir = views.find((view) => view.params?.dir === route.query.dir)
 	if (matchingDir) {
-		return matchingDir
+		return matchingDir.id
 	}
 	// finally fallback to the parent view
-	return views.find((view) => view.id === currentViewId.value)!
+	return views.find((view) => view.id === currentViewId.value)?.id
 })
 provide('currentNavigationView', currentNavigationViewId)
 
diff --git a/apps/files/src/views/FilesSidebar.vue b/apps/files/src/views/FilesSidebar.vue
index c83a7cf794ed4..e95e78a643077 100644
--- a/apps/files/src/views/FilesSidebar.vue
+++ b/apps/files/src/views/FilesSidebar.vue
@@ -71,14 +71,14 @@ function onToggle(open: boolean) {
 
 <template>
 	<NcAppSidebar
+		v-model:active="sidebar.activeTab"
 		data-cy-sidebar
-		force-menu
-		:active.sync="sidebar.activeTab"
+		forceMenu
 		:background="background"
 		:empty="!sidebar.hasContext"
 		:loading="!sidebar.hasContext"
 		:name="sidebar.currentNode?.displayname ?? t('files', 'Loading …')"
-		no-toggle
+		noToggle
 		:open="sidebar.isOpen"
 		@closed="onClosed"
 		@opened="onOpened"
@@ -93,7 +93,7 @@ function onToggle(open: boolean) {
 			<NcActionButton
 				v-for="action of sidebar.currentActions"
 				:key="action.id"
-				close-after-click
+				closeAfterClick
 				@click="action.onClick(sidebar.currentContext)">
 				<template #icon>
 					<NcIconSvgWrapper :svg="action.iconSvgInline(sidebar.currentContext)" />
diff --git a/apps/files/src/views/ReferenceFileWidget.vue b/apps/files/src/views/ReferenceFileWidget.vue
index e7245f0faf997..f8ce689b5d59f 100644
--- a/apps/files/src/views/ReferenceFileWidget.vue
+++ b/apps/files/src/views/ReferenceFileWidget.vue
@@ -24,13 +24,13 @@
 		:is="viewerHandler.component"
 		v-else-if="interactive && viewerHandler && !failedViewer"
 		:active="false /* prevent video from autoplaying */"
-		:can-swipe="false"
-		:can-zoom="false"
-		:is-embedded="true"
+		:canSwipe="false"
+		:canZoom="false"
+		:isEmbedded="true"
 		v-bind="viewerFile"
-		:file-list="[viewerFile]"
-		:is-full-screen="false"
-		:is-sidebar-shown="false"
+		:fileList="[viewerFile]"
+		:isFullScreen="false"
+		:isSidebarShown="false"
 		class="widget-file widget-file--interactive"
 		@error="failedViewer = true" />
 
@@ -43,7 +43,7 @@
 		@click="navigate">
 		<span class="widget-file__image" :class="filePreviewClass" :style="filePreviewStyle">
 			<template v-if="!previewUrl">
-				<FolderIcon v-if="isFolder" :size="88" fill-color="var(--color-primary-element)" />
+				<FolderIcon v-if="isFolder" :size="88" fillColor="var(--color-primary-element)" />
 				<FileIcon v-else :size="88" />
 			</template>
 		</span>
@@ -67,7 +67,7 @@ import path from 'path'
 import { defineComponent } from 'vue'
 import FileIcon from 'vue-material-design-icons/File.vue'
 import FolderIcon from 'vue-material-design-icons/Folder.vue'
-import { generateFileUrl } from '../../../files_sharing/src/utils/generateUrl.ts'
+import { generateFileUrl } from '../utils/generateUrl.ts'
 import { logger } from '../utils/logger.ts'
 
 // see lib/private/Collaboration/Reference/File/FileReferenceProvider.php
diff --git a/apps/files/src/views/SearchEmptyView.vue b/apps/files/src/views/SearchEmptyView.vue
index 00669493a3442..7516549672fc8 100644
--- a/apps/files/src/views/SearchEmptyView.vue
+++ b/apps/files/src/views/SearchEmptyView.vue
@@ -10,10 +10,10 @@ import debounce from 'debounce'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcInputField from '@nextcloud/vue/components/NcInputField'
-import { getPinia } from '../store/index.ts'
+import { pinia } from '../store/index.ts'
 import { useSearchStore } from '../store/search.ts'
 
-const searchStore = useSearchStore(getPinia())
+const searchStore = useSearchStore(pinia)
 const debouncedUpdate = debounce((value: string) => {
 	searchStore.query = value
 }, 500)
@@ -29,9 +29,9 @@ const debouncedUpdate = debounce((value: string) => {
 				<NcInputField
 					class="search-empty-view__input"
 					:label="t('files', 'Search for files')"
-					:model-value="searchStore.query"
+					:modelValue="searchStore.query"
 					type="search"
-					@update:model-value="debouncedUpdate" />
+					@update:modelValue="debouncedUpdate" />
 			</div>
 		</template>
 	</NcEmptyContent>
diff --git a/apps/files/src/views/SettingsAdmin.vue b/apps/files/src/views/SettingsAdmin.vue
index c3fabe5ec3f16..f5c34e7be22f2 100644
--- a/apps/files/src/views/SettingsAdmin.vue
+++ b/apps/files/src/views/SettingsAdmin.vue
@@ -52,15 +52,15 @@ async function toggleWindowsFilenameSupport(enabled: boolean) {
 
 <template>
 	<NcSettingsSection
-		:doc-url="docUrl"
+		:docUrl="docUrl"
 		:name="t('files', 'Files compatibility')"
 		:description="description">
 		<NcCheckboxRadioSwitch
-			:model-value="hasWindowsSupport"
+			:modelValue="hasWindowsSupport"
 			:disabled="isRunningSanitization"
 			:loading="loading"
 			type="switch"
-			@update:model-value="toggleWindowsFilenameSupport">
+			@update:modelValue="toggleWindowsFilenameSupport">
 			{{ t('files', 'Enforce Windows compatibility') }}
 		</NcCheckboxRadioSwitch>
 		<p class="hint">
diff --git a/apps/files/src/views/TemplatePicker.vue b/apps/files/src/views/TemplatePicker.vue
index 6c6964653b82b..c02616c01f1d6 100644
--- a/apps/files/src/views/TemplatePicker.vue
+++ b/apps/files/src/views/TemplatePicker.vue
@@ -6,7 +6,7 @@
 <template>
 	<NcModal
 		v-if="opened"
-		:clear-view-delay="-1"
+		:clearViewDelay="-1"
 		class="templates-picker"
 		size="large"
 		@close="close">
@@ -22,7 +22,7 @@
 					v-bind="emptyTemplate"
 					ref="emptyTemplatePreview"
 					:checked="checked === emptyTemplate.fileid"
-					@confirm-click="onConfirmClick"
+					@confirmClick="onConfirmClick"
 					@check="onCheck" />
 
 				<TemplatePreview
@@ -31,7 +31,7 @@
 					v-bind="template"
 					:checked="checked === template.fileid"
 					:ratio="provider.ratio"
-					@confirm-click="onConfirmClick"
+					@confirmClick="onConfirmClick"
 					@check="onCheck" />
 			</ul>
 
diff --git a/apps/files/src/views/folderTree.ts b/apps/files/src/views/folderTree.ts
index 3e854a6b66a66..4b9693fb54d64 100644
--- a/apps/files/src/views/folderTree.ts
+++ b/apps/files/src/views/folderTree.ts
@@ -22,7 +22,7 @@ import {
 	sourceRoot,
 } from '../services/FolderTree.ts'
 import { useFilesStore } from '../store/files.ts'
-import { getPinia } from '../store/index.ts'
+import { pinia } from '../store/index.ts'
 
 interface IFolderTreeView extends IView {
 	loading?: boolean
@@ -170,7 +170,7 @@ function getLoadChildViews(node: TreeNode | IFolder) {
  */
 async function updateTreeChildren(path: string = '/') {
 	await queue.add(async () => {
-		const filesStore = useFilesStore(getPinia())
+		const filesStore = useFilesStore(pinia)
 		const cachedNodes = filesStore.getNodesByPath(Navigation.active!.id, path)
 		if (cachedNodes.length > 0) {
 			// if there are nodes loaded in the path we dont need to fetch from API
diff --git a/apps/files/src/views/search.ts b/apps/files/src/views/search.ts
index 3dbb95c225407..b26c1fc8e0746 100644
--- a/apps/files/src/views/search.ts
+++ b/apps/files/src/views/search.ts
@@ -3,12 +3,12 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import type { ComponentPublicInstanceConstructor } from 'vue/types/v3-component-public-instance'
+import type { App } from 'vue'
 
 import MagnifySvg from '@mdi/svg/svg/magnify.svg?raw'
 import { getNavigation, View } from '@nextcloud/files'
 import { t } from '@nextcloud/l10n'
-import Vue from 'vue'
+import { createApp, defineAsyncComponent } from 'vue'
 import { getContents } from '../services/Search.ts'
 import { VIEW_ID as FILES_VIEW_ID } from './files.ts'
 
@@ -18,8 +18,8 @@ export const VIEW_ID = 'search'
  * Register the search-in-files view
  */
 export function registerSearchView() {
-	let instance: Vue
-	let view: ComponentPublicInstanceConstructor
+	const EmptyView = defineAsyncComponent(() => import('./SearchEmptyView.vue'))
+	let instance: App
 
 	const Navigation = getNavigation()
 	Navigation.register(new View({
@@ -28,13 +28,11 @@ export function registerSearchView() {
 		caption: t('files', 'Search results within your files.'),
 
 		async emptyView(el) {
-			if (!view) {
-				view = (await import('./SearchEmptyView.vue')).default
-			} else {
-				instance.$destroy()
+			if (instance) {
+				instance.unmount()
 			}
-			instance = new Vue(view)
-			instance.$mount(el)
+			instance = createApp(EmptyView)
+			instance.mount(el)
 		},
 
 		icon: MagnifySvg,
diff --git a/apps/files_sharing/src/mixins/SharesMixin.js b/apps/files_sharing/src/mixins/SharesMixin.js
index 9a84bee0206c4..b4fc8a02af9e3 100644
--- a/apps/files_sharing/src/mixins/SharesMixin.js
+++ b/apps/files_sharing/src/mixins/SharesMixin.js
@@ -9,13 +9,13 @@ import { emit } from '@nextcloud/event-bus'
 import { ShareType } from '@nextcloud/sharing'
 import debounce from 'debounce'
 import PQueue from 'p-queue'
-import { fetchNode } from '../../../files/src/services/WebdavClient.ts'
 import { getBundledPermissions } from '../lib/SharePermissionsToolBox.js'
 import Share from '../models/Share.ts'
 import Config from '../services/ConfigService.ts'
 import logger from '../services/logger.ts'
 import GeneratePassword from '../utils/GeneratePassword.ts'
 import SharesRequests from './ShareRequests.js'
+import { fetchNode } from '~/apps/files/src/services/WebdavClient.ts'
 
 export default {
 	mixins: [SharesRequests],
diff --git a/apps/files_sharing/src/init-public.ts b/apps/files_sharing/src/public/init.ts
similarity index 84%
rename from apps/files_sharing/src/init-public.ts
rename to apps/files_sharing/src/public/init.ts
index b59389cb5c22e..55a28b5df82dd 100644
--- a/apps/files_sharing/src/init-public.ts
+++ b/apps/files_sharing/src/public/init.ts
@@ -4,17 +4,17 @@
  */
 
 import type { Folder } from '@nextcloud/files'
-import type { ShareAttribute } from './sharing.d.ts'
+import type { ShareAttribute } from '../sharing.d.ts'
 
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { getNavigation } from '@nextcloud/files'
 import { loadState } from '@nextcloud/initial-state'
-import RouterService from '../../files/src/services/RouterService.ts'
-import registerFileDropView from './files_views/publicFileDrop.ts'
-import registerPublicFileShareView from './files_views/publicFileShare.ts'
-import registerPublicShareView from './files_views/publicShare.ts'
-import router from './router/index.ts'
-import logger from './services/logger.ts'
+import logger from '../services/logger.ts'
+import router from './router.ts'
+import registerFileDropView from './views/publicFileDrop.ts'
+import registerPublicFileShareView from './views/publicFileShare.ts'
+import registerPublicShareView from './views/publicShare.ts'
+import RouterService from '~/apps/files/src/services/RouterService.ts'
 
 registerFileDropView()
 registerPublicShareView()
diff --git a/apps/files_sharing/src/public/router.ts b/apps/files_sharing/src/public/router.ts
new file mode 100644
index 0000000000000..bab0727a9f3c7
--- /dev/null
+++ b/apps/files_sharing/src/public/router.ts
@@ -0,0 +1,58 @@
+/**
+ * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { loadState } from '@nextcloud/initial-state'
+import { generateUrl } from '@nextcloud/router'
+import { createRouter, createWebHistory, isNavigationFailure, NavigationFailureType, stringifyQuery } from 'vue-router'
+import logger from '../services/logger.ts'
+
+const view = loadState<string>('files_sharing', 'view')
+const sharingToken = loadState<string>('files_sharing', 'sharingToken')
+
+const FilesListComponent = () => import('~/apps/files/src/views/FilesList.vue')
+
+/**
+ * Stringify the query the way Nextcloud URLs have always looked: spaces as
+ * "%20" rather than "+". A literal "+" is already encoded as "%2B" by then, so
+ * this cannot corrupt a file name.
+ *
+ * @param query - The query to stringify
+ */
+function stringifyNextcloudQuery(query: Parameters<typeof stringifyQuery>[0]): string {
+	return stringifyQuery(query).replace(/\+/g, '%20')
+}
+
+const router = createRouter({
+	// if index.php is in the url AND we got this far, then it's working:
+	// let's keep using index.php in the url
+	history: createWebHistory(generateUrl('/s')),
+	linkActiveClass: 'active',
+	stringifyQuery: stringifyNextcloudQuery,
+
+	routes: [
+		{
+			path: '/',
+			// Pretending we're using the default view
+			redirect: { name: 'filelist', params: { view, token: sharingToken } },
+		},
+		{
+			path: '/:token',
+			name: 'filelist',
+			component: FilesListComponent,
+			props: { isPublic: true },
+		},
+	],
+})
+
+// Handle aborted navigation (NavigationGuards) gracefully
+router.onError((error) => {
+	if (isNavigationFailure(error, NavigationFailureType.aborted)) {
+		logger.debug('Navigation was aborted', { error })
+	} else {
+		throw error
+	}
+})
+
+export default router
diff --git a/apps/files_sharing/src/views/FilesViewFileDropEmptyContent.vue b/apps/files_sharing/src/public/views/FilesViewFileDropEmptyContent.vue
similarity index 81%
rename from apps/files_sharing/src/views/FilesViewFileDropEmptyContent.vue
rename to apps/files_sharing/src/public/views/FilesViewFileDropEmptyContent.vue
index 5a4ebc23eefff..db7df35db0ffa 100644
--- a/apps/files_sharing/src/views/FilesViewFileDropEmptyContent.vue
+++ b/apps/files_sharing/src/public/views/FilesViewFileDropEmptyContent.vue
@@ -38,17 +38,17 @@
 					{{ t('files_sharing', 'View terms of service') }}
 				</NcButton>
 				<NcDialog
-					close-on-click-outside
-					content-classes="terms-of-service-dialog"
-					:open.sync="showDialog"
+					v-model:open="showDialog"
+					closeOnClickOutside
+					contentClasses="terms-of-service-dialog"
 					:name="t('files_sharing', 'Terms of service')"
 					:message="disclaimer" />
 			</template>
-			<UploadPicker
-				allow-folders
-				:content="() => []"
-				no-menu
+			<NcUploadPicker
+				:content="getContent"
 				:destination="uploadDestination"
+				directory
+				:label="t('files_sharing', 'Upload')"
 				multiple />
 		</template>
 	</NcEmptyContent>
@@ -61,15 +61,17 @@ const uploads = new Set<string>()
 
 <script setup lang="ts">
 import svgCloudUpload from '@mdi/svg/svg/cloud-upload-outline.svg?raw'
+import { getUploader, UploadStatus } from '@nextcloud/files/upload'
 import { loadState } from '@nextcloud/initial-state'
 import { translate as t } from '@nextcloud/l10n'
-import { getUploader, UploadPicker, UploadStatus } from '@nextcloud/upload'
+import { basename } from '@nextcloud/paths'
 import { ref } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
+import NcUploadPicker from '@nextcloud/vue/components/NcUploadPicker'
 
 defineProps<{
 	foldername: string
@@ -85,14 +87,20 @@ const showDialog = ref(false)
 const uploadDestination = getUploader().destination
 
 getUploader()
-	.addNotifier((upload) => {
-		if (upload.status === UploadStatus.FINISHED && upload.file.name) {
-			// if a upload is finished and is not a meta upload (name is set)
-			// then we add the upload to the list of finished uploads to be shown to the user
-			uploads.add(upload.file.name)
+	.addEventListener('uploadFinished', ({ detail: upload }) => {
+		// only leaf uploads are files, a folder upload is reported with its children
+		if (upload.status === UploadStatus.FINISHED && upload.children.length === 0) {
+			uploads.add(decodeURIComponent(basename(upload.source)))
 		}
 	})
 
+/**
+ * The destination folder has no listing, so nothing can conflict with an upload
+ */
+async function getContent() {
+	return []
+}
+
 /**
  * Get the previous uploads as sorted list
  */
diff --git a/apps/files_sharing/src/files_views/publicFileDrop.ts b/apps/files_sharing/src/public/views/publicFileDrop.ts
similarity index 65%
rename from apps/files_sharing/src/files_views/publicFileDrop.ts
rename to apps/files_sharing/src/public/views/publicFileDrop.ts
index 9b0d6303d4f6f..e3f60a1a57476 100644
--- a/apps/files_sharing/src/files_views/publicFileDrop.ts
+++ b/apps/files_sharing/src/public/views/publicFileDrop.ts
@@ -2,20 +2,19 @@
  * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-import type { VueConstructor } from 'vue'
+import type { App } from 'vue'
 
 import svgCloudUpload from '@mdi/svg/svg/cloud-upload.svg?raw'
 import { Folder, getNavigation, Permission, View } from '@nextcloud/files'
 import { defaultRemoteURL, defaultRootPath } from '@nextcloud/files/dav'
 import { loadState } from '@nextcloud/initial-state'
 import { translate as t } from '@nextcloud/l10n'
-import Vue from 'vue'
+import { createApp } from 'vue'
 
 export default () => {
 	const foldername = loadState<string>('files_sharing', 'filename')
 
-	let FilesViewFileDropEmptyContent: VueConstructor
-	let fileDropEmptyContentInstance: Vue
+	let fileDropEmptyContentApp: App | undefined
 
 	const view = new View({
 		id: 'public-file-drop',
@@ -25,19 +24,11 @@ export default () => {
 		order: 1,
 
 		emptyView: async (div: HTMLDivElement) => {
-			if (FilesViewFileDropEmptyContent === undefined) {
-				const { default: component } = await import('../views/FilesViewFileDropEmptyContent.vue')
-				FilesViewFileDropEmptyContent = Vue.extend(component)
-			}
-			if (fileDropEmptyContentInstance) {
-				fileDropEmptyContentInstance.$destroy()
-			}
-			fileDropEmptyContentInstance = new FilesViewFileDropEmptyContent({
-				propsData: {
-					foldername,
-				},
-			})
-			fileDropEmptyContentInstance.$mount(div)
+			const { default: FilesViewFileDropEmptyContent } = await import('./FilesViewFileDropEmptyContent.vue')
+
+			fileDropEmptyContentApp?.unmount()
+			fileDropEmptyContentApp = createApp(FilesViewFileDropEmptyContent, { foldername })
+			fileDropEmptyContentApp.mount(div)
 		},
 
 		getContents: async () => {
diff --git a/apps/files_sharing/src/files_views/publicFileShare.ts b/apps/files_sharing/src/public/views/publicFileShare.ts
similarity index 94%
rename from apps/files_sharing/src/files_views/publicFileShare.ts
rename to apps/files_sharing/src/public/views/publicFileShare.ts
index bf4fd0df573ab..e13e9f261d330 100644
--- a/apps/files_sharing/src/files_views/publicFileShare.ts
+++ b/apps/files_sharing/src/public/views/publicFileShare.ts
@@ -9,8 +9,8 @@ import LinkSvg from '@mdi/svg/svg/link.svg?raw'
 import { Folder, getNavigation, Permission, View } from '@nextcloud/files'
 import { getDefaultPropfind, getRemoteURL, getRootPath, resultToNode } from '@nextcloud/files/dav'
 import { translate as t } from '@nextcloud/l10n'
-import { client } from '../../../files/src/services/WebdavClient.ts'
-import logger from '../services/logger.ts'
+import logger from '../../services/logger.ts'
+import { client } from '~/apps/files/src/services/WebdavClient.ts'
 
 export default () => {
 	const view = new View({
diff --git a/apps/files_sharing/src/files_views/publicShare.ts b/apps/files_sharing/src/public/views/publicShare.ts
similarity index 84%
rename from apps/files_sharing/src/files_views/publicShare.ts
rename to apps/files_sharing/src/public/views/publicShare.ts
index 1666eeece97eb..435352c89c93e 100644
--- a/apps/files_sharing/src/files_views/publicShare.ts
+++ b/apps/files_sharing/src/public/views/publicShare.ts
@@ -1,11 +1,12 @@
-import LinkSvg from '@mdi/svg/svg/link.svg?raw'
-import { getNavigation, View } from '@nextcloud/files'
-/**
+/*
  * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-import { translate as t } from '@nextcloud/l10n'
-import { getContents } from '../../../files/src/services/Files.ts'
+
+import LinkSvg from '@mdi/svg/svg/link.svg?raw'
+import { getNavigation, View } from '@nextcloud/files'
+import { t } from '@nextcloud/l10n'
+import { getContents } from '~/apps/files/src/services/Files.ts'
 
 export default () => {
 	const view = new View({
diff --git a/apps/files_sharing/src/router/index.ts b/apps/files_sharing/src/router/index.ts
deleted file mode 100644
index 4651cb1d054dc..0000000000000
--- a/apps/files_sharing/src/router/index.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-import type { RawLocation, Route } from 'vue-router'
-
-import { loadState } from '@nextcloud/initial-state'
-import { generateUrl } from '@nextcloud/router'
-import queryString from 'query-string'
-import Vue from 'vue'
-import Router, { isNavigationFailure, NavigationFailureType } from 'vue-router'
-import logger from '../services/logger.ts'
-
-const view = loadState<string>('files_sharing', 'view')
-const sharingToken = loadState<string>('files_sharing', 'sharingToken')
-
-Vue.use(Router)
-
-// Prevent router from throwing errors when we're already on the page we're trying to go to
-const originalPush = Router.prototype.push
-Router.prototype.push = (function(this: Router, ...args: Parameters<typeof originalPush>) {
-	if (args.length > 1) {
-		return originalPush.call(this, ...args)
-	}
-	return originalPush.call<Router, [RawLocation], Promise<Route>>(this, args[0]).catch(ignoreDuplicateNavigation)
-}) as typeof originalPush
-
-const originalReplace = Router.prototype.replace
-Router.prototype.replace = (function(this: Router, ...args: Parameters<typeof originalReplace>) {
-	if (args.length > 1) {
-		return originalReplace.call(this, ...args)
-	}
-	return originalReplace.call<Router, [RawLocation], Promise<Route>>(this, args[0]).catch(ignoreDuplicateNavigation)
-}) as typeof originalReplace
-
-/**
- * Ignore duplicated- and redirected-navigation errors but forward real exceptions
- *
- * @param error The thrown error
- */
-function ignoreDuplicateNavigation(error: unknown): void {
-	if (isNavigationFailure(error, NavigationFailureType.duplicated)
-		|| isNavigationFailure(error, NavigationFailureType.redirected)) {
-		logger.debug('Ignoring duplicated/redirected navigation from vue-router', { error })
-	} else {
-		throw error
-	}
-}
-
-const router = new Router({
-	mode: 'history',
-
-	// if index.php is in the url AND we got this far, then it's working:
-	// let's keep using index.php in the url
-	base: generateUrl('/s'),
-	linkActiveClass: 'active',
-
-	routes: [
-		{
-			path: '/',
-			// Pretending we're using the default view
-			redirect: { name: 'filelist', params: { view, token: sharingToken } },
-		},
-		{
-			path: '/:token',
-			name: 'filelist',
-			props: true,
-		},
-	],
-
-	// Custom stringifyQuery to prevent encoding of slashes in the url
-	stringifyQuery(query) {
-		const result = queryString.stringify(query).replace(/%2F/gmi, '/')
-		return result ? ('?' + result) : ''
-	},
-})
-
-export default router
diff --git a/build/frontend-legacy/eslint.config.mjs b/build/frontend-legacy/eslint.config.mjs
index 6a2025cd0db01..6e696e29f04a7 100644
--- a/build/frontend-legacy/eslint.config.mjs
+++ b/build/frontend-legacy/eslint.config.mjs
@@ -59,6 +59,8 @@ export default defineConfig([
 			'**/js/',
 			'**/l10n/', // all translations (config only ignored in root)
 			'**/vendor/', // different vendors
+			// the public share entry point is Vue 3, it is linted by the Vue 3 frontend
+			'**/apps/files_sharing/src/public/',
 		],
 	},
 ])
diff --git a/build/frontend-legacy/vitest.config.mts b/build/frontend-legacy/vitest.config.mts
index 3189ba12a4483..35f77fb91c725 100644
--- a/build/frontend-legacy/vitest.config.mts
+++ b/build/frontend-legacy/vitest.config.mts
@@ -43,6 +43,7 @@ export default defineConfig({
 	resolve: {
 		preserveSymlinks: true,
 		alias: {
+			'~': resolve(import.meta.dirname, '../..'),
 			vue$: resolve(__dirname, './node_modules/vue/dist/vue.js'),
 		},
 	},
diff --git a/build/frontend-legacy/webpack.modules.cjs b/build/frontend-legacy/webpack.modules.cjs
index f209d4196dfee..40e979acfeda1 100644
--- a/build/frontend-legacy/webpack.modules.cjs
+++ b/build/frontend-legacy/webpack.modules.cjs
@@ -24,21 +24,11 @@ module.exports = {
 		'twofactor-request-token': path.join(__dirname, 'core/src', 'twofactor-request-token.ts'),
 		update: path.join(__dirname, 'core/src', 'update.ts'),
 	},
-	files: {
-		sidebar: path.join(__dirname, 'apps/files/src', 'sidebar.ts'),
-		main: path.join(__dirname, 'apps/files/src', 'main.ts'),
-		init: path.join(__dirname, 'apps/files/src', 'init.ts'),
-		search: path.join(__dirname, 'apps/files/src/plugins/search', 'folderSearch.ts'),
-		'settings-admin': path.join(__dirname, 'apps/files/src', 'main-settings-admin.ts'),
-		'settings-personal': path.join(__dirname, 'apps/files/src', 'main-settings-personal.ts'),
-		'reference-files': path.join(__dirname, 'apps/files/src', 'reference-files.ts'),
-	},
 	files_sharing: {
 		additionalScripts: path.join(__dirname, 'apps/files_sharing/src', 'additionalScripts.js'),
 		collaboration: path.join(__dirname, 'apps/files_sharing/src', 'collaborationresourceshandler.js'),
 		files_sharing_tab: path.join(__dirname, 'apps/files_sharing/src', 'files-sidebar.ts'),
 		init: path.join(__dirname, 'apps/files_sharing/src', 'init.ts'),
-		'init-public': path.join(__dirname, 'apps/files_sharing/src', 'init-public.ts'),
 		main: path.join(__dirname, 'apps/files_sharing/src', 'main.ts'),
 		'personal-settings': path.join(__dirname, 'apps/files_sharing/src', 'personal-settings.js'),
 		'public-nickname-handler': path.join(__dirname, 'apps/files_sharing/src', 'public-nickname-handler.ts'),
diff --git a/build/frontend/__tests__/mock-window.js b/build/frontend/__tests__/mock-window.js
index 24a5e251934b1..01b7b2b280e38 100644
--- a/build/frontend/__tests__/mock-window.js
+++ b/build/frontend/__tests__/mock-window.js
@@ -14,6 +14,17 @@ window.OCP = { ...window.OCP }
 
 window._oc_webroot = ''
 
+// jsdom does not implement `ResizeObserver`, but it is used at module scope by
+// composables like `useFileListWidth`, so importing them would throw.
+// Specs that assert on resizing replace this with a full mock (`mockResizeObserver`).
+if (!('ResizeObserver' in window)) {
+	window.ResizeObserver = class ResizeObserver {
+		observe() {}
+		unobserve() {}
+		disconnect() {}
+	}
+}
+
 // jsdom does not implement `innerText` at all, while the specification defines it
 // to fall back to `textContent` for elements that are not being rendered.
 // @see https://github.com/jsdom/jsdom/issues/1245
diff --git a/build/frontend-legacy/apps/files b/build/frontend/apps/files
similarity index 100%
rename from build/frontend-legacy/apps/files
rename to build/frontend/apps/files
diff --git a/build/frontend/package.json b/build/frontend/package.json
index e954a063f4c64..00a19f5607d93 100644
--- a/build/frontend/package.json
+++ b/build/frontend/package.json
@@ -9,8 +9,8 @@
   "scripts": {
     "build": "vite build",
     "dev": "NODE_ENV=development vite build --mode development",
-    "lint": "eslint --suppressions-location ../eslint-baseline.json --no-error-on-unmatched-pattern ./apps/*/ ./core/",
-    "lint:fix": "eslint --suppressions-location ../eslint-baseline.json --fix --no-error-on-unmatched-pattern ./apps/*/ ./core/",
+    "lint": "eslint --suppressions-location ../eslint-baseline.json --no-error-on-unmatched-pattern ./apps/*/ ./core/ ../../apps/files_sharing/src/public/",
+    "lint:fix": "eslint --suppressions-location ../eslint-baseline.json --fix --no-error-on-unmatched-pattern ./apps/*/ ./core/ ../../apps/files_sharing/src/public/",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage --reporter=default",
     "test:update-snapshots": "vitest run --update",
diff --git a/build/frontend/vite.config.ts b/build/frontend/vite.config.ts
index c292c3f371202..2251f7cbac7de 100644
--- a/build/frontend/vite.config.ts
+++ b/build/frontend/vite.config.ts
@@ -36,6 +36,15 @@ const modules = {
 		'settings-admin': resolve(import.meta.dirname, 'apps/federatedfilesharing/src', 'settings-admin.ts'),
 		'settings-personal': resolve(import.meta.dirname, 'apps/federatedfilesharing/src', 'settings-personal.ts'),
 	},
+	files: {
+		sidebar: resolve(import.meta.dirname, 'apps/files/src', 'sidebar.ts'),
+		main: resolve(import.meta.dirname, 'apps/files/src', 'main.ts'),
+		init: resolve(import.meta.dirname, 'apps/files/src', 'init.ts'),
+		search: resolve(import.meta.dirname, 'apps/files/src/plugins/search', 'folderSearch.ts'),
+		'settings-admicn': resolve(import.meta.dirname, 'apps/files/src', 'main-settings-admin.ts'),
+		'settings-personal': resolve(import.meta.dirname, 'apps/files/src', 'main-settings-personal.ts'),
+		'reference-files': resolve(import.meta.dirname, 'apps/files/src', 'reference-files.ts'),
+	},
 	files_external: {
 		auth_rsa: resolve(import.meta.dirname, 'apps/files_external/src', 'auth-rsa.ts'),
 
@@ -46,6 +55,12 @@ const modules = {
 	files_reminders: {
 		init: resolve(import.meta.dirname, 'apps/files_reminders/src', 'files-init.ts'),
 	},
+	files_sharing: {
+		// Only the public share entry point is migrated to Vue 3 so far, the rest
+		// of the app is still built by the Vue 2 frontend. It is referenced by path
+		// rather than through `apps/` so it resolves the Vue 3 dependencies.
+		'init-public': resolve(import.meta.dirname, '../..', 'apps/files_sharing/src/public', 'init.ts'),
+	},
 	files_trashbin: {
 		init: resolve(import.meta.dirname, 'apps/files_trashbin/src', 'files-init.ts'),
 	},
@@ -113,6 +128,10 @@ export default createAppConfig(Object.fromEntries(viteModuleEntries), {
 		root: resolve(import.meta.dirname, '../..'),
 		resolve: {
 			preserveSymlinks: true,
+			alias: [
+				// allow to import from the repository root (cross reference other apps)
+				{ find: /^~\//, replacement: `${resolve(import.meta.dirname, '../..')}/` },
+			],
 		},
 		build: {
 			outDir: 'dist',
diff --git a/lib/private/Log.php b/lib/private/Log.php
index 64b052e361c72..abfe8eda0d88e 100644
--- a/lib/private/Log.php
+++ b/lib/private/Log.php
@@ -341,6 +341,8 @@ public function logException(Throwable $exception, array $context = []): void {
 			return;
 		}
 
+		unset($context['exception']);
+
 		$context = array_map($this->normalizer->format(...), $context);
 		$data = $context;
 		unset($data['app'], $data['level']);
diff --git a/package-lock.json b/package-lock.json
index cc3930d83125c..aba405083980e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,7 @@
         "@nextcloud/capabilities": "^1.2.1",
         "@nextcloud/dialogs": "^7.5.0",
         "@nextcloud/event-bus": "^3.3.3",
-        "@nextcloud/files": "^4.0.0",
+        "@nextcloud/files": "^4.1.0-beta.2",
         "@nextcloud/initial-state": "^3.0.0",
         "@nextcloud/l10n": "^3.4.1",
         "@nextcloud/logger": "^3.0.3",
@@ -26,7 +26,7 @@
         "@nextcloud/paths": "^3.1.0",
         "@nextcloud/router": "^3.1.0",
         "@nextcloud/sharing": "^1.0.0-beta.4",
-        "@nextcloud/vue": "^9.10.0",
+        "@nextcloud/vue": "^9.12.0",
         "@vueuse/core": "^14.1.0",
         "@vueuse/integrations": "^14.1.0",
         "color": "^5.0.3",
@@ -48,6 +48,7 @@
         "@nextcloud/stylelint-config": "^3.2.2",
         "@nextcloud/typings": "^1.10.0",
         "@nextcloud/vite-config": "^2.5.2",
+        "@pinia/testing": "^2.0.1",
         "@playwright/test": "^1.63.0",
         "@testing-library/jest-dom": "^7.0.1",
         "@testing-library/vue": "^8.1.0",
@@ -63,6 +64,7 @@
         "is-svg": "^6.1.0",
         "jsdom": "^30.0.1",
         "jsdom-testing-mocks": "^1.16.0",
+        "mime": "^4.1.0",
         "msw": "^2.15.0",
         "sass": "^1.104.0",
         "stylelint": "^17.15.0",
@@ -1964,53 +1966,33 @@
       }
     },
     "node_modules/@nextcloud/files": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/files/-/files-4.0.0.tgz",
-      "integrity": "sha512-TmecnZIS+PGWGtRh7RpGEboCT4K6iTbHULUcfR6hs3eEzjDVsCc1Ldf8popGY/70lbpdlfYle8xbXnPIo3qaXA==",
+      "version": "4.1.0-beta.2",
+      "resolved": "https://registry.npmjs.org/@nextcloud/files/-/files-4.1.0-beta.2.tgz",
+      "integrity": "sha512-tJlhPT8oAmdgyYJtrh4ufrRXfFS+LRZzZdTio64S8izTBXML0Gu/7PVUcOUglY0x/fFgUS5euc0GwNsZZecjbw==",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
-        "@nextcloud/auth": "^2.5.3",
+        "@nextcloud/auth": "^2.6.0",
+        "@nextcloud/axios": "^2.6.0",
         "@nextcloud/capabilities": "^1.2.1",
         "@nextcloud/l10n": "^3.4.1",
         "@nextcloud/logger": "^3.0.3",
-        "@nextcloud/paths": "^3.0.0",
+        "@nextcloud/paths": "^3.1.0",
         "@nextcloud/router": "^3.1.0",
-        "@nextcloud/sharing": "^0.3.0",
+        "@nextcloud/sharing": "^0.4.0",
+        "axios-retry": "^4.5.0",
         "is-svg": "^6.1.0",
+        "p-queue": "^9.3.3",
         "typescript-event-target": "^1.1.2",
-        "webdav": "^5.9.0"
-      },
-      "engines": {
-        "node": "^24.0.0"
-      }
-    },
-    "node_modules/@nextcloud/files/node_modules/@nextcloud/files": {
-      "version": "3.12.2",
-      "resolved": "https://registry.npmjs.org/@nextcloud/files/-/files-3.12.2.tgz",
-      "integrity": "sha512-vBo8tf3Xh6efiF8CrEo3pKj9AtvAF6RdDGO1XKL65IxV8+UUd9Uxl2lUExHlzoDRRczCqfGfaWfRRaFhYqce5Q==",
-      "license": "AGPL-3.0-or-later",
-      "optional": true,
-      "dependencies": {
-        "@nextcloud/auth": "^2.5.3",
-        "@nextcloud/capabilities": "^1.2.1",
-        "@nextcloud/l10n": "^3.4.1",
-        "@nextcloud/logger": "^3.0.3",
-        "@nextcloud/paths": "^3.0.0",
-        "@nextcloud/router": "^3.1.0",
-        "@nextcloud/sharing": "^0.3.0",
-        "cancelable-promise": "^4.3.1",
-        "is-svg": "^6.1.0",
-        "typescript-event-target": "^1.1.1",
-        "webdav": "^5.8.0"
+        "webdav": "^5.10.0"
       },
       "engines": {
-        "node": "^20.0.0 || ^22.0.0 || ^24.0.0"
+        "node": "^24.0.0 || >=26.0.0"
       }
     },
     "node_modules/@nextcloud/files/node_modules/@nextcloud/sharing": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/sharing/-/sharing-0.3.0.tgz",
-      "integrity": "sha512-kV7qeUZvd1fTKeFyH+W5Qq5rNOqG9rLATZM3U9MBxWXHJs3OxMqYQb8UQ3NYONzsX3zDGJmdQECIGHm1ei2sCA==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/sharing/-/sharing-0.4.0.tgz",
+      "integrity": "sha512-1hUNyc7uJdBpnimOnEshJjEtAPAjzDYVl6qmWqF5ZxoN9wOvbExw0QjX3xFIbHbX2dmvbRNLBj0RzLzipmZyeg==",
       "license": "GPL-3.0-or-later",
       "dependencies": {
         "@nextcloud/initial-state": "^3.0.0",
@@ -2020,7 +2002,7 @@
         "node": "^20.0.0 || ^22.0.0 || ^24.0.0"
       },
       "optionalDependencies": {
-        "@nextcloud/files": "^3.12.0"
+        "@nextcloud/files": "^3.12.2 || ^4.0.0"
       }
     },
     "node_modules/@nextcloud/initial-state": {
@@ -2197,9 +2179,9 @@
       }
     },
     "node_modules/@nextcloud/vue": {
-      "version": "9.11.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-9.11.0.tgz",
-      "integrity": "sha512-LRsyU9Mxs0b2xWqbxygps8O7/i1z4QhNQD9/QDni+VqFY3V0N95mAgmKJm6vfoFuxTAMXERp9bjqFn3UV542gw==",
+      "version": "9.12.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-9.12.0.tgz",
+      "integrity": "sha512-NuBj7wVKjUaEc9mNHSbnLl6NvLoVqUlHXV/pzn1NED1BtLb6iGwKh1KQX/BnOzGFOCkbFwTGMVgynH6i0ndjDQ==",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@ckpack/vue-color": "^1.6.0",
@@ -2221,7 +2203,7 @@
         "blurhash": "^2.0.5",
         "clone": "^2.1.2",
         "debounce": "^3.0.0",
-        "dompurify": "^3.4.14",
+        "dompurify": "^3.4.15",
         "emoji-mart-vue-fast": "^15.0.5",
         "escape-html": "^1.0.3",
         "floating-vue": "^5.2.2",
@@ -2245,10 +2227,22 @@
         "unist-builder": "^4.0.0",
         "unist-util-visit-parents": "^6.0.2",
         "vue": "^3.5.18",
-        "vue-router": "^5.2.0"
+        "vue-router": "^5.3.1"
       },
       "engines": {
         "node": "^20.11.0 || ^22 || ^24"
+      },
+      "peerDependencies": {
+        "@nextcloud/dialogs": "^7.4.0",
+        "@nextcloud/files": "^4.1.0-beta.2"
+      },
+      "peerDependenciesMeta": {
+        "@nextcloud/dialogs": {
+          "optional": true
+        },
+        "@nextcloud/files": {
+          "optional": true
+        }
       }
     },
     "node_modules/@nextcloud/vue-select": {
@@ -2704,6 +2698,22 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/@pinia/testing": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@pinia/testing/-/testing-2.0.1.tgz",
+      "integrity": "sha512-pQ4a4SCzdiLrhM4yv/TQG2ufNmktNlLZjjN6X/qMhXvZIiDN3L4L4WrChmcufX2LIarbl/ZPWOty1RB5KZIb2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "nostics": "^1.1.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "pinia": ">=4.0.2"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -3662,12 +3672,6 @@
         "@types/sizzle": "*"
       }
     },
-    "node_modules/@types/jsesc": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@types/jsesc/-/jsesc-2.5.1.tgz",
-      "integrity": "sha512-9VN+6yxLOPLOav+7PwjZbxiID2bVaeq0ED4qSQmdQTdjnXJSaCVKTR58t15oqH1H5t8Ng2ZX1SabJVoN9Q34bw==",
-      "license": "MIT"
-    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -4999,6 +5003,18 @@
         "proxy-from-env": "^2.1.0"
       }
     },
+    "node_modules/axios-retry": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/axios-retry/-/axios-retry-4.5.0.tgz",
+      "integrity": "sha512-aR99oXhpEDGo0UuAlYcn2iGRds30k366Zfa05XWScR9QaQD4JYiP3/1Qt1u7YlefUOK+cn0CcwoL1oefavQUlQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "is-retry-allowed": "^2.2.0"
+      },
+      "peerDependencies": {
+        "axios": "0.x || 1.x"
+      }
+    },
     "node_modules/b4a": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.8.1.tgz",
@@ -5573,13 +5589,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/cancelable-promise": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/cancelable-promise/-/cancelable-promise-4.3.1.tgz",
-      "integrity": "sha512-A/8PwLk/T7IJDfUdQ68NR24QHa8rIlnN/stiJEBo6dmVUkD4K14LswG0w3VwdeK/o7qOwRUR1k2MhK5Rpy2m7A==",
-      "license": "MIT",
-      "optional": true
-    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001810",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001810.tgz",
@@ -6756,9 +6765,9 @@
       }
     },
     "node_modules/dompurify": {
-      "version": "3.4.14",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.14.tgz",
-      "integrity": "sha512-dVoH9z+MY+C9IilgGCk3YfFqjLi3fChm2OiKJMzh6axrJ5qwxqWaZamgmHrpv22CN/KdbZJuGEGgfQoL00LTdg==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.15.tgz",
+      "integrity": "sha512-EUBjM+B+lkDE41iE82DDSCfkoPGfXx8IxFxPMjNzm/Uk4xDet77rTN9wqlxlVg71kK7XGuUMv6wUxJUwwv+Xyw==",
       "license": "(MPL-2.0 OR Apache-2.0)",
       "optionalDependencies": {
         "@types/trusted-types": "^2.0.7"
@@ -9069,6 +9078,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-retry-allowed": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-2.2.0.tgz",
+      "integrity": "sha512-XVm7LOeLpTW4jV19QSH38vkswxoLud8sQ57YwJVTPWdiaI9I8keEhGFpBlslyVsgdQy4Opg8QOLb8YRgsyZiQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-set": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
@@ -9414,18 +9435,6 @@
         "node": "^22.14.0 || >=24.0.0"
       }
     },
-    "node_modules/jsesc": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
-      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
-      "license": "MIT",
-      "bin": {
-        "jsesc": "bin/jsesc"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -9447,18 +9456,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/json5": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "license": "MIT",
-      "bin": {
-        "json5": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/jsonfile": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
@@ -10471,6 +10468,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/mime": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-4.1.0.tgz",
+      "integrity": "sha512-X5ju04+cAzsojXKes0B/S4tcYtFAJ6tTMuSPBEn9CPGlrWr8Fiw7qYeLT0XyH80HSoAoqWCaz+MWKh22P7G1cw==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/broofa"
+      ],
+      "license": "MIT",
+      "bin": {
+        "mime": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -15104,17 +15117,16 @@
       }
     },
     "node_modules/vue-router": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.2.0.tgz",
-      "integrity": "sha512-QAC5i0LEb1GLG0LXDQmHu8L7FX12j0KwU/JTKmLQUJMrn04gQdKP6Du+p0QwpHb3iy71vBlqnHQ8WAfOSAWhqw==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.3.1.tgz",
+      "integrity": "sha512-GDBZzgmILxA/kFnkFbJjQZdZ2QQbngnIMMuoUcjhZIfH1RGMaPjPwX5ASnV38qamuA9uhO0RDjSBHTDNG2uXyQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/generator": "^8.0.0",
         "@vue-macros/common": "^3.1.3",
         "@vue/devtools-api": "^8.1.5",
         "ast-walker-scope": "^0.9.0",
         "chokidar": "^5.0.0",
-        "json5": "^2.2.3",
+        "confbox": "^0.2.4",
         "local-pkg": "^1.2.1",
         "magic-string": "^0.30.21",
         "mlly": "^1.8.2",
@@ -15125,8 +15137,7 @@
         "scule": "^1.3.0",
         "tinyglobby": "^0.2.17",
         "unplugin": "^3.3.0",
-        "unplugin-utils": "^0.3.2",
-        "yaml": "^2.9.0"
+        "unplugin-utils": "^0.3.2"
       },
       "funding": {
         "url": "https://github.com/sponsors/posva"
@@ -15153,69 +15164,6 @@
         }
       }
     },
-    "node_modules/vue-router/node_modules/@babel/generator": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-8.0.0.tgz",
-      "integrity": "sha512-NT9NrVwJsbSV6Y2FSstWa71EETOnzrjkL5/wX3D2mYHtKM+qvqB1DvR4D0Setb/gDBsHzRICifwEWMO8CnTF6g==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^8.0.0",
-        "@babel/types": "^8.0.0",
-        "@jridgewell/gen-mapping": "^0.3.12",
-        "@jridgewell/trace-mapping": "^0.3.28",
-        "@types/jsesc": "^2.5.0",
-        "jsesc": "^3.0.2"
-      },
-      "engines": {
-        "node": "^22.18.0 || >=24.11.0"
-      }
-    },
-    "node_modules/vue-router/node_modules/@babel/helper-string-parser": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-8.0.0.tgz",
-      "integrity": "sha512-6mJgmFFFIIO82vvoLt9XtRC7/TkzXfts1t/SpRX4IHSzMgqoPYCWesVu1udUPUWioAE/2fcG6WuI8zrkE1gwrg==",
-      "license": "MIT",
-      "engines": {
-        "node": "^22.18.0 || >=24.11.0"
-      }
-    },
-    "node_modules/vue-router/node_modules/@babel/helper-validator-identifier": {
-      "version": "8.0.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-8.0.4.tgz",
-      "integrity": "sha512-4wFaiLd0bVo4cIoTXI3zKI038NIWE/cr3jvBjejOVYVxV/m8Ltav1USiGzG1fmS5J2RhgEOgXNNK46cRPnRsrg==",
-      "license": "MIT",
-      "engines": {
-        "node": "^22.18.0 || >=24.11.0"
-      }
-    },
-    "node_modules/vue-router/node_modules/@babel/parser": {
-      "version": "8.0.4",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-8.0.4.tgz",
-      "integrity": "sha512-srpptsAkEbbNIC/q8nT7o+m6CQe8CJUTV/t7MYc9NnWlgYVtHOb7JH6SorxMhN0kuRJjVqXbKClG6xSbPtzz+g==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^8.0.4"
-      },
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": "^22.18.0 || >=24.11.0"
-      }
-    },
-    "node_modules/vue-router/node_modules/@babel/types": {
-      "version": "8.0.4",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-8.0.4.tgz",
-      "integrity": "sha512-eY+Yn3dCqTGmyiq2QRU66lA5FL8lqqqvecHt0fF3uHONIa7ToYsaCiWV8lOKqAs0Rb2SjixiKFROngnulPtt2g==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-string-parser": "^8.0.0",
-        "@babel/helper-validator-identifier": "^8.0.4"
-      },
-      "engines": {
-        "node": "^22.18.0 || >=24.11.0"
-      }
-    },
     "node_modules/vuedraggable": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
@@ -15610,21 +15558,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/yaml": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
-      "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
-      "license": "ISC",
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/eemeli"
-      }
-    },
     "node_modules/yargs": {
       "version": "17.7.3",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.3.tgz",
diff --git a/package.json b/package.json
index dfc70cb753067..eff8f3640f686 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,9 @@
   "browserslist": [
     "extends @nextcloud/browserslist-config"
   ],
+  "overrides": {
+    "@nextcloud/files": "$@nextcloud/files"
+  },
   "dependencies": {
     "@mdi/js": "^7.4.47",
     "@mdi/svg": "^7.4.47",
@@ -47,7 +50,7 @@
     "@nextcloud/capabilities": "^1.2.1",
     "@nextcloud/dialogs": "^7.5.0",
     "@nextcloud/event-bus": "^3.3.3",
-    "@nextcloud/files": "^4.0.0",
+    "@nextcloud/files": "^4.1.0-beta.2",
     "@nextcloud/initial-state": "^3.0.0",
     "@nextcloud/l10n": "^3.4.1",
     "@nextcloud/logger": "^3.0.3",
@@ -55,7 +58,7 @@
     "@nextcloud/paths": "^3.1.0",
     "@nextcloud/router": "^3.1.0",
     "@nextcloud/sharing": "^1.0.0-beta.4",
-    "@nextcloud/vue": "^9.10.0",
+    "@nextcloud/vue": "^9.12.0",
     "@vueuse/core": "^14.1.0",
     "@vueuse/integrations": "^14.1.0",
     "color": "^5.0.3",
@@ -77,6 +80,7 @@
     "@nextcloud/stylelint-config": "^3.2.2",
     "@nextcloud/typings": "^1.10.0",
     "@nextcloud/vite-config": "^2.5.2",
+    "@pinia/testing": "^2.0.1",
     "@playwright/test": "^1.63.0",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/vue": "^8.1.0",
@@ -92,6 +96,7 @@
     "is-svg": "^6.1.0",
     "jsdom": "^30.0.1",
     "jsdom-testing-mocks": "^1.16.0",
+    "mime": "^4.1.0",
     "msw": "^2.15.0",
     "sass": "^1.104.0",
     "stylelint": "^17.15.0",
diff --git a/tests/playwright/e2e/files/files-copy-move.spec.ts b/tests/playwright/e2e/files/files-copy-move.spec.ts
index 5bf4636e5abac..09d6a5837c454 100644
--- a/tests/playwright/e2e/files/files-copy-move.spec.ts
+++ b/tests/playwright/e2e/files/files-copy-move.spec.ts
@@ -148,7 +148,8 @@ test.describe('Files: Move or copy files', () => {
 			await copyMoveDialog.copyToFolder('<a href="#">foo')
 
 			await filesListPage.navigateToFolder('<a href="#">foo')
-			await expect(page).toHaveURL(/dir=\/%3Ca%20href%3D%22%23%22%3Efoo/)
+			// "=" needs no escaping inside a query value: only the first one separates key from value
+			await expect(page).toHaveURL(/dir=\/%3Ca%20href=%22%23%22%3Efoo/)
 			await expect(filesListPage.getRowForFile('original.txt')).toBeVisible()
 			await expect(filesListPage.getRowForFile('<a href="#">foo')).toHaveCount(0)
 		})
diff --git a/tests/playwright/e2e/files_sharing/public-share/file-drop.spec.ts b/tests/playwright/e2e/files_sharing/public-share/file-drop.spec.ts
index 045df14aca7fb..2be3ff381fa83 100644
--- a/tests/playwright/e2e/files_sharing/public-share/file-drop.spec.ts
+++ b/tests/playwright/e2e/files_sharing/public-share/file-drop.spec.ts
@@ -40,7 +40,7 @@ test.describe('files_sharing: Public share - file drop', () => {
 		const menu = page.getByRole('menu')
 		await expect(menu.getByRole('menuitem')).toHaveCount(2)
 		await expect(menu.getByRole('menuitem', { name: 'Upload files' })).toBeVisible()
-		await expect(menu.getByRole('menuitem', { name: 'Upload folders' })).toBeVisible()
+		await expect(menu.getByRole('menuitem', { name: 'Upload folder' })).toBeVisible()
 	})
 
 	test('offers the same options on the dedicated upload button', async ({ page, publicShare }) => {
@@ -51,7 +51,7 @@ test.describe('files_sharing: Public share - file drop', () => {
 		const menu = page.getByRole('menu')
 		await expect(menu.getByRole('menuitem')).toHaveCount(2)
 		await expect(menu.getByRole('menuitem', { name: 'Upload files' })).toBeVisible()
-		await expect(menu.getByRole('menuitem', { name: 'Upload folders' })).toBeVisible()
+		await expect(menu.getByRole('menuitem', { name: 'Upload folder' })).toBeVisible()
 	})
 
 	test('can upload files and reports the progress', async ({ page, user, ownerRequest, publicShare }) => {
@@ -63,7 +63,9 @@ test.describe('files_sharing: Public share - file drop', () => {
 		// stall the transfer and never move the bar.
 		const { promise: held, resolve: release } = Promise.withResolvers<void>()
 		await page.route(/\/public\.php\/dav\/files\//, async (route) => {
-			if (route.request().url().includes('first.txt')) {
+			// hold back only the second file, the uploader also probes the
+			// destination collection before it starts uploading
+			if (!route.request().url().includes('second.md')) {
 				await route.continue()
 				return
 			}
@@ -81,7 +83,9 @@ test.describe('files_sharing: Public share - file drop', () => {
 		// While the second file is still in flight the bar reports the first one as
 		// done — a partial value, not a finished upload. The exact percentage is
 		// the uploader's own byte accounting, so only the range is asserted.
-		const progress = page.getByRole('progressbar')
+		// the file drop renders an upload picker of its own, but the files app
+		// re-renders it while uploading, so the list header reports the progress
+		const progress = page.locator('[data-cy-upload-picker]').getByRole('progressbar')
 		await expect(progress).toBeVisible()
 		await expect.poll(async () => Number(await progress.getAttribute('value') ?? 0), {
 			message: 'the progress bar should report partial progress',
diff --git a/tests/playwright/e2e/files_trashbin/files.spec.ts b/tests/playwright/e2e/files_trashbin/files.spec.ts
index 69f536c37cb93..7a21659aa354a 100644
--- a/tests/playwright/e2e/files_trashbin/files.spec.ts
+++ b/tests/playwright/e2e/files_trashbin/files.spec.ts
@@ -61,7 +61,7 @@ test.describe('files_trashbin: file row', () => {
 		await filesListPage.open('trashbin')
 
 		// The owner's own deletions render as "You" regardless of display name
-		await expectTrashbinRow(filesListPage, fileId, 'test-file .txt', 'All files', 'You')
+		await expectTrashbinRow(filesListPage, fileId, 'test-file.txt', 'All files', 'You')
 	})
 
 	test('shows data for a file deleted by a sharee in a group share', async ({ user, aliceRequest, bob, bobRequest, group, filesListPage }) => {
@@ -75,7 +75,7 @@ test.describe('files_trashbin: file row', () => {
 
 		await filesListPage.open('trashbin')
 
-		await expectTrashbinRow(filesListPage, fileId, 'test-file .txt', 'Shared', 'Bob')
+		await expectTrashbinRow(filesListPage, fileId, 'test-file.txt', 'Shared', 'Bob')
 	})
 })
 
@@ -92,7 +92,6 @@ async function expectFileDownload(page: Page, trigger: () => Promise<void>) {
 async function expectTrashbinRow(filesListPage: TrashbinListPage, rowId: number, name: string, location: string, deletedBy: string) {
 	const row = filesListPage.getRowForFileId(rowId)
 	await expect(row).toBeVisible()
-	// Name and extension render as separate spans, so the composed text has a space
 	await expect(filesListPage.fileNameCell(row)).toHaveText(name)
 	await expect(filesListPage.originalLocationCell(row)).toHaveText(location)
 	await expect(filesListPage.deletedByCell(row)).toHaveText(deletedBy)
diff --git a/tests/playwright/support/sections/FilesListPage.ts b/tests/playwright/support/sections/FilesListPage.ts
index 36fa974a5ced6..b23190c464d90 100644
--- a/tests/playwright/support/sections/FilesListPage.ts
+++ b/tests/playwright/support/sections/FilesListPage.ts
@@ -77,12 +77,35 @@ export class FilesListPage {
 	}
 
 	/**
-	 * Navigate to an ancestor of the current folder through the breadcrumb
+	 * Navigate to an ancestor of the current folder through the breadcrumb.
+	 *
+	 * When the path does not fit the available width, `NcBreadcrumbs` moves the
+	 * middle crumbs into an overflow menu, so the crumb is only reachable after
+	 * opening it. Which crumbs are collapsed depends on the viewport and on
+	 * whether the sidebar is open, so both cases have to be handled.
 	 *
 	 * @param name - The label of the crumb to navigate to
 	 */
 	async navigateToBreadcrumb(name: string): Promise<void> {
-		await this.getBreadcrumbs().getByRole('button', { name, exact: true }).click()
+		// An ancestor renders as a link, only the current directory carries the
+		// actions menu and is therefore a button.
+		const crumb = this.getBreadcrumbs().getByRole('link', { name, exact: true })
+			.or(this.getBreadcrumbs().getByRole('button', { name, exact: true }))
+		const menuItem = this.page.getByRole('menuitem', { name, exact: true })
+
+		// `NcBreadcrumbs` re-measures asynchronously (e.g. while the sidebar closes)
+		// and moves the middle crumbs into an overflow menu while they do not fit,
+		// so which of the two is present settles only after a moment.
+		await expect(async () => {
+			if (await crumb.count() > 0) {
+				await crumb.click()
+				return
+			}
+			// the overflow menu is the crumb labelled "Actions"
+			await this.getBreadcrumbs().getByRole('button', { name: 'Actions', exact: true }).click()
+			await menuItem.click({ timeout: 2000 })
+		}).toPass({ timeout: 15000 })
+
 		await this.waitForListLoaded()
 	}
 
@@ -158,14 +181,17 @@ export class FilesListPage {
 		await saved
 	}
 
-	/** The per-row selection checkboxes. */
+	/**
+	 * The per-row selection checkboxes. `NcCheckboxRadioSwitch` forwards the
+	 * attribute to its `<input>`, so the hook sits on the checkbox itself.
+	 */
 	getRowCheckboxes(): Locator {
 		return this.page.locator('[data-cy-files-list-row-checkbox]')
 	}
 
 	/** The per-row selection checkboxes that are currently checked (i.e. selected rows). */
 	getSelectedRowCheckboxes(): Locator {
-		return this.getRowCheckboxes().getByRole('checkbox', { checked: true })
+		return this.getRowCheckboxes().and(this.page.getByRole('checkbox', { checked: true }))
 	}
 
 	private getActionsButtonForFile(filename: string): Locator {
@@ -350,7 +376,6 @@ export class FilesListPage {
 
 	private getSelectAllCheckbox(): Locator {
 		return this.page.locator('[data-cy-files-list-selection-checkbox]')
-			.getByRole('checkbox')
 	}
 
 	async selectAll(): Promise<void> {
diff --git a/tests/playwright/support/sections/PublicSharePage.ts b/tests/playwright/support/sections/PublicSharePage.ts
index 3fae593f7fbd8..967402eb35667 100644
--- a/tests/playwright/support/sections/PublicSharePage.ts
+++ b/tests/playwright/support/sections/PublicSharePage.ts
@@ -138,7 +138,7 @@ export class PublicSharePage {
 	}
 
 	/**
-	 * Pick files for an upload menu entry ("Upload files" / "Upload folders"),
+	 * Pick files for an upload menu entry ("Upload files" / "Upload folder"),
 	 * driving the file chooser the way a user would instead of writing to the
 	 * hidden input.
 	 *