Merge pull request #7490 from nocodb/nc-fix/keyboard-shortcuts

Nc: Enable command palette for oss

packages/nc-gui/app.vue

@@ -1,14 +1,20 @@
 <script setup lang="ts">
-import { applyNonSelectable, computed, useRouter, useTheme } from '#imports'
+import { applyNonSelectable, computed, isEeUI, isMac, useCommandPalette, useRouter, useTheme } from '#imports'
-
+import type { CommandPaletteType } from '~/lib'
 const router = useRouter()
 
 const route = router.currentRoute
 
+const cmdK = ref(false)
+
+const cmdL = ref(false)
+
 const disableBaseLayout = computed(() => route.value.path.startsWith('/nc/view') || route.value.path.startsWith('/nc/form'))
 
 useTheme()
 
+const { commandPalette, cmdData, cmdPlaceholder, activeScope, loadTemporaryScope, refreshCommandPalette } = useCommandPalette()
+
 applyNonSelectable()
 useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
   const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
@@ -19,6 +25,16 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
         if (!['input', 'textarea'].includes((e.target as any).nodeName.toLowerCase())) {
           e.preventDefault()
         }
+        break
+      case 'k':
+        e.preventDefault()
+        break
+      case 'l':
+        e.preventDefault()
+        break
+      case 'j':
+        e.preventDefault()
+        break
     }
   }
 })
@@ -47,6 +63,38 @@ if (typeof window !== 'undefined') {
   // @ts-expect-error using arbitrary window key
   window.__ncvue = true
 }
+
+function onScope(scope: string) {
+  if (scope === 'root' && isEeUI) {
+    loadTemporaryScope({ scope: 'root', data: {} })
+  }
+}
+
+function setActiveCmdView(cmd: CommandPaletteType) {
+  if (cmd === 'cmd-k') {
+    cmdK.value = true
+    cmdL.value = false
+  } else if (cmd === 'cmd-l') {
+    cmdL.value = true
+    cmdK.value = false
+  } else {
+    cmdL.value = false
+    cmdK.value = false
+    document.dispatchEvent(
+      new KeyboardEvent('keydown', {
+        key: 'J',
+        ctrlKey: !isMac() || undefined,
+        metaKey: isMac() || undefined,
+      }),
+    )
+  }
+}
+
+onMounted(() => {
+  nextTick(() => {
+    refreshCommandPalette()
+  })
+})
 </script>
 
 <template>
