From e4fe75a7f0667cc909ecbc5053600619b59256ee Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Thu, 31 Aug 2023 10:46:24 +0200
Subject: [PATCH] Add keyboard navigation to spaces (#9625)

* Add keyboard navigation to spaces

* Update changelog item

* Lint

* Add changelog item
---
 ...ncement-add-keyboard-navigation-to-spaces-overview |  7 +++++++
 .../keyboardActions/useKeyboardTableMouseActions.ts   |  4 ++--
 .../keyboardActions/useKeyboardTableNavigation.ts     |  4 ++--
 packages/web-app-files/src/views/spaces/Projects.vue  | 11 +++++++++++
 4 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-add-keyboard-navigation-to-spaces-overview

diff --git a/changelog/unreleased/enhancement-add-keyboard-navigation-to-spaces-overview b/changelog/unreleased/enhancement-add-keyboard-navigation-to-spaces-overview
new file mode 100644
index 00000000000..44d1863f251
--- /dev/null
+++ b/changelog/unreleased/enhancement-add-keyboard-navigation-to-spaces-overview
@@ -0,0 +1,7 @@
+Enhancement: Add keyboard navigation to spaces overview
+
+In the spaces overview it is now possible to navigate through the individual spaces
+and perform actions using the keyboard
+
+https://github.com/owncloud/web/pull/9625
+https://github.com/owncloud/web/issues/9624
diff --git a/packages/web-app-files/src/composables/keyboardActions/useKeyboardTableMouseActions.ts b/packages/web-app-files/src/composables/keyboardActions/useKeyboardTableMouseActions.ts
index b9d898aa9ff..25935bd7f46 100644
--- a/packages/web-app-files/src/composables/keyboardActions/useKeyboardTableMouseActions.ts
+++ b/packages/web-app-files/src/composables/keyboardActions/useKeyboardTableMouseActions.ts
@@ -1,12 +1,12 @@
 import { onBeforeUnmount, onMounted, unref, computed, Ref, watchEffect } from 'vue'
-import { eventBus, useStore, ViewModeConstants } from 'web-pkg'
+import { eventBus, QueryValue, useStore, ViewModeConstants } from 'web-pkg'
 import { KeyboardActions } from 'web-pkg/src/composables/keyboardActions'
 import { Resource } from 'web-client'
 import { findIndex } from 'lodash-es'
 
 export const useKeyboardTableMouseActions = (
   keyActions: KeyboardActions,
-  viewMode: Ref<string>
+  viewMode: Ref<string | QueryValue>
 ) => {
   const store = useStore()
   const latestSelectedId = computed(() => store.state.Files.latestSelectedId)
diff --git a/packages/web-app-files/src/composables/keyboardActions/useKeyboardTableNavigation.ts b/packages/web-app-files/src/composables/keyboardActions/useKeyboardTableNavigation.ts
index c80dcdd2ccd..3d92f0d748f 100644
--- a/packages/web-app-files/src/composables/keyboardActions/useKeyboardTableNavigation.ts
+++ b/packages/web-app-files/src/composables/keyboardActions/useKeyboardTableNavigation.ts
@@ -1,4 +1,4 @@
-import { useStore, ViewModeConstants } from 'web-pkg'
+import { QueryValue, useStore, ViewModeConstants } from 'web-pkg'
 import { useScrollTo } from 'web-app-files/src/composables/scrollTo'
 import { computed, Ref, ref, unref, nextTick, watchEffect } from 'vue'
 import { Key, KeyboardActions, ModifierKey } from 'web-pkg/src/composables/keyboardActions'
@@ -12,7 +12,7 @@ const enum Direction {
 export const useKeyboardTableNavigation = (
   keyActions: KeyboardActions,
   paginatedResources: Ref<Resource[]>,
-  viewMode: Ref<string>
+  viewMode: Ref<string | QueryValue>
 ) => {
   const store = useStore()
   const { scrollToResource } = useScrollTo()
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index 9c96d92afd6..f27efcfccc1 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -161,6 +161,12 @@ import { sortFields as availableSortFields } from '../../helpers/ui/resourceTile
 import { formatFileSize } from 'web-pkg/src'
 import { useGettext } from 'vue3-gettext'
 import { spaceRoleEditor, spaceRoleManager, spaceRoleViewer } from 'web-client/src/helpers/share'
+import { useKeyboardActions } from 'web-pkg/src/composables/keyboardActions'
+import {
+  useKeyboardTableNavigation,
+  useKeyboardTableMouseActions,
+  useKeyboardTableActions
+} from 'web-app-files/src/composables/keyboardActions'
 
 export default defineComponent({
   components: {
@@ -233,6 +239,11 @@ export default defineComponent({
       defaultValue: ViewModeConstants.tilesView.name
     })
 
+    const keyActions = useKeyboardActions()
+    useKeyboardTableNavigation(keyActions, runtimeSpaces, viewMode)
+    useKeyboardTableMouseActions(keyActions, viewMode)
+    useKeyboardTableActions(keyActions)
+
     const getManagerNames = (space: SpaceResource) => {
       const allManagers = space.spaceRoles[spaceRoleManager.name]
       const managers = allManagers.length > 2 ? allManagers.slice(0, 2) : allManagers