diff --git a/apps/files/src/components/BreadCrumbs.vue b/apps/files/src/components/BreadCrumbs.vue
index 2c678ba82fa9e..191088d847c66 100644
--- a/apps/files/src/components/BreadCrumbs.vue
+++ b/apps/files/src/components/BreadCrumbs.vue
@@ -35,6 +35,7 @@
 
 <script lang="ts">
 import type { Node } from '@nextcloud/files'
+import type { FileSource } from '../types.ts'
 
 import { basename } from 'path'
 import { defineComponent } from 'vue'
@@ -45,6 +46,7 @@ import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js'
 import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 
+import { useCurrentView } from '../composables/useCurrentView'
 import { onDropInternalFiles, dataTransferToFileTree, onDropExternalFiles } from '../services/DropService'
 import { showError } from '@nextcloud/dialogs'
 import { useDragAndDropStore } from '../store/dragging.ts'
@@ -54,7 +56,6 @@ import { useSelectionStore } from '../store/selection.ts'
 import { useUploaderStore } from '../store/uploader.ts'
 import filesListWidthMixin from '../mixins/filesListWidth.ts'
 import logger from '../logger'
-import type { FileSource } from '../types.ts'
 
 export default defineComponent({
 	name: 'BreadCrumbs',
@@ -82,6 +83,7 @@ export default defineComponent({
 		const pathsStore = usePathsStore()
 		const selectionStore = useSelectionStore()
 		const uploaderStore = useUploaderStore()
+		const { currentView } = useCurrentView()
 
 		return {
 			draggingStore,
@@ -89,14 +91,12 @@ export default defineComponent({
 			pathsStore,
 			selectionStore,
 			uploaderStore,
+
+			currentView,
 		}
 	},
 
 	computed: {
-		currentView() {
-			return this.$navigation.active
-		},
-
 		dirs(): string[] {
 			const cumulativePath = (acc: string) => (value: string) => (acc += `${value}/`)
 			// Generate a cumulative path for each path segment: ['/', '/foo', '/foo/bar', ...] etc
@@ -151,7 +151,7 @@ export default defineComponent({
 			return this.filesStore.getNode(source)
 		},
 		getFileSourceFromPath(path: string): FileSource | undefined {
-			return this.pathsStore.getPath(this.currentView?.id, path)
+			return this.pathsStore.getPath(this.currentView!.id, path)
 		},
 		getDirDisplayName(path: string): string {
 			if (path === '/') {
@@ -170,6 +170,10 @@ export default defineComponent({
 		},
 
 		onDragOver(event: DragEvent, path: string) {
+			if (!event.dataTransfer) {
+				return
+			}
+
 			// Cannot drop on the current directory
 			if (path === this.dirs[this.dirs.length - 1]) {
 				event.dataTransfer.dropEffect = 'none'
diff --git a/apps/files/src/components/DragAndDropNotice.vue b/apps/files/src/components/DragAndDropNotice.vue
index 2f013927640be..f118e92b8b84e 100644
--- a/apps/files/src/components/DragAndDropNotice.vue
+++ b/apps/files/src/components/DragAndDropNotice.vue
@@ -26,16 +26,18 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-import { Folder, Permission } from '@nextcloud/files'
+import type { Folder } from '@nextcloud/files'
+import { Permission } from '@nextcloud/files'
 import { showError } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
 import { UploadStatus } from '@nextcloud/upload'
+import { defineComponent, type PropType } from 'vue'
 
 import TrayArrowDownIcon from 'vue-material-design-icons/TrayArrowDown.vue'
 
-import logger from '../logger.js'
+import { useCurrentView } from '../composables/useCurrentView'
 import { dataTransferToFileTree, onDropExternalFiles } from '../services/DropService'
+import logger from '../logger.js'
 
 export default defineComponent({
 	name: 'DragAndDropNotice',
@@ -46,11 +48,19 @@ export default defineComponent({
 
 	props: {
 		currentFolder: {
-			type: Folder,
+			type: Object as PropType<Folder>,
 			required: true,
 		},
 	},
 
+	setup() {
+		const { currentView } = useCurrentView()
+
+		return {
+			currentView,
+		}
+	},
+
 	data() {
 		return {
 			dragover: false,
@@ -58,10 +68,6 @@ export default defineComponent({
 	},
 
 	computed: {
-		currentView() {
-			return this.$navigation.active
-		},
-
 		/**
 		 * Check if the current folder has create permissions
 		 */
diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
index 0ee047392822e..0ab5afc512bb2 100644
--- a/apps/files/src/components/FileEntry.vue
+++ b/apps/files/src/components/FileEntry.vue
@@ -86,9 +86,10 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { Permission, formatFileSize } from '@nextcloud/files'
+import { formatFileSize } from '@nextcloud/files'
 import moment from '@nextcloud/moment'
 
+import { useCurrentView } from '../composables/useCurrentView'
 import { useActionsMenuStore } from '../store/actionsmenu.ts'
 import { useDragAndDropStore } from '../store/dragging.ts'
 import { useFilesStore } from '../store/files.ts'
@@ -140,12 +141,16 @@ export default defineComponent({
 		const filesStore = useFilesStore()
 		const renamingStore = useRenamingStore()
 		const selectionStore = useSelectionStore()
+		const { currentView } = useCurrentView()
+
 		return {
 			actionsMenuStore,
 			draggingStore,
 			filesStore,
 			renamingStore,
 			selectionStore,
+
+			currentView,
 		}
 	},
 
@@ -179,21 +184,22 @@ export default defineComponent({
 		},
 
 		size() {
-			const size = parseInt(this.source.size, 10)
-			if (typeof size !== 'number' || isNaN(size) || size < 0) {
+			const size = this.source.size
+			if (!size || size < 0) {
 				return this.t('files', 'Pending')
 			}
 			return formatFileSize(size, true)
 		},
+
 		sizeOpacity() {
 			const maxOpacitySize = 10 * 1024 * 1024
 
-			const size = parseInt(this.source.size, 10)
+			const size = this.source.size
 			if (!size || isNaN(size) || size < 0) {
 				return {}
 			}
 
-			const ratio = Math.round(Math.min(100, 100 * Math.pow((this.source.size / maxOpacitySize), 2)))
+			const ratio = Math.round(Math.min(100, 100 * Math.pow((size / maxOpacitySize), 2)))
 			return {
 				color: `color-mix(in srgb, var(--color-main-text) ${ratio}%, var(--color-text-maxcontrast))`,
 			}
diff --git a/apps/files/src/components/FileEntry/FileEntryActions.vue b/apps/files/src/components/FileEntry/FileEntryActions.vue
index 21d5cd9e79646..2d20e7255e7e3 100644
--- a/apps/files/src/components/FileEntry/FileEntryActions.vue
+++ b/apps/files/src/components/FileEntry/FileEntryActions.vue
@@ -76,11 +76,13 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from 'vue'
+import type { PropType, ShallowRef } from 'vue'
+import type { FileAction, Node, View } from '@nextcloud/files'
 
-import { DefaultType, FileAction, Node, NodeStatus, View, getFileActions } from '@nextcloud/files'
+import { DefaultType, NodeStatus, getFileActions } from '@nextcloud/files'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
@@ -88,8 +90,8 @@ import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import ArrowLeftIcon from 'vue-material-design-icons/ArrowLeft.vue'
-import Vue, { defineComponent } from 'vue'
 
+import { useCurrentView } from '../../composables/useCurrentView'
 import CustomElementRender from '../CustomElementRender.vue'
 import logger from '../../logger.js'
 
@@ -132,6 +134,14 @@ export default defineComponent({
 		},
 	},
 
+	setup() {
+		const { currentView } = useCurrentView()
+
+		return {
+			currentView: currentView as ShallowRef<View>,
+		}
+	},
+
 	data() {
 		return {
 			openedSubmenu: null as FileAction | null,
@@ -143,9 +153,6 @@ export default defineComponent({
 			// Remove any trailing slash but leave root slash
 			return (this.$route?.query?.dir?.toString() || '/').replace(/^(.+)\/$/, '$1')
 		},
-		currentView(): View {
-			return this.$navigation.active as View
-		},
 		isLoading() {
 			return this.source.status === NodeStatus.LOADING
 		},
@@ -269,7 +276,7 @@ export default defineComponent({
 			try {
 				// Set the loading marker
 				this.$emit('update:loading', action.id)
-				Vue.set(this.source, 'status', NodeStatus.LOADING)
+				this.$set(this.source, 'status', NodeStatus.LOADING)
 
 				const success = await action.exec(this.source, this.currentView, this.currentDir)
 
@@ -289,7 +296,7 @@ export default defineComponent({
 			} finally {
 				// Reset the loading marker
 				this.$emit('update:loading', '')
-				Vue.set(this.source, 'status', undefined)
+				this.$set(this.source, 'status', undefined)
 
 				// If that was a submenu, we just go back after the action
 				if (isSubmenu) {
diff --git a/apps/files/src/components/FileEntry/FileEntryName.vue b/apps/files/src/components/FileEntry/FileEntryName.vue
index fdd3c215a9861..08e6f9ed6b2ac 100644
--- a/apps/files/src/components/FileEntry/FileEntryName.vue
+++ b/apps/files/src/components/FileEntry/FileEntryName.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script lang="ts">
-import type { Node, View } from '@nextcloud/files'
+import type { Node } from '@nextcloud/files'
 import type { PropType } from 'vue'
 
 import { showError, showSuccess } from '@nextcloud/dialogs'
@@ -46,10 +46,11 @@ import { FileType, NodeStatus, Permission } from '@nextcloud/files'
 import { loadState } from '@nextcloud/initial-state'
 import { translate as t } from '@nextcloud/l10n'
 import axios, { isAxiosError } from '@nextcloud/axios'
-import Vue, { defineComponent } from 'vue'
+import { defineComponent } from 'vue'
 
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
+import { useCurrentView } from '../../composables/useCurrentView'
 import { useRenamingStore } from '../../store/renaming.ts'
 import logger from '../../logger.js'
 
@@ -90,17 +91,17 @@ export default defineComponent({
 	},
 
 	setup() {
+		const { currentView } = useCurrentView()
 		const renamingStore = useRenamingStore()
+
 		return {
+			currentView,
+
 			renamingStore,
 		}
 	},
 
 	computed: {
-		currentView(): View {
-			return this.$navigation.active as View
-		},
-
 		isRenaming() {
 			return this.renamingStore.renamingNode === this.source
 		},
@@ -282,7 +283,7 @@ export default defineComponent({
 			}
 
 			// Set loading state
-			Vue.set(this.source, 'status', NodeStatus.LOADING)
+			this.$set(this.source, 'status', NodeStatus.LOADING)
 
 			// Update node
 			this.source.rename(newName)
@@ -327,7 +328,7 @@ export default defineComponent({
 				// Unknown error
 				showError(t('files', 'Could not rename "{oldName}"', { oldName }))
 			} finally {
-				Vue.set(this.source, 'status', undefined)
+				this.$set(this.source, 'status', undefined)
 			}
 		},
 
diff --git a/apps/files/src/components/FileEntryGrid.vue b/apps/files/src/components/FileEntryGrid.vue
index 8238c1a53d109..569828ea020bd 100644
--- a/apps/files/src/components/FileEntryGrid.vue
+++ b/apps/files/src/components/FileEntryGrid.vue
@@ -60,6 +60,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 
+import { useCurrentView } from '../composables/useCurrentView'
 import { useActionsMenuStore } from '../store/actionsmenu.ts'
 import { useDragAndDropStore } from '../store/dragging.ts'
 import { useFilesStore } from '../store/files.ts'
@@ -93,12 +94,16 @@ export default defineComponent({
 		const filesStore = useFilesStore()
 		const renamingStore = useRenamingStore()
 		const selectionStore = useSelectionStore()
+		const { currentView } = useCurrentView()
+
 		return {
 			actionsMenuStore,
 			draggingStore,
 			filesStore,
 			renamingStore,
 			selectionStore,
+
+			currentView,
 		}
 	},
 
diff --git a/apps/files/src/components/FileEntryMixin.ts b/apps/files/src/components/FileEntryMixin.ts
index f0f63f9dd3032..b9cc0398ef58a 100644
--- a/apps/files/src/components/FileEntryMixin.ts
+++ b/apps/files/src/components/FileEntryMixin.ts
@@ -48,10 +48,6 @@ export default defineComponent({
 	},
 
 	computed: {
-		currentView(): View {
-			return this.$navigation.active as View
-		},
-
 		currentDir() {
 			// Remove any trailing slash but leave root slash
 			return (this.$route?.query?.dir?.toString() || '/').replace(/^(.+)\/$/, '$1')
diff --git a/apps/files/src/components/FilesListTableHeader.vue b/apps/files/src/components/FilesListTableHeader.vue
index 7134c957fb8c4..6004772bd46c4 100644
--- a/apps/files/src/components/FilesListTableHeader.vue
+++ b/apps/files/src/components/FilesListTableHeader.vue
@@ -54,17 +54,21 @@
 </template>
 
 <script lang="ts">
+import type { Node } from '@nextcloud/files'
+import type { PropType } from 'vue'
+import type { FileSource } from '../types.ts'
+
 import { translate as t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
+
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
-import { defineComponent, type PropType } from 'vue'
+import FilesListTableHeaderButton from './FilesListTableHeaderButton.vue'
 
+import { useCurrentView } from '../composables/useCurrentView'
 import { useFilesStore } from '../store/files.ts'
 import { useSelectionStore } from '../store/selection.ts'
-import FilesListTableHeaderButton from './FilesListTableHeaderButton.vue'
 import filesSortingMixin from '../mixins/filesSorting.ts'
 import logger from '../logger.js'
-import type { Node } from '@nextcloud/files'
-import type { FileSource } from '../types.ts'
 
 export default defineComponent({
 	name: 'FilesListTableHeader',
@@ -100,17 +104,17 @@ export default defineComponent({
 	setup() {
 		const filesStore = useFilesStore()
 		const selectionStore = useSelectionStore()
+		const { currentView } = useCurrentView()
+
 		return {
 			filesStore,
 			selectionStore,
+
+			currentView,
 		}
 	},
 
 	computed: {
-		currentView() {
-			return this.$navigation.active
-		},
-
 		columns() {
 			// Hide columns if the list is too small
 			if (this.filesListWidth < 512) {
diff --git a/apps/files/src/composables/useCurrentView.spec.ts b/apps/files/src/composables/useCurrentView.spec.ts
new file mode 100644
index 0000000000000..a3b6ecde65588
--- /dev/null
+++ b/apps/files/src/composables/useCurrentView.spec.ts
@@ -0,0 +1,59 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { beforeEach, describe, expect, it, jest } from '@jest/globals'
+import { Navigation, View } from '@nextcloud/files'
+import { mount } from '@vue/test-utils'
+import { defineComponent, nextTick } from 'vue'
+import { useCurrentView } from './useCurrentView'
+
+import nextcloudFiles from '@nextcloud/files'
+
+// Just a wrapper so we can test the composable
+const TestComponent = defineComponent({
+	template: '<div></div>',
+	setup() {
+		const { currentView } = useCurrentView()
+		return {
+			currentView,
+		}
+	},
+})
+
+describe('Composables: useCurrentView', () => {
+	const spy = jest.spyOn(nextcloudFiles, 'getNavigation')
+	let navigation: Navigation
+
+	beforeEach(() => {
+		navigation = new Navigation()
+		spy.mockImplementation(() => navigation)
+	})
+
+	it('should return null without active navigation', () => {
+		const wrapper = mount(TestComponent)
+		expect((wrapper.vm as unknown as { currentView: View | null}).currentView).toBe(null)
+	})
+
+	it('should return already active navigation', async () => {
+		const view = new View({ getContents: () => Promise.reject(), icon: '<svg></svg>', id: 'view-1', name: 'My View 1', order: 0 })
+		navigation.register(view)
+		navigation.setActive(view)
+		// Now the navigation is already set it should take the active navigation
+		const wrapper = mount(TestComponent)
+		expect((wrapper.vm as unknown as { currentView: View | null}).currentView).toBe(view)
+	})
+
+	it('should be reactive on updating active navigation', async () => {
+		const view = new View({ getContents: () => Promise.reject(), icon: '<svg></svg>', id: 'view-1', name: 'My View 1', order: 0 })
+		navigation.register(view)
+		const wrapper = mount(TestComponent)
+
+		// no active navigation
+		expect((wrapper.vm as unknown as { currentView: View | null}).currentView).toBe(null)
+
+		navigation.setActive(view)
+		// Now the navigation is set it should take the active navigation
+		expect((wrapper.vm as unknown as { currentView: View | null}).currentView).toBe(view)
+	})
+})
diff --git a/apps/files/src/composables/useCurrentView.ts b/apps/files/src/composables/useCurrentView.ts
new file mode 100644
index 0000000000000..48916c61d96f0
--- /dev/null
+++ b/apps/files/src/composables/useCurrentView.ts
@@ -0,0 +1,31 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import type { View } from '@nextcloud/files'
+
+import { getNavigation } from '@nextcloud/files'
+import { onMounted, onUnmounted, shallowRef, type ShallowRef } from 'vue'
+
+/**
+ * Composable to get the currently active files view from the files navigation
+ */
+export function useCurrentView() {
+	const navigation = getNavigation()
+	const currentView: ShallowRef<View | null> = shallowRef(navigation.active)
+
+	/**
+	 * Event listener to update the `currentView`
+	 * @param event The update event
+	 */
+	function onUpdateActive(event: CustomEvent<View|null>) {
+		currentView.value = event.detail
+	}
+
+	onMounted(() => navigation.addEventListener('updateActive', onUpdateActive))
+	onUnmounted(() => navigation.removeEventListener('updateActive', onUpdateActive))
+
+	return {
+		currentView,
+	}
+}
diff --git a/apps/files/src/views/FilesList.vue b/apps/files/src/views/FilesList.vue
index 493437225d630..68cb9656a2e5c 100644
--- a/apps/files/src/views/FilesList.vue
+++ b/apps/files/src/views/FilesList.vue
@@ -107,7 +107,7 @@
 </template>
 
 <script lang="ts">
-import type { View, ContentsWithRoot } from '@nextcloud/files'
+import type { ContentsWithRoot } from '@nextcloud/files'
 import type { Upload } from '@nextcloud/upload'
 import type { CancelablePromise } from 'cancelable-promise'
 import type { ComponentPublicInstance } from 'vue'
@@ -137,6 +137,7 @@ import AccountPlusIcon from 'vue-material-design-icons/AccountPlus.vue'
 import ViewGridIcon from 'vue-material-design-icons/ViewGrid.vue'
 
 import { action as sidebarAction } from '../actions/sidebarAction.ts'
+import { useCurrentView } from '../composables/useCurrentView.ts'
 import { useFilesStore } from '../store/files.ts'
 import { usePathsStore } from '../store/paths.ts'
 import { useSelectionStore } from '../store/selection.ts'
@@ -186,10 +187,13 @@ export default defineComponent({
 		const uploaderStore = useUploaderStore()
 		const userConfigStore = useUserConfigStore()
 		const viewConfigStore = useViewConfigStore()
+		const { currentView } = useCurrentView()
 
 		const enableGridView = (loadState('core', 'config', [])['enable_non-accessible_features'] ?? true)
 
 		return {
+			currentView,
+
 			filesStore,
 			pathsStore,
 			selectionStore,
@@ -228,10 +232,6 @@ export default defineComponent({
 			return this.userConfigStore.userConfig
 		},
 
-		currentView(): View {
-			return this.$navigation.active || this.$navigation.views.find((view) => view.id === (this.$route.params?.view ?? 'files'))!
-		},
-
 		pageHeading(): string {
 			return this.currentView?.name ?? t('files', 'Files')
 		},
@@ -475,7 +475,7 @@ export default defineComponent({
 		subscribe('files:node:deleted', this.onNodeDeleted)
 		subscribe('files:node:updated', this.onUpdatedNode)
 		subscribe('nextcloud:unified-search.search', this.onSearch)
-		subscribe('nextcloud:unified-search.reset', this.onSearch)
+		subscribe('nextcloud:unified-search.reset', this.resetSearch)
 
 		// reload on settings change
 		this.unsubscribeStoreCallback = this.userConfigStore.$subscribe(() => this.fetchContent(), { deep: true })
@@ -485,7 +485,7 @@ export default defineComponent({
 		unsubscribe('files:node:deleted', this.onNodeDeleted)
 		unsubscribe('files:node:updated', this.onUpdatedNode)
 		unsubscribe('nextcloud:unified-search.search', this.onSearch)
-		unsubscribe('nextcloud:unified-search.reset', this.onSearch)
+		unsubscribe('nextcloud:unified-search.reset', this.resetSearch)
 		this.unsubscribeStoreCallback()
 	},
 
@@ -656,6 +656,9 @@ export default defineComponent({
 		 * Reset the search query
 		 */
 		resetSearch() {
+			// Reset debounced calls to not set the query again
+			this.onSearch.clear()
+			// Reset filter query
 			this.filterText = ''
 		},
 
@@ -668,7 +671,7 @@ export default defineComponent({
 			if (window?.OCA?.Files?.Sidebar?.setActiveTab) {
 				window.OCA.Files.Sidebar.setActiveTab('sharing')
 			}
-			sidebarAction.exec(this.currentFolder, this.currentView, this.currentFolder.path)
+			sidebarAction.exec(this.currentFolder, this.currentView!, this.currentFolder.path)
 		},
 		toggleGridView() {
 			this.userConfigStore.update('grid_view', !this.userConfig.grid_view)