From 1c44235a065753b190b51e7f62971bb241a311c0 Mon Sep 17 00:00:00 2001
From: skjnldsv <skjnldsv@protonmail.com>
Date: Fri, 29 Nov 2024 12:02:08 +0100
Subject: [PATCH] feat(files): add grid view left/right navigation keyboard
 shortcut

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>
---
 .../files/src/components/FilesListVirtual.vue | 56 +++++++++++++------
 1 file changed, 38 insertions(+), 18 deletions(-)

diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index 340b39318c363..0daa7b72524e8 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -376,8 +376,9 @@ export default defineComponent({
 
 			// Up and down arrow keys
 			if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+				const columnCount = this.$refs.table?.columnCount ?? 1
 				const index = this.nodes.findIndex(node => node.fileid === this.fileId) ?? 0
-				const nextIndex = event.key === 'ArrowUp' ? index - 1 : index + 1
+				const nextIndex = event.key === 'ArrowUp' ? index - columnCount : index + columnCount
 				if (nextIndex < 0 || nextIndex >= this.nodes.length) {
 					return
 				}
@@ -385,25 +386,44 @@ export default defineComponent({
 				const nextNode = this.nodes[nextIndex]
 
 				if (nextNode && nextNode?.fileid) {
-					logger.debug('Navigating to file ' + nextNode.path, { nextNode, fileid: nextNode.fileid })
-					this.scrollToFile(nextNode.fileid)
-
-					// Remove openfile and opendetails from the URL
-					const query = { ...this.$route.query }
-					delete query.openfile
-					delete query.opendetails
-
-					this.activeStore.setActiveNode(nextNode)
-
-					// Silent update of the URL
-					window.OCP.Files.Router.goToRoute(
-						null,
-						{ ...this.$route.params, fileid: String(nextNode.fileid) },
-						query,
-						true,
-					)
+					this.setActiveNode(nextNode)
 				}
 			}
+
+			// if grid mode, left and right arrow keys
+			if (this.userConfig.grid_view && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+				const index = this.nodes.findIndex(node => node.fileid === this.fileId) ?? 0
+				const nextIndex = event.key === 'ArrowLeft' ? index - 1 : index + 1
+				if (nextIndex < 0 || nextIndex >= this.nodes.length) {
+					return
+				}
+
+				const nextNode = this.nodes[nextIndex]
+
+				if (nextNode && nextNode?.fileid) {
+					this.setActiveNode(nextNode)
+				}
+			}
+		},
+
+		setActiveNode(node: NcNode & { fileid: number }) {
+			logger.debug('Navigating to file ' + node.path, { node, fileid: node.fileid })
+			this.scrollToFile(node.fileid)
+
+			// Remove openfile and opendetails from the URL
+			const query = { ...this.$route.query }
+			delete query.openfile
+			delete query.opendetails
+
+			this.activeStore.setActiveNode(node)
+
+			// Silent update of the URL
+			window.OCP.Files.Router.goToRoute(
+				null,
+				{ ...this.$route.params, fileid: String(node.fileid) },
+				query,
+				true,
+			)
 		},
 	},
 })