@@ -55,4 +103,19 @@ if (typeof window !== 'undefined') {
       <NuxtPage :key="key" :transition="false" />
     </NuxtLayout>
   </a-config-provider>
+  <!-- Command Menu -->
+  <CmdK
+    ref="commandPalette"
+    v-model:open="cmdK"
+    :scope="activeScope.scope"
+    :data="cmdData"
+    :placeholder="cmdPlaceholder"
+    :load-temporary-scope="loadTemporaryScope"
+    :set-active-cmd-view="setActiveCmdView"
+    @scope="onScope"
+  />
+  <!-- Recent Views. Cycles through recently visited Views -->
+  <CmdL v-model:open="cmdL" :set-active-cmd-view="setActiveCmdView" />
+  <!-- Documentation. Integrated NocoDB Docs directlt inside the Product -->
+  <CmdJ />
 </template>

packages/nc-gui/components/cmd-footer/index.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { CommandPaletteType } from '~/lib'
+
+defineProps<{
+  activeCmd: CommandPaletteType
+  setActiveCmdView: (cmd: CommandPaletteType) => void
+}>()
+
+const renderCmdOrCtrlKey = () => {
+  return isMac() ? '⌘' : 'Ctrl'
+}
+</script>
+
+<template>
+  <div class="cmdk-footer absolute inset-x-0 bottom-0 !bg-white">
+    <div class="flex justify-center w-full py-2">
+      <div
+        class="flex flex-grow-1 w-full text-sm items-center gap-2 justify-center cursor-pointer"
+        :class="activeCmd === 'cmd-j' ? 'text-brand-500' : ''"
+        @click.stop="activeCmd !== 'cmd-j' ? setActiveCmdView('cmd-j') : () => undefined"
+      >
+        <MdiFileOutline class="h-4 w-4" />
+        Document
+        <span
+          class="text-sm px-1 rounded-md border-1"
+          :class="activeCmd === 'cmd-j' ? 'bg-brand-500 border-brand-500 text-white' : 'bg-gray-100 border-gray-300'"
+        >
+          {{ renderCmdOrCtrlKey() }} + J
+        </span>
+      </div>
+      <div
+        class="flex flex-grow-1 w-full text-sm items-center gap-2 justify-center cursor-pointer"
+        :class="activeCmd === 'cmd-k' ? 'text-brand-500' : ''"
+        @click.stop="activeCmd !== 'cmd-k' ? setActiveCmdView('cmd-k') : () => undefined"
+      >
+        <MdiMapMarkerOutline class="h-4 w-4" />
+        Quick Navigation
+        <span
+          class="text-sm px-1 rounded-md border-1"
+          :class="activeCmd === 'cmd-k' ? 'bg-brand-500 border-brand-500 text-white' : 'bg-gray-100 border-gray-300'"
+        >
+          {{ renderCmdOrCtrlKey() }} + K
+        </span>
+      </div>
+      <div
+        class="flex flex-grow-1 w-full text-sm items-center gap-2 justify-center cursor-pointer"
+        :class="activeCmd === 'cmd-l' ? 'text-brand-500' : ''"
+        @click.stop="activeCmd !== 'cmd-l' ? setActiveCmdView('cmd-l') : () => undefined"
+      >
+        <MdiClockOutline class="h-4 w-4" />
+        Recent
+        <span
+          class="text-sm px-1 rounded-md border-1"
+          :class="activeCmd === 'cmd-l' ? 'bg-brand-500 border-brand-500 text-white' : 'bg-gray-100 border-gray-300'"
+        >
+          {{ renderCmdOrCtrlKey() }} + L
+        </span>
+      </div>
+    </div>
+  </div>
+</template>

packages/nc-gui/components/cmd-j/index.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const modalEl = ref<HTMLElement | null>(null)
+const { user } = useGlobal()
+
+watch(user, () => {
+  window.doc_enabled = !!user.value
+})
+
+onMounted(() => {
+  docsearch({
+    container: '#searchbar',
+    typesenseCollectionName: 'nocodb-oss-docs-index',
+    typesenseServerConfig: {
+      nodes: [
+        {
+          host: 'rqf5uvajyeczwt3xp-1.a1.typesense.net',
+          port: 443,
+          protocol: 'https',
+        },
+      ],
+      apiKey: 'lNKDTZdJrE76Sg8WEyeN9mXT29l1xq7Q',
+    },
+    typesenseSearchParameters: {
+      // Optional.
+    },
+  })
+})
+</script>
+
+<template>
+  <div id="searchbar" :ref="modalEl" class="hidden"></div>
+</template>
+
+<style></style>

packages/nc-gui/components/cmd-k/command-score.ts

@@ -0,0 +1,162 @@
+// this is derived from https://github.com/pacocoursey/cmdk
+
+// The scores are arranged so that a continuous match of characters will
+// result in a total score of 1.
+//
+// The best case, this character is a match, and either this is the start
+// of the string, or the previous character was also a match.
+const SCORE_CONTINUE_MATCH = 1.9
+// A new match at the start of a word scores better than a new match
+// elsewhere as it's more likely that the user will type the starts
+// of fragments.
+// NOTE: We score word jumps between spaces slightly higher than slashes, brackets
+// hyphens, etc.
+const SCORE_SPACE_WORD_JUMP = 1.0
+const SCORE_NON_SPACE_WORD_JUMP = 0.8
+// Any other match isn't ideal, but we include it for completeness.
+const SCORE_CHARACTER_JUMP = 0.2
+// If the user transposed two letters, it should be significantly penalized.
+//
+// i.e. "ouch" is more likely than "curtain" when "uc" is typed.
+const SCORE_TRANSPOSITION = 0.3
+// The goodness of a match should decay slightly with each missing
+// character.
+//
+// i.e. "bad" is more likely than "bard" when "bd" is typed.
+//
+// This will not change the order of suggestions based on SCORE_* until
+// 100 characters are inserted between matches.
+const PENALTY_SKIPPED = 0.999
+// The goodness of an exact-case match should be higher than a
+// case-insensitive match by a small amount.
+//
+// i.e. "HTML" is more likely than "haml" when "HM" is typed.
+//
+// This will not change the order of suggestions based on SCORE_* until
+// 1000 characters are inserted between matches.
+const PENALTY_CASE_MISMATCH = 0.999999
+// Match higher for letters closer to the beginning of the word
+// const PENALTY_DISTANCE_FROM_START = 0.9
+// If the word has more characters than the user typed, it should
+// be penalised slightly.
+//
+// i.e. "html" is more likely than "html5" if I type "html".
+//
+// However, it may well be the case that there's a sensible secondary
+// ordering (like alphabetical) that it makes sense to rely on when
+// there are many prefix matches, so we don't make the penalty increase
+// with the number of tokens.
+const PENALTY_NOT_COMPLETE = 0.98
+
+const IS_GAP_REGEXP = /[\\\/_+.#"@\[\(\{&]/
+const COUNT_GAPS_REGEXP = /[\\\/_+.#"@\[\(\{&]/g
+const IS_SPACE_REGEXP = /[\s-]/
+const COUNT_SPACE_REGEXP = /[\s-]/g
+
+function commandScoreInner(
+  string: string,
+  abbreviation: string,
+  lowerString: string,
+  lowerAbbreviation: string,
+  stringIndex: number,
+  abbreviationIndex: number,
+  memoizedResults: { [x: string]: number },
+) {
+  if (abbreviationIndex === abbreviation.length) {
+    if (stringIndex === string.length) {
+      return SCORE_CONTINUE_MATCH
+    }
+    return PENALTY_NOT_COMPLETE
+  }
+
+  const memoizeKey = `${stringIndex},${abbreviationIndex}`
+  if (memoizedResults[memoizeKey] !== undefined) {
+    return memoizedResults[memoizeKey]
+  }
+
+  const abbreviationChar = lowerAbbreviation.charAt(abbreviationIndex)
+  let index = lowerString.indexOf(abbreviationChar, stringIndex)
+  let highScore = 0
+
+  let score, transposedScore, wordBreaks, spaceBreaks
+
+  while (index >= 0) {
+    score = commandScoreInner(
+      string,
+      abbreviation,
+      lowerString,
+      lowerAbbreviation,
+      index + 1,
+      abbreviationIndex + 1,
+      memoizedResults,
+    )
+    if (score > highScore) {
+      if (index === stringIndex) {
+        score *= SCORE_CONTINUE_MATCH
+      } else if (IS_GAP_REGEXP.test(string.charAt(index - 1))) {
+        score *= SCORE_NON_SPACE_WORD_JUMP
+        wordBreaks = string.slice(stringIndex, index - 1).match(COUNT_GAPS_REGEXP)
+        if (wordBreaks && stringIndex > 0) {
+          score *= PENALTY_SKIPPED ** wordBreaks.length
+        }
+      } else if (IS_SPACE_REGEXP.test(string.charAt(index - 1))) {
+        score *= SCORE_SPACE_WORD_JUMP
+        spaceBreaks = string.slice(stringIndex, index - 1).match(COUNT_SPACE_REGEXP)
+        if (spaceBreaks && stringIndex > 0) {
+          score *= PENALTY_SKIPPED ** spaceBreaks.length
+        }
+      } else {
+        score *= SCORE_CHARACTER_JUMP
+        if (stringIndex > 0) {
+          score *= PENALTY_SKIPPED ** (index - stringIndex)
+        }
+      }
+
+      if (string.charAt(index) !== abbreviation.charAt(abbreviationIndex)) {
+        score *= PENALTY_CASE_MISMATCH
+      }
+    }
+
+    if (
+      (score < SCORE_TRANSPOSITION && lowerString.charAt(index - 1) === lowerAbbreviation.charAt(abbreviationIndex + 1)) ||
+      (lowerAbbreviation.charAt(abbreviationIndex + 1) === lowerAbbreviation.charAt(abbreviationIndex) && // allow duplicate letters. Ref #7428
+        lowerString.charAt(index - 1) !== lowerAbbreviation.charAt(abbreviationIndex))
+    ) {
+      transposedScore = commandScoreInner(
+        string,
+        abbreviation,
+        lowerString,
+        lowerAbbreviation,
+        index + 1,
+        abbreviationIndex + 2,
+        memoizedResults,
+      )
+
+      if (transposedScore * SCORE_TRANSPOSITION > score) {
+        score = transposedScore * SCORE_TRANSPOSITION
+      }
+    }
+
+    if (score > highScore) {
+      highScore = score
+    }
+
+    index = lowerString.indexOf(abbreviationChar, index + 1)
+  }
+
+  memoizedResults[memoizeKey] = highScore
+  return highScore
+}
+
+function formatInput(string: string) {
+  // convert all valid space characters to space so they match each other
+  return string.toLowerCase().replace(COUNT_SPACE_REGEXP, ' ')
+}
+
+export function commandScore(string: string, abbreviation: string): number {
+  /* NOTE:
+   * in the original, we used to do the lower-casing on each recursive call, but this meant that toLowerCase()
+   * was the dominating cost in the algorithm, passing both is a little ugly, but considerably faster.
+   */
+  return commandScoreInner(string, abbreviation, formatInput(string), formatInput(abbreviation), 0, 0, {})
+}

packages/nc-gui/components/cmd-k/index.vue

@@ -1,3 +1,623 @@
+<script lang="ts" setup>
+import { useMagicKeys, whenever } from '@vueuse/core'
+// import { useNuxtApp } from '#app'
+import { commandScore } from './command-score'
+import type { ComputedRef, VNode } from '#imports'
+import { iconMap, onClickOutside } from '#imports'
+import type { CommandPaletteType } from '~/lib'
+
+interface CmdAction {
+  id: string
+  title: string
+  hotkey?: string
+  parent?: string
+  handler?: Function
+  scopePayload?: any
+  icon?: VNode | string
+  keywords?: string[]
+  section?: string
+  is_default?: number | null
+}
+
+const props = defineProps<{
+  open: boolean
+  data: CmdAction[]
+  scope?: string
+  placeholder?: string
+  hotkey?: string
+  loadTemporaryScope?: (scope: { scope: string; data: any }) => void
+  setActiveCmdView: (cmd: CommandPaletteType) => void
+}>()
+
+const emits = defineEmits(['update:open', 'scope'])
+
+const vOpen = useVModel(props, 'open', emits)
+
+const { t } = useI18n()
+
+const activeScope = ref('root')
+
+const modalEl = ref<HTMLElement>()
+
+const cmdInputEl = ref<HTMLInputElement>()
+
+const cmdInput = ref('')
+
+const { user } = useGlobal()
+
+const selected = ref<string>()
+
+const formattedData: ComputedRef<(CmdAction & { weight: number })[]> = computed(() => {
+  const rt: (CmdAction & { weight: number })[] = []
+  for (const el of props.data) {
+    rt.push({
+      ...el,
+      title: el?.section === 'Views' && el?.is_default ? t('title.defaultView') : el.title,
+      icon: el.section === 'Views' && el.is_default ? 'grid' : el.icon,
+      parent: el.parent || 'root',
+      weight: commandScore(
+        `${el.section}${el?.section === 'Views' && el?.is_default ? t('title.defaultView') : el.title}${el.keywords?.join()}`,
+        cmdInput.value,
+      ),
+    })
+  }
+  return rt
+})
+
+const nestedScope = computed(() => {
+  const rt = []
+  let parent = activeScope.value
+  while (parent !== 'root') {
+    const parentEl = formattedData.value.find((el) => el.id === parent)
+    rt.push({
+      id: parent,
+      label: parentEl?.title,
+      icon: parentEl?.icon,
+    })
+    parent = parentEl?.parent || 'root'
+  }
+  return rt.reverse()
+})
+
+const isThereAnyActionInScope = (sc: string): boolean => {
+  return formattedData.value.some((el) => {
+    if (el.parent === sc) {
+      if (!el.handler) {
+        return isThereAnyActionInScope(el.id)
+      }
+      return true
+    }
+    return false
+  })
+}
+
+const getAvailableScopes = (sc: string) => {
+  const tempChildScopes = formattedData.value.filter((el) => el.parent === sc && !el.handler).map((el) => el.id)
+  for (const el of tempChildScopes) {
+    tempChildScopes.push(...getAvailableScopes(el))
+  }
+  return tempChildScopes
+}
+
+const activeScopes = computed(() => {
+  return getAvailableScopes(activeScope.value)
+})
+
+const actionList = computed(() => {
+  const sections = formattedData.value.filter((el) => el.section).map((el) => el.section)
+  formattedData.value.sort((a, b) => {
+    if (a.section && b.section) {
+      if (sections.indexOf(a.section) < sections.indexOf(b.section)) return -1
+      if (sections.indexOf(a.section) > sections.indexOf(b.section)) return 1
+      return 0
+    }
+    if (a.section) return 1
+    if (b.section) return -1
+    return 0
+  })
+  return formattedData.value.filter((el) => {
+    if (cmdInput.value === '') {
+      if (el.parent === activeScope.value) {
+        if (!el.handler) {
+          return isThereAnyActionInScope(el.id)
+        }
+        return true
+      }
+      return false
+    } else {
+      if (el.parent === activeScope.value || activeScopes.value.includes(el.parent || 'root')) {
+        if (!el.handler) {
+          return isThereAnyActionInScope(el.id)
+        }
+        return true
+      }
+      return false
+    }
+  })
+})
+
+const searchedActionList = computed(() => {
+  if (cmdInput.value === '') return actionList.value
+  actionList.value.sort((a, b) => {
+    if (a.weight > b.weight) return -1
+    if (a.weight < b.weight) return 1
+    return 0
+  })
+  return actionList.value
+    .filter((el) => el.weight > 0)
+    .sort((a, b) => b.section?.toLowerCase().localeCompare(a.section?.toLowerCase() as string) || 0)
+})
+
+const actionListGroupedBySection = computed(() => {
+  const rt: { [key: string]: CmdAction[] } = {}
+  searchedActionList.value.forEach((el) => {
+    if (el.section === 'hidden') return
+    if (el.section) {
+      if (!rt[el.section]) rt[el.section] = []
+      rt[el.section].push(el)
+    } else {
+      if (!rt.default) rt.default = []
+      rt.default.push(el)
+    }
+  })
+  return rt
+})
+
+const keys = useMagicKeys()
+
+const setAction = (action: string) => {
+  selected.value = action
+  nextTick(() => {
+    const actionIndex = searchedActionList.value.findIndex((el) => el.id === action)
+    if (actionIndex === -1) return
+    if (actionIndex === 0) {
+      document.querySelector('.cmdk-actions')?.scrollTo({ top: 0, behavior: 'smooth' })
+    } else if (actionIndex === searchedActionList.value.length - 1) {
+      document.querySelector('.cmdk-actions')?.scrollTo({ top: 999999, behavior: 'smooth' })
+    } else {
+      document.querySelector('.cmdk-action.selected')?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+      })
+    }
+  })
+}
+
+const selectFirstAction = () => {
+  if (searchedActionList.value.length > 0) {
+    setAction(searchedActionList.value[0].id)
+  } else {
+    selected.value = undefined
+  }
+}
+
+const setScope = (scope: string) => {
+  activeScope.value = scope
+
+  emits('scope', scope)
+
+  nextTick(() => {
+    cmdInputEl.value?.focus()
+    selectFirstAction()
+  })
+}
+
+const show = () => {
+  if (!user.value) return
+  if (props.scope === 'disabled') return
+  vOpen.value = true
+  cmdInput.value = ''
+  nextTick(() => {
+    setScope(props.scope || 'root')
+  })
+}
+
+const hide = () => {
+  vOpen.value = false
+}
+
+const fireAction = (action: CmdAction, preview = false) => {
+  if (preview) {
+    if (action?.scopePayload) {
+      setScope(action.scopePayload.scope)
+      if (action.scopePayload.data) {
+        props.loadTemporaryScope?.(action.scopePayload)
+      }
+      return
+    }
+  }
+  if (action?.handler) {
+    action.handler()
+    hide()
+  } else {
+    setScope(action.id)
+  }
+}
+
+whenever(keys.ctrl_k, () => {
+  show()
+})
+
+whenever(keys.meta_k, () => {
+  show()
+})
+
+whenever(keys.Escape, () => {
+  if (vOpen.value) hide()
+})
+
+whenever(keys.ctrl_l, () => {
+  if (vOpen.value) hide()
+})
+
+whenever(keys.meta_l, () => {
+  if (vOpen.value) hide()
+})
+
+whenever(keys.ctrl_j, () => {
+  if (vOpen.value) hide()
+})
+
+whenever(keys.meta_j, () => {
+  if (vOpen.value) hide()
+})
+
+whenever(keys.arrowup, () => {
+  if (vOpen.value) {
+    const idx = searchedActionList.value.findIndex((el) => el.id === selected.value)
+    if (idx > 0) {
+      setAction(searchedActionList.value[idx - 1].id)
+    } else if (idx === 0) {
+      setAction(searchedActionList.value[searchedActionList.value.length - 1].id)
+    }
+  }
+})
+
+whenever(keys.arrowdown, () => {
+  if (vOpen.value) {
+    const idx = searchedActionList.value.findIndex((el) => el.id === selected.value)
+    if (idx < searchedActionList.value.length - 1) {
+      setAction(searchedActionList.value[idx + 1].id)
+    } else if (idx === searchedActionList.value.length - 1) {
+      setAction(searchedActionList.value[0].id)
+    }
+  }
+})
+
+whenever(keys.Enter, () => {
+  if (vOpen.value) {
+    const selectedEl = formattedData.value.find((el) => el.id === selected.value)
+    cmdInput.value = ''
+    if (selectedEl) {
+      fireAction(selectedEl, keys.shift.value)
+    }
+  }
+})
+
+whenever(keys.Backspace, () => {
+  if (vOpen.value && cmdInput.value === '' && activeScope.value !== 'root') {
+    const activeEl = formattedData.value.find((el) => el.id === activeScope.value)
+    setScope(activeEl?.parent || 'root')
+  }
+})
+
+onClickOutside(modalEl, () => {
+  if (vOpen.value) hide()
+})
+
+defineExpose({
+  open: show,
+  close: hide,
+  setScope,
+})
+</script>
+
 <template>
-  <div />
+  <div v-show="vOpen" class="cmdk-modal" :class="{ 'cmdk-modal-active': vOpen }">
+    <div ref="modalEl" class="cmdk-modal-content h-[25.25rem]">
+      <div class="cmdk-header">
+        <div class="cmdk-input-wrapper">
+          <GeneralIcon icon="search" class="h-4 w-4 text-gray-500" />
+          <div
+            v-for="el of nestedScope"
+            :key="`cmdk-breadcrumb-${el.id}`"
+            v-e="['a:cmdk:setScope']"
+            class="text-gray-600 text-sm cursor-pointer flex gap-1 items-center font-medium capitalize"
+            @click="setScope(el.id)"
+          >
+            <component
+              :is="(iconMap as any)[el.icon]"
+              v-if="el.icon && typeof el.icon === 'string' && (iconMap as any)[el.icon]"
+              class="cmdk-action-icon"
+              :class="{
+                '!text-blue-500': el.icon === 'grid',
+                '!text-purple-500': el.icon === 'form',
+                '!text-[#FF9052]': el.icon === 'kanban',
+                '!text-pink-500': el.icon === 'gallery',
+              }"
+            />
+            <div v-else-if="el.icon" class="cmdk-action-icon max-w-4 flex items-center justify-center">
+              <LazyGeneralEmojiPicker class="!text-sm !h-4 !w-4" size="small" :emoji="el.icon" readonly />
+            </div>
+            <a-tooltip overlay-class-name="!px-2 !py-1 !rounded-lg">
+              <template #title>
+                {{ el.label }}
+              </template>
+              <span class="truncate capitalize mr-4">
+                {{ el.label }}
+              </span>
+            </a-tooltip>
+
+            <span class="text-gray-400 text-sm font-medium pl-1">/</span>
+          </div>
+          <input
+            ref="cmdInputEl"
+            v-model="cmdInput"
+            class="cmdk-input"
+            type="text"
+            :placeholder="props.placeholder"
+            @input="selectFirstAction"
+          />
+        </div>
+      </div>
+      <div class="cmdk-body">
+        <div class="cmdk-actions nc-scrollbar-md">
+          <div v-if="searchedActionList.length === 0">
+            <div class="cmdk-action">
+              <div class="cmdk-action-content">No action found.</div>
+            </div>
+          </div>
+          <template v-else>
+            <div
+              v-for="[title, section] of Object.entries(actionListGroupedBySection)"
+              :key="`cmdk-section-${title}`"
+              class="cmdk-action-section border-t-1 border-gray-200"
+            >
+              <div v-if="title !== 'default'" class="cmdk-action-section-header capitalize">{{ title }}</div>
+              <div class="cmdk-action-section-body">
+                <div
+                  v-for="act of section"
+                  :key="act.id"
+                  v-e="['a:cmdk:action']"
+                  class="cmdk-action group"
+                  :class="{ selected: selected === act.id }"
+                  @mouseenter="setAction(act.id)"
+                  @click="fireAction(act)"
+                >
+                  <div class="cmdk-action-content w-full">
+                    <component
+                      :is="(iconMap as any)[act.icon]"
+                      v-if="act.icon && typeof act.icon === 'string' && (iconMap as any)[act.icon]"
+                      class="cmdk-action-icon"
+                      :class="{
+                        '!text-blue-500': act.icon === 'grid',
+                        '!text-purple-500': act.icon === 'form',
+                        '!text-[#FF9052]': act.icon === 'kanban',
+                        '!text-pink-500': act.icon === 'gallery',
+                      }"
+                    />
+                    <div v-else-if="act.icon" class="cmdk-action-icon max-w-4 flex items-center justify-center">
+                      <LazyGeneralEmojiPicker class="!text-sm !h-4 !w-4" size="small" :emoji="act.icon" readonly />
+                    </div>
+                    <a-tooltip overlay-class-name="!px-2 !py-1 !rounded-lg">
+                      <template #title>
+                        {{ act.title }}
+                      </template>
+                      <span class="truncate capitalize mr-4 py-0.5">
+                        {{ act.title }}
+                      </span>
+                    </a-tooltip>
+                    <div
+                      class="bg-gray-200 text-gray-600 cmdk-keyboard hidden text-xs gap-2 p-0.5 items-center justify-center rounded-md ml-auto pl-2"
+                    >
+                      Enter
+                      <div
+                        class="bg-white border-1 items-center flex justify-center border-gray-300 text-gray-700 rounded h-5 w-5 px-0.25"
+                      >
+                        ↩
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+      <CmdFooter active-cmd="cmd-k" :set-active-cmd-view="setActiveCmdView" />
+    </div>
+  </div>
 </template>
