Gildas Garcia and Ivan Vasilov
96d43099bb
chore: refactor Button API so that it can be used a standard button ( #46880 )
...
## Problem
Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.
## Solution
- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code
## How to test
As this is just prop renaming, if it builds it's ok
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com >
2026-06-16 23:59:58 +02:00
ChloeGarciaMillerand and Gildas Garcia
2c48c6a002
fix: improve accessibility for icon buttons in LayoutHeader ( #45790 )
...
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md )
file.
YES
## What kind of change does this PR introduce?
Bug fix (accessibility improvement in LayoutHeader)
## What is the current behavior?
Icon-only buttons do not have explicit accessible names for screen
readers.
## What is the new behavior?
All icon-only buttons now have explicit accessible names using visually
hidden text (sr-only), ensuring proper screen reader support.
## Additional context
Tooltip text is preserved for visual users.
No visual changes were introduced.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Accessibility**
* Added hidden screen-reader labels to multiple toolbar and menu buttons
(Settings, Advisor Center, AI Assistant, SQL Editor, Help) so icons are
announced by assistive technologies, improving navigation and
discoverability across the studio interface.
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45790 )
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com >
2026-05-11 17:30:16 +02:00
Mert YEREKAPAN
da81b2f14d
feat(studio): add click tracking for top bar buttons ( #45414 )
...
## Summary
Adds PostHog click/open tracking for every interactive element in the
Studio top bar. Previously only 5 of ~16 surfaces were tracked.
### New events (16)
| Event | Surface |
|---|---|
| `home_logo_clicked` | Supabase logo |
| `header_back_to_dashboard_clicked` | Mobile back chevron |
| `header_exceeding_usage_badge_clicked` | "Exceeding usage limits"
badge |
| `organization_dropdown_opened` | Org dropdown trigger |
| `project_dropdown_opened` | Project dropdown trigger |
| `branch_dropdown_opened` | Branch dropdown trigger |
| `merge_request_button_clicked` | MR trigger (separate from existing
success event) |
| `connect_button_clicked` | Connect CTA |
| `feedback_dropdown_opened` | Feedback dropdown trigger |
| `advisor_button_clicked` | Advisor toggle |
| `inline_editor_button_clicked` | SQL editor toggle |
| `assistant_button_clicked` | AI Assistant toggle |
| `user_dropdown_opened` | Account dropdown |
| `local_dropdown_opened` | Local-dev settings dropdown |
| `local_version_popover_opened` | CLI version popover |
### Notes
- Uses `useTrack` (per `telemetry-standards`), all event names use
approved `_clicked` / `_opened` verbs.
- Dropdown `onOpenChange` handlers guard against Radix's double-fire by
only tracking when `open === true`.
- `merge_request_button_clicked` fires on the trigger click; the
existing `branch_create_merge_request_button_clicked` continues to fire
on successful MR creation.
- Pre-existing tracked surfaces (`command_menu_opened`,
`help_button_clicked`, `header_upgrade_cta_clicked`,
`send_feedback_button_clicked`) are unchanged.
## Test plan
- [x] Spot-check each event fires once per interaction in PostHog Live
Events
- [x] Verify no double-fire on dropdown close
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Added telemetry tracking for many header/navigation interactions
(logo, back-to-dashboard, usage badge,
connect/merge/advisor/assistant/inline-editor buttons, and multiple
dropdowns/popovers).
* **Tests**
* Updated tests to stub telemetry calls so UI tests remain stable and
deterministic.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-05 16:12:51 +00:00
Ali Waseem
e8df67d5d5
chore: migrate shortcuts to new hooks API ( #44955 )
...
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md )
file.
YES
## What kind of change does this PR introduce?
Cleanup shortcuts with new hooks
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Centralized keyboard shortcut system for consistent shortcut behavior
across the app and moved preference toggles to a unified registry.
* **New Features**
* Added explicit shortcuts for Command Menu, AI Assistant, Inline
Editor, and result copy/download actions.
* Hotkey preferences UI now renders dynamically from the centralized
shortcut list.
* **Tests**
* Test helpers updated to include the command menu provider for accurate
shortcut behavior in tests.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-17 10:02:56 -06:00
4a0bb36ca8
style: require sorted imports in studio/components ( #44408 )
...
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com >
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com >
2026-04-01 10:22:37 +02:00
Francesco Sansalvadore
9145470ff6
feat(studio): mobile sheet nav ( #43184 )
...
- use `MobileSheetNav` for all `LayoutSidebar` panels on mobile viewport
- move `Help` to LayoutSidepanel for a more cohesive experience
- enables opening the help panel using params `?sidebar=help-panel`
https://github.com/user-attachments/assets/a84e56f0-f2e2-4217-89a2-ba895bb7d352
2026-02-27 12:06:27 +00:00
Francesco Sansalvadore
ddd1dbc09f
Studio: add CommandMenu trigger in top nav ( #40011 )
...
* add CommandMenuTriggerInput in top nav in studio
* uniform command trigger in top nav
2025-11-10 11:43:50 +01:00
d10001b7a7
Advisor sidebar manager ( #39889 )
...
* sidebar-manager
* storage keys
* tests
* more ai spots
* test fix
* revert to default
* remove ref
* Update apps/studio/state/sidebar-manager-state.tsx
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com >
* Update apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com >
* fix ts
* fix
* fux
* fux query param
* clean
* fix
* more
* mock local storage
* simplify
* remove provider test
* remve useopensidebar
* fix(new homepage): open ai assistant on advisor card button clicks
* Update apps/studio/components/layouts/ProjectLayout/LayoutSidebar/index.tsx
Co-authored-by: Charis <26616127+charislam@users.noreply.github.com >
* Update apps/studio/state/sidebar-manager-state.tsx
Co-authored-by: Charis <26616127+charislam@users.noreply.github.com >
* refine
* editor sidebar manager
* reset results
* advisor sidebar manager
* empty state and notice
* event tracking
* remove variable
* remove use effect
* open in sidebar
* use sidebar old home
* Update apps/studio/components/ui/EditorPanel/EditorPanel.tsx
Co-authored-by: Charis <26616127+charislam@users.noreply.github.com >
* connect hotkey
* Update apps/studio/components/layouts/AppLayout/AssistantButton.tsx
Co-authored-by: Charis <26616127+charislam@users.noreply.github.com >
* Update apps/studio/state/advisor-state.ts
Co-authored-by: Charis <26616127+charislam@users.noreply.github.com >
* Update apps/studio/state/advisor-state.ts
Co-authored-by: Charis <26616127+charislam@users.noreply.github.com >
* fix
* initial prompt
* fix(inline editor button): only show keyboard shortcut if hotkey active
* cleanup(advisor panel): minor code cleanup
* fix(advisor panel): misplaced key on list
* fix(advisor panel): add error state
* fix(advisor panel): improve a11y
* fix(advisor panel): cannot find selected item
* fix
* fix
* tooltip
* link
* sidebar move up
* LayoutSidebarProvider to only sendEvent if in a project
---------
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com >
Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com >
Co-authored-by: Joshen Lim <joshenlimek@gmail.com >
2025-10-30 17:43:02 +10:00
Charis and Joshen Lim
3eb7da7766
feat(preferences): allow disable hotkeys ( #39573 )
...
* 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 >
2025-10-17 08:09:38 -04:00
Saxon Fletcher and Joshen Lim
a224598f1e
Decouple editor panel ( #37707 )
...
* decouple editor panel from global state
* refactor again
* dont close assistant
* remove async
* onsave props
* Fix TS errors
* Remove editorPanel state from app-state, use useHotKey hooks for keyboard shortcuts
* Minor UX improvements to EditorPanel
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com >
2025-08-06 15:03:53 +07:00
Saxon Fletcher and Alaister Young
c4cb660903
Slight tweaks to toolbar icons ( #36269 )
...
* layout header icon styles
* Update packages/ui/src/layout/ai-icon-animation/ai-icon-animation.tsx
Co-authored-by: Alaister Young <alaister@users.noreply.github.com >
---------
Co-authored-by: Alaister Young <alaister@users.noreply.github.com >
2025-06-09 21:54:27 +10:00
Jordi Enric
7105df3d1f
Layout Editor + Keyboard Shortcuts improvements ( #36165 )
...
* add keyboardshortcut compo, add toggle editor, handle different shortcuts, add tooltips
* fix windows
* add notifications tooltip
2025-06-09 18:24:31 +10:00
Joshen Lim
fd98a08a4f
Chore/default to new organization layout ( #35515 )
...
* Default to new organization layout + remove feature preview
* Remove feature preview
* Clean up LayoutUpdateBanner
* Clean up
* Fix
* Fixy fix
* Update comment
* Nit to fix layout shift
2025-05-13 11:25:35 +08:00
fb24d91305
Feat/ Org layout ( #33150 )
...
* update test
* move back button, fix width issues on sidebar
* update sidebar logic
* Update ProjectLayout.tsx
* lots of updates. layouts now streamlined. localstorage for tabs in use
* moar
* bunch of new tab logic
* fix empty tab issue
* Update tabs.ts
* layouts switched
* new pages now have fixed layouts
* fix tabs
* fix code bg
* add tabs support for multiple project refs
* intialization issue
* update ID handling
* fixed isOpened state for SQL snippets
* remove old assistant because its bugging up panels
* preview style works in sql editor
* fix border
* removes preview tab if there is one
* fix background of loading skeleton
* lots of issues with types/icons/redirect
* new tab cards
* snippets in empty state now work
* moar stuff
* tabs now in feature flags
* Update tabs.ts
* Update tabs.ts
* moar
* add feature previews
* remove code not needed
* Update next-env.d.ts
* Delete FeaturePreviewModal.tsx
* fix typescript errors. remove more explorer stuff
* remove explorer files
* fixed issues with templates and quickstarts tab
* fixed active state when tabs are not opted in
* logic error
* fix open/highlight issue when opted out of tabs
* templates/quickstarts now displayed with new cards
* Update recent-items.tsx
* Update new-tab.tsx
* add icon back in
* add old empty state back in
* recent items updated to respect project ref
* localstorage cleanup on deletion
* moar
* overflow tabs now working
* correct tab names used for new sql templates/quickstarts
* ongoing queries fix
* cleanup
* update images
* Update RouteValidationWrapper.tsx
* Update AppLayout.tsx
* Update NavigationBar.tsx
* add headers back into side panels
* improve writing
* tabs now drag and drop a billion times better
* Update tabs.tsx
* Update tabs.tsx
* init issues on stores, which caused a race condition.
* fix hydration error
* init
* init sidebars
* init
* Update app-default-navigation.tsx
* user dropdown updates
* moar layouts
* init
* moar
* moar
* updat
* reverse top bar
* some banners
* moar
* start adding account page
* change styling of dropdowns
* Update sidebar.tsx
* fix new tab issue in sql
* Update ProjectLayout.tsx
* Update pnpm-lock.yaml
* latest
* Update pnpm-lock.yaml
* moar layouts on account
* getLayout updates
* more fixes
* force a cache build
* moar
* Update app-default-navigation.tsx
* fix AI button animation
* moar layout
* account pages refactored
* Update user-dropdown.tsx
* Update new-tab.tsx
* move EditorMenuListSkeleton
* Fix type issues
* fixes: DESIGN-87
fixes: DESIGN-87
* refactor sort/filter components
* Update rules-set-button-text.tsx
* remove discussions for now
* small styling fixes
* Update FeaturePreviewModal.tsx
* Update FeaturePreviewModal.tsx
* Update RouteValidationWrapper.tsx
* revert
* revert
* revert
* revert
* revert
* more revert
* Update collapse-button.tsx
* Update SQLEditorTreeViewItem.tsx
* revert
* Update SchemaGraph.tsx
* Delete new-upcoming.tsx
* revert
* Update ProjectLayout.tsx
* fix home link
* Update table-editor.spec.ts
* test update
* Update projects.tsx
* remove
* Delete sidebar-open-top-banner.tsx
* add organizations page
* Update table-editor.spec.ts
* Fix the playwright tests.
* layout fixes
* layout fix
* revert sort/filter
* Update LastSignInWrapper.tsx
* revert
* revert
* remove
* update file names
* revert
* revert
* revert
* advisor lint page tabs revert
* revert
* revert
* revert
* revert
* revert
* revert tabs
* remove packages
* add sidebar
* sidebar docs added
* add sidebar
* fixed issues
* fix mobile
* fixes
* add org side bar in
* redirect updated
* fix more layouts
* move settings icon back down
* remove old stuff
* Delete SideBar.tsx
* use ProfileImage component
* spelling
* Update ThemeSettings.tsx
* Update ThemeSettings.tsx
* Update Sidebar.tsx
* layout udpate
* Update Sidebar.tsx
* fixes
* Minor lints
* Update Sidebar.tsx
* create a alt user dropdown for self hosting and local
* add fragment back in
* Adds Theme Selector for local/self hosting
* Update UserDropdown.tsx
* fix theme selector for local self host
* Update index.ts
* Update DefaultLayout.tsx
* now supports feature preview
* remove old files
* rename files
* revert
* Update LayoutHeader.tsx
* clean
* revert
* revert
* Update resource-banner.tsx
* remove redundant side bar stuff
* organizations action bar updated. removed hardcoded value
* fix type errors
* fix tests
* Undo test changes
* Fix account pages for when feature preview is off
* Bug fixes 1
* Missing key in map of EmailTemplates
* Fix missing border in StorageExplorer
* fix missing header in performance advisor
* Final clean up
* Fix DefaultLayout re-rendering issue on auth pages
* A couple of fixes
* Redirect to /organizations if land on /projects with feature preview on
* Route back to /projects if toggling preview off on /organizations
* Add HomePageActions to /org/slug
* make re-routing nicer
* Moar fixes
* Fix logging in redirect to /organizations irregardless of feature preview
* Fix missing withAuth in OrganizationLayout
* Minor clean upo
* Fix branch dropdown not aligned
* Add feature preview for update layout
* update dropdowns to only be chevron triggered in new layout
* Update content-query.ts
* Update entity-types-infinite-query.ts
* add IS_PLATFORM for org dropdown
* Add IS_PLATFORM check for EnableBranchingDropdown in LayoutHeader
* Midway fixing mobile nav
* Mobile nav fixes
* Address feedbacks
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com >
Co-authored-by: Alaister Young <a@alaisteryoung.com >
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com >
Co-authored-by: Jordi Enric <jordi.err@gmail.com >
2025-04-08 11:32:29 +08:00
Joshen Lim and Alaister Young
8239e2f27b
Cache results in assistant panel ( #34509 )
...
* Cache results in assistant panel
* Small fixes
* fix
* disable switching chats while new messages are streaming in
* small comment
* Fix Create new snippet CTA in query block
* Add useCallbacks
* Update
* Remove console log
---------
Co-authored-by: Alaister Young <a@alaisteryoung.com >
2025-03-31 19:24:21 +08:00
Saxon Fletcher and Joshen Lim
28fe5811de
Inline editor feature preview ( #33541 )
...
* add edge function knowledge
* deploy edge function mutaton
* add edge function block with deploy
* update function url
* update tools
* editor sql
* add templates
* use monaco editor
* hook up templates
* fixes
* add behind feature flag
* preview docs
* move editor
* initialPrompt
* consolidate widgets
* remove generic editor
* move logic
* fix ts
* include schema metadata
* Fix width of save snippet button
* Set tooltip position
* Use inlineLink component
* Remove unnecessary z index
* Lint
* Lint import statements in EditorPanel
* fixes
* fix keyboard shortcut
* show/hide results and invalidation
* fix focus issues in widget
* fixes
* fix ts
* Support cmd enter shortcut to run query in InlineEditor
* Update InlineEditorPreview to use admonition
* prompt updates
* add discussion url to preview
* schemas array
* One last clean up
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com >
2025-02-19 14:58:58 +10:00
