From 4c1d47d7cff173bcc2e3f2e680e0decf6d4899f2 Mon Sep 17 00:00:00 2001
From: skjnldsv <skjnldsv@protonmail.com>
Date: Fri, 29 Nov 2024 12:33:18 +0100
Subject: [PATCH] feat(files): add file check keyboard shortcut

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>
---
 .../components/FileEntry/FileEntryActions.vue | 11 +++----
 .../FileEntry/FileEntryCheckbox.vue           | 33 ++++++++++++++++++-
 2 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/apps/files/src/components/FileEntry/FileEntryActions.vue b/apps/files/src/components/FileEntry/FileEntryActions.vue
index fc403e8c6d23c..321442a174bf6 100644
--- a/apps/files/src/components/FileEntry/FileEntryActions.vue
+++ b/apps/files/src/components/FileEntry/FileEntryActions.vue
@@ -102,6 +102,7 @@ import { ACTION_DETAILS } from '../../actions/sidebarAction.ts'
 import { ACTION_RENAME } from '../../actions/renameAction.ts'
 import { ACTION_DELETE } from '../../actions/deleteAction.ts'
 import { ACTION_FAVORITE } from '../../actions/favoriteAction.ts'
+import { useActiveStore } from '../../store/active.ts'
 
 export default defineComponent({
 	name: 'FileEntryActions',
@@ -138,16 +139,14 @@ export default defineComponent({
 	setup() {
 		// The file list is guaranteed to be only shown with active view - thus we can set the `loaded` flag
 		const { currentView } = useNavigation(true)
-		const {
-			directory: currentDir,
-			fileId: currentFileId,
-		} = useRouteParameters()
+		const { directory: currentDir } = useRouteParameters()
 
+		const activeStore = useActiveStore()
 		const filesListWidth = useFileListWidth()
 		const enabledFileActions = inject<FileAction[]>('enabledFileActions', [])
 		return {
+			activeStore,
 			currentDir,
-			currentFileId,
 			currentView,
 			enabledFileActions,
 			filesListWidth,
@@ -163,7 +162,7 @@ export default defineComponent({
 
 	computed: {
 		isActive() {
-			return String(this.source.fileid) === String(this.currentFileId)
+			return this.activeStore.active?.source === this.source.source
 		},
 
 		isLoading() {
diff --git a/apps/files/src/components/FileEntry/FileEntryCheckbox.vue b/apps/files/src/components/FileEntry/FileEntryCheckbox.vue
index 9caa08cfe22c2..ceb18bdd4bc83 100644
--- a/apps/files/src/components/FileEntry/FileEntryCheckbox.vue
+++ b/apps/files/src/components/FileEntry/FileEntryCheckbox.vue
@@ -26,6 +26,8 @@ import { defineComponent } from 'vue'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
+import { isDialogOpened } from '../../utils/dialogUtils.ts'
+import { useActiveStore } from '../../store/active.ts'
 import { useKeyboardStore } from '../../store/keyboard.ts'
 import { useSelectionStore } from '../../store/selection.ts'
 import logger from '../../logger.ts'
@@ -60,13 +62,21 @@ export default defineComponent({
 	setup() {
 		const selectionStore = useSelectionStore()
 		const keyboardStore = useKeyboardStore()
+		const activeStore = useActiveStore()
+
 		return {
+			activeStore,
 			keyboardStore,
 			selectionStore,
+			t,
 		}
 	},
 
 	computed: {
+		isActive() {
+			return this.activeStore.active?.source === this.source.source
+		},
+
 		selectedFiles() {
 			return this.selectionStore.selected
 		},
@@ -91,6 +101,14 @@ export default defineComponent({
 		},
 	},
 
+	beforeMount() {
+		document.addEventListener('keydown', this.onKeyDown)
+	},
+
+	beforeDestroy() {
+		document.removeEventListener('keydown', this.onKeyDown)
+	},
+
 	methods: {
 		onSelectionChange(selected: boolean) {
 			const newSelectedIndex = this.index
@@ -132,7 +150,20 @@ export default defineComponent({
 			this.selectionStore.reset()
 		},
 
-		t,
+		onKeyDown(event: KeyboardEvent) {
+			// Don't react to the event if a dialog is open or the nde is not active
+			if (isDialogOpened() || !this.isActive) {
+				return
+			}
+
+			// ctrl+space toggle selection
+			if (event.key === ' ' && event.ctrlKey) {
+				event.preventDefault()
+				event.stopPropagation()
+				logger.debug('Toggling selection for file', { source: this.source })
+				this.onSelectionChange(!this.isSelected)
+			}
+		},
 	},
 })
 </script>