+
+<style lang="scss">
+/* TODO Move styles to Windi Classes */
+:root {
+  --cmdk-secondary-background-color: rgb(230, 230, 230);
+  --cmdk-secondary-text-color: rgb(101, 105, 111);
+  --cmdk-selected-background: rgb(245, 245, 245);
+
+  --cmdk-icon-color: var(--cmdk-secondary-text-color);
+  --cmdk-icon-size: 1.2em;
+
+  --cmdk-modal-background: #fff;
+}
+
+.cmdk-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.5);
+  z-index: 1000;
+
+  color: rgb(60, 65, 73);
+  font-size: 16px;
+
+  .cmdk-key {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: auto;
+    height: 1em;
+    font-size: 1.25em;
+    border-radius: 0.25em;
+    background: var(--cmdk-secondary-background-color);
+    color: var(--cmdk-secondary-text-color);
+    margin-right: 0.2em;
+  }
+
+  .cmdk-modal-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 1;
+    -webkit-box-flex: 1;
+    flex-grow: 1;
+    padding: 0;
+    overflow: hidden;
+    margin: auto;
+    box-shadow: rgb(0 0 0 / 50%) 0px 16px 70px;
+    top: 20%;
+    border-radius: 16px;
+    max-width: 640px;
+    background: var(--cmdk-modal-background);
+  }
+
+  .cmdk-input-wrapper {
+    @apply py-2 px-4 flex items-center gap-2;
+  }
+
+  .cmdk-input {
+    @apply text-sm;
+    flex-grow: 1;
+    flex-shrink: 0;
+    margin: 0px;
+    border: none;
+    appearance: none;
+    background: transparent;
+    outline: none;
+    box-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
+
+    caret-color: pink;
+    color: rgb(60, 65, 73);
+  }
+
+  .cmdk-input::placeholder {
+    color: rgb(165, 165, 165);
+    opacity: 1;
+  }
+
+  .cmdk-input:-ms-input-placeholder {
+    color: rgb(165, 165, 165);
+  }
+
+  .cmdk-input::-ms-input-placeholder {
+    color: rgb(165, 165, 165);
+  }
+
+  .cmdk-actions {
+    max-height: 310px;
+    margin: 0px;
+    padding: 0.5em 0px;
+    list-style: none;
+    scroll-behavior: smooth;
+    overflow: auto;
+    position: relative;
+
+    --scrollbar-track: initial;
+    --scrollbar-thumb: initial;
+    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+    overflow: overlay;
+    scrollbar-width: auto;
+    scrollbar-width: thin;
+    --scrollbar-thumb: #e1e3e6;
+    --scrollbar-track: #fff;
+
+    .cmdk-action {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+      outline: none;
+      transition: color 0s ease 0s;
+      width: 100%;
+      font-size: 0.9em;
+      border-left: 4px solid transparent;
+
+      .cmdk-keyboard {
+        display: hidden;
+      }
+
+      &.selected {
+        cursor: pointer;
+        background-color: #f4f4f5;
+        border-left: 4px solid var(--ant-primary-color);
+        outline: none;
+
+        .cmdk-keyboard {
+          display: flex;
+        }
+      }
+
+      .cmdk-action-content {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0.01;
+        flex-grow: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding: 0.75em 1em;
+        width: 100%;
+      }
+
+      .cmdk-action-icon {
+        margin-right: 0.4em;
+      }
+    }
+
+    .cmdk-action-section {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+
+      .cmdk-action-section-header {
+        display: flex;
+        align-items: center;
+        padding: 8px 16px;
+        font-size: 14px;
+        color: #6a7184;
+      }
+    }
+  }
+
+  .cmdk-footer {
+    display: flex;
+    border-top: 1px solid rgb(230, 230, 230);
+    background: rgba(242, 242, 242, 0.4);
+    font-size: 0.8em;
+    padding: 0.3em 0.6em;
+    color: var(--cmdk-secondary-text-color);
+    .cmdk-footer-left {
+      display: flex;
+      flex-grow: 1;
+      align-items: center;
+      .cmdk-key-helper {
+        display: flex;
+        align-items: center;
+        margin-right: 1.5em;
+      }
+    }
+    .cmdk-footer-right {
+      display: flex;
+      flex-grow: 1;
+      justify-content: flex-end;
+      align-items: center;
+      .nc-brand-icon {
+        margin-left: 0.5em;
+      }
+    }
+  }
+}
+</style>

