feat(gui): add shortcuts to navigate bw rows in expanded form

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -22,6 +22,7 @@ import {
   useVModel,
   watch,
 } from '#imports'
+import { useActiveKeyupListener } from '~/composables/useSelectedCellKeyupListener'
 import type { Row } from '~/lib'
 
 interface Props {
@@ -157,6 +158,24 @@ const cellWrapperEl = ref<HTMLElement>()
 onMounted(() => {
   setTimeout(() => (cellWrapperEl.value?.querySelector('input,select,textarea') as HTMLInputElement)?.focus())
 })
+
+// attach keyboard listeners to switch between rows
+// using alt + left/right arrow keys
+useActiveKeyupListener(
+  isExpanded,
+  (e: KeyboardEvent) => {
+    if (!e.altKey) return
+
+    if (e.key === 'ArrowLeft') {
+      e.stopPropagation()
+      emits('prev')
+    } else if (e.key === 'ArrowRight') {
+      e.stopPropagation()
+      emits('next')
+    }
+  },
+  { immediate: true },
+)
 </script>
 
 <script lang="ts">

packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts

@@ -1,15 +1,15 @@
 import { isClient } from '@vueuse/core'
-import type { Ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 
 function useSelectedCellKeyupListener(
-  selected: Ref<boolean>,
+  selected: Ref<boolean | undefined> | ComputedRef<boolean | undefined>,
   handler: (e: KeyboardEvent) => void,
   { immediate = false }: { immediate?: boolean } = {},
 ) {
   if (isClient) {
     watch(
       selected,
-      (nextVal: boolean, _: boolean, cleanup) => {
+      (nextVal: boolean | undefined, _: boolean | undefined, cleanup) => {
         // bind listener when `selected` is truthy
         if (nextVal) {
           document.addEventListener('keydown', handler, true)