Merge pull request #47920 from nextcloud/artonge/feat/reset_route_when_sidebar_and_viewer_are_close

feat: Reset route if neither the Viewer of the Sidebar is open

Author: artonge

apps/files/src/components/FilesListVirtual.vue

@@ -65,6 +65,7 @@ import type { UserConfig } from '../types'
 import { getFileListHeaders, Folder, View, getFileActions, FileType } from '@nextcloud/files'
 import { showError } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { defineComponent } from 'vue'
 
 import { action as sidebarAction } from '../actions/sidebarAction.ts'
@@ -200,8 +201,12 @@ export default defineComponent({
 			handler() {
 				// wait for scrolling and updating the actions to settle
 				this.$nextTick(() => {
-					if (this.fileId && this.openFile) {
-						this.handleOpenFile(this.fileId)
+					if (this.fileId) {
+						if (this.openFile) {
+							this.handleOpenFile(this.fileId)
+						} else {
+							this.unselectFile()
+						}
 					}
 				})
 			},
@@ -214,6 +219,8 @@ export default defineComponent({
 		const mainContent = window.document.querySelector('main.app-content') as HTMLElement
 		mainContent.addEventListener('dragover', this.onDragOver)
 
+		subscribe('files:sidebar:closed', this.unselectFile)
+
 		// If the file list is mounted with a fileId specified
 		// then we need to open the sidebar initially
 		if (this.fileId) {
@@ -224,6 +231,8 @@ export default defineComponent({
 	beforeDestroy() {
 		const mainContent = window.document.querySelector('main.app-content') as HTMLElement
 		mainContent.removeEventListener('dragover', this.onDragOver)
+
+		unsubscribe('files:sidebar:closed', this.unselectFile)
 	},
 
 	methods: {
@@ -251,15 +260,22 @@ export default defineComponent({
 			}
 		},
 
+		unselectFile() {
+			// If the Sidebar is closed and if openFile is false, remove the file id from the URL
+			if (!this.openFile && OCA.Files.Sidebar.file === '') {
+				window.OCP.Files.Router.goToRoute(
+					null,
+					{ ...this.$route.params, fileid: String(this.currentFolder.fileid ?? '') },
+					this.$route.query,
+				)
+			}
+		},
+
 		/**
 		 * Handle opening a file (e.g. by ?openfile=true)
 		 * @param fileId File to open
 		 */
 		handleOpenFile(fileId: number|null) {
-			if (!this.openFile) {
-				return
-			}
-
 			if (fileId === null || this.openFileId === fileId) {
 				return
 			}
@@ -282,7 +298,7 @@ export default defineComponent({
 				.at(0)
 			// Some file types do not have a default action (e.g. they can only be downloaded)
 			// So if there is an enabled default action, so execute it
-			defaultAction?.exec(node, this.currentView, this.currentFolder.path)
+			defaultAction?.exec(node, this.currentView, this.currentFolderpath)
 		},
 
 		onDragOver(event: DragEvent) {