1 files changed, 52 insertions, 8 deletions
diff --git a/apps/files/src/components/FileEntry/FileEntryCheckbox.vue b/apps/files/src/components/FileEntry/FileEntryCheckbox.vue
index 987b48ef8ae..5b80a971118 100644
--- a/apps/files/src/components/FileEntry/FileEntryCheckbox.vue
+++ b/apps/files/src/components/FileEntry/FileEntryCheckbox.vue
@@ -5,26 +5,32 @@
 <template>
 	<td class="files-list__row-checkbox"
 		@keyup.esc.exact="resetSelection">
-		<NcLoadingIcon v-if="isLoading" />
+		<NcLoadingIcon v-if="isLoading" :name="loadingLabel" />
 		<NcCheckboxRadioSwitch v-else
 			:aria-label="ariaLabel"
 			:checked="isSelected"
+			data-cy-files-list-row-checkbox
 			@update:checked="onSelectionChange" />
 	</td>
 </template>
 
 <script lang="ts">
-import { Node, FileType } from '@nextcloud/files'
+import type { Node } from '@nextcloud/files'
+import type { PropType } from 'vue'
+import type { FileSource } from '../../types.ts'
+
+import { FileType } from '@nextcloud/files'
 import { translate as t } from '@nextcloud/l10n'
-import { type PropType, defineComponent } from 'vue'
+import { useHotKey } from '@nextcloud/vue/composables/useHotKey'
+import { defineComponent } from 'vue'
 
-import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
-import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 
+import { useActiveStore } from '../../store/active.ts'
 import { useKeyboardStore } from '../../store/keyboard.ts'
 import { useSelectionStore } from '../../store/selection.ts'
-import logger from '../../logger.js'
-import type { FileSource } from '../../types.ts'
+import logger from '../../logger.ts'
 
 export default defineComponent({
 	name: 'FileEntryCheckbox',
@@ -56,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.activeNode?.source === this.source.source
+		},
+
 		selectedFiles() {
 			return this.selectionStore.selected
 		},
@@ -80,6 +94,28 @@ export default defineComponent({
 				? t('files', 'Toggle selection for file "{displayName}"', { displayName: this.source.basename })
 				: t('files', 'Toggle selection for folder "{displayName}"', { displayName: this.source.basename })
 		},
+		loadingLabel() {
+			return this.isFile
+				? t('files', 'File is loading')
+				: t('files', 'Folder is loading')
+		},
+	},
+
+	created() {
+		// ctrl+space toggle selection
+		useHotKey(' ', this.onToggleSelect, {
+			stop: true,
+			prevent: true,
+			ctrl: true,
+		})
+
+		// ctrl+shift+space toggle range selection
+		useHotKey(' ', this.onToggleSelect, {
+			stop: true,
+			prevent: true,
+			ctrl: true,
+			shift: true,
+		})
 	},
 
 	methods: {
@@ -123,7 +159,15 @@ export default defineComponent({
 			this.selectionStore.reset()
 		},
 
-		t,
+		onToggleSelect() {
+			// Don't react if the node is not active
+			if (!this.isActive) {
+				return
+			}
+
+			logger.debug('Toggling selection for file', { source: this.source })
+			this.onSelectionChange(!this.isSelected)
+		},
 	},
 })
 </script>