fix(files): active and open sidebar on mount

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

4 files changed, 64 insertions, 23 deletions

diff --git a/apps/files/src/actions/openFolderAction.ts b/apps/files/src/actions/openFolderAction.ts
index ccb3f1a43ea..9e832515976 100644
--- a/apps/files/src/actions/openFolderAction.ts
+++ b/apps/files/src/actions/openFolderAction.ts
@@ -59,8 +59,8 @@ export const action = new FileAction({
 
 		window.OCP.Files.Router.goToRoute(
 			null,
-			null,
-			{ dir: join(dir, node.basename) },
+			{ fileid: undefined },
+			{ dir: join(dir, node.basename), fileid: undefined },
 		)
 		return null
 	},
diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
index e3feda819b8..d189c83e63a 100644
--- a/apps/files/src/components/FileEntry.vue
+++ b/apps/files/src/components/FileEntry.vue
@@ -21,11 +21,15 @@
   -->
 
 <template>
-	<tr :class="{'list__row--active': active}" class="list__row" @contextmenu="onRightClick">
+	<tr :class="{'files-list__row--visible': visible, 'files-list__row--active': isActive}"
+		class="list__row"
+		@contextmenu="onRightClick">
+		<!-- Failed indicator -->
 		<span v-if="source.attributes.failed" class="files-list__row--failed" />
 
+		<!-- Checkbox -->
 		<td class="files-list__row-checkbox">
-			<NcCheckboxRadioSwitch v-if="active"
+			<NcCheckboxRadioSwitch v-if="visible"
 				:aria-label="t('files', 'Select the row for {displayName}', { displayName })"
 				:checked="selectedFiles"
 				:value="fileid"
@@ -98,7 +102,7 @@
 				:source="source" />
 
 			<!-- Menu actions -->
-			<NcActions v-if="active"
+			<NcActions v-if="visible"
 				ref="actionsMenu"
 				:boundaries-element="getBoundariesElement()"
 				:container="getBoundariesElement()"
@@ -142,7 +146,7 @@
 			:class="`files-list__row-${currentView?.id}-${column.id}`"
 			class="files-list__row-column-custom"
 			@click="openDetailsIfAvailable">
-			<CustomElementRender v-if="active"
+			<CustomElementRender v-if="visible"
 				:current-view="currentView"
 				:render="column.render"
 				:source="source" />
@@ -208,7 +212,7 @@ export default Vue.extend({
 	},
 
 	props: {
-		active: {
+		visible: {
 			type: Boolean,
 			default: false,
 		},
@@ -279,10 +283,13 @@ export default Vue.extend({
 			return this.currentView?.columns || []
 		},
 
-		dir() {
+		currentDir() {
 			// Remove any trailing slash but leave root slash
 			return (this.$route?.query?.dir || '/').replace(/^(.+)\/$/, '$1')
 		},
+		currentFileId() {
+			return this.$route.params.fileid || this.$route.query.fileid || null
+		},
 		fileid() {
 			return this.source?.fileid?.toString?.()
 		},
@@ -418,7 +425,7 @@ export default Vue.extend({
 
 		// Enabled action that are displayed inline with a custom render function
 		enabledRenderActions() {
-			if (!this.active) {
+			if (!this.visible) {
 				return []
 			}
 			return this.enabledActions.filter(action => typeof action.renderInline === 'function')
@@ -472,6 +479,10 @@ export default Vue.extend({
 				this.renamingStore.newName = newName
 			},
 		},
+
+		isActive() {
+			return this.fileid === this.currentFileId
+		},
 	},
 
 	watch: {
@@ -482,7 +493,6 @@ export default Vue.extend({
 		source() {
 			this.resetState()
 			this.debounceIfNotCached()
-			logger.debug('FileEntry source changed', { source: this.source })
 		},
 
 		/**
@@ -492,6 +502,16 @@ export default Vue.extend({
 		isRenaming() {
 			this.startRenaming()
 		},
+
+		/**
+		 * Open the sidebar if the file is active
+		 */
+		isActive(active) {
+			const Sidebar = window?.OCA?.Files?.Sidebar
+			if (active && Sidebar && Sidebar.file !== this.source.path) {
+				Sidebar.open(this.source.path)
+			}
+		},
 	},
 
 	/**
@@ -545,8 +565,8 @@ export default Vue.extend({
 			// Store the promise to be able to cancel it
 			this.previewPromise = new CancelablePromise((resolve, reject, onCancel) => {
 				const img = new Image()
-				// If active, load the preview with higher priority
-				img.fetchpriority = this.active ? 'high' : 'auto'
+				// If visible, load the preview with higher priority
+				img.fetchpriority = this.visible ? 'high' : 'auto'
 				img.onload = () => {
 					this.backgroundImage = `url(${this.previewUrl})`
 					this.backgroundFailed = false
@@ -595,7 +615,7 @@ export default Vue.extend({
 				this.loading = action.id
 				Vue.set(this.source, '_loading', true)
 
-				const success = await action.exec(this.source, this.currentView, this.dir)
+				const success = await action.exec(this.source, this.currentView, this.currentDir)
 
 				// If the action returns null, we stay silent
 				if (success === null) {
@@ -621,7 +641,7 @@ export default Vue.extend({
 				event.preventDefault()
 				event.stopPropagation()
 				// Execute the first default action if any
-				this.enabledDefaultActions[0].exec(this.source, this.currentView, this.dir)
+				this.enabledDefaultActions[0].exec(this.source, this.currentView, this.currentDir)
 			}
 		},
 
@@ -798,7 +818,7 @@ export default Vue.extend({
 					showError(this.t('files', 'Could not rename "{oldName}", it does not exist any more', { oldName }))
 					return
 				} else if (error?.response?.status === 412) {
-					showError(this.t('files', 'The name "{newName}"" is already used in the folder "{dir}". Please choose a different name.', { newName, dir: this.dir }))
+					showError(this.t('files', 'The name "{newName}"" is already used in the folder "{dir}". Please choose a different name.', { newName, dir: this.currentDir }))
 					return
 				}
 
@@ -830,7 +850,7 @@ export default Vue.extend({
 tr {
 	&:hover,
 	&:focus,
-	&:active {
+	&:visible {
 		background-color: var(--color-background-dark);
 	}
 }
diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index 05de0a38750..18c58a6c41b 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -170,6 +170,16 @@ export default Vue.extend({
 		},
 	},
 
+	mounted() {
+		// Open the sidebar on the file if it's in the url and
+		// we're just loaded the app for the first time.
+		const Sidebar = window?.OCA?.Files?.Sidebar
+		const node = this.nodes.find(node => node.fileid === this.fileId)
+		if (Sidebar && node) {
+			Sidebar.open(node.path)
+		}
+	},
+
 	methods: {
 		getFileId(node) {
 			return node.fileid
@@ -292,9 +302,14 @@ export default Vue.extend({
 			}
 		}
 
-		// Hover state of the row should also change the favorite markers background
-		.files-list__row:hover .favorite-marker-icon svg path {
-			stroke: var(--color-background-dark);
+		.files-list__row{
+			&:hover, &:focus, &:active, &--active {
+				background-color: var(--color-background-dark);
+				// Hover state of the row should also change the favorite markers background
+				.favorite-marker-icon svg path {
+					stroke: var(--color-background-dark);
+				}
+			}
 		}
 
 		// Entry preview or mime icon
diff --git a/apps/files/src/components/VirtualList.vue b/apps/files/src/components/VirtualList.vue
index 252be00413a..b14be529c09 100644
--- a/apps/files/src/components/VirtualList.vue
+++ b/apps/files/src/components/VirtualList.vue
@@ -15,14 +15,14 @@
 			<component :is="dataComponent"
 				v-for="(item, i) in renderedItems"
 				:key="i"
-				:active="(i >= bufferItems || index <= bufferItems) && (i < shownItems - bufferItems)"
+				:visible="(i >= bufferItems || index <= bufferItems) && (i < shownItems - bufferItems)"
 				:source="item"
 				:index="i"
 				v-bind="extraProps" />
 		</tbody>
 
 		<!-- Footer -->
-		<tfoot ref="tfoot" class="files-list__tfoot">
+		<tfoot v-show="isReady" ref="tfoot" class="files-list__tfoot">
 			<slot name="footer" />
 		</tfoot>
 	</table>
@@ -72,7 +72,6 @@ export default Vue.extend({
 			bufferItems,
 			index: this.scrollToIndex,
 			beforeHeight: 0,
-			footerHeight: 0,
 			headerHeight: 0,
 			tableHeight: 0,
 			resizeObserver: null as ResizeObserver | null,
@@ -80,6 +79,11 @@ export default Vue.extend({
 	},
 
 	computed: {
+		// Wait for measurements to be done before rendering
+		isReady() {
+			return this.tableHeight > 0
+		},
+
 		startIndex() {
 			return Math.max(0, this.index - bufferItems)
 		},
@@ -87,6 +91,9 @@ export default Vue.extend({
 			return Math.ceil((this.tableHeight - this.headerHeight) / this.itemHeight) + bufferItems * 2
 		},
 		renderedItems(): (File | Folder)[] {
+			if (!this.isReady) {
+				return []
+			}
 			return this.dataSources.slice(this.startIndex, this.startIndex + this.shownItems)
 		},
 
@@ -115,7 +122,6 @@ export default Vue.extend({
 
 		this.resizeObserver = new ResizeObserver(debounce(() => {
 			this.beforeHeight = before?.clientHeight ?? 0
-			this.footerHeight = tfoot?.clientHeight ?? 0
 			this.headerHeight = thead?.clientHeight ?? 0
 			this.tableHeight = root?.clientHeight ?? 0
 			logger.debug('VirtualList resizeObserver updated')