Connect.Commands.tsx48 lines · main
1import { Plug } from 'lucide-react'
2import { parseAsBoolean, parseAsString, useQueryState } from 'nuqs'
3import type { ICommand } from 'ui-patterns/CommandMenu'
4import { useRegisterCommands, useSetCommandMenuOpen } from 'ui-patterns/CommandMenu'
5
6import { COMMAND_MENU_SECTIONS } from '@/components/interfaces/App/CommandMenu/CommandMenu.utils'
7import { orderCommandSectionsByPriority } from '@/components/interfaces/App/CommandMenu/ordering'
8import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
9import { PROJECT_STATUS } from '@/lib/constants'
10
11export function useConnectCommands() {
12 const setIsOpen = useSetCommandMenuOpen()
13 const { data: selectedProject } = useSelectedProjectQuery()
14 const isActiveHealthy = selectedProject?.status === PROJECT_STATUS.ACTIVE_HEALTHY
15
16 const [, setShowConnect] = useQueryState('showConnect', parseAsBoolean.withDefault(false))
17 const [, setConnectTab] = useQueryState('connectTab', parseAsString)
18
19 useRegisterCommands(
20 COMMAND_MENU_SECTIONS.ACTIONS,
21 [
22 {
23 id: 'connect-to-project',
24 name: 'Connect to your project',
25 action: () => {
26 setShowConnect(true)
27 setIsOpen(false)
28 },
29 icon: () => <Plug className="rotate-90" />,
30 },
31 {
32 id: 'connect-mcp',
33 name: 'Connect via MCP',
34 action: () => {
35 setShowConnect(true)
36 setConnectTab('mcp')
37 setIsOpen(false)
38 },
39 icon: () => <Plug className="rotate-90" />,
40 },
41 ] as ICommand[],
42 {
43 enabled: !!selectedProject && isActiveHealthy,
44 orderSection: orderCommandSectionsByPriority,
45 sectionMeta: { priority: 2 },
46 }
47 )
48}