Files
supabase/apps/studio/state/shortcuts/utils.ts
Ali Waseem 722fe85c16 feat(studio): keyboard shortcuts for integrations (#46348)
## Summary

Adds keyboard shortcuts to the Integrations Marketplace landing and
per-integration detail pages. Introduces a `useDynamicShortcut` hook
since per-integration tab counts/labels can't be pre-declared in the
static registry.

## Shortcuts

| Page | Keys | Action |
|---|---|---|
| Marketplace landing | `Shift+F` | Focus the integrations search input
|
| Marketplace landing | `F` then `C` | Clear search +
category/type/source filters |
| Marketplace landing search | `Esc` | Clear value (1st press), blur
(2nd press) |
| Integration detail | `1`–`9` | Jump to the Nth tab (label adapts per
integration, e.g. "Go to Queues", "Go to Jobs") |

Linear: [FE-3416](https://linear.app/supabase/issue/FE-3416)

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

* **New Features**
  * Use number keys 1–9 to jump to integration detail tabs.
* Marketplace search shortcuts: focus/select the search field and reset
filters via keyboard; Escape now clears the search input.
* Shortcuts now appear in the command menu under a dedicated
integrations navigation group.

<!-- 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/46348?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 -->
2026-05-26 14:33:19 +00:00

23 lines
724 B
TypeScript

import { ICommand } from 'ui-patterns'
import { SHORTCUT_IDS } from './registry'
/**
* Shared orderer for the Cmd+K "Shortcuts" section. Keeps the "Show all
* keyboard shortcuts" entry pinned to the bottom regardless of registration
* order; everything else is order-stable. Exported so `useDynamicShortcut`
* can share the same ordering behavior.
*/
export const orderShortcutCommands = (
commands: ICommand[],
commandsToInsert: ICommand[]
): ICommand[] => {
const mergedCommands = [...commands, ...commandsToInsert]
return mergedCommands.sort((a, b) => {
if (a.id === SHORTCUT_IDS.SHORTCUTS_OPEN_REFERENCE) return 1
if (b.id === SHORTCUT_IDS.SHORTCUTS_OPEN_REFERENCE) return -1
return 0
})
}