packages/nc-gui/components/cmd-l/index.vue

@@ -0,0 +1,307 @@
+<script setup lang="ts">
+import { onKeyUp, useDebounceFn, useMagicKeys, useVModel, whenever } from '@vueuse/core'
+import { onClickOutside } from '#imports'
+import type { CommandPaletteType } from '~/lib'
+
+const props = defineProps<{
+  open: boolean
+  setActiveCmdView: (cmd: CommandPaletteType) => void
+}>()
+
+const emits = defineEmits(['update:open'])
+
+const vOpen = useVModel(props, 'open', emits)
+
+const modalEl = ref<HTMLElement>()
+
+const { user } = useGlobal()
+
+const viewStore = useViewsStore()
+
+const { recentViews, activeView } = storeToRefs(viewStore)
+
+const selected: Ref<string> = ref('')
+
+const newView: Ref<
+  | {
+      viewId: string | null
+      tableId: string
+      baseId: string
+    }
+  | undefined
+> = ref()
+
+const changeView = useDebounceFn(
+  async ({ viewId, tableId, baseId }: { viewId: string | null; tableId: string; baseId: string }) => {
+    await viewStore.changeView({ viewId, tableId, baseId })
+    vOpen.value = false
+  },
+  200,
+)
+
+const keys = useMagicKeys()
+
+const { current } = keys
+
+onKeyUp('Enter', async () => {
+  if (vOpen.value && newView.value) {
+    await changeView({ viewId: newView.value.viewId, tableId: newView.value.tableId, baseId: newView.value.baseId })
+  }
+})
+
+function scrollToTarget() {
+  const element = document.querySelector('.cmdk-action.selected')
+  const headerOffset = 45
+  const elementPosition = element?.getBoundingClientRect().top
+  const offsetPosition = elementPosition! + window.pageYOffset - headerOffset
+
+  window.scrollTo({
+    top: offsetPosition,
+    behavior: 'smooth',
+  })
+}
+
+const moveUp = () => {
+  if (!recentViews.value.length) return
+  const index = recentViews.value.findIndex((v) => v.tableID + v.viewName === selected.value)
+  if (index === 0) {
+    selected.value =
+      recentViews.value[recentViews.value.length - 1].tableID + recentViews.value[recentViews.value.length - 1].viewName
+
+    const cmdOption = recentViews.value[recentViews.value.length - 1]
+    newView.value = {
+      viewId: cmdOption.viewId ?? null,
+      tableId: cmdOption.tableID,
+      baseId: cmdOption.baseId,
+    }
+    document.querySelector('.actions')?.scrollTo({ top: 99999, behavior: 'smooth' })
+  } else {
+    selected.value = recentViews.value[index - 1].tableID + recentViews.value[index - 1].viewName
+    const cmdOption = recentViews.value[index - 1]
+    scrollToTarget()
+
+    newView.value = {
+      viewId: cmdOption.viewId ?? null,
+      tableId: cmdOption.tableID,
+      baseId: cmdOption.baseId,
+    }
+  }
+}
+
+const moveDown = () => {
+  if (!recentViews.value.length) return
+  const index = recentViews.value.findIndex((v) => v.tableID + v.viewName === selected.value)
+  if (index === recentViews.value.length - 1) {
+    selected.value = recentViews.value[0].tableID + recentViews.value[0].viewName
+
+    const cmdOption = recentViews.value[0]
+    newView.value = {
+      viewId: cmdOption.viewId ?? null,
+      tableId: cmdOption.tableID,
+      baseId: cmdOption.baseId,
+    }
+    document.querySelector('.actions')?.scrollTo({ top: 0, behavior: 'smooth' })
+  } else {
+    selected.value = recentViews.value[index + 1].tableID + recentViews.value[index + 1].viewName
+    const cmdOption = recentViews.value[index + 1]
+
+    scrollToTarget()
+
+    newView.value = {
+      viewId: cmdOption.viewId ?? null,
+      tableId: cmdOption.tableID,
+      baseId: cmdOption.baseId,
+    }
+  }
+}
+
+whenever(keys['Ctrl+Shift+L'], async () => {
+  if (!user.value) return
+  vOpen.value = true
+  moveUp()
+})
+
+whenever(keys['Meta+Shift+L'], async () => {
+  if (!user.value) return
+  vOpen.value = true
+  moveUp()
+})
+
+whenever(keys.ctrl_l, async () => {
+  if (!user.value) return
+  if (current.has('shift')) return
+  vOpen.value = true
+  moveDown()
+})
+
+whenever(keys.meta_l, async () => {
+  if (!user.value) return
+  if (current.has('shift')) return
+  vOpen.value = true
+  moveDown()
+})
+
+whenever(keys.arrowup, () => {
+  if (vOpen.value) moveUp()
+})
+
+whenever(keys.arrowdown, () => {
+  if (vOpen.value) moveDown()
+})
+
+const hide = () => {
+  vOpen.value = false
+}
+
+whenever(keys.Escape, () => {
+  if (vOpen.value) hide()
+})
+
+whenever(keys.ctrl_k, () => {
+  if (vOpen.value) hide()
+})
+
+whenever(keys.meta_k, () => {
+  if (vOpen.value) hide()
+})
+
+whenever(keys.ctrl_j, () => {
+  if (vOpen.value) hide()
+})
+
+whenever(keys.meta_j, () => {
+  if (vOpen.value) hide()
+})
+
+onClickOutside(modalEl, () => {
+  if (vOpen.value) hide()
+})
+
+onMounted(() => {
+  document.querySelector('.cmdOpt-list')?.focus()
+  if (!activeView.value) return
+  const index = recentViews.value.findIndex(
+    (v) => v.viewName === activeView.value?.name && v.tableID === activeView.value?.tableId,
+  )
+  if (index + 1 > recentViews.value.length) {
+    selected.value = recentViews.value[0].tableID + recentViews.value[0].viewName
+  } else {
+    selected.value = recentViews.value[index + 1].tableID + recentViews.value[index + 1].viewName
+  }
+})
+</script>
+
+<template>
+  <div v-if="vOpen" class="cmdk-modal cmdl-modal" :class="{ 'cmdk-modal-active cmdl-modal-active': vOpen }">
+    <div ref="modalEl" class="cmdk-modal-content cmdl-modal-content relative h-[25.25rem]">
+      <div class="flex items-center bg-white w-full z-[50]">
+        <div class="text-sm p-4 text-gray-500">Recent Views</div>
+      </div>
+      <div class="flex flex-col shrink grow overflow-hidden shadow-[rgb(0_0_0_/_50%)_0px_16px_70px] max-w-[650px] p-0">
+        <div class="scroll-smooth actions overflow-auto nc-scrollbar-md relative m-0 px-0 py-2">
+          <div v-if="recentViews.length < 1" class="flex flex-col p-4 items-start justify-center text-md">No recent views</div>
+          <div v-else class="flex mb-10 flex-col cmdOpt-list w-full">
+            <div
+              v-for="cmdOption of recentViews"
+              :key="cmdOption.tableID + cmdOption.viewName"
+              v-e="['a:cmdL:changeView']"
+              :class="{
+                selected: selected === cmdOption.tableID + cmdOption.viewName,
+              }"
+              class="cmdk-action"
+              @click="changeView({ viewId: cmdOption.viewId, tableId: cmdOption.tableID, baseId: cmdOption.baseId })"
+            >
+              <div class="cmdk-action-content !flex w-full">
+                <div class="flex gap-2 w-full flex-grow-1 items-center">
+                  <GeneralViewIcon :meta="{ type: cmdOption.viewType }" />
+                  <a-tooltip overlay-class-name="!px-2 !py-1 !rounded-lg">
+                    <template #title>
+                      {{ cmdOption.isDefault ? $t('title.defaultView') : cmdOption.viewName }}
+                    </template>
+                    <span class="max-w- truncate capitalize">
+                      {{ cmdOption.isDefault ? $t('title.defaultView') : cmdOption.viewName }}
+                    </span>
+                  </a-tooltip>
+                </div>
+                <div class="flex gap-2 bg-gray-100 px-2 py-1 rounded-md text-gray-600 items-center">
+                  <component :is="iconMap.project" class="w-4 h-4 text-transparent" />
+                  <a-tooltip overlay-class-name="!px-2 !py-1 !rounded-lg">
+                    <template #title>
+                      {{ cmdOption.baseName }}
+                    </template>
+                    <span class="max-w-32 truncate capitalize">
+                      {{ cmdOption.baseName }}
+                    </span>
+                  </a-tooltip>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <CmdFooter active-cmd="cmd-l" :set-active-cmd-view="setActiveCmdView" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+/* TODO Move styles to Windi Classes */
+
+:root {
+  --cmdk-secondary-background-color: rgb(230, 230, 230);
+  --cmdk-secondary-text-color: rgb(101, 105, 111);
+  --cmdk-selected-background: rgb(245, 245, 245);
+
+  --cmdk-icon-color: var(--cmdk-secondary-text-color);
+  --cmdk-icon-size: 1.2em;
+
+  --cmdk-modal-background: #fff;
+}
+.cmdk-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.5);
+  z-index: 1000;
+
+  color: rgb(60, 65, 73);
+  font-size: 16px;
+
+  .cmdk-action {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    outline: none;
+    transition: color 0s ease 0s;
+    width: 100%;
+    font-size: 0.9em;
+    border-left: 4px solid transparent;
+
+    &.selected {
+      cursor: pointer;
+      background-color: rgb(248, 249, 251);
+      border-left: 4px solid #36f;
+      outline: none;
+    }
+
+    .cmdk-action-content {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0.01;
+      flex-grow: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding: 0.75em 1em;
+      width: 640px;
+    }
+
+    .cmdk-action-icon {
+      margin-right: 0.4em;
+    }
+  }
+}
+</style>

