diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx index dc1e1fca80e..c815c350d64 100644 --- a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx +++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx @@ -3,11 +3,12 @@ import { ChevronLeft } from 'lucide-react' import Link from 'next/link' import { ReactNode, useMemo } from 'react' -import { useParams } from 'common' +import { LOCAL_STORAGE_KEYS, useParams } from 'common' import { useIsBranching2Enabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext' import { Connect } from 'components/interfaces/Connect/Connect' import { LocalDropdown } from 'components/interfaces/LocalDropdown' import { UserDropdown } from 'components/interfaces/UserDropdown' +import { AdvisorButton } from 'components/layouts/AppLayout/AdvisorButton' import { AssistantButton } from 'components/layouts/AppLayout/AssistantButton' import { BranchDropdown } from 'components/layouts/AppLayout/BranchDropdown' import { InlineEditorButton } from 'components/layouts/AppLayout/InlineEditorButton' @@ -15,20 +16,20 @@ import { OrganizationDropdown } from 'components/layouts/AppLayout/OrganizationD import { ProjectDropdown } from 'components/layouts/AppLayout/ProjectDropdown' import { getResourcesExceededLimitsOrg } from 'components/ui/OveragesBanner/OveragesBanner.utils' import { useOrgUsageQuery } from 'data/usage/org-usage-query' +import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage' import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { IS_PLATFORM } from 'lib/constants' import { useRouter } from 'next/router' import { useAppStateSnapshot } from 'state/app-state' import { Badge, cn } from 'ui' +import { CommandMenuTriggerInput } from 'ui-patterns' import { BreadcrumbsView } from './BreadcrumbsView' import { FeedbackDropdown } from './FeedbackDropdown/FeedbackDropdown' import { HelpPopover } from './HelpPopover' import { HomeIcon } from './HomeIcon' import { LocalVersionPopover } from './LocalVersionPopover' import MergeRequestButton from './MergeRequestButton' -import { AdvisorButton } from 'components/layouts/AppLayout/AdvisorButton' -import { CommandMenuTriggerInput } from 'ui-patterns' const LayoutHeaderDivider = ({ className, ...props }: React.HTMLProps) => ( @@ -70,6 +71,8 @@ export const LayoutHeader = ({ const { setMobileMenuOpen } = useAppStateSnapshot() const gitlessBranching = useIsBranching2Enabled() + const [commandMenuEnabled] = useLocalStorageQuery(LOCAL_STORAGE_KEYS.HOTKEY_COMMAND_MENU, true) + const isAccountPage = router.pathname.startsWith('/account') // We only want to query the org usage and check for possible over-ages for plans without usage billing enabled (free or pro with spend cap) @@ -211,13 +214,15 @@ export const LayoutHeader = ({
div]:border-none', + '[&_.command-shortcut>div]:pr-2', + '[&_.command-shortcut>div]:bg-transparent', + '[&_.command-shortcut>div]:text-foreground-lighter' + )} /> diff --git a/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx b/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx index 99fa8fa7f5f..d7e45e21855 100644 --- a/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx +++ b/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx @@ -171,9 +171,11 @@ function CommandMenuTrigger({ children }: PropsWithChildren) { function CommandMenuTriggerInput({ className, placeholder = 'Search...', + showShortcut = true, }: { className?: string placeholder?: string | React.ReactNode + showShortcut?: boolean }) { return ( @@ -199,15 +201,17 @@ function CommandMenuTriggerInput({ />

{placeholder}

-
- + )} )