From d150a059ed2b05f8f91e29d258f657719d0fbd8b Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 24 Nov 2022 13:30:55 +0800
Subject: [PATCH 01/50] feat(nc-gui): keyboard manoeuvre - Alt + T

---
 .../nc-gui/components/dashboard/TreeView.vue     | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 0302a0f553..06356f3ef0 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -216,6 +216,22 @@ const onSearchCloseIconClick = () => {
   filterQuery = ''
   toggleSearchActive(false)
 }
+
+useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
+  if (e.altKey) {
+    switch (e.keyCode) {
+      case 84: {
+        // ALT + T
+        if (isUIAllowed('table-create')) {
+          // prevent the key `T` is inputted to table title input
+          e.preventDefault()
+          openTableCreateDialog()
+        }
+        break
+      }
+    }
+  }
+})
 </script>
 
 <template>

From ca943017a6bf322fdcfea834e3b3ecf6c6cc5bcd Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 24 Nov 2022 13:31:06 +0800
Subject: [PATCH 02/50] feat(nc-gui): keyboard manoeuvre - Alt + F

---
 packages/nc-gui/components/general/FullScreen.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/nc-gui/components/general/FullScreen.vue b/packages/nc-gui/components/general/FullScreen.vue
index b1983b2bbf..34d01ecf73 100644
--- a/packages/nc-gui/components/general/FullScreen.vue
+++ b/packages/nc-gui/components/general/FullScreen.vue
@@ -12,6 +12,18 @@ const isSidebarsOpen = computed({
     leftSidebar.toggle(value)
   },
 })
+
+useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
+  if (e.altKey) {
+    switch (e.keyCode) {
+      case 70: {
+        // ALT + F
+        isSidebarsOpen.value = !isSidebarsOpen.value
+        break
+      }
+    }
+  }
+})
 </script>
 
 <template>

From baed9a7ed7ac0907dfe213629d7fb69eb6384f30 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 24 Nov 2022 13:31:13 +0800
Subject: [PATCH 03/50] feat(nc-gui): keyboard manoeuvre - Alt + I

---
 .../components/general/ShareBaseButton.vue    | 33 +++++++++++++------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/components/general/ShareBaseButton.vue b/packages/nc-gui/components/general/ShareBaseButton.vue
index 833f0ce511..17c0c7356f 100644
--- a/packages/nc-gui/components/general/ShareBaseButton.vue
+++ b/packages/nc-gui/components/general/ShareBaseButton.vue
@@ -3,22 +3,35 @@ import { useRoute, useUIPermission } from '#imports'
 
 const route = useRoute()
 
-const showUserModal = $ref(false)
+const showUserModal = ref(false)
 
 const { isUIAllowed } = useUIPermission()
+
+const isShareBaseAllowed =
+  isUIAllowed('newUser') &&
+  route.name !== 'index' &&
+  route.name !== 'index-index-create' &&
+  route.name !== 'index-index-create-external' &&
+  route.name !== 'index-user-index'
+
+useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
+  if (e.altKey) {
+    switch (e.keyCode) {
+      case 73: {
+        // ALT + I
+        if (isShareBaseAllowed) {
+          showUserModal.value = true
+        }
+        break
+      }
+    }
+  }
+})
 </script>
 
 <template>
   <div class="flex items-center w-full pl-3 hover:(text-primary bg-primary bg-opacity-5)" @click="showUserModal = true">
-    <div
-      v-if="
-        isUIAllowed('newUser') &&
-        route.name !== 'index' &&
-        route.name !== 'index-index-create' &&
-        route.name !== 'index-index-create-external' &&
-        route.name !== 'index-user-index'
-      "
-    >
+    <div v-if="isShareBaseAllowed">
       <div class="flex items-center space-x-1">
         <MdiAccountPlusOutline class="mr-1 nc-share-base" />
 

From efd76975461ea4f584b92b82e92dfa374bb8dee7 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 24 Nov 2022 13:31:30 +0800
Subject: [PATCH 04/50] feat(nc-gui): keyboard manoeuvre - cmd/ctrl + Enter

---
 .../components/smartsheet/expanded-form/Header.vue  | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index 5141bc8313..875d8cab10 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -58,6 +58,19 @@ const copyRecordUrl = () => {
   )
   message.success('Copied to clipboard')
 }
+
+useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
+  const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
+  if (cmdOrCtrl) {
+    switch (e.key) {
+      case 'Enter': {
+        if (isUIAllowed('tableRowUpdate')) {
+          await save()
+        }
+      }
+    }
+  }
+})
 </script>
 
 <template>

From f65d39b510df52eb37b4e82a0ba4d8026418519e Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 24 Nov 2022 13:31:47 +0800
Subject: [PATCH 05/50] feat(nc-gui): keyboard manoeuvre - Alt + R & Alt + C

---
 .../nc-gui/components/smartsheet/Grid.vue     | 30 +++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index d007bfb074..e56ebc7f75 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -95,6 +95,10 @@ const tbodyEl = ref<HTMLElement>()
 const gridWrapper = ref<HTMLElement>()
 const tableHead = ref<HTMLElement>()
 
+const isAddingColumnAllowed = !readOnly.value && !isLocked.value && isUIAllowed('add-column') && !isSqlView.value
+
+const isAddingEmptyRowAllowed = !isView && !isLocked.value && hasEditPermission && !isSqlView.value
+
 const {
   isLoading,
   loadData,
@@ -187,6 +191,7 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange
     }
 
     const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
+    const altOrOptionKey = e.altKey
     if (e.key === ' ') {
       if (selected.row !== null && !editEnabled) {
         e.preventDefault()
@@ -205,6 +210,7 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange
         return true
       }
     }
+
     if (cmdOrCtrl) {
       switch (e.key) {
         case 'ArrowUp':
@@ -233,6 +239,26 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange
           return true
       }
     }
+
+    if (altOrOptionKey) {
+      switch (e.keyCode) {
+        // wingkwong
+        case 82: {
+          // ALT + R
+          if (isAddingEmptyRowAllowed) {
+            addEmptyRow()
+          }
+          break
+        }
+        case 67: {
+          // ALT + C
+          if (isAddingColumnAllowed) {
+            addColumnDropdown.value = true
+          }
+          break
+        }
+      }
+    }
   },
 )
 
@@ -607,7 +633,7 @@ watch(
                 </div>
               </th>
               <th
-                v-if="!readOnly && !isLocked && isUIAllowed('add-column') && !isSqlView"
+                v-if="isAddingColumnAllowed"
                 v-e="['c:column:add']"
                 class="cursor-pointer"
                 @click.stop="addColumnDropdown = true"
@@ -741,7 +767,7 @@ watch(
               </template>
             </LazySmartsheetRow>
 
-            <tr v-if="!isView && !isLocked && hasEditPermission && !isSqlView">
+            <tr v-if="isAddingEmptyRowAllowed">
               <td
                 v-e="['c:row:add:grid-bottom']"
                 :colspan="visibleColLength + 1"

From 5ec9902cee8329bc67a3214849fb0bd82b7e884f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 24 Nov 2022 14:11:54 +0800
Subject: [PATCH 06/50] feat(nc-gui): show showEditWarning when double clicking
 lookup cell

---
 packages/nc-gui/components/virtual-cell/Lookup.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/virtual-cell/Lookup.vue b/packages/nc-gui/components/virtual-cell/Lookup.vue
index 9284a52ad4..4b4af84c55 100644
--- a/packages/nc-gui/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui/components/virtual-cell/Lookup.vue
@@ -73,6 +73,7 @@ provide(CellUrlDisableOverlayInj, ref(true))
 const timeout = 3000 // in ms
 
 const showEditWarning = refAutoReset(false, timeout)
+
 const showClearWarning = refAutoReset(false, timeout)
 
 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
@@ -89,7 +90,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
 
 <template>
   <div class="h-full">
-    <div class="h-full flex gap-1 overflow-x-auto p-1">
+    <div class="h-full flex gap-1 overflow-x-auto p-1" @dblclick="showEditWarning = true">
       <template v-if="lookupColumn">
         <!-- Render virtual cell -->
         <div v-if="isVirtualCol(lookupColumn)">

From 83cc3958109ced82281667dd9377964b8919b888 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 24 Nov 2022 14:30:27 +0800
Subject: [PATCH 07/50] feat(nc-gui): add computedFieldEditWarning &
 computedFieldDeleteWarning

---
 packages/nc-gui/components/virtual-cell/Formula.vue | 10 ++++------
 packages/nc-gui/components/virtual-cell/Lookup.vue  |  9 +++------
 packages/nc-gui/components/virtual-cell/Rollup.vue  | 10 ++++------
 packages/nc-gui/lang/en.json                        |  4 +++-
 4 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui/components/virtual-cell/Formula.vue b/packages/nc-gui/components/virtual-cell/Formula.vue
index 7d25764c04..cc0e3159ed 100644
--- a/packages/nc-gui/components/virtual-cell/Formula.vue
+++ b/packages/nc-gui/components/virtual-cell/Formula.vue
@@ -17,6 +17,7 @@ const urls = computed(() => replaceUrlsWithLink(result.value))
 const timeout = 3000 // in ms
 
 const showEditFormulaWarning = refAutoReset(false, timeout)
+
 const showClearFormulaWarning = refAutoReset(false, timeout)
 
 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
@@ -24,9 +25,8 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
     case 'Enter':
       showEditFormulaWarning.value = true
       break
-    case 'Delete':
+    default:
       showClearFormulaWarning.value = true
-      break
   }
 })
 </script>
@@ -47,12 +47,10 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
       <div v-else>{{ result }}</div>
 
       <div v-if="showEditFormulaWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
-        <!-- TODO: i18n -->
-        Warning: Formula fields should be configured in the field menu dropdown.
+        {{ $t('msg.info.computedFieldEditWarning') }}
       </div>
       <div v-if="showClearFormulaWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
-        <!-- TODO: i18n -->
-        Warning: Computed field - unable to clear text.
+        {{ $t('msg.info.computedFieldDeleteWarning') }}
       </div>
     </div>
   </div>
diff --git a/packages/nc-gui/components/virtual-cell/Lookup.vue b/packages/nc-gui/components/virtual-cell/Lookup.vue
index 4b4af84c55..dff4dab7c1 100644
--- a/packages/nc-gui/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui/components/virtual-cell/Lookup.vue
@@ -81,9 +81,8 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
     case 'Enter':
       showEditWarning.value = true
       break
-    case 'Delete':
+    default:
       showClearWarning.value = true
-      break
   }
 })
 </script>
@@ -130,12 +129,10 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
     </div>
     <div>
       <div v-if="showEditWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
-        <!-- TODO: i18n -->
-        Warning: Computed field - unable to edit content.
+        {{ $t('msg.info.computedFieldEditWarning') }}
       </div>
       <div v-if="showClearWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
-        <!-- TODO: i18n -->
-        Warning: Computed field - unable to clear content.
+        {{ $t('msg.info.computedFieldDeleteWarning') }}
       </div>
     </div>
   </div>
diff --git a/packages/nc-gui/components/virtual-cell/Rollup.vue b/packages/nc-gui/components/virtual-cell/Rollup.vue
index dea3a85e7c..c0bc8a9611 100644
--- a/packages/nc-gui/components/virtual-cell/Rollup.vue
+++ b/packages/nc-gui/components/virtual-cell/Rollup.vue
@@ -6,6 +6,7 @@ const value = inject(CellValueInj)
 const timeout = 3000 // in ms
 
 const showEditWarning = refAutoReset(false, timeout)
+
 const showClearWarning = refAutoReset(false, timeout)
 
 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
@@ -13,9 +14,8 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
     case 'Enter':
       showEditWarning.value = true
       break
-    case 'Delete':
+    default:
       showClearWarning.value = true
-      break
   }
 })
 </script>
@@ -28,12 +28,10 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
 
     <div>
       <div v-if="showEditWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
-        <!-- TODO: i18n -->
-        Warning: Computed field - unable to edit content.
+        {{ $t('msg.info.computedFieldEditWarning') }}
       </div>
       <div v-if="showClearWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
-        <!-- TODO: i18n -->
-        Warning: Computed field - unable to clear content.
+        {{ $t('msg.info.computedFieldDeleteWarning') }}
       </div>
     </div>
   </div>
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index bd19e8ad4a..a7d4ed55d6 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -605,7 +605,9 @@
       "deleteViewConfirmation": "Are you sure you want to delete this view?",
       "deleteTableConfirmation": "Do you want to delete the table",
       "showM2mTables": "Show M2M Tables",
-      "deleteKanbanStackConfirmation": "Deleting this stack will also remove the select option `{stackToBeDeleted}` from the `{groupingField}`. The records will move to the uncategorized stack."
+      "deleteKanbanStackConfirmation": "Deleting this stack will also remove the select option `{stackToBeDeleted}` from the `{groupingField}`. The records will move to the uncategorized stack.",
+      "computedFieldEditWarning": "Computed field: contents are read-only. Use column edit menu to reconfigure",
+      "computedFieldDeleteWarning": "Computed field: contents are read-only. Unable to clear content."
     },
     "error": {
       "searchProject": "Your search for {search} found no results",

From 5d761c5ee1fb447b0b0d0c2fcadb8511b847c152 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 24 Nov 2022 17:14:09 +0800
Subject: [PATCH 08/50] feat(nc-gui): focus on filter query for other keys

---
 .../components/virtual-cell/components/ListItems.vue     | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index 147627bc1b..9e94cab14c 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -24,6 +24,8 @@ const vModel = useVModel(props, 'modelValue', emit)
 
 const column = inject(ColumnInj)
 
+const filterQueryRef = ref()
+
 const {
   childrenExcludedList,
   loadChildrenExcludedList,
@@ -141,6 +143,12 @@ useSelectedCellKeyupListener(vModel, (e: KeyboardEvent) => {
         }
       }
       break
+    default: {
+      const el = filterQueryRef.value?.$el
+      if (el) {
+        filterQueryRef.value.$el.focus()
+      }
+    }
   }
 })
 const activeRow = (vNode?: InstanceType<typeof Card>) => {
@@ -159,6 +167,7 @@ const activeRow = (vNode?: InstanceType<typeof Card>) => {
     <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col py-6">
       <div class="flex mb-4 items-center gap-2 px-12">
         <a-input
+          ref="filterQueryRef"
           v-model:value="childrenExcludedListPagination.query"
           :placeholder="$t('placeholder.filterQuery')"
           class="max-w-[200px]"

From 3b02b6627e1ac9cef75c8101fb44e5a87a629b33 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 24 Nov 2022 18:39:07 +0800
Subject: [PATCH 09/50] feat(nc-gui): keyboard maneuver on date picker

---
 .../nc-gui/components/cell/DatePicker.vue     | 62 ++++++++++++++++++-
 1 file changed, 61 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index f4e6508bce..2457dae686 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -76,7 +76,17 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
       e.stopPropagation()
-      open.value = true
+      if (!open.value) {
+        // open date picker
+        open.value = true
+      } else {
+        // select the current day
+        const el = document.querySelector('.ant-picker-cell-selected') as HTMLButtonElement
+        if (el) {
+          el.click()
+          open.value = false
+        }
+      }
       break
     case 'Escape':
       if (open.value) {
@@ -84,6 +94,56 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
         open.value = false
       }
       break
+    case 'ArrowLeft':
+      if (!localState) {
+        ;(document.querySelector('.ant-picker-header-prev-btn') as HTMLButtonElement)?.click()
+      } else {
+        const prevEl = document.querySelector('.ant-picker-cell-selected')?.previousElementSibling as HTMLButtonElement
+        if (prevEl) {
+          prevEl.click()
+        } else {
+          // get the last td from previous tr
+          const prevRowLastEl = document
+            .querySelector('.ant-picker-cell-selected')
+            ?.closest('tr')
+            ?.previousElementSibling?.querySelector('td:last-child') as HTMLButtonElement
+          if (prevRowLastEl) {
+            prevRowLastEl.click()
+          } else {
+            // go to the previous month
+            ;(document.querySelector('.ant-picker-header-prev-btn') as HTMLButtonElement)?.click()
+          }
+        }
+      }
+      break
+    case 'ArrowRight':
+      if (!localState) {
+        ;(document.querySelector('.ant-picker-header-next-btn') as HTMLButtonElement)?.click()
+      } else {
+        const nextEl = document.querySelector('.ant-picker-cell-selected')?.nextElementSibling as HTMLButtonElement
+        if (nextEl) {
+          nextEl.click()
+        } else {
+          // get the last td from previous tr
+          const nextRowFirstEl = document
+            .querySelector('.ant-picker-cell-selected')
+            ?.closest('tr')
+            ?.nextElementSibling?.querySelector('td:first-child') as HTMLButtonElement
+          if (nextRowFirstEl) {
+            nextRowFirstEl.click()
+          } else {
+            // go to the next month
+            ;(document.querySelector('.ant-picker-header-next-btn') as HTMLButtonElement)?.click()
+          }
+        }
+      }
+      break
+    case 'ArrowUp':
+      if (!localState) (document.querySelector('.ant-picker-header-super-prev-btn') as HTMLButtonElement)?.click()
+      break
+    case 'ArrowDown':
+      if (!localState) (document.querySelector('.ant-picker-header-super-next-btn') as HTMLButtonElement)?.click()
+      break
   }
 })
 </script>

