Closes
[FE-3245](https://linear.app/supabase/issue/FE-3245/add-keyboard-shortcuts-to-edge-functions-pages).
Adds keyboard shortcuts across the Edge Functions surface, mirroring the
patterns already in place for Database / Auth / Storage.
## Summary
Three layers of new shortcuts, plus one quality-of-life fix on the
existing search input:
### 1. Edge Functions list page (`/project/:ref/functions`)
| Key | Action |
|---|---|
| `Shift+F` | Focus the search input |
| `Shift+N` | Route to `/functions/new` (deploy a new function) |
| `F` then `C` | Clear search filter |
| `Shift+R` | Refresh the functions list (new toolbar button) |
| `S` then `C` | Reset sort to `name:asc` |
| `Esc` (in search) | Clears value, then blurs on a second press
(`onSearchInputEscape`) |
### 2. Edge Functions section nav (active anywhere under `/functions/*`)
| Key | Action |
|---|---|
| `F` then `O` | Functions overview |
| `F` then `K` | Secrets |
Wired through `EdgeFunctionsProductMenu` items via `shortcutId`,
registered by `<ProductMenuShortcuts />` mounted in
`EdgeFunctionsLayout`.
### 3. Per-function detail (active anywhere under `/functions/:slug/*`)
| Key | Action |
|---|---|
| `1` | Overview |
| `2` | Invocations |
| `3` | Logs |
| `4` | Code |
| `5` | Settings |
| `Shift+T` | Open the Test sheet |
| `Shift+D` | Toggle the Download popover |
| `Shift+C` | Copy the function URL (with toast) |
### 4. Test sheet (active when `EdgeFunctionTesterSheet` is open)
| Key | Action |
|---|---|
| `Mod+Enter` | Send Request — first binding for this; mirrors
`SQL_EDITOR_RUN` semantics |
### 5. New per-function Overview (`edgeFunctionsOverview` flag)
| Key | Action |
|---|---|
| `I` then `M` | 15 min |
| `I` then `H` | 1 hour |
| `I` then `T` | 3 hours |
| `I` then `D` | 1 day |
| `Shift+R` | Refresh combined stats query |
| `O` then `L` | Open Logs (or Invocations if unified-logs preview is
off) |
`ShortcutTooltip` added to the most prominent buttons (search, refresh,
copy URL, download, test, send request). Interval/refresh/open-logs on
the overview are registered without inline tooltips but remain
discoverable via `Cmd+K` and the shortcut reference sheet (`Mod+/`).
## Implementation notes
- New reference group `NAVIGATION_FUNCTION_DETAIL` ("Function Page
Navigation") added to keep the reference sheet grouped sensibly.
- Three new registry files: `functions-list.ts`, `functions-nav.ts`,
`functions-detail.ts`, `functions-detail-nav.ts`,
`functions-overview.ts`.
- Three new hooks: `useFunctionsListShortcuts`,
`useFunctionsDetailShortcuts`, `useEdgeFunctionOverviewShortcuts`.
- `EdgeFunctionsLayout` refactored to share a single
`useGenerateEdgeFunctionsMenu` hook between `<ProductMenu>` and
`<ProductMenuShortcuts>` (matches the AuthLayout / DatabaseLayout
pattern).
- Download popover hoisted to controlled state so `Shift+D` can toggle
it.
## Test plan
### Functions list page
- [x] On `/project/:ref/functions`, press `Shift+F` — search input gains
focus and value is selected
- [x] Type in the search → press `Esc` → value clears (focus retained).
Press `Esc` again → blurs
- [x] Press `Shift+N` → routes to `/functions/new`
- [x] With a non-default sort, press `S` then `C` → sort resets to
`name:asc`. Confirm shortcut is disabled when already at default
- [x] Press `Shift+R` → list refetches; loading indicator appears on the
new Refresh button
- [x] Press `F` then `C` → search clears
### Section nav (anywhere under `/functions/*`)
- [x] From any page under `/functions/*`, press `F` then `O` → navigates
to Functions list
- [x] Press `F` then `K` → navigates to Secrets
- [x] Verify the chord doesn't fire while typing in an input
### Per-function detail (any sub-page)
- [x] On any function detail tab, press `1`/`2`/`3`/`4`/`5` → navigates
to Overview / Invocations / Logs / Code / Settings respectively (digits
2 and 3 only on platform builds)
- [x] Press `Shift+T` → Test sheet opens. Press escape to close
- [x] Press `Shift+D` → Download popover opens; press escape to close
- [x] Press `Shift+C` → URL copied + toast appears
- [x] Hover the URL copy button, Download button, Test button —
`ShortcutTooltip` shows the chord
### Test sheet
- [x] Open the Test sheet (button or `Shift+T`)
- [x] Without focusing anything, press `Mod+Enter` → request fires
- [x] With focus inside the body editor / a header input, press
`Mod+Enter` → request still fires (`Mod+`-keys bypass input guard)
- [x] While `isPending`, `Mod+Enter` is a no-op (shortcut disabled)
- [x] Hover Send Request → tooltip shows `Mod+Enter`
### New overview (with `edgeFunctionsOverview` flag enabled)
- [x] Press `I` then `M` / `H` / `T` / `D` → interval segmented buttons
highlight accordingly and chart re-fetches
- [x] Press `Shift+R` → stats refetch
- [x] Press `O` then `L` → routes to logs (or invocations when
unified-logs preview is off)
### Regression checks
- [x] `Cmd+/` opens the reference sheet and the new "Edge Functions
Navigation" and "Function Page Navigation" groups render
- [x] `Cmd+K` command palette includes the new shortcut entries under
"Shortcuts"
- [x] On the list page, the existing X button on the search still clears
value
- [x] Esc handler does not interfere with closing modals/popovers
elsewhere on the page
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added comprehensive keyboard shortcuts for Edge Functions (navigation,
tab switching, chart intervals, create/refresh, test/send request,
download, copy URL) with visible shortcut hints on relevant buttons and
inputs.
* **Refactor**
* Layouts and product menu updated to surface and wire these shortcuts
across the UI.
* **Tests**
* Shortcut reference tests updated to include Edge Functions groups and
entries.
* **Documentation**
* Shortcut reference sheet labels updated to include Edge Functions
sections.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45947)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
## What kind of change does this PR introduce?
Refactor, cleanup, and docs update.
## What is the current behavior?
After the page-title rollout, `ProjectLayout` is still in a transitional
state:
- it accepts a deprecated `title` prop
- it still supports a separate `browserTitle.surface`
- wrapper layouts are split between passing `title` directly and passing
`browserTitle.section`
That makes the API harder to reason about than it needs to be, even
though the rendered titles are already correct.
## What is the new behavior?
This cleanup finishes the API simplification that came out of the
stacked PR review:
- wrapper layouts stay `title`-first for DX
- `ProjectLayout` no longer accepts `title`
- `product` is now the single source of truth for the project-surface
title segment
- `browserTitle` is now only used for extra browser-title metadata
(`entity`, `section`, `override`)
- the remaining project-scoped callers now pass `browserTitle.section`
when they need a section label
- docs now reflect the final pattern instead of the transitional one
Rendered page titles stay the same.
## Additional context
Checks run:
- `pnpm --filter studio exec vitest --run lib/page-title.test.ts
components/layouts/ProjectLayout/index.test.tsx`
- `pnpm --filter studio typecheck`
- `pnpm exec prettier --check ...` on touched files
This is intended as the post-rollout cleanup PR based on Joshen's review
feedback across the stacked title changes.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Stacked PR 2/5 for page title improvements. Includes Auth, Database,
editors, and Edge Functions layout title adoption.
_Base:
[dnywh/feat/page-titles](https://github.com/supabase/supabase/pull/43538)_
---
## What kind of change does this PR introduce?
- Resolves FE-1960
- Resolves FE-1983
- Resolves DEPR-207
## What is the current behavior?
Page titles between surfaces are inconsistent and vague. Sometimes they
say the product name:
```
My Project | My Org | Supabase
```
...even when on a specific surface like Database > Tables.
Other times they show the entity name but skip over the project or org
name :
```
Edge Functions | Supabase
```
## What is the new behavior?
Auth, Database, editors, and Edge Functions adopt the layout title
format introduced in https://github.com/supabase/supabase/pull/43538:
```
users | Table Editor | My Project | My Org | Supabase
hello-world | Logs | Edge Functions | My Project | My Org | Supabase
Backups | Database | My Project | My Org | Supabase
Authentication | My Project | My Org | Supabase
```
That format is:
entity, section, surface, project, org, brand
## Additional context
Related stacked PRs also based on the the original
[dnywh/feat/page-titles](https://github.com/supabase/supabase/pull/43538)
branch:
- https://github.com/supabase/supabase/pull/43535
- https://github.com/supabase/supabase/pull/43536
- https://github.com/supabase/supabase/pull/43537
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* feat(preferences): allow disable hotkeys
Add a section in /account/me for disabling hotkeys. Only added one
hotkey for now (Cmd + E for toggling editor side panel) but we can add
more with the same pattern.
* refactor: remove default export on ProjectLayout
* feat(hotkeys): allow toggling of command menu and ai assistant hotkeys
* Nit
* PRettier lint
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* page components
* page component changes
* settings but broken saving
* rvert
* use sheet for provider
* styling
* remove things
* Some refactoring and fixing, added JSDocs to layouts
* Smol refactor
* Fix
* Update JSDocs
* updated scaffolding
* update edge functions layout
* remove params
* Clean up
* Spelling
* Clean up FormFieldWrappers
* One last clean up
* create edge functon
* use component
* flag
* fix merge errors
* fix imports
* fix merge issues
* fix import
* fix flag
* remove unused
* move templates
* re-add flag
* Small refactors
* Smol refactors
* Refactor
* add rename and delete via context
* create function fixes
* moved function name
* Smol update
* Small fix for selected state in edge functions side menu when on /new
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* page components
* page component changes
* settings but broken saving
* rvert
* use sheet for provider
* styling
* remove things
* Some refactoring and fixing, added JSDocs to layouts
* Smol refactor
* Fix
* Update JSDocs
* updated scaffolding
* update edge functions layout
* remove params
* single function layout
* invocation cleanup
* remove vars
* Clean up
* Spelling
* Clean up FormFieldWrappers
* One last clean up
* fix merge errors
* fix merge errors
* rmeove import
* Address comments
* Remove unnecessary prop
* Remove settings/functions and add redirects in next config
* fix empty
* Fix key prop issue and fix selected state in layout for single edge function
* Clean up edge function details
* Use zodResolver
* Refactor file name
* Remove unnecessary fragment
* Small refactors
* Refactor deleting edge function to use ConfirmationModal
* edge details fixes
* Small adjustment to paddings
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
