fix: Fix command palette shortcuts (#1240)

assets/package.json

@@ -32,7 +32,6 @@
   "dependencies": {
     "@absinthe/socket": "0.2.1",
     "@apollo/client": "3.10.3",
-    "@chakra-ui/react": "2.8.2",
     "@dagrejs/dagre": "1.0.4",
     "@docsearch/js": "3.5.2",
     "@docsearch/react": "3.5.2",
@@ -49,7 +48,7 @@
     "@nivo/tooltip": "0.83.0",
     "@pluralsh/design-system": "3.61",
     "@react-hooks-library/core": "0.6.0",
-    "@saas-ui/react": "2.8.8",
+    "@saas-ui/use-hotkeys": "1.1.3",
     "@tanstack/react-virtual": "3.0.1",
     "anser": "2.1.1",
     "apollo-absinthe-upload-link": "1.7.0",
@@ -65,7 +64,6 @@
     "escape-carriage": "1.3.1",
     "filesize": "10.0.12",
     "forge-core": "1.4.6",
-    "framer-motion": "11.3.19",
     "fuse.js": "6.6.2",
     "grommet": "2.34.2",
     "grommet-icons": "4.10.0",

assets/src/components/commandpalette/CommandHotkeys.tsx

@@ -0,0 +1,13 @@
+import { useHotkeys } from '@saas-ui/use-hotkeys'
+
+import { CommandWithHotkeys } from './commands'
+
+export default function CommandHotkeys({
+  command,
+}: {
+  command: CommandWithHotkeys
+}) {
+  useHotkeys(command.hotkeys, command.callback, command.options, command.deps)
+
+  return undefined
+}

assets/src/components/commandpalette/CommandPalette.tsx

@@ -50,7 +50,7 @@ export default function CommandPalette({
                 <Command.Item
                   disabled={command.disabled}
                   onSelect={() => {
-                    command.action()
+                    command.callback()
                     close()
                   }}
                 >
@@ -64,7 +64,7 @@ export default function CommandPalette({
                     />
                   )}
                   <div css={{ flex: 1 }} />
-                  <CommandPaletteShortcuts shortcuts={command.shortcuts} />
+                  <CommandPaletteShortcuts shortcuts={command.hotkeys} />
                 </Command.Item>
               ))}
             </Command.Group>

assets/src/components/commandpalette/CommandPaletteLauncher.tsx

@@ -3,9 +3,11 @@ import { useCallback, useState } from 'react'
 import { usePlatform } from 'components/hooks/usePlatform'
 import styled, { useTheme } from 'styled-components'
 
+import { useHotkeys } from '@saas-ui/use-hotkeys'
+
 import CommandPaletteDialog from './CommandPaletteDialog'
-import CommandPaletteShortcut from './CommandPaletteShortcut'
-import { useShortcuts } from './shortcuts'
+import { useCommandsWithHotkeys } from './commands'
+import CommandHotkeys from './CommandHotkeys'
 
 export const CommandPaletteLauncherSC = styled.button(({ theme }) => ({
   ...theme.partials.reset.button,
@@ -37,16 +39,16 @@ export const CommandPaletteLauncherSC = styled.button(({ theme }) => ({
 }))
 
 export default function CommandPaletteLauncher() {
+  const theme = useTheme()
+  const { modKeyString, keyCombinerString } = usePlatform()
+  const commands = useCommandsWithHotkeys()
   const [open, setOpen] = useState(false)
   const openCommandPalette = useCallback(
     () => setOpen((open) => !open),
     [setOpen]
   )
-  const shortcuts = useShortcuts([
-    { hotkeys: ['cmd K', 'ctrl K'], action: openCommandPalette },
-  ])
-  const { modKeyString, keyCombinerString } = usePlatform()
-  const theme = useTheme()
+
+  useHotkeys(['cmd K', 'ctrl K'], openCommandPalette)
 
   return (
     <>
@@ -72,8 +74,8 @@ export default function CommandPaletteLauncher() {
         open={open}
         setOpen={setOpen}
       />
-      {shortcuts.map((shortcut) => (
-        <CommandPaletteShortcut shortcut={shortcut} />
+      {commands.map((command) => (
+        <CommandHotkeys command={command} />
       ))}
     </>
   )