From 9250aa82505ad17c6176504e0ec4ea37b43c7e37 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 24 Nov 2022 19:23:31 +0800
Subject: [PATCH 10/50] feat(nc-gui): revise clear cell logic

---
 packages/nc-gui/components/smartsheet/Grid.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index e56ebc7f75..5016ba6453 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -242,7 +242,6 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange
 
     if (altOrOptionKey) {
       switch (e.keyCode) {
-        // wingkwong
         case 82: {
           // ALT + R
           if (isAddingEmptyRowAllowed) {
@@ -368,7 +367,12 @@ watch(contextMenu, () => {
 const rowRefs = $ref<any[]>()
 
 async function clearCell(ctx: { row: number; col: number } | null) {
-  if (!ctx) return
+  if (
+    !ctx ||
+    !hasEditPermission ||
+    (fields.value[ctx.col].uidt !== UITypes.LinkToAnotherRecord && isVirtualCol(fields.value[ctx.col]))
+  )
+    return
 
   const rowObj = data.value[ctx.row]
   const columnObj = fields.value[ctx.col]

From 0625eacf72f735226305cc435f2d414f55c0f46d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 25 Nov 2022 17:23:59 +0800
Subject: [PATCH 11/50] fix(nc-gui): use computed on isShareBaseAllowed

---
 .../components/general/ShareBaseButton.vue       | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/general/ShareBaseButton.vue b/packages/nc-gui/components/general/ShareBaseButton.vue
index 17c0c7356f..e1dfe2ab49 100644
--- a/packages/nc-gui/components/general/ShareBaseButton.vue
+++ b/packages/nc-gui/components/general/ShareBaseButton.vue
@@ -7,19 +7,21 @@ const showUserModal = ref(false)
 
 const { isUIAllowed } = useUIPermission()
 
-const isShareBaseAllowed =
-  isUIAllowed('newUser') &&
-  route.name !== 'index' &&
-  route.name !== 'index-index-create' &&
-  route.name !== 'index-index-create-external' &&
-  route.name !== 'index-user-index'
+const isShareBaseAllowed = computed(
+  () =>
+    isUIAllowed('newUser') &&
+    route.name !== 'index' &&
+    route.name !== 'index-index-create' &&
+    route.name !== 'index-index-create-external' &&
+    route.name !== 'index-user-index',
+)
 
 useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
   if (e.altKey) {
     switch (e.keyCode) {
       case 73: {
         // ALT + I
-        if (isShareBaseAllowed) {
+        if (isShareBaseAllowed.value) {
           showUserModal.value = true
         }
         break

From d508b915f4c79c8a8792fe7195b9e54b6ca5d362 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 28 Nov 2022 12:43:22 +0800
Subject: [PATCH 12/50] fix(nc-gui): remove incorrect @selectstart.prevent

---
 packages/nc-gui/components/smartsheet/Grid.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 5016ba6453..384ed062d6 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -664,8 +664,7 @@ watch(
               </th>
             </tr>
           </thead>
-          <!-- this prevent select text from field if not in edit mode -->
-          <tbody ref="tbodyEl" @selectstart.prevent>
+          <tbody ref="tbodyEl">
             <LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
               <template #default="{ state }">
                 <tr class="nc-grid-row" :data-testid="`grid-row-${rowIndex}`">

From 632b7ebab6e22c3859c9feb6a53f9d24c12c6e6b Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 28 Nov 2022 12:47:38 +0800
Subject: [PATCH 13/50] feat(nc-gui): applyNonSelectable

---
 packages/nc-gui/app.vue               |  4 ++-
 packages/nc-gui/assets/css/global.css | 36 ++++++++++++++++++---------
 packages/nc-gui/utils/viewUtils.ts    |  4 +++
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui/app.vue b/packages/nc-gui/app.vue
index b9bcde10f4..32480b0839 100644
--- a/packages/nc-gui/app.vue
+++ b/packages/nc-gui/app.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useRoute, useTheme } from '#imports'
+import { applyNonSelectable, computed, useRoute, useTheme } from '#imports'
 
 const route = useRoute()
 
@@ -7,6 +7,8 @@ const disableBaseLayout = computed(() => route.path.startsWith('/nc/view') || ro
 
 useTheme()
 
+applyNonSelectable()
+
 // TODO: Remove when https://github.com/vuejs/core/issues/5513 fixed
 const key = ref(0)
 
diff --git a/packages/nc-gui/assets/css/global.css b/packages/nc-gui/assets/css/global.css
index 960d9d633c..33959f8ec8 100644
--- a/packages/nc-gui/assets/css/global.css
+++ b/packages/nc-gui/assets/css/global.css
@@ -1,15 +1,16 @@
 html {
-	font-size: 16px;
-	word-spacing: 1px;
-	-ms-text-size-adjust: 100%;
-	-webkit-text-size-adjust: 100%;
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-font-smoothing: antialiased;
-	box-sizing: border-box;
+  font-size: 16px;
+  word-spacing: 1px;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
 }
 
 body {
-	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, Vazirmatn, sans-serif;
+  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, Vazirmatn,
+    sans-serif;
 }
 
 /* 
@@ -17,16 +18,27 @@ Apply Vazirmatn for rtl
 */
 
 .rtl .v-application *:not(.material-icons) {
-	font-family: Vazirmatn !important;
+  font-family: Vazirmatn !important;
 }
 
 .rtl .v-application .ml-n1 {
-	margin-left: 0px !important;
+  margin-left: 0px !important;
 }
 
 /*
 For Drag and Drop
 */
 .grabbing * {
-	cursor: grabbing;
-}
\ No newline at end of file
+  cursor: grabbing;
+}
+
+/*
+Prevent Ctrl + A selection
+*/
+.non-selectable {
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
diff --git a/packages/nc-gui/utils/viewUtils.ts b/packages/nc-gui/utils/viewUtils.ts
index 2be0cb34b0..e197e766ed 100644
--- a/packages/nc-gui/utils/viewUtils.ts
+++ b/packages/nc-gui/utils/viewUtils.ts
@@ -37,3 +37,7 @@ export function applyLanguageDirection(dir: typeof rtl | typeof ltr) {
   document.body.classList.add(dir)
   document.body.style.direction = dir
 }
+
+export function applyNonSelectable() {
+  document.body.classList.add('non-selectable')
+}

From 21c0be04a25b9dda97e91f280a9332273b246885 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 28 Nov 2022 13:27:35 +0800
Subject: [PATCH 14/50] fix(nc-gui): return if expanded form is active for
 Enter & Escape on date picker

---
 packages/nc-gui/components/cell/DatePicker.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index 2457dae686..3dcda31042 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -76,6 +76,10 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
       e.stopPropagation()
+      // if expanded form is active skip resetting the active cell
+      if (document.querySelector('.nc-drawer-expanded-form.active')) {
+        return
+      }
       if (!open.value) {
         // open date picker
         open.value = true
@@ -89,6 +93,10 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
       }
       break
     case 'Escape':
+      // if expanded form is active skip resetting the active cell
+      if (document.querySelector('.nc-drawer-expanded-form.active')) {
+        return
+      }
       if (open.value) {
         e.stopPropagation()
         open.value = false

From 8098dc35400b3382f1ac7150ce5a9e03888c2e30 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 28 Nov 2022 13:37:26 +0800
Subject: [PATCH 15/50] feat(nc-gui): ad nc-locked-overlay to system columns

---
 packages/nc-gui/components/smartsheet/Cell.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index 95f3c682e4..753b92c374 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
+import { isSystemColumn } from 'nocodb-sdk'
 import {
   ActiveCellInj,
   ColumnInj,
@@ -128,7 +129,7 @@ const syncAndNavigate = (dir: NavigateDir, e: KeyboardEvent) => {
     class="nc-cell w-full"
     :class="[
       `nc-cell-${(column?.uidt || 'default').toLowerCase()}`,
-      { 'text-blue-600': isPrimary(column) && !virtual && !isForm },
+      { 'text-blue-600': isPrimary(column) && !props.virtual && !isForm },
     ]"
     @keydown.enter.exact="syncAndNavigate(NavigateDir.NEXT, $event)"
     @keydown.shift.enter.exact="syncAndNavigate(NavigateDir.PREV, $event)"
@@ -157,7 +158,7 @@ const syncAndNavigate = (dir: NavigateDir, e: KeyboardEvent) => {
       <LazyCellJson v-else-if="isJSON(column)" v-model="vModel" />
       <LazyCellText v-else v-model="vModel" />
       <div
-        v-if="(isLocked || (isPublic && readOnly && !isForm)) && !isAttachment(column)"
+        v-if="(isLocked || (isPublic && readOnly && !isForm) || isSystemColumn(column)) && !isAttachment(column)"
         class="nc-locked-overlay"
         @click.stop.prevent
       />

From ae2271c7b822b4da1bc65a239e6b4e4e14a34af9 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 28 Nov 2022 13:48:51 +0800
Subject: [PATCH 16/50] feat(nc-gui): cmd + ; to select the current date(time)

---
 packages/nc-gui/components/cell/DatePicker.vue     | 5 ++++-
 packages/nc-gui/components/cell/DateTimePicker.vue | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index 3dcda31042..922aeb9430 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -33,7 +33,7 @@ let isDateInvalid = $ref(false)
 
 const dateFormat = $computed(() => columnMeta?.value?.meta?.date_format ?? 'YYYY-MM-DD')
 
-const localState = $computed({
+let localState = $computed({
   get() {
     if (!modelValue) {
       return undefined
@@ -152,6 +152,9 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     case 'ArrowDown':
       if (!localState) (document.querySelector('.ant-picker-header-super-next-btn') as HTMLButtonElement)?.click()
       break
+    case ';':
+      localState = dayjs(new Date())
+      break
   }
 })
 </script>
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index d9cb6e2dea..038e1d4a45 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -23,7 +23,7 @@ let isDateInvalid = $ref(false)
 
 const dateFormat = isMysql ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
 
-const localState = $computed({
+let localState = $computed({
   get() {
     if (!modelValue) {
       return undefined
@@ -73,6 +73,9 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
         open.value = false
       }
       break
+    case ';':
+      localState = dayjs(new Date())
+      break
   }
 })
 </script>

From ccf42266fe8aa2f667be928ba6744d31e31e692f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 28 Nov 2022 14:03:45 +0800
Subject: [PATCH 17/50] fix(nc-gui): query the active date picker only

---
 .../nc-gui/components/cell/DatePicker.vue     | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index 922aeb9430..1f3469fea4 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -85,7 +85,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
         open.value = true
       } else {
         // select the current day
-        const el = document.querySelector('.ant-picker-cell-selected') as HTMLButtonElement
+        const el = document.querySelector('.nc-picker-date.active .ant-picker-cell-selected') as HTMLButtonElement
         if (el) {
           el.click()
           open.value = false
@@ -104,53 +104,57 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
       break
     case 'ArrowLeft':
       if (!localState) {
-        ;(document.querySelector('.ant-picker-header-prev-btn') as HTMLButtonElement)?.click()
+        ;(document.querySelector('.nc-picker-date.active .ant-picker-header-prev-btn') as HTMLButtonElement)?.click()
       } else {
-        const prevEl = document.querySelector('.ant-picker-cell-selected')?.previousElementSibling as HTMLButtonElement
+        const prevEl = document.querySelector('.nc-picker-date.active .ant-picker-cell-selected')
+          ?.previousElementSibling as HTMLButtonElement
         if (prevEl) {
           prevEl.click()
         } else {
           // get the last td from previous tr
           const prevRowLastEl = document
-            .querySelector('.ant-picker-cell-selected')
+            .querySelector('.nc-picker-date.active .ant-picker-cell-selected')
             ?.closest('tr')
             ?.previousElementSibling?.querySelector('td:last-child') as HTMLButtonElement
           if (prevRowLastEl) {
             prevRowLastEl.click()
           } else {
             // go to the previous month
-            ;(document.querySelector('.ant-picker-header-prev-btn') as HTMLButtonElement)?.click()
+            ;(document.querySelector('.nc-picker-date.active .ant-picker-header-prev-btn') as HTMLButtonElement)?.click()
           }
         }
       }
       break
     case 'ArrowRight':
       if (!localState) {
-        ;(document.querySelector('.ant-picker-header-next-btn') as HTMLButtonElement)?.click()
+        ;(document.querySelector('.nc-picker-date.active .ant-picker-header-next-btn') as HTMLButtonElement)?.click()
       } else {
-        const nextEl = document.querySelector('.ant-picker-cell-selected')?.nextElementSibling as HTMLButtonElement
+        const nextEl = document.querySelector('.nc-picker-date.active .ant-picker-cell-selected')
+          ?.nextElementSibling as HTMLButtonElement
         if (nextEl) {
           nextEl.click()
         } else {
           // get the last td from previous tr
           const nextRowFirstEl = document
-            .querySelector('.ant-picker-cell-selected')
+            .querySelector('.nc-picker-date.active .ant-picker-cell-selected')
             ?.closest('tr')
             ?.nextElementSibling?.querySelector('td:first-child') as HTMLButtonElement
           if (nextRowFirstEl) {
             nextRowFirstEl.click()
           } else {
             // go to the next month
-            ;(document.querySelector('.ant-picker-header-next-btn') as HTMLButtonElement)?.click()
+            ;(document.querySelector('.nc-picker-date.active .ant-picker-header-next-btn') as HTMLButtonElement)?.click()
           }
         }
       }
       break
     case 'ArrowUp':
-      if (!localState) (document.querySelector('.ant-picker-header-super-prev-btn') as HTMLButtonElement)?.click()
+      if (!localState)
+        (document.querySelector('.nc-picker-date.active .ant-picker-header-super-prev-btn') as HTMLButtonElement)?.click()
       break
     case 'ArrowDown':
-      if (!localState) (document.querySelector('.ant-picker-header-super-next-btn') as HTMLButtonElement)?.click()
+      if (!localState)
+        (document.querySelector('.nc-picker-date.active .ant-picker-header-super-next-btn') as HTMLButtonElement)?.click()
       break
     case ';':
       localState = dayjs(new Date())

From 2f5160e047c9d2422557790c9dfe29b676b43f89 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 28 Nov 2022 14:34:35 +0800
Subject: [PATCH 18/50] feat(nc-gui): useSelectedCellKeyupListener logic on
 datetime picker

---
 .../nc-gui/components/cell/DateTimePicker.vue | 72 ++++++++++++++++++-
 1 file changed, 70 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index 038e1d4a45..2665b85f10 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -65,14 +65,82 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
       e.stopPropagation()
-      open.value = true
+      // if expanded form is active skip resetting the active cell
+      if (document.querySelector('.nc-drawer-expanded-form.active')) {
+        return
+      }
+      if (!open.value) {
+        // open date picker
+        open.value = true
+      } else {
+        // click Ok button to save the currently selected date
+        ;(document.querySelector('.nc-picker-datetime.active .ant-picker-ok button') as HTMLButtonElement)?.click()
+      }
       break
     case 'Escape':
+      // if expanded form is active skip resetting the active cell
+      if (document.querySelector('.nc-drawer-expanded-form.active')) {
+        return
+      }
       if (open.value) {
         e.stopPropagation()
         open.value = false
       }
       break
+    case 'ArrowLeft':
+      if (!localState) {
+        ;(document.querySelector('.nc-picker-datetime.active .ant-picker-header-prev-btn') as HTMLButtonElement)?.click()
+      } else {
+        const prevEl = document.querySelector('.nc-picker-datetime.active .ant-picker-cell-selected')
+          ?.previousElementSibling as HTMLButtonElement
+        if (prevEl) {
+          prevEl.click()
+        } else {
+          // get the last td from previous tr
+          const prevRowLastEl = document
+            .querySelector('.nc-picker-datetime.active .ant-picker-cell-selected')
+            ?.closest('tr')
+            ?.previousElementSibling?.querySelector('td:last-child') as HTMLButtonElement
+          if (prevRowLastEl) {
+            prevRowLastEl.click()
+          } else {
+            // go to the previous month
+            ;(document.querySelector('.nc-picker-datetime.active .ant-picker-header-prev-btn') as HTMLButtonElement)?.click()
+          }
+        }
+      }
+      break
+    case 'ArrowRight':
+      if (!localState) {
+        ;(document.querySelector('.nc-picker-datetime.active .ant-picker-header-next-btn') as HTMLButtonElement)?.click()
+      } else {
+        const nextEl = document.querySelector('.nc-picker-datetime.active .ant-picker-cell-selected')
+          ?.nextElementSibling as HTMLButtonElement
+        if (nextEl) {
+          nextEl.click()
+        } else {
+          // get the last td from previous tr
+          const nextRowFirstEl = document
+            .querySelector('.nc-picker-datetime.active .ant-picker-cell-selected')
+            ?.closest('tr')
+            ?.nextElementSibling?.querySelector('td:first-child') as HTMLButtonElement
+          if (nextRowFirstEl) {
+            nextRowFirstEl.click()
+          } else {
+            // go to the next month
+            ;(document.querySelector('.nc-picker-datetime.active .ant-picker-header-next-btn') as HTMLButtonElement)?.click()
+          }
+        }
+      }
+      break
+    case 'ArrowUp':
+      if (!localState)
+        (document.querySelector('.nc-picker-datetime.active .ant-picker-header-super-prev-btn') as HTMLButtonElement)?.click()
+      break
+    case 'ArrowDown':
+      if (!localState)
+        (document.querySelector('.nc-picker-datetime.active .ant-picker-header-super-next-btn') as HTMLButtonElement)?.click()
+      break
     case ';':
       localState = dayjs(new Date())
       break
@@ -104,4 +172,4 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
 :deep(.ant-picker-input > input[disabled]) {
   @apply !text-current;
 }
-</style>
+</style>
\ No newline at end of file

From af685a9cf8f52605a129a37b27bf83e4f59ab40c Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 28 Nov 2022 16:28:03 +0800
Subject: [PATCH 19/50] feat(nc-gui): add active class when the modal is open

---
 packages/nc-gui/components/cell/attachment/Modal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/attachment/Modal.vue b/packages/nc-gui/components/cell/attachment/Modal.vue
index 97872cc100..f92ac4f988 100644
--- a/packages/nc-gui/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui/components/cell/attachment/Modal.vue
@@ -60,7 +60,7 @@ function onClick(item: Record<string, any>) {
 <template>
   <a-modal
     v-model:visible="modalVisible"
-    class="nc-attachment-modal"
+    :class="`nc-attachment-modal ${modalVisible ? 'active' : ''}`"
     width="80%"
     :footer="null"
     wrap-class-name="nc-modal-attachment-expand-cell"

From cd56d6bf1e53e2f24d92138097554adee884c9ba Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 28 Nov 2022 16:28:26 +0800
Subject: [PATCH 20/50] feat(nc-gui): click enter to open modal, click enter
 again to attach file

---
 packages/nc-gui/components/cell/attachment/index.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 1ce6ec6a51..7a4e99a315 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -150,7 +150,12 @@ watch(
 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
   if (e.key === 'Enter' && !isReadonly.value) {
     e.stopPropagation()
-    modalVisible.value = true
+    if (!modalVisible.value) {
+      modalVisible.value = true
+    } else {
+      // click Attach File button
+      ;(document.querySelector('.nc-attachment-modal.active .nc-attach-file') as HTMLDivElement)?.click()
+    }
   }
 })
 </script>

From 11244d767b6e806521bc8e341e3b57fe2ac77c04 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 28 Nov 2022 16:40:17 +0800
Subject: [PATCH 21/50] feat(nc-gui): keyboard manoeuvre - Alt + ,

---
 .../pages/[projectType]/[projectId]/index.vue     | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index 5b320836da..eef8e7710a 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -182,6 +182,21 @@ onMounted(() => {
 })
 
 onBeforeUnmount(reset)
+
+useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
+  if (e.altKey) {
+    switch (e.keyCode) {
+      case 188: {
+        // ALT + ,
+        if (isUIAllowed('settings')) {
+          e.preventDefault()
+          toggleDialog(true, 'teamAndAuth')
+        }
+        break
+      }
+    }
+  }
+})
 </script>
 
 <template>

From 2af5e7d22436f1990ba7114bd4f84141f40a4fd8 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 28 Nov 2022 17:37:09 +0800
Subject: [PATCH 22/50] fix(nc-gui): resolve PR comments

---
 packages/nc-gui/components/cell/attachment/Modal.vue | 3 ++-
 packages/nc-gui/components/virtual-cell/Formula.vue  | 8 +-------
 packages/nc-gui/components/virtual-cell/Rollup.vue   | 8 +-------
 3 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Modal.vue b/packages/nc-gui/components/cell/attachment/Modal.vue
index f92ac4f988..f2d317014b 100644
--- a/packages/nc-gui/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui/components/cell/attachment/Modal.vue
@@ -60,7 +60,8 @@ function onClick(item: Record<string, any>) {
 <template>
   <a-modal
     v-model:visible="modalVisible"
-    :class="`nc-attachment-modal ${modalVisible ? 'active' : ''}`"
+    class="nc-attachment-modal"
+    :class="{ active: modalVisible }"
     width="80%"
     :footer="null"
     wrap-class-name="nc-modal-attachment-expand-cell"
diff --git a/packages/nc-gui/components/virtual-cell/Formula.vue b/packages/nc-gui/components/virtual-cell/Formula.vue
index cc0e3159ed..e30f6ed14d 100644
--- a/packages/nc-gui/components/virtual-cell/Formula.vue
+++ b/packages/nc-gui/components/virtual-cell/Formula.vue
@@ -21,13 +21,7 @@ const showEditFormulaWarning = refAutoReset(false, timeout)
 const showClearFormulaWarning = refAutoReset(false, timeout)
 
 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
-  switch (e.key) {
-    case 'Enter':
-      showEditFormulaWarning.value = true
-      break
-    default:
-      showClearFormulaWarning.value = true
-  }
+  showClearFormulaWarning.value = true
 })
 </script>
 
diff --git a/packages/nc-gui/components/virtual-cell/Rollup.vue b/packages/nc-gui/components/virtual-cell/Rollup.vue
index c0bc8a9611..8da2823a86 100644
--- a/packages/nc-gui/components/virtual-cell/Rollup.vue
+++ b/packages/nc-gui/components/virtual-cell/Rollup.vue
@@ -10,13 +10,7 @@ const showEditWarning = refAutoReset(false, timeout)
 const showClearWarning = refAutoReset(false, timeout)
 
 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
-  switch (e.key) {
-    case 'Enter':
-      showEditWarning.value = true
-      break
-    default:
-      showClearWarning.value = true
-  }
+  showClearWarning.value = true
 })
 </script>
 

From 04687e02ae70146a282ef0e2a17ef3f4a0846bbb Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 28 Nov 2022 18:58:13 +0800
Subject: [PATCH 23/50] feat(nc-gui): prevent shift / cntOrCtrl key is pressing
 for altKey cases

---
 packages/nc-gui/components/dashboard/TreeView.vue            | 4 +++-
 packages/nc-gui/components/general/FullScreen.vue            | 5 +++--
 packages/nc-gui/components/general/ShareBaseButton.vue       | 5 +++--
 .../nc-gui/components/smartsheet/expanded-form/Header.vue    | 1 +
 packages/nc-gui/pages/[projectType]/[projectId]/index.vue    | 4 +++-
 5 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 06356f3ef0..23090adc02 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -7,6 +7,7 @@ import type { VNodeRef } from '#imports'
 import {
   Empty,
   computed,
+  isMac,
   reactive,
   ref,
   resolveComponent,
@@ -218,7 +219,8 @@ const onSearchCloseIconClick = () => {
 }
 
 useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
-  if (e.altKey) {
+  const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
+  if (e.altKey && !e.shiftKey && !cmdOrCtrl) {
     switch (e.keyCode) {
       case 84: {
         // ALT + T
diff --git a/packages/nc-gui/components/general/FullScreen.vue b/packages/nc-gui/components/general/FullScreen.vue
index 34d01ecf73..5b7816e838 100644
--- a/packages/nc-gui/components/general/FullScreen.vue
+++ b/packages/nc-gui/components/general/FullScreen.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useSidebar } from '#imports'
+import { computed, isMac, useSidebar } from '#imports'
 
 const rightSidebar = useSidebar('nc-right-sidebar')
 
@@ -14,7 +14,8 @@ const isSidebarsOpen = computed({
 })
 
 useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
-  if (e.altKey) {
+  const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
+  if (e.altKey && !e.shiftKey && !cmdOrCtrl) {
     switch (e.keyCode) {
       case 70: {
         // ALT + F
diff --git a/packages/nc-gui/components/general/ShareBaseButton.vue b/packages/nc-gui/components/general/ShareBaseButton.vue
index e1dfe2ab49..4eeb37a3b9 100644
--- a/packages/nc-gui/components/general/ShareBaseButton.vue
+++ b/packages/nc-gui/components/general/ShareBaseButton.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useRoute, useUIPermission } from '#imports'
+import { isMac, useRoute, useUIPermission } from '#imports'
 
 const route = useRoute()
 
@@ -17,7 +17,8 @@ const isShareBaseAllowed = computed(
 )
 
 useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
-  if (e.altKey) {
+  const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
+  if (e.altKey && !e.shiftKey && !cmdOrCtrl) {
     switch (e.keyCode) {
       case 73: {
         // ALT + I
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index 875d8cab10..a9c5107a66 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -3,6 +3,7 @@ import { message } from 'ant-design-vue'
 import type { ViewType } from 'nocodb-sdk'
 import {
   ReloadRowDataHookInj,
+  isMac,
   useExpandedFormStoreOrThrow,
   useSmartsheetRowStoreOrThrow,
   useSmartsheetStoreOrThrow,
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index eef8e7710a..645bc5c5d8 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -3,6 +3,7 @@ import tinycolor from 'tinycolor2'
 import {
   computed,
   definePageMeta,
+  isMac,
   message,
   navigateTo,
   onBeforeMount,
@@ -184,7 +185,8 @@ onMounted(() => {
 onBeforeUnmount(reset)
 
 useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
-  if (e.altKey) {
+  const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
+  if (e.altKey && !e.shiftKey && !cmdOrCtrl) {
     switch (e.keyCode) {
       case 188: {
         // ALT + ,

From f0e98ace78f41c41e738a31721e65ae1212fa786 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 28 Nov 2022 18:59:13 +0800
Subject: [PATCH 24/50] feat(nc-gui): add keyboardShortcut

---
 .../components/dlg/KeyboardShortcuts.vue      | 29 ++++++++++++++++++
 packages/nc-gui/lang/en.json                  |  3 +-
 .../pages/[projectType]/[projectId]/index.vue | 30 +++++++++++++++++++
 3 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 packages/nc-gui/components/dlg/KeyboardShortcuts.vue

diff --git a/packages/nc-gui/components/dlg/KeyboardShortcuts.vue b/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
new file mode 100644
index 0000000000..d7e3d4d2f6
--- /dev/null
+++ b/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import { useI18n } from '#imports'
+
+const { modelValue } = defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const dialogShow = computed({
+  get: () => modelValue,
+  set: (v) => emit('update:modelValue', v),
+})
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <a-modal
+    v-model:visible="dialogShow"
+    width="max(30vw, 600px)"
+    class="p-2"
+    :wrap-class-name="`nc-modal-keyboard-shortcuts ${dialogShow ? 'active' : ''}`"
+    @keydown.esc="dialogShow = false"
+  >
+    <template #title> {{ $t('general.title.keyboardShortcut') }} </template>
+    <!-- TODO:   -->
+  </a-modal>
+</template>
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index a7d4ed55d6..08b0da76e1 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -199,7 +199,8 @@
     "quickImportFrom": "Quick Import From",
     "quickImport": "Quick Import",
     "advancedSettings": "Advanced Settings",
-    "codeSnippet": "Code Snippet"
+    "codeSnippet": "Code Snippet",
+    "keyboardShortcut": "Keyboard Shortcuts"
   },
   "labels": {
     "createdBy": "Created By",
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index 645bc5c5d8..0782552aa1 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -13,7 +13,9 @@ import {
   openLink,
   projectThemeColors,
   ref,
+  resolveComponent,
   useCopy,
+  useDialog,
   useGlobal,
   useI18n,
   useProject,
@@ -35,6 +37,8 @@ const { theme, defaultTheme } = useTheme()
 
 const { t } = useI18n()
 
+const { $e } = useNuxtApp()
+
 const route = useRoute()
 
 const router = useRouter()
@@ -184,6 +188,22 @@ onMounted(() => {
 
 onBeforeUnmount(reset)
 
+function openKeyboardShortcutDialog() {
+  $e('a:actions:keyboard-shortcut')
+
+  const isOpen = ref(true)
+
+  const { close } = useDialog(resolveComponent('DlgKeyboardShortcuts'), {
+    'modelValue': isOpen,
+    'onUpdate:modelValue': closeDialog,
+  })
+
+  function closeDialog() {
+    isOpen.value = false
+    close(1000)
+  }
+}
+
 useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
   const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
   if (e.altKey && !e.shiftKey && !cmdOrCtrl) {
@@ -198,6 +218,16 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
       }
     }
   }
+  const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
+  if (cmdOrCtrl) {
+    switch (e.key) {
+      case '/':
+        if (!document.querySelector('.nc-modal-keyboard-shortcuts.active')) {
+          openKeyboardShortcutDialog()
+        }
+        break
+    }
+  }
 })
 </script>
 

From 70ea1fda32475e1a2984d9ad2cb1673c137e5b17 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 28 Nov 2022 19:01:01 +0800
Subject: [PATCH 25/50] fix(nc-gui): lint

---
 packages/nc-gui/components/cell/DateTimePicker.vue        | 2 +-
 packages/nc-gui/components/dlg/KeyboardShortcuts.vue      | 4 ----
 packages/nc-gui/components/virtual-cell/Formula.vue       | 4 +---
 packages/nc-gui/components/virtual-cell/Rollup.vue        | 4 +---
 packages/nc-gui/pages/[projectType]/[projectId]/index.vue | 1 -
 5 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index 2665b85f10..ce7245348c 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -172,4 +172,4 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
 :deep(.ant-picker-input > input[disabled]) {
   @apply !text-current;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/nc-gui/components/dlg/KeyboardShortcuts.vue b/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
index d7e3d4d2f6..fd867cc29b 100644
--- a/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
+++ b/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { useI18n } from '#imports'
-
 const { modelValue } = defineProps<{
   modelValue: boolean
 }>()
@@ -11,8 +9,6 @@ const dialogShow = computed({
   get: () => modelValue,
   set: (v) => emit('update:modelValue', v),
 })
-
-const { t } = useI18n()
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/virtual-cell/Formula.vue b/packages/nc-gui/components/virtual-cell/Formula.vue
index e30f6ed14d..952d74dbf6 100644
--- a/packages/nc-gui/components/virtual-cell/Formula.vue
+++ b/packages/nc-gui/components/virtual-cell/Formula.vue
@@ -20,9 +20,7 @@ const showEditFormulaWarning = refAutoReset(false, timeout)
 
 const showClearFormulaWarning = refAutoReset(false, timeout)
 
-useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
-  showClearFormulaWarning.value = true
-})
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), () => (showClearFormulaWarning.value = true))
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/virtual-cell/Rollup.vue b/packages/nc-gui/components/virtual-cell/Rollup.vue
index 8da2823a86..ad77e9578f 100644
--- a/packages/nc-gui/components/virtual-cell/Rollup.vue
+++ b/packages/nc-gui/components/virtual-cell/Rollup.vue
@@ -9,9 +9,7 @@ const showEditWarning = refAutoReset(false, timeout)
 
 const showClearWarning = refAutoReset(false, timeout)
 
-useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
-  showClearWarning.value = true
-})
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), () => (showClearWarning.value = true))
 </script>
 
 <template>
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index 0782552aa1..021d4e1dd0 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -218,7 +218,6 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
       }
     }
   }
-  const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
   if (cmdOrCtrl) {
     switch (e.key) {
       case '/':

From ca67747b79529bfff82f01425b97d80785cf33fb Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 28 Nov 2022 19:03:45 +0800
Subject: [PATCH 26/50] fix(nc-gui): incorrect i18n keyname in
 KeyboardShortcuts

---
 packages/nc-gui/components/dlg/KeyboardShortcuts.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/dlg/KeyboardShortcuts.vue b/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
index fd867cc29b..822bc528f0 100644
--- a/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
+++ b/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
@@ -19,7 +19,7 @@ const dialogShow = computed({
     :wrap-class-name="`nc-modal-keyboard-shortcuts ${dialogShow ? 'active' : ''}`"
     @keydown.esc="dialogShow = false"
   >
-    <template #title> {{ $t('general.title.keyboardShortcut') }} </template>
+    <template #title> {{ $t('title.keyboardShortcut') }} </template>
     <!-- TODO:   -->
   </a-modal>
 </template>

From 034cfba7174a05fedaa4005a03d7c0d5d28907f2 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 28 Nov 2022 19:39:48 +0800
Subject: [PATCH 27/50] feat(nc-gui): focus monaco editor

---
 packages/nc-gui/components/monaco/Editor.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/nc-gui/components/monaco/Editor.vue b/packages/nc-gui/components/monaco/Editor.vue
index 56656cc3d4..b1a4f8cca9 100644
--- a/packages/nc-gui/components/monaco/Editor.vue
+++ b/packages/nc-gui/components/monaco/Editor.vue
@@ -117,6 +117,8 @@ onMounted(async () => {
         console.log(e)
       }
     })
+
+    editor.focus()
   }
 })
 

From 507a1f496af585224b2ffe62fa8b081348c6a673 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 28 Nov 2022 19:40:26 +0800
Subject: [PATCH 28/50] feat(nc-gui): keyboard maneuver for json cell

---
 packages/nc-gui/components/cell/Json.vue      | 32 ++++++++++++++++++-
 .../nc-gui/components/smartsheet/Grid.vue     |  4 +++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/Json.vue b/packages/nc-gui/components/cell/Json.vue
index e21ce6d9df..f89ddf87aa 100644
--- a/packages/nc-gui/components/cell/Json.vue
+++ b/packages/nc-gui/components/cell/Json.vue
@@ -1,5 +1,17 @@
 <script setup lang="ts">
-import { Modal as AModal, EditModeInj, IsFormInj, ReadonlyInj, computed, inject, ref, useVModel, watch } from '#imports'
+import {
+  Modal as AModal,
+  ActiveCellInj,
+  EditModeInj,
+  IsFormInj,
+  ReadonlyInj,
+  computed,
+  inject,
+  ref,
+  useSelectedCellKeyupListener,
+  useVModel,
+  watch,
+} from '#imports'
 
 interface Props {
   modelValue: string | Record<string, any> | undefined
@@ -15,6 +27,8 @@ const emits = defineEmits<Emits>()
 
 const editEnabled = inject(EditModeInj, ref(false))
 
+const active = inject(ActiveCellInj, ref(false))
+
 const isForm = inject(IsFormInj, ref(false))
 
 const readonly = inject(ReadonlyInj)
@@ -89,6 +103,22 @@ watch(editEnabled, () => {
 
   localValue.value = vModel.value
 })
+
+useSelectedCellKeyupListener(active, (e) => {
+  switch (e.key) {
+    case 'Enter':
+      e.stopPropagation()
+      if (e.shiftKey) {
+        return true
+      }
+      if (editEnabled.value) {
+        onSave()
+      } else {
+        editEnabled.value = true
+      }
+      break
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 384ed062d6..2229df6742 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -205,6 +205,10 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange
         return true
       }
     } else if (e.key === 'Enter') {
+      if (e.shiftKey) {
+        // add a line break for types like LongText / JSON
+        return true
+      }
       if (editEnabled) {
         editEnabled = false
         return true

From 7c2a586b6266af2285e024e9c4f7c66f4626a618 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 28 Nov 2022 19:45:56 +0800
Subject: [PATCH 29/50] chore(nc-gui): lint

---
 packages/nc-gui/components/smartsheet/Grid.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 03070817a1..0d07c26672 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -255,8 +255,7 @@ const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyVa
         }
       }
     }
-  },
-)
+  })
 
 function scrollToCell(row?: number | null, col?: number | null) {
   row = row ?? selectedCell.row

From 49655b7c0a6689c3134f9d31a023134524089bfb Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 29 Nov 2022 13:44:01 +0800
Subject: [PATCH 30/50] feat(nc-gui): add isDrawerOrModalExist

---
 packages/nc-gui/components/dashboard/TreeView.vue        | 5 +++--
 packages/nc-gui/components/general/FullScreen.vue        | 6 ++++--
 packages/nc-gui/components/general/ShareBaseButton.vue   | 4 ++--
 packages/nc-gui/components/smartsheet/Grid.vue           | 7 ++++---
 .../nc-gui/pages/[projectType]/[projectId]/index.vue     | 9 +++++----
 packages/nc-gui/utils/browserUtils.ts                    | 1 +
 6 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 23090adc02..fc8b89847a 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -6,7 +6,9 @@ import GithubButton from 'vue-github-button'
 import type { VNodeRef } from '#imports'
 import {
   Empty,
+  TabType,
   computed,
+  isDrawerOrModalExist,
   isMac,
   reactive,
   ref,
@@ -20,7 +22,6 @@ import {
   useUIPermission,
   watchEffect,
 } from '#imports'
-import { TabType } from '~/lib'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiTableLarge from '~icons/mdi/table-large'
 
@@ -224,7 +225,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     switch (e.keyCode) {
       case 84: {
         // ALT + T
-        if (isUIAllowed('table-create')) {
+        if (isUIAllowed('table-create') && !isDrawerOrModalExist()) {
           // prevent the key `T` is inputted to table title input
           e.preventDefault()
           openTableCreateDialog()
diff --git a/packages/nc-gui/components/general/FullScreen.vue b/packages/nc-gui/components/general/FullScreen.vue
index 5b7816e838..6c3fe32bd6 100644
--- a/packages/nc-gui/components/general/FullScreen.vue
+++ b/packages/nc-gui/components/general/FullScreen.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, isMac, useSidebar } from '#imports'
+import { computed, isDrawerOrModalExist, isMac, useSidebar } from '#imports'
 
 const rightSidebar = useSidebar('nc-right-sidebar')
 
@@ -19,7 +19,9 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     switch (e.keyCode) {
       case 70: {
         // ALT + F
-        isSidebarsOpen.value = !isSidebarsOpen.value
+        if (!isDrawerOrModalExist()) {
+          isSidebarsOpen.value = !isSidebarsOpen.value
+        }
         break
       }
     }
diff --git a/packages/nc-gui/components/general/ShareBaseButton.vue b/packages/nc-gui/components/general/ShareBaseButton.vue
index 4eeb37a3b9..45cd622554 100644
--- a/packages/nc-gui/components/general/ShareBaseButton.vue
+++ b/packages/nc-gui/components/general/ShareBaseButton.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isMac, useRoute, useUIPermission } from '#imports'
+import { isDrawerOrModalExist, isMac, useRoute, useUIPermission } from '#imports'
 
 const route = useRoute()
 
@@ -22,7 +22,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     switch (e.keyCode) {
       case 73: {
         // ALT + I
-        if (isShareBaseAllowed.value) {
+        if (isShareBaseAllowed.value && !isDrawerOrModalExist()) {
           showUserModal.value = true
         }
         break
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 0d07c26672..083e96dd3f 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -11,6 +11,7 @@ import {
   IsGridInj,
   IsLockedInj,
   MetaInj,
+  NavigateDir,
   OpenNewRecordFormHookInj,
   PaginationDataInj,
   ReadonlyInj,
@@ -22,6 +23,7 @@ import {
   extractPkFromRow,
   inject,
   isColumnRequiredAndNull,
+  isDrawerOrModalExist,
   isMac,
   message,
   onBeforeUnmount,
@@ -42,7 +44,6 @@ import {
   watch,
 } from '#imports'
 import type { Row } from '~/lib'
-import { NavigateDir } from '~/lib'
 
 const { t } = useI18n()
 
@@ -178,8 +179,8 @@ const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyVa
       return true
     }
 
-    // if expanded form is active skip keyboard event handling
-    if (document.querySelector('.nc-drawer-expanded-form.active')) {
+    // skip keyboard event handling if there is a drawer / modal
+    if (isDrawerOrModalExist()) {
       return true
     }
 
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index 021d4e1dd0..71af000752 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import tinycolor from 'tinycolor2'
 import {
+  TabType,
   computed,
   definePageMeta,
+  extractSdkResponseErrorMsg,
+  isDrawerOrModalExist,
   isMac,
   message,
   navigateTo,
@@ -26,8 +29,6 @@ import {
   useTheme,
   useUIPermission,
 } from '#imports'
-import { TabType } from '~/lib'
-import { extractSdkResponseErrorMsg } from '~/utils'
 
 definePageMeta({
   hideHeader: true,
@@ -210,7 +211,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     switch (e.keyCode) {
       case 188: {
         // ALT + ,
-        if (isUIAllowed('settings')) {
+        if (isUIAllowed('settings') && !isDrawerOrModalExist()) {
           e.preventDefault()
           toggleDialog(true, 'teamAndAuth')
         }
@@ -221,7 +222,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
   if (cmdOrCtrl) {
     switch (e.key) {
       case '/':
-        if (!document.querySelector('.nc-modal-keyboard-shortcuts.active')) {
+        if (!isDrawerOrModalExist()) {
           openKeyboardShortcutDialog()
         }
         break
diff --git a/packages/nc-gui/utils/browserUtils.ts b/packages/nc-gui/utils/browserUtils.ts
index a4efcc1801..1532a483c0 100644
--- a/packages/nc-gui/utils/browserUtils.ts
+++ b/packages/nc-gui/utils/browserUtils.ts
@@ -1,2 +1,3 @@
 // refer - https://stackoverflow.com/a/11752084
 export const isMac = () => /Mac/i.test(navigator.platform)
+export const isDrawerOrModalExist = () => document.querySelector('.ant-modal, .ant-drawer')

From 8e3a666348e23cd5b4e81cbb952c8b8864cce62f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 29 Nov 2022 13:45:59 +0800
Subject: [PATCH 31/50] fix(nc-gui): auto focus on json cells only

---
 packages/nc-gui/components/monaco/Editor.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/monaco/Editor.vue b/packages/nc-gui/components/monaco/Editor.vue
index b1a4f8cca9..06a2b952d0 100644
--- a/packages/nc-gui/components/monaco/Editor.vue
+++ b/packages/nc-gui/components/monaco/Editor.vue
@@ -3,7 +3,7 @@ import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 import TypescriptWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
 import type { editor as MonacoEditor } from 'monaco-editor'
-import { deepCompare, onMounted, ref, watch } from '#imports'
+import { deepCompare, onMounted, ref, watch, isDrawerOrModalExist } from '#imports'
 
 interface Props {
   modelValue: string | Record<string, any>
@@ -118,7 +118,10 @@ onMounted(async () => {
       }
     })
 
-    editor.focus()
+    if (!isDrawerOrModalExist()) {
+      // auto focus on json cells only
+      editor.focus()
+    }
   }
 })
 

From dae1c53a91489cf1a26cfd2adc4db61e4630e3b8 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 29 Nov 2022 13:57:39 +0800
Subject: [PATCH 32/50] feat(nc-gui): skip keydown logic if drawer / modal is
 active

---
 .../nc-gui/components/cell/DatePicker.vue     |  9 +++++----
 .../nc-gui/components/cell/DateTimePicker.vue | 19 ++++++++++++++-----
 packages/nc-gui/components/monaco/Editor.vue  |  2 +-
 .../nc-gui/components/smartsheet/Grid.vue     |  4 ++--
 4 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index 1f3469fea4..c0c662732d 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -7,6 +7,7 @@ import {
   ReadonlyInj,
   computed,
   inject,
+  isDrawerOrModalExist,
   ref,
   useSelectedCellKeyupListener,
   watch,
@@ -76,8 +77,8 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
       e.stopPropagation()
-      // if expanded form is active skip resetting the active cell
-      if (document.querySelector('.nc-drawer-expanded-form.active')) {
+      // skip if drawer / modal is active
+      if (isDrawerOrModalExist()) {
         return
       }
       if (!open.value) {
@@ -93,8 +94,8 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
       }
       break
     case 'Escape':
-      // if expanded form is active skip resetting the active cell
-      if (document.querySelector('.nc-drawer-expanded-form.active')) {
+      // skip if drawer / modal is active
+      if (isDrawerOrModalExist()) {
         return
       }
       if (open.value) {
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index ce7245348c..8819d23ce7 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -1,6 +1,15 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ActiveCellInj, ReadonlyInj, inject, ref, useProject, useSelectedCellKeyupListener, watch } from '#imports'
+import {
+  ActiveCellInj,
+  ReadonlyInj,
+  inject,
+  isDrawerOrModalExist,
+  ref,
+  useProject,
+  useSelectedCellKeyupListener,
+  watch,
+} from '#imports'
 
 interface Props {
   modelValue?: string | null
@@ -65,8 +74,8 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
       e.stopPropagation()
-      // if expanded form is active skip resetting the active cell
-      if (document.querySelector('.nc-drawer-expanded-form.active')) {
+      // skip if drawer / modal is active
+      if (isDrawerOrModalExist()) {
         return
       }
       if (!open.value) {
@@ -78,8 +87,8 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
       }
       break
     case 'Escape':
-      // if expanded form is active skip resetting the active cell
-      if (document.querySelector('.nc-drawer-expanded-form.active')) {
+      // skip if drawer / modal is active
+      if (isDrawerOrModalExist()) {
         return
       }
       if (open.value) {
diff --git a/packages/nc-gui/components/monaco/Editor.vue b/packages/nc-gui/components/monaco/Editor.vue
index 06a2b952d0..ee913fd19c 100644
--- a/packages/nc-gui/components/monaco/Editor.vue
+++ b/packages/nc-gui/components/monaco/Editor.vue
@@ -3,7 +3,7 @@ import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 import TypescriptWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
 import type { editor as MonacoEditor } from 'monaco-editor'
-import { deepCompare, onMounted, ref, watch, isDrawerOrModalExist } from '#imports'
+import { deepCompare, isDrawerOrModalExist, onMounted, ref, watch } from '#imports'
 
 interface Props {
   modelValue: string | Record<string, any>
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 083e96dd3f..b934fad0b9 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -442,8 +442,8 @@ onClickOutside(smartTable, (e) => {
   )
     return
 
-  // if expanded form is active skip resetting the active cell
-  if (document.querySelector('.nc-drawer-expanded-form.active')) {
+  // skip if drawer / modal is active
+  if (isDrawerOrModalExist()) {
     return
   }
 

From f461d854c25fce61e28af68f2eda385ba414382f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 29 Nov 2022 16:30:05 +0800
Subject: [PATCH 33/50] feat(nc-gui): keyboard shortcuts

---
 .../components/dlg/KeyboardShortcuts.vue      | 117 +++++++++++++++++-
 1 file changed, 116 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/dlg/KeyboardShortcuts.vue b/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
index 822bc528f0..02b7684498 100644
--- a/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
+++ b/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { isMac } from '#imports'
+
 const { modelValue } = defineProps<{
   modelValue: boolean
 }>()
@@ -9,6 +11,92 @@ const dialogShow = computed({
   get: () => modelValue,
   set: (v) => emit('update:modelValue', v),
 })
+
+const renderCmdOrCtrlKey = () => {
+  return isMac() ? '⌘' : 'CTRL'
+}
+
+const shortcutList = [
+  {
+    title: 'General',
+    shortcuts: [
+      {
+        keys: ['ALT', 'T'],
+        behaviour: 'Insert new table',
+      },
+      {
+        keys: ['ALT', 'R'],
+        behaviour: 'Insert new row',
+      },
+      {
+        keys: ['ALT', 'C'],
+        behaviour: 'Insert new column',
+      },
+      {
+        keys: ['ALT', 'F'],
+        behaviour: 'Toggle fullscreen mode',
+      },
+      {
+        keys: ['ALT', 'I'],
+        behaviour: 'Invite a member to team',
+      },
+    ],
+  },
+  {
+    title: 'Grid View',
+    shortcuts: [
+      {
+        keys: [renderCmdOrCtrlKey(), '←'],
+        behaviour: 'Jump to leftmost column in this row',
+      },
+      {
+        keys: [renderCmdOrCtrlKey(), '→'],
+        behaviour: 'Jump to rightmost column in this row',
+      },
+      {
+        keys: [renderCmdOrCtrlKey(), '↑'],
+        behaviour: 'Jump to first record in this column (in same page)',
+      },
+      {
+        keys: [renderCmdOrCtrlKey(), '↓'],
+        behaviour: 'Jump to last record in this column (in same page)',
+      },
+      {
+        keys: [renderCmdOrCtrlKey(), 'C'],
+        behaviour: 'Copy cell contents',
+      },
+      {
+        keys: ['Enter'],
+        behaviour: 'Switch cell in focus to EDIT mode; opens modal / picker if cell is associated with one',
+      },
+      {
+        keys: ['Esc'],
+        behaviour: 'Exit cell EDIT mode',
+      },
+      {
+        keys: ['Delete'],
+        behaviour: 'Clear cell',
+      },
+      {
+        keys: ['Space'],
+        behaviour: 'Expand current row',
+      },
+      {
+        keys: ['←', '→', '↑', '↓'],
+        behaviour: 'General cell navigation',
+      },
+    ],
+  },
+  {
+    title: 'Expanded Form',
+    shortcuts: [
+      {
+        keys: [renderCmdOrCtrlKey(), 'Enter'],
+        behaviour: 'Save current expanded row item',
+      },
+    ],
+  },
+]
 </script>
 
 <template>
@@ -20,6 +108,33 @@ const dialogShow = computed({
     @keydown.esc="dialogShow = false"
   >
     <template #title> {{ $t('title.keyboardShortcut') }} </template>
-    <!-- TODO:   -->
+    <a-list
+      v-for="(shortcutItem, shortcutItemIdx) of shortcutList"
+      :key="shortcutItemIdx"
+      class="nc-shortcut-list !mb-5"
+      size="small"
+      bordered
+      :data-source="shortcutItem.shortcuts"
+    >
+      <template #header>
+        <div class="font-bold">{{ shortcutItem.title }}</div>
+      </template>
+      <template #renderItem="{ item }">
+        <a-list-item>
+          <span class="inline-block">
+            <kbd
+              v-for="(key, keyIdx) of item.keys"
+              :key="keyIdx"
+              class="ml-[1px] mr-[1px] px-[8px] py-[3px] border-b-[3px] uppercase border-1 border-solid border-primary border-opacity-50 rounded"
+            >
+              {{ key }}
+            </kbd>
+          </span>
+          <span class="inline-block text-right">
+            {{ item.behaviour }}
+          </span>
+        </a-list-item>
+      </template>
+    </a-list>
   </a-modal>
 </template>

From d232bbd8f63cf2e33f0144cacae6643603ce74a5 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 29 Nov 2022 18:20:15 +0800
Subject: [PATCH 34/50] fix(nc-gui): add relative so that the absolute overlay
 only take up to the input in expanded form

---
 packages/nc-gui/components/smartsheet/expanded-form/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index d345b73281..2f1b27ac46 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -167,7 +167,7 @@ export default {
 
               <div
                 :ref="i ? null : (el) => (cellWrapperEl = el)"
-                class="!bg-white rounded px-1 min-h-[35px] flex items-center mt-2"
+                class="!bg-white rounded px-1 min-h-[35px] flex items-center mt-2 relative"
               >
                 <LazySmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row" :column="col" />
 

From 1231b0bfedfd8edbe7060a03e186c71cc527403e Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 29 Nov 2022 20:13:16 +0800
Subject: [PATCH 35/50] feat(nc-gui): add active class to <a-modal/>

---
 packages/nc-gui/components/account/Token.vue              | 1 +
 packages/nc-gui/components/account/UsersModal.vue         | 1 +
 .../nc-gui/components/dashboard/settings/AppStore.vue     | 2 ++
 packages/nc-gui/components/dashboard/settings/Modal.vue   | 1 +
 packages/nc-gui/components/dlg/AirtableImport.vue         | 1 +
 packages/nc-gui/components/dlg/KeyboardShortcuts.vue      | 1 +
 packages/nc-gui/components/dlg/QuickImport.vue            | 1 +
 packages/nc-gui/components/dlg/TableCreate.vue            | 1 +
 packages/nc-gui/components/dlg/TableRename.vue            | 1 +
 packages/nc-gui/components/dlg/ViewCreate.vue             | 8 +++++++-
 packages/nc-gui/components/dlg/ViewDelete.vue             | 8 +++++++-
 packages/nc-gui/components/shared-view/AskPassword.vue    | 1 +
 packages/nc-gui/components/smartsheet/Kanban.vue          | 7 ++++++-
 packages/nc-gui/components/smartsheet/toolbar/Erd.vue     | 1 +
 .../nc-gui/components/smartsheet/toolbar/MoreActions.vue  | 1 +
 .../nc-gui/components/smartsheet/toolbar/ShareView.vue    | 1 +
 .../nc-gui/components/smartsheet/toolbar/ViewActions.vue  | 1 +
 .../nc-gui/components/tabs/auth/ApiTokenManagement.vue    | 2 ++
 packages/nc-gui/components/tabs/auth/UserManagement.vue   | 1 +
 .../components/tabs/auth/user-management/UsersModal.vue   | 1 +
 .../components/virtual-cell/components/ListItems.vue      | 1 +
 packages/nc-gui/pages/[projectType]/form/[viewId].vue     | 1 +
 packages/nc-gui/pages/index/index/create-external.vue     | 2 ++
 23 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/account/Token.vue b/packages/nc-gui/components/account/Token.vue
index 967c1ef3b3..87646e8d0c 100644
--- a/packages/nc-gui/components/account/Token.vue
+++ b/packages/nc-gui/components/account/Token.vue
@@ -211,6 +211,7 @@ const descriptionInput = (el) => {
 
     <a-modal
       v-model:visible="showNewTokenModal"
+      :class="{ active: showNewTokenModal }"
       :closable="false"
       width="28rem"
       centered
diff --git a/packages/nc-gui/components/account/UsersModal.vue b/packages/nc-gui/components/account/UsersModal.vue
index 3479fb6e8f..09700f5ff8 100644
--- a/packages/nc-gui/components/account/UsersModal.vue
+++ b/packages/nc-gui/components/account/UsersModal.vue
@@ -115,6 +115,7 @@ const emailInput = ref((el) => {
 
 <template>
   <a-modal
+    :class="{ active: show }"
     :footer="null"
     centered
     :visible="show"
diff --git a/packages/nc-gui/components/dashboard/settings/AppStore.vue b/packages/nc-gui/components/dashboard/settings/AppStore.vue
index 0c8d0acbde..f0d9e1ebb4 100644
--- a/packages/nc-gui/components/dashboard/settings/AppStore.vue
+++ b/packages/nc-gui/components/dashboard/settings/AppStore.vue
@@ -72,6 +72,7 @@ onMounted(async () => {
 <template>
   <a-modal
     v-model:visible="showPluginInstallModal"
+    :class="{ active: showPluginInstallModal }"
     :closable="false"
     centered
     min-height="300"
@@ -89,6 +90,7 @@ onMounted(async () => {
 
   <a-modal
     v-model:visible="showPluginUninstallModal"
+    :class="{ active: showPluginUninstallModal }"
     :closable="false"
     width="24rem"
     centered
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index a5d572ebb1..db7a2bd156 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -163,6 +163,7 @@ watch(
 <template>
   <a-modal
     v-model:visible="vModel"
+    :class="{ active: vModel }"
     :footer="null"
     width="max(90vw, 600px)"
     :closable="false"
diff --git a/packages/nc-gui/components/dlg/AirtableImport.vue b/packages/nc-gui/components/dlg/AirtableImport.vue
index 1f0ccbe26c..ca688ceefd 100644
--- a/packages/nc-gui/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui/components/dlg/AirtableImport.vue
@@ -232,6 +232,7 @@ onBeforeUnmount(() => {
 <template>
   <a-modal
     v-model:visible="dialogShow"
+    :class="{ active: dialogShow }"
     width="max(30vw, 600px)"
     class="p-2"
     wrap-class-name="nc-modal-airtable-import"
diff --git a/packages/nc-gui/components/dlg/KeyboardShortcuts.vue b/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
index 02b7684498..0e1df6402d 100644
--- a/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
+++ b/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
@@ -102,6 +102,7 @@ const shortcutList = [
 <template>
   <a-modal
     v-model:visible="dialogShow"
+    :class="{ active: dialogShow }"
     width="max(30vw, 600px)"
     class="p-2"
     :wrap-class-name="`nc-modal-keyboard-shortcuts ${dialogShow ? 'active' : ''}`"
diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index c62058240e..fd8bdd188b 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -345,6 +345,7 @@ const beforeUpload = (file: UploadFile) => {
 <template>
   <a-modal
     v-model:visible="dialogShow"
+    :class="{ active: dialogShow }"
     :width="modalWidth"
     wrap-class-name="nc-modal-quick-import"
     @keydown.esc="dialogShow = false"
diff --git a/packages/nc-gui/components/dlg/TableCreate.vue b/packages/nc-gui/components/dlg/TableCreate.vue
index 46fcb06b87..e950102b36 100644
--- a/packages/nc-gui/components/dlg/TableCreate.vue
+++ b/packages/nc-gui/components/dlg/TableCreate.vue
@@ -99,6 +99,7 @@ onMounted(() => {
 <template>
   <a-modal
     v-model:visible="dialogShow"
+    :class="{ active: dialogShow }"
     width="max(30vw, 600px)"
     centered
     wrap-class-name="nc-modal-table-create"
diff --git a/packages/nc-gui/components/dlg/TableRename.vue b/packages/nc-gui/components/dlg/TableRename.vue
index 3c18db606c..f395295e2b 100644
--- a/packages/nc-gui/components/dlg/TableRename.vue
+++ b/packages/nc-gui/components/dlg/TableRename.vue
@@ -149,6 +149,7 @@ const renameTable = async () => {
 <template>
   <a-modal
     v-model:visible="dialogShow"
+    :class="{ active: dialogShow }"
     :title="$t('activity.renameTable')"
     :mask-closable="false"
     wrap-class-name="nc-modal-table-rename"
diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index 5043c5754c..c2db90d5eb 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -182,7 +182,13 @@ async function onSubmit() {
 </script>
 
 <template>
-  <a-modal v-model:visible="vModel" class="!top-[35%]" :confirm-loading="loading" wrap-class-name="nc-modal-view-create">
+  <a-modal
+    v-model:visible="vModel"
+    class="!top-[35%]"
+    :class="{ active: vModel }"
+    :confirm-loading="loading"
+    wrap-class-name="nc-modal-view-create"
+  >
     <template #title>
       {{ $t(`general.${selectedViewId ? 'duplicate' : 'create'}`) }} <span class="capitalize">{{ typeAlias }}</span>
       {{ $t('objects.view') }}
diff --git a/packages/nc-gui/components/dlg/ViewDelete.vue b/packages/nc-gui/components/dlg/ViewDelete.vue
index 5614a8bd91..905c975ffd 100644
--- a/packages/nc-gui/components/dlg/ViewDelete.vue
+++ b/packages/nc-gui/components/dlg/ViewDelete.vue
@@ -48,7 +48,13 @@ async function onDelete() {
 </script>
 
 <template>
-  <a-modal v-model:visible="vModel" class="!top-[35%]" :confirm-loading="isLoading" wrap-class-name="nc-modal-view-delete">
+  <a-modal
+    v-model:visible="vModel"
+    class="!top-[35%]"
+    :class="{ active: vModel }"
+    :confirm-loading="isLoading"
+    wrap-class-name="nc-modal-view-delete"
+  >
     <template #title> {{ $t('general.delete') }} {{ $t('objects.view') }} </template>
 
     {{ $t('msg.info.deleteViewConfirmation') }}
diff --git a/packages/nc-gui/components/shared-view/AskPassword.vue b/packages/nc-gui/components/shared-view/AskPassword.vue
index 3edce49ca7..f7799d72fb 100644
--- a/packages/nc-gui/components/shared-view/AskPassword.vue
+++ b/packages/nc-gui/components/shared-view/AskPassword.vue
@@ -33,6 +33,7 @@ const focus: VNodeRef = (el: typeof InputPassword) => el?.$el?.querySelector('in
 <template>
   <a-modal
     v-model:visible="vModel"
+    :class="{ active: vModel }"
     :closable="false"
     width="28rem"
     centered
diff --git a/packages/nc-gui/components/smartsheet/Kanban.vue b/packages/nc-gui/components/smartsheet/Kanban.vue
index 973d0ed10e..26578fd027 100644
--- a/packages/nc-gui/components/smartsheet/Kanban.vue
+++ b/packages/nc-gui/components/smartsheet/Kanban.vue
@@ -620,7 +620,12 @@ watch(view, async (nextView) => {
     />
   </Suspense>
 
-  <a-modal v-model:visible="deleteStackVModel" class="!top-[35%]" wrap-class-name="nc-modal-kanban-delete-stack">
+  <a-modal
+    v-model:visible="deleteStackVModel"
+    class="!top-[35%]"
+    :class="{ active: deleteStackVModel }"
+    wrap-class-name="nc-modal-kanban-delete-stack"
+  >
     <template #title>
       {{ $t('activity.deleteKanbanStack') }}
     </template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/Erd.vue b/packages/nc-gui/components/smartsheet/toolbar/Erd.vue
index ea1b24bc49..2dac0c07bd 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/Erd.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/Erd.vue
@@ -17,6 +17,7 @@ const selectedView = inject(ActiveViewInj)
 <template>
   <a-modal
     v-model:visible="vModel"
+    :class="{ active: vModel }"
     size="small"
     :footer="null"
     width="max(900px,60vw)"
diff --git a/packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue b/packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue
index 8a6e9eb7c0..7c2826673a 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/MoreActions.vue
@@ -172,6 +172,7 @@ const exportFile = async (exportType: ExportTypes) => {
 
     <a-modal
       v-model:visible="sharedViewListDlg"
+      :class="{ active: sharedViewListDlg }"
       :title="$t('activity.listSharedView')"
       width="max(900px,60vw)"
       :footer="null"
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index 23fc12f141..0304f6a8fd 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -217,6 +217,7 @@ const isRtl = computed(() => isRtlLang(locale.value as any))
     <!-- This view is shared via a private link -->
     <a-modal
       v-model:visible="showShareModel"
+      :class="{ active: showShareModel }"
       size="small"
       :title="$t('msg.info.privateLink')"
       :footer="null"
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
index 8289ff6dde..999ab2efc5 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
@@ -241,6 +241,7 @@ useMenuCloseOnEsc(open)
 
     <a-modal
       v-model:visible="sharedViewListDlg"
+      :class="{ active: sharedViewListDlg }"
       :title="$t('activity.listSharedView')"
       width="max(900px,60vw)"
       :footer="null"
diff --git a/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue b/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
index 08b1814c56..1110093cec 100644
--- a/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
+++ b/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
@@ -90,6 +90,7 @@ onMounted(() => {
 <template>
   <a-modal
     v-model:visible="showNewTokenModal"
+    :class="{ active: showNewTokenModal }"
     :closable="false"
     width="28rem"
     centered
@@ -133,6 +134,7 @@ onMounted(() => {
 
   <a-modal
     v-model:visible="showDeleteTokenModal"
+    :class="{ active: showDeleteTokenModal }"
     :closable="false"
     width="28rem"
     centered
diff --git a/packages/nc-gui/components/tabs/auth/UserManagement.vue b/packages/nc-gui/components/tabs/auth/UserManagement.vue
index 05941c2470..de04d7e274 100644
--- a/packages/nc-gui/components/tabs/auth/UserManagement.vue
+++ b/packages/nc-gui/components/tabs/auth/UserManagement.vue
@@ -183,6 +183,7 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
 
     <a-modal
       v-model:visible="showUserDeleteModal"
+      :class="{ active: showUserDeleteModal }"
       :closable="false"
       width="28rem"
       centered
diff --git a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
index 606cf30784..891c2d030c 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
@@ -145,6 +145,7 @@ const emailField = (inputEl: typeof Input) => {
     :footer="null"
     centered
     :visible="show"
+    :class="{ active: show }"
     :closable="false"
     width="max(50vw, 44rem)"
     wrap-class-name="nc-modal-invite-user-and-share-base"
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index 9e94cab14c..63519f5835 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -159,6 +159,7 @@ const activeRow = (vNode?: InstanceType<typeof Card>) => {
 <template>
   <a-modal
     v-model:visible="vModel"
+    :class="{ active: vModel }"
     :footer="null"
     :title="$t('activity.linkRecord')"
     :body-style="{ padding: 0 }"
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId].vue b/packages/nc-gui/pages/[projectType]/form/[viewId].vue
index b94c7df761..7645e223f6 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId].vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId].vue
@@ -64,6 +64,7 @@ watch(
 
     <a-modal
       v-model:visible="passwordDlg"
+      :class="{ active: passwordDlg }"
       :closable="false"
       width="min(100%, 450px)"
       centered
diff --git a/packages/nc-gui/pages/index/index/create-external.vue b/packages/nc-gui/pages/index/index/create-external.vue
index fe726570ca..f612c417b1 100644
--- a/packages/nc-gui/pages/index/index/create-external.vue
+++ b/packages/nc-gui/pages/index/index/create-external.vue
@@ -551,6 +551,7 @@ onMounted(async () => {
 
     <a-modal
       v-model:visible="configEditDlg"
+      :class="{ active: configEditDlg }"
       :title="$t('activity.editConnJson')"
       width="600px"
       wrap-class-name="nc-modal-edit-connection-json"
@@ -562,6 +563,7 @@ onMounted(async () => {
     <!--    Use Connection URL -->
     <a-modal
       v-model:visible="importURLDlg"
+      :class="{ active: importURLDlg }"
       :title="$t('activity.useConnectionUrl')"
       width="600px"
       :ok-text="$t('general.ok')"

From ab88c3fba6d5ce565eb23fb79086aa483f2abccc Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 29 Nov 2022 20:13:35 +0800
Subject: [PATCH 36/50] feat(nc-gui): check active drawer or modal only

---
 packages/nc-gui/utils/browserUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/utils/browserUtils.ts b/packages/nc-gui/utils/browserUtils.ts
index 1532a483c0..655021bcbb 100644
--- a/packages/nc-gui/utils/browserUtils.ts
+++ b/packages/nc-gui/utils/browserUtils.ts
@@ -1,3 +1,3 @@
 // refer - https://stackoverflow.com/a/11752084
 export const isMac = () => /Mac/i.test(navigator.platform)
-export const isDrawerOrModalExist = () => document.querySelector('.ant-modal, .ant-drawer')
+export const isDrawerOrModalExist = () => document.querySelector('.ant-modal.active, .ant-drawer.active')

From 09991130e8aab319b10a18f9f8ef8e3c47f237fe Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 30 Nov 2022 11:39:58 +0800
Subject: [PATCH 37/50] fix(nc-gui): remove active class for .ant-drawer

.ant-drawer will be destroyed when closed. no active class is required.
---
 packages/nc-gui/utils/browserUtils.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/utils/browserUtils.ts b/packages/nc-gui/utils/browserUtils.ts
index 655021bcbb..6a07acb659 100644
--- a/packages/nc-gui/utils/browserUtils.ts
+++ b/packages/nc-gui/utils/browserUtils.ts
@@ -1,3 +1,4 @@
 // refer - https://stackoverflow.com/a/11752084
 export const isMac = () => /Mac/i.test(navigator.platform)
-export const isDrawerOrModalExist = () => document.querySelector('.ant-modal.active, .ant-drawer.active')
+// .ant-drawer will be destroyed when closed. no active class is required.
+export const isDrawerOrModalExist = () => document.querySelector('.ant-modal.active, .ant-drawer')

From e3fc9b2b00f9329756a468c9bb9c432c0f488fe9 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 30 Nov 2022 12:10:20 +0800
Subject: [PATCH 38/50] fix(nc-gui): use ant-drawer-open instead

---
 packages/nc-gui/utils/browserUtils.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nc-gui/utils/browserUtils.ts b/packages/nc-gui/utils/browserUtils.ts
index 6a07acb659..2b48c5972b 100644
--- a/packages/nc-gui/utils/browserUtils.ts
+++ b/packages/nc-gui/utils/browserUtils.ts
@@ -1,4 +1,3 @@
 // refer - https://stackoverflow.com/a/11752084
 export const isMac = () => /Mac/i.test(navigator.platform)
-// .ant-drawer will be destroyed when closed. no active class is required.
-export const isDrawerOrModalExist = () => document.querySelector('.ant-modal.active, .ant-drawer')
+export const isDrawerOrModalExist = () => document.querySelector('.ant-modal.active, .ant-drawer-open')

From c61756bb786d510930573d9a25f4869d0451618f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 30 Nov 2022 12:13:56 +0800
Subject: [PATCH 39/50] feat(nc-gui): include keyboard short in help center

---
 .../nc-gui/components/general/SocialCard.vue  | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/general/SocialCard.vue b/packages/nc-gui/components/general/SocialCard.vue
index a94567b2fb..9b7bd8f87e 100644
--- a/packages/nc-gui/components/general/SocialCard.vue
+++ b/packages/nc-gui/components/general/SocialCard.vue
@@ -1,9 +1,27 @@
 <script setup lang="ts">
-import { enumColor as colors, useGlobal } from '#imports'
+import { enumColor as colors, useDialog, useGlobal, useNuxtApp } from '#imports'
+
+const { $e } = useNuxtApp()
 
 const { lang: currentLang } = useGlobal()
 
 const isRtlLang = $computed(() => ['fa', 'ar'].includes(currentLang.value))
+
+function openKeyboardShortcutDialog() {
+  $e('a:actions:keyboard-shortcut')
+
+  const isOpen = ref(true)
+
+  const { close } = useDialog(resolveComponent('DlgKeyboardShortcuts'), {
+    'modelValue': isOpen,
+    'onUpdate:modelValue': closeDialog,
+  })
+
+  function closeDialog() {
+    isOpen.value = false
+    close(1000)
+  }
+}
 </script>
 
 <template>
@@ -163,6 +181,13 @@ const isRtlLang = $computed(() => ['fa', 'ar'].includes(currentLang.value))
           </div>
         </nuxt-link>
       </a-list-item>
+
+      <a-list-item @click="openKeyboardShortcutDialog">
+        <div class="ml-3 flex items-center text-sm">
+          <MdiKeyboard class="text-lg text-primary" />
+          <span class="ml-4">{{ $t('title.keyboardShortcut') }}</span>
+        </div>
+      </a-list-item>
     </a-list>
   </a-card>
 </template>

From 0218d7f420d76c89a48b79f632cdd6b887542df8 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 30 Nov 2022 12:14:04 +0800
Subject: [PATCH 40/50] feat(nc-gui): add MdiKeyboard

---
 packages/nc-gui/components.d.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 3307595f19..b94d48f043 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -179,6 +179,7 @@ declare module '@vue/runtime-core' {
     MdiHook: typeof import('~icons/mdi/hook')['default']
     MdiInformation: typeof import('~icons/mdi/information')['default']
     MdiJson: typeof import('~icons/mdi/json')['default']
+    MdiKeyboard: typeof import('~icons/mdi/keyboard')['default']
     MdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
     MdiKeyChange: typeof import('~icons/mdi/key-change')['default']
     MdiKeyStar: typeof import('~icons/mdi/key-star')['default']

From 9e507d21ff1361b365de2f41720630e500e603d0 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 30 Nov 2022 12:16:47 +0800
Subject: [PATCH 41/50] fix(nc-gui): prevent default when pressing cmd + arrow
 keys

---
 packages/nc-gui/components/smartsheet/Grid.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index b934fad0b9..3f0f65fa46 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -210,6 +210,7 @@ const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyVa
     }
 
     if (cmdOrCtrl) {
+      e.preventDefault()
       switch (e.key) {
         case 'ArrowUp':
           selectedCell.row = 0

From d43f8859483e7a3aa035c995b2026858881359bb Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Wed, 30 Nov 2022 10:15:24 +0530
Subject: [PATCH 42/50] feat(test): Added test for keyboard shortcuts

---
 .../tabs/auth/user-management/UsersModal.vue  |   2 +-
 .../pages/Dashboard/ExpandedForm/index.ts     |   6 +-
 .../pages/Dashboard/Grid/Column/index.ts      |  16 ++-
 .../playwright/pages/Dashboard/Grid/index.ts  |   6 +-
 .../pages/Dashboard/Settings/Teams.ts         |   9 +-
 tests/playwright/pages/Dashboard/TreeView.ts  |  22 +++-
 .../pages/Dashboard/ViewSidebar/index.ts      |  12 +++
 .../pages/Dashboard/common/Cell/index.ts      |   8 ++
 .../tests/keyboardShortcuts.spec.ts           | 102 ++++++++++++++++++
 9 files changed, 168 insertions(+), 15 deletions(-)
 create mode 100644 tests/playwright/tests/keyboardShortcuts.spec.ts

diff --git a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
index 891c2d030c..24976c0bd8 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
@@ -178,7 +178,7 @@ const emailField = (inputEl: typeof Input) => {
             <a-alert class="mt-1" type="success" show-icon>
               <template #message>
                 <div class="flex flex-row justify-between items-center py-1">
-                  <div class="flex pl-2 text-green-700 text-xs">
+                  <div class="flex pl-2 text-green-700 text-xs" data-testid="invite-modal-invitation-url">
                     {{ inviteUrl }}
                   </div>
 
diff --git a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
index 05ba80d9c7..cc6dc16cde 100644
--- a/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
+++ b/tests/playwright/pages/Dashboard/ExpandedForm/index.ts
@@ -93,9 +93,11 @@ export class ExpandedFormPage extends BasePage {
     await this.rootPage.locator('[data-testid="grid-load-spinner"]').waitFor({ state: 'hidden' });
   }
 
-  async verify({ header, url }: { header: string; url: string }) {
+  async verify({ header, url }: { header: string; url?: string }) {
     await expect(this.get().locator(`.nc-expanded-form-header`).last()).toContainText(header);
-    await expect.poll(() => this.rootPage.url()).toContain(url);
+    if (url) {
+      await expect.poll(() => this.rootPage.url()).toContain(url);
+    }
   }
 
   async escape() {
diff --git a/tests/playwright/pages/Dashboard/Grid/Column/index.ts b/tests/playwright/pages/Dashboard/Grid/Column/index.ts
index ec9e4cc908..47d8580792 100644
--- a/tests/playwright/pages/Dashboard/Grid/Column/index.ts
+++ b/tests/playwright/pages/Dashboard/Grid/Column/index.ts
@@ -17,6 +17,14 @@ export class ColumnPageObject extends BasePage {
     return this.rootPage.locator('form[data-testid="add-or-edit-column"]');
   }
 
+  private getColumnHeader(title: string) {
+    return this.grid.get().locator(`th[data-title="${title}"]`);
+  }
+
+  async clickColumnHeader({ title }: { title: string }) {
+    await this.getColumnHeader(title).click();
+  }
+
   async create({
     title,
     type = 'SingleLineText',
@@ -141,7 +149,7 @@ export class ColumnPageObject extends BasePage {
   }
 
   async delete({ title }: { title: string }) {
-    await this.grid.get().locator(`th[data-title="${title}"] >> svg.ant-dropdown-trigger`).click();
+    await this.getColumnHeader(title).locator('svg.ant-dropdown-trigger').click();
     // await this.rootPage.locator('li[role="menuitem"]:has-text("Delete")').waitFor();
     await this.rootPage.locator('li[role="menuitem"]:has-text("Delete")').click();
 
@@ -162,7 +170,7 @@ export class ColumnPageObject extends BasePage {
     formula?: string;
     format?: string;
   }) {
-    await this.grid.get().locator(`th[data-title="${title}"] .nc-ui-dt-dropdown`).click();
+    await this.getColumnHeader(title).locator('.nc-ui-dt-dropdown').click();
     await this.rootPage.locator('li[role="menuitem"]:has-text("Edit")').click();
 
     await this.get().waitFor({ state: 'visible' });
@@ -201,9 +209,9 @@ export class ColumnPageObject extends BasePage {
 
   async verify({ title, isVisible = true }: { title: string; isVisible?: boolean }) {
     if (!isVisible) {
-      return await expect(await this.rootPage.locator(`th[data-title="${title}"]`)).not.toBeVisible();
+      return await expect(this.getColumnHeader(title)).not.toBeVisible();
     }
-    await await expect(this.rootPage.locator(`th[data-title="${title}"]`)).toContainText(title);
+    await expect(this.getColumnHeader(title)).toContainText(title);
   }
 
   async verifyRoleAccess(param: { role: string }) {
diff --git a/tests/playwright/pages/Dashboard/Grid/index.ts b/tests/playwright/pages/Dashboard/Grid/index.ts
index ef5f73ffa6..d2de7a901f 100644
--- a/tests/playwright/pages/Dashboard/Grid/index.ts
+++ b/tests/playwright/pages/Dashboard/Grid/index.ts
@@ -111,7 +111,11 @@ export class GridPage extends BasePage {
       await this.waitForResponse({
         uiAction: clickOnColumnHeaderToSave,
         requestUrlPathToMatch: 'api/v1/db/data/noco',
-        httpMethodsToMatch: ['PATCH'],
+        httpMethodsToMatch: [
+          'PATCH',
+          // since edit row on an empty row will emit POST request
+          'POST',
+        ],
         responseJsonMatcher: resJson => resJson?.[columnHeader] === value,
       });
     } else {
diff --git a/tests/playwright/pages/Dashboard/Settings/Teams.ts b/tests/playwright/pages/Dashboard/Settings/Teams.ts
index 26a42a5cf7..581bc5d698 100644
--- a/tests/playwright/pages/Dashboard/Settings/Teams.ts
+++ b/tests/playwright/pages/Dashboard/Settings/Teams.ts
@@ -28,10 +28,11 @@ export class TeamsPage extends BasePage {
     return this.rootPage.getByTestId('nc-share-base-sub-modal');
   }
 
-  async invite({ email, role }: { email: string; role: string }) {
+  async invite({ email, role, skipOpeningModal }: { email: string; role: string; skipOpeningModal?: boolean }) {
     email = this.prefixEmail(email);
 
-    await this.inviteTeamBtn.click();
+    if (!skipOpeningModal) await this.inviteTeamBtn.click();
+
     await this.inviteTeamModal.locator(`input[placeholder="E-mail"]`).fill(email);
     await this.inviteTeamModal.locator(`.nc-user-roles`).click();
     const userRoleModal = this.rootPage.locator(`.nc-dropdown-user-role`);
@@ -78,6 +79,10 @@ export class TeamsPage extends BasePage {
     return await this.getSharedBaseSubModal().locator(`.nc-url:visible`).textContent();
   }
 
+  async getInvitationUrl() {
+    return await this.rootPage.getByTestId('invite-modal-invitation-url').textContent();
+  }
+
   async sharedBaseActions({ action }: { action: string }) {
     const actionMenu = ['reload', 'copy url', 'open tab', 'copy embed code'];
     const index = actionMenu.indexOf(action);
diff --git a/tests/playwright/pages/Dashboard/TreeView.ts b/tests/playwright/pages/Dashboard/TreeView.ts
index 6b07007ba8..25efc080bc 100644
--- a/tests/playwright/pages/Dashboard/TreeView.ts
+++ b/tests/playwright/pages/Dashboard/TreeView.ts
@@ -20,6 +20,18 @@ export class TreeViewPage extends BasePage {
     return this.dashboard.get().locator('.nc-treeview-container');
   }
 
+  async isVisible() {
+    return await this.get().isVisible();
+  }
+
+  async verifyVisibility({ isVisible }: { isVisible: boolean }) {
+    if (isVisible) {
+      await expect(this.get()).toBeVisible();
+    } else {
+      await expect(this.get()).not.toBeVisible();
+    }
+  }
+
   async focusTable({ title }: { title: string }) {
     await this.get().locator(`.nc-project-tree-tbl-${title}`).focus();
   }
@@ -43,8 +55,8 @@ export class TreeViewPage extends BasePage {
     await this.dashboard.waitForTabRender({ title, mode });
   }
 
-  async createTable({ title }: { title: string }) {
-    await this.get().locator('.nc-add-new-table').click();
+  async createTable({ title, skipOpeningModal }: { title: string; skipOpeningModal?: boolean }) {
+    if (!skipOpeningModal) await this.get().locator('.nc-add-new-table').click();
 
     await this.dashboard.get().locator('.nc-modal-table-create').locator('.ant-modal-body').waitFor();
 
@@ -63,13 +75,13 @@ export class TreeViewPage extends BasePage {
 
   async verifyTable({ title, index, exists = true }: { title: string; index?: number; exists?: boolean }) {
     if (exists) {
-      await expect(this.get().locator(`.nc-project-tree-tbl-${title}`)).toBeVisible();
+      await expect(this.get().getByTestId(`tree-view-table-${title}`)).toHaveCount(1);
 
       if (index) {
-        await expect(await this.get().locator('.nc-tbl-title').nth(index)).toHaveText(title);
+        await expect(this.get().locator('.nc-tbl-title').nth(index)).toHaveText(title);
       }
     } else {
-      await expect(this.get().locator(`.nc-project-tree-tbl-${title}`)).toHaveCount(0);
+      await expect(this.get().getByTestId(`tree-view-table-${title}`)).toHaveCount(0);
     }
   }
 
diff --git a/tests/playwright/pages/Dashboard/ViewSidebar/index.ts b/tests/playwright/pages/Dashboard/ViewSidebar/index.ts
index cf75e34dc7..cf2791ce1b 100644
--- a/tests/playwright/pages/Dashboard/ViewSidebar/index.ts
+++ b/tests/playwright/pages/Dashboard/ViewSidebar/index.ts
@@ -23,6 +23,18 @@ export class ViewSidebarPage extends BasePage {
     return this.dashboard.get().locator('.nc-view-sidebar');
   }
 
+  async isVisible() {
+    return await this.get().isVisible();
+  }
+
+  async verifyVisibility({ isVisible }: { isVisible: boolean }) {
+    if (isVisible) {
+      await expect(this.get()).toBeVisible();
+    } else {
+      await expect(this.get()).not.toBeVisible();
+    }
+  }
+
   private async createView({ title, locator }: { title: string; locator: Locator }) {
     await locator.click();
     await this.rootPage.locator('input[id="form_item_title"]:visible').fill(title);
diff --git a/tests/playwright/pages/Dashboard/common/Cell/index.ts b/tests/playwright/pages/Dashboard/common/Cell/index.ts
index 41b4216620..687a05d7bb 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/index.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/index.ts
@@ -60,6 +60,14 @@ export class CellPageObject extends BasePage {
     await this.get({ index, columnHeader }).locator('.nc-action-icon.nc-plus').click();
   }
 
+  async verifyCellActiveSelected({ index, columnHeader }: { index: number; columnHeader: string }) {
+    await expect(this.get({ index, columnHeader })).toHaveClass(/active/);
+  }
+
+  async verifyCellEditable({ index, columnHeader }: { index: number; columnHeader: string }) {
+    await this.get({ index, columnHeader }).isEditable();
+  }
+
   async verify({ index, columnHeader, value }: { index: number; columnHeader: string; value: string | string[] }) {
     const _verify = async text => {
       await expect
diff --git a/tests/playwright/tests/keyboardShortcuts.spec.ts b/tests/playwright/tests/keyboardShortcuts.spec.ts
new file mode 100644
index 0000000000..f4c8f75428
--- /dev/null
+++ b/tests/playwright/tests/keyboardShortcuts.spec.ts
@@ -0,0 +1,102 @@
+import { expect, test } from '@playwright/test';
+import { DashboardPage } from '../pages/Dashboard';
+import { GridPage } from '../pages/Dashboard/Grid';
+import setup from '../setup';
+
+test.describe.only('Verify shortcuts', () => {
+  let dashboard: DashboardPage, grid: GridPage;
+  let context: any;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page });
+    dashboard = new DashboardPage(page, context.project);
+    grid = dashboard.grid;
+  });
+
+  test('Verify shortcuts', async ({ page }) => {
+    await dashboard.treeView.openTable({ title: 'Country' });
+    // create new table
+    await page.keyboard.press('Alt+t');
+    await dashboard.treeView.createTable({ title: 'New Table', skipOpeningModal: true });
+    await dashboard.treeView.verifyTable({ title: 'New Table' });
+
+    // create new row
+    await grid.column.clickColumnHeader({ title: 'Title' });
+    await page.waitForTimeout(2000);
+    await page.keyboard.press('Alt+r');
+    await grid.editRow({ index: 0, value: 'New Row' });
+    await grid.verifyRowCount({ count: 1 });
+
+    // create new column
+    await page.keyboard.press('Alt+c');
+    await grid.column.fillTitle({ title: 'New Column' });
+    await grid.column.save();
+    await grid.column.verify({ title: 'New Column' });
+
+    // fullscreen
+    await page.keyboard.press('Alt+f');
+    await dashboard.treeView.verifyVisibility({
+      isVisible: false,
+    });
+    await dashboard.viewSidebar.verifyVisibility({
+      isVisible: false,
+    });
+    await page.keyboard.press('Alt+f');
+    await dashboard.treeView.verifyVisibility({
+      isVisible: true,
+    });
+    await dashboard.viewSidebar.verifyVisibility({
+      isVisible: true,
+    });
+
+    // invite team member
+    await page.keyboard.press('Alt+i');
+    await dashboard.settings.teams.invite({
+      email: 'new@example.com',
+      role: 'editor',
+      skipOpeningModal: true,
+    });
+    const url = await dashboard.settings.teams.getInvitationUrl();
+    // await dashboard.settings.teams.closeInvite();
+    expect(url).toContain('signup');
+    await page.waitForTimeout(1000);
+    await dashboard.settings.teams.closeInvite();
+
+    // Cmd + Right arrow
+    await dashboard.treeView.openTable({ title: 'Country' });
+    await grid.cell.click({ index: 0, columnHeader: 'Country' });
+    await page.keyboard.press('Meta+ArrowRight');
+    await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'City List' });
+
+    // Cmd + Right arrow
+    await page.keyboard.press('Meta+ArrowLeft');
+    await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'Country' });
+
+    // Cmd + up arrow
+    await grid.cell.click({ index: 24, columnHeader: 'Country' });
+    await page.keyboard.press('Meta+ArrowUp');
+    await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'Country' });
+
+    // Cmd + down arrow
+    await page.keyboard.press('Meta+ArrowDown');
+    await grid.cell.verifyCellActiveSelected({ index: 24, columnHeader: 'Country' });
+
+    // Enter to edit and Esc to cancel
+    await grid.cell.click({ index: 0, columnHeader: 'Country' });
+    await page.keyboard.press('Enter');
+    await page.keyboard.type('New');
+    await page.keyboard.press('Escape');
+    await grid.cell.verify({ index: 0, columnHeader: 'Country', value: 'AfghanistanNew' });
+
+    // Space to open expanded row and Meta + Space to save
+    await grid.cell.click({ index: 1, columnHeader: 'Country' });
+    await page.keyboard.press('Space');
+    await dashboard.expandedForm.verify({
+      header: 'Algeria',
+    });
+    await dashboard.expandedForm.fillField({ columnTitle: 'Country', value: 'NewAlgeria' });
+    await page.keyboard.press('Meta+Enter');
+    await page.waitForTimeout(2000);
+    await grid.cell.verify({ index: 1, columnHeader: 'Country', value: 'NewAlgeria' });
+  });
+});

From cf2ccc53ccfc4b1eb274b257a4744d27a024dad0 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 30 Nov 2022 13:46:25 +0800
Subject: [PATCH 43/50] feat(nc-gui): update keyboard shortcuts list

---
 .../components/dlg/KeyboardShortcuts.vue      | 105 +++++++++++++++++-
 1 file changed, 104 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/dlg/KeyboardShortcuts.vue b/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
index 0e1df6402d..1a149630a2 100644
--- a/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
+++ b/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
@@ -40,6 +40,10 @@ const shortcutList = [
         keys: ['ALT', 'I'],
         behaviour: 'Invite a member to team',
       },
+      {
+        keys: ['ALT', ','],
+        behaviour: 'Open Team & Settings',
+      },
     ],
   },
   {
@@ -85,6 +89,105 @@ const shortcutList = [
         keys: ['←', '→', '↑', '↓'],
         behaviour: 'General cell navigation',
       },
+      {
+        keys: ['Tab'],
+        behaviour: 'Move to next cell horizontally; if on last cell, move to next row beginning',
+      },
+    ],
+  },
+  {
+    title: 'Text / Number',
+    shortcuts: [
+      {
+        keys: ['←'],
+        behaviour: 'Move cursor to the left',
+      },
+      {
+        keys: ['→'],
+        behaviour: 'Move cursor to the right',
+      },
+      {
+        keys: ['↑'],
+        behaviour: 'Move cursor to the left',
+      },
+      {
+        keys: ['↓'],
+        behaviour: 'Move cursor to the right',
+      },
+    ],
+  },
+  {
+    title: 'SingleSelect',
+    shortcuts: [
+      {
+        keys: ['↑'],
+        behaviour: 'Move to the previous option',
+      },
+      {
+        keys: ['↓'],
+        behaviour: 'Move to the next option',
+      },
+      {
+        keys: ['Enter'],
+        behaviour: 'Select the current option',
+      },
+    ],
+  },
+  {
+    title: 'MultiSelect',
+    shortcuts: [
+      {
+        keys: ['↑'],
+        behaviour: 'Move to the previous option',
+      },
+      {
+        keys: ['↓'],
+        behaviour: 'Move to the next option',
+      },
+      {
+        keys: ['Enter'],
+        behaviour: 'Select / deselect the current option',
+      },
+    ],
+  },
+  {
+    title: 'Date / DateTime',
+    shortcuts: [
+      {
+        keys: [renderCmdOrCtrlKey(), ';'],
+        behaviour: 'Select current date time',
+      },
+    ],
+  },
+  {
+    title: 'LinkToAnotherRecord',
+    shortcuts: [
+      {
+        keys: ['↑'],
+        behaviour: 'Move to the previous option',
+      },
+      {
+        keys: ['↓'],
+        behaviour: 'Move to the next option',
+      },
+    ],
+  },
+  {
+    title: 'Checkbox',
+    shortcuts: [
+      {
+        keys: ['Enter'],
+        behaviour: 'Toggle',
+      },
+    ],
+  },
+  {
+    title: 'Rating',
+    shortcuts: [
+      {
+        keys: ['<0 ~ Max>'],
+        behaviour: 'Enter number to toggle rating',
+      },
     ],
   },
   {
@@ -92,7 +195,7 @@ const shortcutList = [
     shortcuts: [
       {
         keys: [renderCmdOrCtrlKey(), 'Enter'],
-        behaviour: 'Save current expanded row item',
+        behaviour: 'Save current expanded form item',
       },
     ],
   },

From 4820c09f65e34d84dc8eeb24a634c7abd7841d48 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 30 Nov 2022 16:47:10 +0800
Subject: [PATCH 44/50] fix(nc-gui): prevent default on arrow keys only

---
 packages/nc-gui/components/smartsheet/Grid.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 3f0f65fa46..fd694c7143 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -210,27 +210,30 @@ const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyVa
     }
 
     if (cmdOrCtrl) {
-      e.preventDefault()
       switch (e.key) {
         case 'ArrowUp':
+          e.preventDefault()
           selectedCell.row = 0
           selectedCell.col = selectedCell.col ?? 0
           scrollToCell?.()
           editEnabled = false
           return true
         case 'ArrowDown':
+          e.preventDefault()
           selectedCell.row = data.value.length - 1
           selectedCell.col = selectedCell.col ?? 0
           scrollToCell?.()
           editEnabled = false
           return true
         case 'ArrowRight':
+          e.preventDefault()
           selectedCell.row = selectedCell.row ?? 0
           selectedCell.col = fields.value?.length - 1
           scrollToCell?.()
           editEnabled = false
           return true
         case 'ArrowLeft':
+          e.preventDefault()
           selectedCell.row = selectedCell.row ?? 0
           selectedCell.col = 0
           scrollToCell?.()

From cb19ec2df3902d1c61b458b0d130ef821b432729 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Wed, 30 Nov 2022 16:51:40 +0530
Subject: [PATCH 45/50] feat(playwright): Disabled only for shortcut verify
 test

---
 tests/playwright/tests/keyboardShortcuts.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/playwright/tests/keyboardShortcuts.spec.ts b/tests/playwright/tests/keyboardShortcuts.spec.ts
index f4c8f75428..fe6a728dfa 100644
--- a/tests/playwright/tests/keyboardShortcuts.spec.ts
+++ b/tests/playwright/tests/keyboardShortcuts.spec.ts
@@ -3,7 +3,7 @@ import { DashboardPage } from '../pages/Dashboard';
 import { GridPage } from '../pages/Dashboard/Grid';
 import setup from '../setup';
 
-test.describe.only('Verify shortcuts', () => {
+test.describe('Verify shortcuts', () => {
   let dashboard: DashboardPage, grid: GridPage;
   let context: any;
 

From bbc2837e4824a065646fc0e617e9cd6cd616e0de Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Wed, 30 Nov 2022 17:30:21 +0530
Subject: [PATCH 46/50] feat(playwright): Potential fix for keyboard shortcuts
 test

---
 tests/playwright/tests/keyboardShortcuts.spec.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/playwright/tests/keyboardShortcuts.spec.ts b/tests/playwright/tests/keyboardShortcuts.spec.ts
index fe6a728dfa..11dc129cc5 100644
--- a/tests/playwright/tests/keyboardShortcuts.spec.ts
+++ b/tests/playwright/tests/keyboardShortcuts.spec.ts
@@ -64,6 +64,7 @@ test.describe('Verify shortcuts', () => {
 
     // Cmd + Right arrow
     await dashboard.treeView.openTable({ title: 'Country' });
+    await page.waitForTimeout(1500);
     await grid.cell.click({ index: 0, columnHeader: 'Country' });
     await page.keyboard.press('Meta+ArrowRight');
     await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'City List' });

From de2bd9a0f9f714331452424068d533c1a67c461c Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Wed, 30 Nov 2022 17:59:01 +0530
Subject: [PATCH 47/50] feat(playwright): Potential fix for keyboard shortcuts
 test

---
 tests/playwright/pages/Dashboard/common/Cell/index.ts | 3 ++-
 tests/playwright/tests/keyboardShortcuts.spec.ts      | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/tests/playwright/pages/Dashboard/common/Cell/index.ts b/tests/playwright/pages/Dashboard/common/Cell/index.ts
index 921fbfb2d6..204375dcda 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/index.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/index.ts
@@ -31,7 +31,8 @@ export class CellPageObject extends BasePage {
   }
 
   async click({ index, columnHeader }: { index: number; columnHeader: string }) {
-    return await this.get({ index, columnHeader }).click();
+    await this.get({ index, columnHeader }).click();
+    await (await this.get({ index, columnHeader }).elementHandle()).waitForElementState('stable');
   }
 
   async dblclick({ index, columnHeader }: { index?: number; columnHeader: string }) {
diff --git a/tests/playwright/tests/keyboardShortcuts.spec.ts b/tests/playwright/tests/keyboardShortcuts.spec.ts
index 11dc129cc5..ab70d932d8 100644
--- a/tests/playwright/tests/keyboardShortcuts.spec.ts
+++ b/tests/playwright/tests/keyboardShortcuts.spec.ts
@@ -66,6 +66,7 @@ test.describe('Verify shortcuts', () => {
     await dashboard.treeView.openTable({ title: 'Country' });
     await page.waitForTimeout(1500);
     await grid.cell.click({ index: 0, columnHeader: 'Country' });
+    await page.waitForTimeout(1500);
     await page.keyboard.press('Meta+ArrowRight');
     await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'City List' });
 

From 27816b1ea322719ebebfad440bef458ea5f2ef63 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Wed, 30 Nov 2022 18:34:20 +0530
Subject: [PATCH 48/50] feat(playwright): Potential fix for keyboard shortcuts
 test

---
 tests/playwright/pages/Base.ts                   |  8 ++++++++
 tests/playwright/tests/keyboardShortcuts.spec.ts | 10 +++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/tests/playwright/pages/Base.ts b/tests/playwright/pages/Base.ts
index 043c04e614..4aeed1e144 100644
--- a/tests/playwright/pages/Base.ts
+++ b/tests/playwright/pages/Base.ts
@@ -84,4 +84,12 @@ export default abstract class BasePage {
   async getClipboardText() {
     return await this.rootPage.evaluate(() => navigator.clipboard.readText());
   }
+
+  async os() {
+    return await this.rootPage.evaluate(() => navigator.platform);
+  }
+
+  async isMacOs() {
+    return (await this.os()).includes('Mac');
+  }
 }
diff --git a/tests/playwright/tests/keyboardShortcuts.spec.ts b/tests/playwright/tests/keyboardShortcuts.spec.ts
index ab70d932d8..168bbe948c 100644
--- a/tests/playwright/tests/keyboardShortcuts.spec.ts
+++ b/tests/playwright/tests/keyboardShortcuts.spec.ts
@@ -67,20 +67,20 @@ test.describe('Verify shortcuts', () => {
     await page.waitForTimeout(1500);
     await grid.cell.click({ index: 0, columnHeader: 'Country' });
     await page.waitForTimeout(1500);
-    await page.keyboard.press('Meta+ArrowRight');
+    await page.keyboard.press((await grid.isMacOs()) ? 'Meta+ArrowRight' : 'Control+ArrowRight');
     await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'City List' });
 
     // Cmd + Right arrow
-    await page.keyboard.press('Meta+ArrowLeft');
+    await page.keyboard.press((await grid.isMacOs()) ? 'Meta+ArrowLeft' : 'Control+ArrowLeft');
     await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'Country' });
 
     // Cmd + up arrow
     await grid.cell.click({ index: 24, columnHeader: 'Country' });
-    await page.keyboard.press('Meta+ArrowUp');
+    await page.keyboard.press((await grid.isMacOs()) ? 'Meta+ArrowUp' : 'Control+ArrowUp');
     await grid.cell.verifyCellActiveSelected({ index: 0, columnHeader: 'Country' });
 
     // Cmd + down arrow
-    await page.keyboard.press('Meta+ArrowDown');
+    await page.keyboard.press((await grid.isMacOs()) ? 'Meta+ArrowDown' : 'Control+ArrowDown');
     await grid.cell.verifyCellActiveSelected({ index: 24, columnHeader: 'Country' });
 
     // Enter to edit and Esc to cancel
@@ -97,7 +97,7 @@ test.describe('Verify shortcuts', () => {
       header: 'Algeria',
     });
     await dashboard.expandedForm.fillField({ columnTitle: 'Country', value: 'NewAlgeria' });
-    await page.keyboard.press('Meta+Enter');
+    await page.keyboard.press((await grid.isMacOs()) ? 'Meta+Enter' : 'Control+Enter');
     await page.waitForTimeout(2000);
     await grid.cell.verify({ index: 1, columnHeader: 'Country', value: 'NewAlgeria' });
   });

From b205097a1bd70b0fc2507ebe40b2f2b239c44724 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 30 Nov 2022 21:25:17 +0800
Subject: [PATCH 49/50] feat(nc-gui): disable footer on keyboard shortcut modal

---
 packages/nc-gui/components/dlg/KeyboardShortcuts.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui/components/dlg/KeyboardShortcuts.vue b/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
index 1a149630a2..8079cd6bf8 100644
--- a/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
+++ b/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
@@ -208,6 +208,7 @@ const shortcutList = [
     :class="{ active: dialogShow }"
     width="max(30vw, 600px)"
     class="p-2"
+    :footer="null"
     :wrap-class-name="`nc-modal-keyboard-shortcuts ${dialogShow ? 'active' : ''}`"
     @keydown.esc="dialogShow = false"
   >

From fafa4fb17e45e4ad92854e701d1e4e967d76d063 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 30 Nov 2022 22:19:23 +0800
Subject: [PATCH 50/50] fix(nc-gui): disable when the page is index

---
 packages/nc-gui/components/dashboard/TreeView.vue | 15 ++++++++++++++-
 .../nc-gui/components/general/ShareBaseButton.vue |  1 +
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index fc8b89847a..bf05399189 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -16,6 +16,7 @@ import {
   useDialog,
   useNuxtApp,
   useProject,
+  useRoute,
   useTable,
   useTabs,
   useToggle,
@@ -37,6 +38,8 @@ const { deleteTable } = useTable()
 
 const { isUIAllowed } = useUIPermission()
 
+const route = useRoute()
+
 const [searchActive, toggleSearchActive] = useToggle()
 
 let key = $ref(0)
@@ -219,13 +222,23 @@ const onSearchCloseIconClick = () => {
   toggleSearchActive(false)
 }
 
+const isCreateTableAllowed = computed(
+  () =>
+    isUIAllowed('table-create') &&
+    route.name !== 'index' &&
+    route.name !== 'index-index' &&
+    route.name !== 'index-index-create' &&
+    route.name !== 'index-index-create-external' &&
+    route.name !== 'index-user-index',
+)
+
 useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
   const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
   if (e.altKey && !e.shiftKey && !cmdOrCtrl) {
     switch (e.keyCode) {
       case 84: {
         // ALT + T
-        if (isUIAllowed('table-create') && !isDrawerOrModalExist()) {
+        if (isCreateTableAllowed.value && !isDrawerOrModalExist()) {
           // prevent the key `T` is inputted to table title input
           e.preventDefault()
           openTableCreateDialog()
diff --git a/packages/nc-gui/components/general/ShareBaseButton.vue b/packages/nc-gui/components/general/ShareBaseButton.vue
index 45cd622554..eb44eb6632 100644
--- a/packages/nc-gui/components/general/ShareBaseButton.vue
+++ b/packages/nc-gui/components/general/ShareBaseButton.vue
@@ -11,6 +11,7 @@ const isShareBaseAllowed = computed(
   () =>
     isUIAllowed('newUser') &&
     route.name !== 'index' &&
+    route.name !== 'index-index' &&
     route.name !== 'index-index-create' &&
     route.name !== 'index-index-create-external' &&
     route.name !== 'index-user-index',