feat(nc-gui): clickable command palette footer

packages/nc-gui/app.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { applyNonSelectable, computed, useCommandPalette, useRouter, useTheme, isEeUI } from '#imports'
-
+import type { CommandPaletteType } from '~/lib'
 const router = useRouter()
 
 const route = router.currentRoute
@@ -69,6 +69,16 @@ function onScope(scope: string) {
     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
+  }
+}
 </script>
 
 <template>
@@ -85,10 +95,11 @@ function onScope(scope: string) {
     :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" />
+  <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,65 @@
+<script setup lang="ts">
+import type { CommandPaletteType } from '~/lib'
+
+const props = 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-k/index.vue

@@ -4,6 +4,7 @@ import { useMagicKeys, whenever } from '@vueuse/core'
 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
@@ -25,6 +26,7 @@ const props = defineProps<{
   placeholder?: string
   hotkey?: string
   loadTemporaryScope?: (scope: { scope: string; data: any }) => void
+  setActiveCmdView: (cmd: CommandPaletteType) => void
 }>()
 
 const emits = defineEmits(['update:open', 'scope'])
@@ -405,7 +407,7 @@ defineExpose({
                       <template #title>
                         {{ act.title }}
                       </template>
-                      <span class="truncate capitalize mr-4">
+                      <span class="truncate capitalize mr-4 py-0.5">
                         {{ act.title }}
                       </span>
                     </a-tooltip>
@@ -426,54 +428,7 @@ defineExpose({
           </template>
         </div>
       </div>
-      <div class="cmdk-footer absolute inset-x-0 bottom-0">
+      <CmdFooter active-cmd="cmd-k" :set-active-cmd-view="setActiveCmdView" />
-        <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">
-            <MdiFileOutline class="h-4 w-4" />
-            <span
-              class="cursor-pointer"
-              @click.stop="
-                () => {
-                  console.log('clicked')
-                }
-              "
-            >
-              Document
-            </span>
-            <span class="bg-gray-100 px-1 rounded-md border-1 border-gray-300"> {{ renderCmdOrCtrlKey() }} + J </span>
-          </div>
-          <div class="flex flex-grow-1 text-brand-500 w-full text-sm items-center gap-2 justify-center">
-            <MdiMapMarkerOutline class="h-4 w-4" />
-            <span
-              class="cursor-pointer"
-              @click.stop="
-                () => {
-                  console.log('clicked')
-                }
-              "
-            >
-              Quick Navigation
-            </span>
-            <span class="bg-brand-500 border-1 border-brand-500 text-sm text-white px-1 rounded-md">
-              {{ renderCmdOrCtrlKey() }} + K
-            </span>
-          </div>
-          <div class="flex flex-grow-1 w-full text-sm items-center gap-2 justify-center">
-            <MdiClockOutline class="h-4 w-4" />
-            <span
-              class="cursor-pointer"
-              @click.stop="
-                () => {
-                  console.log('clicked')
-                }
-              "
-            >
-              Recent
-            </span>
-            <span class="bg-gray-100 px-1 rounded-md border-1 border-gray-300"> {{ renderCmdOrCtrlKey() }} + L </span>
-          </div>
-        </div>
-      </div>
     </div>
   </div>
 </template>

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

@@ -1,9 +1,11 @@
 <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'])
@@ -59,10 +61,6 @@ function scrollToTarget() {
   })
 }
 
-const renderCmdOrCtrlKey = () => {
-  return isMac() ? '⌘' : 'Ctrl'
-}
-
 const moveUp = () => {
   if (!recentViews.value.length) return
   const index = recentViews.value.findIndex((v) => v.tableID + v.viewName === selected.value)
@@ -241,27 +239,7 @@ onMounted(() => {
           </div>
         </div>
       </div>
-      <div class="cmdk-footer absolute !bg-white inset-x-0 bottom-0">
+      <CmdFooter active-cmd="cmd-l" :set-active-cmd-view="setActiveCmdView" />
-        <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">
-            <MdiFileOutline class="h-4 w-4" />
-            Document
-            <span class="bg-gray-100 px-1 rounded-md border-1 border-gray-300"> {{ renderCmdOrCtrlKey() }} + J </span>
-          </div>
-          <div class="flex flex-grow-1 w-full text-sm items-center gap-2 justify-center">
-            <MdiMapMarkerOutline class="h-4 w-4" />
-            Quick Navigation
-            <span class="bg-gray-100 px-1 rounded-md border-1 border-gray-300"> {{ renderCmdOrCtrlKey() }} + K </span>
-          </div>
-          <div class="flex flex-grow-1 text-brand-500 w-full text-sm items-center gap-2 justify-center">
-            <MdiClockOutline class="h-4 w-4" />
-            Recent
-            <span class="bg-brand-500 text-white px-1 rounded-md border-1 border-brand-500">
-              {{ renderCmdOrCtrlKey() }} + L
-            </span>
-          </div>
-        </div>
-      </div>
     </div>
   </div>
 </template>

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

@@ -65,9 +65,7 @@ export const homeCommands = [
 
   Commands:
     * home (Navigate Home)
-    + workspaces (Workspaces)
     + bases (Projects)
-    * workspace (Workspace)
       + tables (Tables)
       + views (Views)
     * account_settings (Account Settings)

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,
 }