Connect.Commands.tsx48 lines · main
| 1 | import { Plug } from 'lucide-react' |
| 2 | import { parseAsBoolean, parseAsString, useQueryState } from 'nuqs' |
| 3 | import type { ICommand } from 'ui-patterns/CommandMenu' |
| 4 | import { useRegisterCommands, useSetCommandMenuOpen } from 'ui-patterns/CommandMenu' |
| 5 | |
| 6 | import { COMMAND_MENU_SECTIONS } from '@/components/interfaces/App/CommandMenu/CommandMenu.utils' |
| 7 | import { orderCommandSectionsByPriority } from '@/components/interfaces/App/CommandMenu/ordering' |
| 8 | import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject' |
| 9 | import { PROJECT_STATUS } from '@/lib/constants' |
| 10 | |
| 11 | export 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 | } |