## 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 -->
[](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>
## What kind of change does this PR introduce?
Feature, docs update.
- Resolves FE-3419
- First pass for DEPR-578
## What is the current behaviour?
The Connect sheet can be opened from visible UI and command-menu
actions, but it does not have a direct keyboard shortcut. Studio also
has shortcut conventions in code, but limited agent-facing review
guidance for contributors adding or touching Studio UI.
## What is the new behaviour?
FE-3419:
- Adds `O then C` to open the Connect sheet for active healthy projects.
- Mounts the shortcut from the always-rendered Connect sheet, so it
works without first opening the lazy command menu.
- Surfaces the shortcut on the Connect button tooltip, in the shortcuts
reference sheet, and on the Connect command-menu action.
- Forces the tooltip closed while the sheet is open so Escape closes the
sheet without also driving tooltip state.
- Tracks keyboard shortcut opens with the existing Connect sheet
telemetry event.
- Moves single-item AI Assistant and Inline Editor shortcuts to the
_Global Actions_ section in the cheatsheet.
DEPR-578:
- Adds a short Studio shortcut convention to `.claude/CLAUDE.md`.
- Adds scoped Copilot review guidance for Studio shortcut coverage,
discovery, and collision checks.
- Points the guidance back to the existing shortcut registry,
`useShortcut`, `Shortcut`, and `ShortcutTooltip` implementation context.
| After |
| --- |
| <img width="1576" height="188" alt="CleanShot 2026-05-21 at 11 30
40@2x"
src="https://github.com/user-attachments/assets/ba9d68c8-27ea-4c89-8016-d95d5bcea3ea"
/> |
| <img width="830" height="364" alt="CleanShot 2026-05-21 at 11 48
51@2x-FC627CB5-4A1C-49E2-B748-8AF0A3EBD7BC"
src="https://github.com/user-attachments/assets/d6aa52c1-56b2-4731-8e6b-088e29da43ed"
/> |
Validation:
- `pnpm --dir apps/studio exec vitest --run
components/ui/GlobalShortcuts/ShortcutsReferenceSheet.test.tsx
components/interfaces/ConnectButton/Connect.Commands.test.tsx
components/interfaces/ConnectSheet/useConnectSheetShortcut.test.ts`
- `git diff --check`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Keyboard shortcut to open the Connect sheet from anywhere; Connect
button displays the shortcut and is enabled only for eligible projects.
* New "Global Actions" group in the shortcuts reference including AI
Assistant, Inline Editor, and Connect.
* **Documentation**
* Added Studio keyboard-shortcuts guidance and linked it in project
instructions.
* **Tests**
* Added tests covering connect shortcut behavior and command
registration.
* **Telemetry**
* Connect-sheet open events now record keyboard shortcut as a source.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46185?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: Ali Waseem <waseema393@gmail.com>
The connect button was missing its text
Before:
<img width="833" height="244" alt="Screenshot 2026-05-06 at 17 46 23"
src="https://github.com/user-attachments/assets/c03e972f-bef6-4bd7-8819-dd51509c58eb"
/>
After:
<img width="678" height="208" alt="Screenshot 2026-05-06 at 17 46 58"
src="https://github.com/user-attachments/assets/5b020017-133e-47c3-8138-925c27299665"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved screen reader accessibility in the Connect button by refining
how text visibility is handled based on button display mode.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Consolidate Table Editor grid header actions into a single row
https://github.com/user-attachments/assets/1020c385-8fa9-4ef1-b5e7-03983111508b
## Changes involved
- Index advisor, Realtime, and API docs are now behind a dropdown menu
button (Treated as secondary actions)
- Grid header actions shifted into the same row as filter bar (more
space for data grid)
- Header actions will hide while filter bar is in focus (remove
distractions, more space for filter bar)
## Changes to filter bar
- Filter bar will refocus when deleting a filter
- Clicking on the search icon will focus on the free form input of the
filter bar
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a “More” dropdown in grid actions to access Realtime, API docs,
and Index Advisor.
* New dialogs for enabling Index Advisor and toggling Realtime are now
consistently managed.
* **Improvements**
* Improved filter focus handling with auto-refocus when conditions
change and responsive header behavior.
* Adjusted popover alignment, separator visuals,
header/footer/pagination layout and sizing.
* Filter bar now supports programmatic focus; Connect button supports
icon-only mode.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
## Summary
Re-ports PR #43119 against the current `ProjectHome` codebase (the
original PR targeted `HomeNew/` which was removed during the `homeNew`
graduation in #43437). Also unifies the `connectSheet` and
`connectSection` feature flags into a single `connectSection` flag — the
`connectSheet` flag is removed entirely, so both the ConnectSheet
(header) and ConnectSection (homepage row) are controlled by one
experiment.
- Adds `connectSection` PostHog experiment flag that controls two
things:
1. Swaps the Getting Started section for a Connect section on the
project homepage for new projects (< 10 days old)
2. Swaps the legacy Connect dialog for the new ConnectSheet panel in the
header
- **Control** (`getting-started`): existing Getting Started section +
legacy Connect dialog in header
- **Treatment** (`connect`): new 4-tile Connect section + ConnectSheet
in header
- `undefined` (loading): neither section renders, avoiding flash
- Tiles filtered by the same `useIsFeatureEnabled` flags as ConnectSheet
(`show_app_frameworks`, `show_mobile_frameworks`, `show_orms`)
- Connect tile clicks tracked via `home_connect_action_clicked`; section
render tracked via `home_connect_section_exposed`; sheet opens tracked
via `connect_sheet_opened` with source attribution (`header_button` or
`connect_section`)
## Changes
- `packages/common/telemetry-constants.ts` — new
`home_connect_section_exposed`, `home_connect_action_clicked`, and
`connect_sheet_opened` event types
- `ConnectSheet/ConnectSheet.tsx` — read `connectTab` query param and
sync to active mode on open; `handleModeChange` keeps param in sync on
tab switch; fire `connect_sheet_opened` event with source attribution on
open
- `ConnectButton/ConnectButton.tsx` — set `connectSource=header_button`
query param on click
- `ProjectHome/ConnectSection.tsx` — new component (4-tile connect
card); set `connectSource=connect_section` on tile click
- `ProjectHome/Home.tsx` — experiment flag wiring
- `LayoutHeader/LayoutHeader.tsx` — read `connectSection` flag instead
of `connectSheet` to toggle ConnectSheet vs legacy Connect dialog
## Test plan
To test on the Vercel preview, set `connectSection=connect` to 100% in
PostHog (or override via cookie `ph_override_connectSection=connect`).
No separate `connectSheet` flag is needed — `connectSection` controls
both features.
- [x] Treatment (`connect` variant) — "Get connected" section renders on
new project, Getting Started hidden
- [x] Control (`getting-started`) — Getting Started renders, Connect
section hidden
- [x] Mature project (> 10 days) — neither section regardless of flag
- [x] Clicking each tile opens ConnectSheet on the correct tab
(Framework / Direct / ORM / MCP)
- [x] Switching tabs inside sheet updates `connectTab` URL param
- [x] Closing sheet clears `connectTab` param
- [x] Direct URL deep-link (`?showConnect=true&connectTab=orm`) opens
sheet on correct tab
- [x] Dark mode — background gradient renders correctly
- [x] Light mode — background switches to light gradient
- [x] Responsive layout — 4 cols (xl), 2×2 (md), stacked (mobile)
- [x] Telemetry — `home_connect_section_exposed` fires once on load;
`home_connect_action_clicked` fires with correct `mode`
- [x] Treatment — header Connect button opens ConnectSheet (not legacy
Connect dialog)
- [x] Control — header Connect button opens legacy Connect dialog (not
ConnectSheet)
- [x] Telemetry — clicking a ConnectSection tile fires
`connect_sheet_opened` with `source: 'connect_section'`
- [x] Telemetry — clicking header Connect button fires
`connect_sheet_opened` with `source: 'header_button'`
---------
Co-authored-by: Ali Waseem <waseema393@gmail.com>
<img width="2892" height="2342" alt="image"
src="https://github.com/user-attachments/assets/7e08929d-abc3-4397-b89d-99cc52d8190e"
/>
This is the third and final PR to complete the new connect sheet.
First: https://github.com/supabase/supabase/pull/42367
Second: https://github.com/supabase/supabase/pull/42373
This re-adds the Direct, ORM, MCP tabs and their content, including via
connect.schema.
To test:
- Flag will be enabled on all staging projects
- Click connect and notice new Sheet
- Click all tabs and ensure content is correct
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Multi-mode connection flow with mode selector and icons (framework,
direct DB, ORM, MCP)
* New framework/variant/library selector, richer connection guides and
install steps (Prisma, Drizzle, direct)
* MCP onboarding flows (Cursor, Codex, Claude Code) with server/auth
commands and configuration UIs
* **Refactor**
* Connect schema and state rebuilt to be mode-driven with improved step
resolution and cascading state updates
* **Tests**
* Expanded unit tests covering framework resolution, connect flows, and
mode behaviors
* **Chores**
* ESLint ignores updated for content files
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
This is the first smaller PR in the broader change of updating our
Connect dialog (see
[here](https://github.com/supabase/supabase/pull/42276)).
This PR focuses on decoupling the ConnectButton our of the Connect
dialog and into its own component . The button includes a flag to render
the new sheet. The new sheet is empty for the time being as the flag is
at 0%.
To test:
- Enable flag and click button, see new Sheet
- Disable and see old dialog
- Create a new project -> in getting started section see "connect to
app" step -> Click connect button and make sure it works
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
- Added a Connect button component and an alternative Connect sheet.
- Added curl syntax highlighting for code blocks.
* **Changes**
- Connection dialog moved to a controlled open-state pattern; Connect
replaced legacy entry points across the UI and can be feature-flagged.
- Connection actions simplified and no longer depend on framework
selection.
* **Removals**
- Removed legacy framework selector, default framework constant, and
related tests.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