packages/nc-gui/components/dashboard/Sidebar/TopSection/Header.vue

@@ -1 +1,26 @@
-<template><span /></template>
+<script setup lang="ts">
+const { commandPalette } = useCommandPalette()
+</script>
+
+<template>
+  <NcButton
+    v-e="['c:quick-actions']"
+    type="text"
+    size="small"
+    class="nc-sidebar-top-button w-full !hover:bg-gray-200 !rounded-md !xs:hidden"
+    data-testid="nc-sidebar-search-btn"
+    :centered="false"
+    @click="commandPalette?.open()"
+  >
+    <div class="flex items-center gap-2">
+      <MaterialSymbolsSearch class="!h-3.9" />
+      Quick Actions
+      <div
+        class="inline-flex gap-1 justify-center text-xs px-[8px] py-[1px] uppercase border-1 border-gray-300 rounded-md bg-slate-150 text-gray-500"
+      >
+        <kbd class="text-[16px] mt-[0.5px]">⌘</kbd>
+        <kbd class="!leading-4">K</kbd>
+      </div>
+    </div>
+  </NcButton>
+</template>

packages/nc-gui/components/workspace/CreateProjectDlg.vue

@@ -19,10 +19,13 @@ const dialogShow = useVModel(props, 'modelValue', emit)
 const baseType = computed(() => props.type ?? NcProjectType.DB)
 
 const basesStore = useBases()
