chore(studio): use ShortcutBadge in Connect command (supabase#46245)

## What kind of change does this PR introduce?

Refactor

## What is the current behavior?

FE-3452: `Connect.Commands.tsx` has a local `ConnectShortcutBadge`
component that hand-rolls the same Fragment + `KeyboardShortcut` +
"then" separator loop that `ShortcutBadge` already provides.

FE-3453: The `'header_button' | 'connect_section' | 'keyboard_shortcut'`
union is written out twice: once in `app-state.ts` and once in the
`ConnectSheetOpenedEvent` telemetry type in `telemetry-constants.ts`.

## What is the new behavior?

FE-3452: `ConnectShortcutBadge` is removed; the badge uses
`<ShortcutBadge shortcutId={SHORTCUT_IDS.CONNECT_OPEN_SHEET} />` inline.

FE-3453: A `ConnectSheetSource` type is exported from
`telemetry-constants.ts` and imported into `app-state.ts`.

## Additional context

- Resolves FE-3452
- Resolves FE-3453.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
* Consolidated shortcut badge rendering to use a shared component across
the application, improving code maintainability and reducing
duplication.
* Introduced a centralized type definition for connect sheet source
tracking, enhancing type consistency throughout the codebase.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46245?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: dnywh

apps/studio/components/interfaces/ConnectButton/Connect.Commands.tsx

@@ -1,27 +1,14 @@
 import { Plug } from 'lucide-react'
 import { parseAsBoolean, parseAsString, useQueryState } from 'nuqs'
-import { Fragment } from 'react'
-import { KeyboardShortcut } from 'ui'
 import type { ICommand } from 'ui-patterns/CommandMenu'
 import { useRegisterCommands, useSetCommandMenuOpen } from 'ui-patterns/CommandMenu'
 
 import { COMMAND_MENU_SECTIONS } from '@/components/interfaces/App/CommandMenu/CommandMenu.utils'
 import { orderCommandSectionsByPriority } from '@/components/interfaces/App/CommandMenu/ordering'
+import { ShortcutBadge } from '@/components/ui/ShortcutBadge'
 import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
 import { PROJECT_STATUS } from '@/lib/constants'
-import { hotkeyToKeys } from '@/state/shortcuts/formatShortcut'
-import { SHORTCUT_DEFINITIONS, SHORTCUT_IDS } from '@/state/shortcuts/registry'
-
-const ConnectShortcutBadge = () => (
-  <div className="flex items-center gap-1">
-    {SHORTCUT_DEFINITIONS[SHORTCUT_IDS.CONNECT_OPEN_SHEET].sequence.map((step, index) => (
-      <Fragment key={`${step}-${index}`}>
-        {index > 0 && <span className="text-foreground-lighter text-[11px]">then</span>}
-        <KeyboardShortcut keys={hotkeyToKeys(step)} />
-      </Fragment>
-    ))}
-  </div>
-)
+import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
 
 export function useConnectCommands() {
   const setIsOpen = useSetCommandMenuOpen()
@@ -43,7 +30,7 @@ export function useConnectCommands() {
           setIsOpen(false)
         },
         icon: () => <Plug className="rotate-90" />,
-        badge: ConnectShortcutBadge,
+        badge: () => <ShortcutBadge shortcutId={SHORTCUT_IDS.CONNECT_OPEN_SHEET} />,
       },
       {
         id: 'connect-mcp',

apps/studio/state/app-state.ts

@@ -1,4 +1,5 @@
 import { LOCAL_STORAGE_KEYS as COMMON_LOCAL_STORAGE_KEYS } from 'common'
+import { type ConnectSheetSource } from 'common/telemetry-constants'
 import { proxy, snapshot, useSnapshot } from 'valtio'
 
 const getInitialState = () => {
@@ -70,8 +71,8 @@ export const appState = proxy({
     appState.mobileMenuOpen = value
   },
 
-  connectSheetSource: 'header_button' as 'header_button' | 'connect_section' | 'keyboard_shortcut',
-  setConnectSheetSource: (value: 'header_button' | 'connect_section' | 'keyboard_shortcut') => {
+  connectSheetSource: 'header_button' as ConnectSheetSource,
+  setConnectSheetSource: (value: ConnectSheetSource) => {
     appState.connectSheetSource = value
   },
 

packages/common/telemetry-constants.ts

@@ -1916,6 +1916,8 @@ export interface HomeConnectActionClickedEvent {
   groups: TelemetryGroups
 }
 
+export type ConnectSheetSource = 'header_button' | 'connect_section' | 'keyboard_shortcut'
+
 /**
  * User opened the ConnectSheet panel.
  *
@@ -1929,7 +1931,7 @@ export interface ConnectSheetOpenedEvent {
     /**
      * Where the sheet was opened from
      */
-    source: 'header_button' | 'connect_section' | 'keyboard_shortcut'
+    source: ConnectSheetSource
   }
   groups: TelemetryGroups
 }