+
 const { createProject: _createProject } = basesStore
 
 const { navigateToProject } = useGlobal()
 
+const { refreshCommandPalette } = useCommandPalette()
+
 const nameValidationRules = [
   {
     required: true,
@@ -59,6 +62,7 @@ const createProject = async () => {
     setTimeout(() => {
       creating.value = false
     }, 500)
+    refreshCommandPalette()
   }
 }
 

packages/nc-gui/composables/useCommandPalette/commands.ts

@@ -0,0 +1,77 @@
+import { navigateTo } from '#imports'
+
+export const homeCommands = [
+  {
+    id: 'user',
+    title: 'Account',
+    icon: 'account',
+    section: 'Accounts',
+  },
+  {
+    id: 'user_account-settings',
+    title: 'Account Settings',
+    icon: 'settings',
+    parent: 'user',
+    section: 'Account',
+    handler: () => {
+      navigateTo('/account/profile')
+    },
+  },
+  {
+    id: 'user_account-logout',
+    title: 'Logout',
+    icon: 'signout',
+    parent: 'user',
+    section: 'Account',
+    handler: () => {},
+  },
+  {
+    id: 'user_account-discord',
+    title: 'Discord',
+    icon: 'discord',
+    parent: 'user',
+    section: 'Community',
+    handler: () => {
+      navigateTo('https://discord.gg/8jX2GQn', { external: true })
+    },
+  },
+  {
+    id: 'user_account-twitter',
+    title: '(formerly Twitter)',
+    icon: 'twitter',
+    parent: 'user',
+    section: 'Community',
+    handler: () => {
+      navigateTo('https://twitter.com/NocoDB', { external: true })
+    },
+  },
+  {
+    id: 'user_account-reddit',
+    title: 'Reddit',
+    icon: 'reddit',
+    parent: 'user',
+    section: 'Community',
+    handler: () => {
+      navigateTo('https://www.reddit.com/r/NocoDB/', { external: true })
+    },
+  },
+]
+
+/*
+  Here is a list of all the available commands defined throughout the app.
+  Commands prefixed with a '-' are static commands that are always available.
+  Commands prefixed with a '+' are dynamic commands that are only available when the user is in a specific context.
+  Commands prefixed with a '*' are scopes
+
+  Commands:
+    * home (Navigate Home)
+    + workspaces (Workspaces - EE)
+    + bases (Projects)
+    * workspace (Workspace - EE)
+      + tables (Tables)
+      + views (Views)
+    * account_settings (Account Settings)
+      * account_settings-users (Users)
+        - account_settings-users-reset_password (Reset Password)
+      - account_settings-tokens (Tokens)
+*/

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

@@ -1,20 +1,197 @@
+import type { Ref } from 'vue'
+import { homeCommands } from './commands'
+
+interface CmdAction {
+  id: string
+  title: string
+  hotkey?: string
+  parent?: string
+  handler?: Function
+  icon?: VNode | string
+  keywords?: string[]
+  projectName?: string
+  section?: string
+}
+
 export const useCommandPalette = createSharedComposable(() => {
+  const { $api } = useNuxtApp()
+
+  const router = useRouter()
+
+  const route = router.currentRoute
+
   const commandPalette = ref()
 
   const refreshCommandPalette = createEventHook<void>()
 
-  const cmdPlaceholder = ref('Quick actions')
+  const activeScope: Ref<{ scope: string; data: any }> = ref({ scope: 'disabled', data: {} })
+
+  const cmdLoading = ref(false)
+
+  const cmdPlaceholder = ref('Search...')
+
+  const { token, user, signOut } = useGlobal()
+
+  const commands = ref({
+    homeCommands,
+    baseCommands: [],
+  } as Record<string, CmdAction[]>)
+
+  const staticData = computed(() => {
+    const staticCmd = commands.value.homeCommands
+
+    // Static Commands
+    staticCmd.map((cmd) => {
+      if (cmd.id === 'user') {
+        if (user.value && user.value.display_name && user.value.email) {
+          cmd.title = user.value.display_name ?? user.value.email.split('@')[0] ?? 'User'
+        }
+      } else if (cmd.id === 'user_account-logout') {
+        cmd.handler = async () => {
+          await signOut()
+          window.location.reload()
+        }
+      }
+      return cmd
+    })
+
+    if (activeScope.value.scope === 'root') return staticCmd
+
+    staticCmd.push(...commands.value.baseCommands)
+
+    return staticCmd
+  })
+
+  const dynamicData = ref<any>([])
+
+  const tempData = ref<any>([])
+
+  const loadedTemporaryScopes = ref<any>([])
+
+  const cmdData = computed(() => {
+    if (cmdLoading.value) {
+      return [{ id: 'loading', title: 'Loading...' }, ...staticData.value]
+    } else {
+      return [...dynamicData.value, ...staticData.value, ...tempData.value]
+    }
+  })
+
+  function processHandler(handler: { type: string; payload: string }) {
+    switch (handler.type) {
+      case 'navigate':
+        return () => navigateTo(handler.payload)
+      default:
+        break
+    }
+  }
+
+  async function loadTemporaryScope(scope: { scope: string; data: any }) {
+    if (loadedTemporaryScopes.value.find((s: any) => s.scope === scope.scope)) return
+
+    if (
+      activeScope.value.scope === scope.scope &&
+      Object.keys(scope.data).every((k) => activeScope.value.data[k] && scope.data[k] === activeScope.value.data[k])
+    )
+      return
+    $api.utils.commandPalette(scope).then((res) => {
+      const fetchData = res.map((item: any) => {
+        if (item.handler) item.handler = processHandler(item.handler)
+        return item
+      })
+      for (const d of fetchData) {
+        const fnd = tempData.value.find((t: any) => t.id === d.id)
+        if (fnd) {
+          Object.assign(fnd, d)
+        } else {
+          tempData.value.push(d)
+        }
+      }
+      loadedTemporaryScopes.value.push(scope)
+    })
+  }
+
+  async function loadScope() {
+    if (activeScope.value.scope === 'disabled') {
+      activeScope.value = { scope: activeScope.value.scope, data: activeScope.value.data }
+      return
+    }
+    dynamicData.value = []
+    tempData.value = []
+    loadedTemporaryScopes.value = []
+    cmdLoading.value = true
+    $api.utils
+      .commandPalette(activeScope.value)
+      .then((res) => {
+        dynamicData.value = res.map((item: any) => {
+          if (item.handler) item.handler = processHandler(item.handler)
+          return item
+        })
+        cmdLoading.value = false
+      })
+      .catch((e) => {
+        cmdLoading.value = false
+        console.log(e)
+      })
+  }
+
+  refreshCommandPalette.on(() => {
+    loadScope()
+  })
+
+  watch(
+    () => route.value.params,
+    () => {
+      // if user is not authenticated, don't load scope
+      if (!token.value) return
+
+      if (route.value.params.typeOrId && typeof route.value.params.typeOrId === 'string') {
+        if (route.value.params.typeOrId === 'base') {
+          if (activeScope.value.scope === 'disabled') return
+
+          activeScope.value = { scope: 'disabled', data: {} }
+
+          loadScope()
+        } else if (route.value.params.typeOrId.startsWith('w')) {
+          if (activeScope.value.data?.workspace_id === route.value.params.typeOrId) return
+
+          activeScope.value = {
+            scope: `ws-${route.value.params.typeOrId}`,
+            data: { workspace_id: route.value.params.typeOrId },
+          }
+
+          loadScope()
+        } else if (route.value.params.typeOrId === 'nc') {
+          if (activeScope.value.data.base_id === route.value.params.baseId) return
+
+          activeScope.value = {
+            scope: `p-${route.value.params.baseId}`,
+            data: { base_id: route.value.params.baseId },
+          }
+        }
+      } else {
+        if (route.value.path.startsWith('/account')) {
+          if (activeScope.value.scope === 'account_settings') return
+
+          activeScope.value = { scope: 'account_settings', data: {} }
 
-  const cmdData = computed(() => {})
+          loadScope()
+        } else {
+          if (activeScope.value.scope === 'root') return
 
-  const activeScope = computed(() => ({} as any))
+          activeScope.value = { scope: 'root', data: {} }
 
-  const loadTemporaryScope = (..._args: any) => {}
+          loadScope()
+        }
+      }
+    },
+    { immediate: true, deep: true },
+  )
 
   return {
     commandPalette,
     cmdData,
     activeScope,
+    loadScope,
     cmdPlaceholder,
     refreshCommandPalette: refreshCommandPalette.trigger,
     loadTemporaryScope,

packages/nc-gui/lib/types.ts

@@ -182,6 +182,8 @@ interface UsersSortType {
   direction?: 'asc' | 'desc'
 }
 
+type CommandPaletteType = 'cmd-k' | 'cmd-j' | 'cmd-l'
+
 export type {
   User,
   ProjectMetaInfo,
@@ -208,4 +210,5 @@ export type {
   NcButtonSize,
   SidebarTableNode,
   UsersSortType,
+  CommandPaletteType,
 }

packages/nc-gui/nuxt.config.ts

@@ -101,6 +101,11 @@ export default defineNuxtConfig({
           content: './link-preview.webp',
         },
       ],
+      script: [
+        {
+          src: '/js/typesense-docsearch.js',
+        },
+      ],
     },
   },
 
@@ -110,6 +115,7 @@ export default defineNuxtConfig({
     'virtual:windi-devtools',
     '~/assets/css/global.css',
     '~/assets/style.scss',
+    '~/assets/css/typesense-docsearch.css',
   ],
 
   runtimeConfig: {

packages/nc-gui/plugins/tele.ts

@@ -95,4 +95,57 @@ export default defineNuxtPlugin(async (nuxtApp) => {
     nuxtApp.provide('tele', tele)
     nuxtApp.provide('e', (e: string, data?: Record<string, any>) => tele.emit(e, { data }))
   }
+
+  document.body.removeEventListener('click', clickListener, true)
+  document.body.addEventListener('click', clickListener, true)
+
+  document.body.removeEventListener('keydown', keydownListener, true)
+  document.body.addEventListener('keydown', keydownListener, true)
 })
+
+function clickListener(e) {
+  if (e.nc_handled) return
+  e.nc_handled = true
+  let target = e.target
+
+  while (target && !target.classList.contains('DocSearch-Hit')) {
+    target = target.parentElement
+  }
+  if (target) {
+    const searchInput = document.querySelector('.DocSearch-Input')
+    const selectedElement = target.querySelector('a')
+    const url = new URL(selectedElement.href)
+
+    e.preventDefault()
+    e.stopPropagation()
+    url.searchParams.append('search', searchInput.value)
+    url.searchParams.append('origin', location.hostname)
+
+    window.open(url.toString(), '_blank', 'noopener,noreferrer')
+  }
+}
+
+function keydownListener(e) {
+  if (e.nc_handled || e.which !== 13) return
+  e.nc_handled = true
+  let target = e.target
+
+  while (target && !target.classList.contains('DocSearch-Input')) {
+    target = target.parentElement
+  }
+
+  if (target) {
+    const selectedElement = document.querySelector('.DocSearch-Hit[aria-selected=true] a')
+
+    if (selectedElement) {
+      const url = new URL(selectedElement.href)
+
+      url.searchParams.append('search', target.value)
+      url.searchParams.append('origin', location.hostname)
+      e.preventDefault()
+      e.stopPropagation()
+
+      window.open(url.toString(), '_blank', 'noopener,noreferrer')
+    }
+  }
+}

packages/nocodb/src/controllers/command-palette.controller.spec.ts

@@ -0,0 +1,19 @@
+import { Test } from '@nestjs/testing';
+import { CommandPaletteController } from './command-palette.controller';
+import type { TestingModule } from '@nestjs/testing';
+
+describe('CommandPaletteController', () => {
+  let controller: CommandPaletteController;
+
+  beforeEach(async () => {
+    const module: TestingModule = await Test.createTestingModule({
+      controllers: [CommandPaletteController],
+    }).compile();
+
+    controller = module.get<CommandPaletteController>(CommandPaletteController);
+  });
+
+  it('should be defined', () => {
+    expect(controller).toBeDefined();
+  });
+});

packages/nocodb/src/controllers/command-palette.controller.ts

@@ -0,0 +1,27 @@
+import { Controller, HttpCode, Post, Req, UseGuards } from '@nestjs/common';
+import { Request } from 'express';
+import type { UserType } from 'nocodb-sdk';
+import { GlobalGuard } from '~/guards/global/global.guard';
+import { CommandPaletteService } from '~/services/command-palette.service';
+import { Acl } from '~/middlewares/extract-ids/extract-ids.middleware';
+import { MetaApiLimiterGuard } from '~/guards/meta-api-limiter.guard';
+
+@Controller()
+@UseGuards(MetaApiLimiterGuard, GlobalGuard)
+export class CommandPaletteController {
+  constructor(private commandPaletteService: CommandPaletteService) {}
+
+  @Post('/api/v1/command_palette')
+  @Acl('commandPalette', {
+    scope: 'org',
+  })
+  @HttpCode(200)
+  async commandPalette(@Req() req: Request) {
+    const data = this.commandPaletteService.commandPalette({
+      user: req?.user as UserType,
+      body: req.body,
+    });
+
+    return data;
+  }
+}

packages/nocodb/src/modules/metas/metas.module.ts

@@ -73,6 +73,8 @@ import { BaseUsersService } from '~/services/base-users/base-users.service';
 import { NotificationsService } from '~/services/notifications.service';
 import { NotificationsController } from '~/controllers/notifications.controller';
 import { NotificationsGateway } from '~/gateways/notifications/notifications.gateway';
+import { CommandPaletteService } from '~/services/command-palette.service';
+import { CommandPaletteController } from '~/controllers/command-palette.controller';
 
 export const metaModuleMetadata = {
   imports: [
@@ -122,6 +124,7 @@ export const metaModuleMetadata = {
           SortsController,
           SharedBasesController,
           NotificationsController,
+          CommandPaletteController,
         ]
       : []),
   ],
@@ -163,6 +166,7 @@ export const metaModuleMetadata = {
     BulkDataAliasService,
     NotificationsService,
     NotificationsGateway,
+    CommandPaletteService,
   ],
   exports: [
     TablesService,

packages/nocodb/src/schema/swagger.json

@@ -16329,6 +16329,32 @@
         ]
       }
     },
+    "/api/v1/command_palette": {
+      "parameters": [],
+      "post": {
+        "summary": "Get command palette suggestions",
+        "operationId": "utils-command-palette",
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          }
+        },
+        "tags": [
+          "Utils"
+        ],
+        "requestBody": {
+          "content": {
+            "application/json": {}
+          }
+        },
+        "description": "Get dynamic command palette suggestions based on scope"
+      }
+    },
     "/jobs/listen": {
       "post": {
         "summary": "Jobs Listen",

packages/nocodb/src/services/command-palette.service.spec.ts

@@ -0,0 +1,19 @@
+import { Test } from '@nestjs/testing';
+import { CommandPaletteService } from './command-palette.service';
+import type { TestingModule } from '@nestjs/testing';
+
+describe('CommandPaletteService', () => {
+  let service: CommandPaletteService;
+
+  beforeEach(async () => {
+    const module: TestingModule = await Test.createTestingModule({
+      providers: [CommandPaletteService],
+    }).compile();
+
+    service = module.get<CommandPaletteService>(CommandPaletteService);
+  });
+
+  it('should be defined', () => {
+    expect(service).toBeDefined();
+  });
+});

packages/nocodb/src/services/command-palette.service.ts

@@ -0,0 +1,114 @@
+import { Injectable } from '@nestjs/common';
+import { type UserType, ViewTypes } from 'nocodb-sdk';
+import { Base } from '~/models';
+import { TablesService } from '~/services/tables.service';
+
+const viewTypeAlias: Record<number, string> = {
+  [ViewTypes.GRID]: 'grid',
+  [ViewTypes.FORM]: 'form',
+  [ViewTypes.GALLERY]: 'gallery',
+  [ViewTypes.KANBAN]: 'kanban',
+  [ViewTypes.MAP]: 'map',
+};
+
+@Injectable()
+export class CommandPaletteService {
+  constructor(private tablesService: TablesService) {}
+
+  async commandPalette(param: { body: any; user: UserType }) {
+    const cmdData = [];
+    try {
+      const { scope } = param.body;
+
+      if (scope === 'root') {
+        const bases = await Base.list({ user: param.user });
+
+        for (const base of bases) {
+          cmdData.push({
+            id: `p-${base.id}`,
+            title: base.title,
+            icon: 'project',
+            section: 'Bases',
+            scopePayload: {
+              scope: `p-${base.id}`,
+              data: {
+                base_id: base.id,
+              },
+            },
+          });
+        }
+      } else if (scope.startsWith('p-')) {
+        const allBases = [];
+
+        const bases = await Base.list({ user: param.user });
+
+        allBases.push(...bases);
+
+        const viewList = [];
+
+        for (const base of bases) {
+          viewList.push(
+            ...(
+              (await this.tablesService.xcVisibilityMetaGet(
+                base.id,
+                null,
+                false,
+              )) as any[]
+            ).filter((v) => {
+              return Object.keys(param.user.roles).some(
+                (role) => param.user.roles[role] && !v.disabled[role],
+              );
+            }),
+          );
+        }
+
+        const tableList = [];
+        const vwList = [];
+
+        for (const b of allBases) {
+          cmdData.push({
+            id: `p-${b.id}`,
+            title: b.title,
+            icon: 'project',
+            section: 'Bases',
+          });
+        }
+
+        for (const v of viewList) {
+          if (!tableList.find((el) => el.id === `tbl-${v.fk_model_id}`)) {
+            tableList.push({
+              id: `tbl-${v.fk_model_id}`,
+              title: v._ptn,
+              parent: `p-${v.base_id}`,
+              icon: v?.table_meta?.icon || v.ptype,
+              projectName: bases.find((el) => el.id === v.base_id)?.title,
+              section: 'Tables',
+            });
+          }
+          vwList.push({
+            id: `vw-${v.id}`,
+            title: `${v.title}`,
+            parent: `tbl-${v.fk_model_id}`,
+            icon: v?.meta?.icon || viewTypeAlias[v.type] || 'table',
+            projectName: bases.find((el) => el.id === v.base_id)?.title,
+            section: 'Views',
+            is_default: v?.is_default,
+            handler: {
+              type: 'navigate',
+              payload: `/nc/${v.base_id}/${v.fk_model_id}/${encodeURIComponent(
+                v.id,
+              )}`,
+            },
+          });
+        }
+
+        cmdData.push(...tableList);
+        cmdData.push(...vwList);
+      }
+    } catch (e) {
+      console.log(e);
+      return [];
+    }
+    return cmdData;
+  }
+}