## What kind of change does this PR introduce?
Feature
## What is the current behavior?
The dev toolbar is only discoverable via `window.devToolbar()` in the
browser console, or by having your email on the `devToolbarDefaultOn`
ConfigCat flag. Once enabled, Studio shows a floating trigger button.
## What is the new behavior?
In local and staging Studio, the account/settings dropdown (avatar menu)
includes a **Local tools** section above **Theme** with a **Dev
toolbar** checkbox toggle.
- **On**: shows the floating orb (persists via localStorage, same as
`window.devToolbar()`)
- **Off**: hides the orb and dismisses the toolbar
Open the panel itself via the orb once it is visible. Production builds
are unchanged (`isAvailable` is false and the menu item is hidden).
| After |
| --- |
| <img width="226" height="204" alt="CleanShot 2026-08-20 at 12 46
38@2x"
src="https://github.com/user-attachments/assets/c846b119-626d-48f5-9a02-aef4d006326c"
/> |
| <img width="558" height="1024" alt="CleanShot 2026-08-20 at 12 47
04@2x"
src="https://github.com/user-attachments/assets/4b3dd22b-537b-4874-821d-c202033c4ad7"
/> |
## Manual testing
Run `pnpm dev:studio` and open http://localhost:8082.
1. **Find the entry point:** top-right avatar/settings menu → **Local
tools** → **Dev toolbar** (above **Theme**). Should not appear in
production builds.
2. **Turn it on:** check **Dev toolbar**. A green floating orb should
appear (default bottom-right).
3. **Open the panel:** click the orb. The **Dev Toolbar** sheet should
open with Events and Flags tabs.
4. **Event count:** navigate around Studio (e.g. open a project, switch
pages). The orb badge should increment and stay readable in light and
dark mode.
5. **Turn it off:** reopen the avatar menu and uncheck **Dev toolbar**.
The orb and panel should disappear.
6. **Close vs hide:** with the toolbar on, open the sheet and use
**Close** (X). The orb should remain; only the sheet closes.
Optional: confirm `window.devToolbar()` in the browser console still
enables the orb.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a Local tools option to enable the development toolbar when
available.
* Toolbar activation and dismissal preferences now persist between
sessions.
* Added clearer event-count badges with responsive sizing for larger
counts.
* **Improvements**
* Simplified toolbar controls by removing the separate hide option.
* Improved toolbar availability handling across local and production
environments.
* **Tests**
* Expanded coverage for activation, persistence, visibility, and
event-count badges.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Danny White <dnywh@users.noreply.github.com>
Co-authored-by: Sean Oliver <882952+seanoliver@users.noreply.github.com>
## Problem
- We still use/maintain the legacy theming even though we moved to
Shadcn
- We have two themes list with similar code
## Solution
- Migrate some components to `cva` and `cn` instead of `styleHandler`
- Remove redundant `themes` in favor of `singleThemes`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Standardized theme selection across the app so theme menus
consistently offer the same light/dark/system options, including
dropdowns, navigation menus, and command menus.
* **Refactor**
* Refreshed styling for multiple shared UI components (menus, tabs, side
panels, loading indicators, icons, and modal dialogs) to improve
consistency while preserving visual behavior.
* **Chores**
* Improved the UI patterns CI “validate exports” check for clearer
failure output when exports change unexpectedly.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## 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>
## 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>
This PR preps the monorepo for a migration to Tailwind v4:
- Bump all Tailwind dependencies and libraries to the latest possible
version, while still compatible with Tailwind 3.
- Cleans up obsolete Tailwind 3 specific options and configs.
- Cleans up unused CSS files and fixes the CSS imports.
- Migrates all `important` uses in `@apply` lines to using the `!`
prefix.
- Move `typography.css` to the `config` package and import it from the
apps.
- Migrated all occurrences of `flex-grow`, `flex-shrink`,
`overflow-clip` and `overflow-ellipsis` since they're deprecated and
will be removed in Tailwind 4.
- Make the default theme object typesafe in the `ui` package.
- Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and
`divider-opacity` to the new format where they're declared as part of
the property color.
- Bump and unify all imports of `postcss` dependency.
## 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?
- Remove queue operations from feature preview into settings
- Refactor dashboard settings
- Resolves DEPR-434
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Dashboard settings panel in Account preferences with toggles for
Inline Editor and Queue Operations; “Dashboard” added to project
Configuration.
* **Removed**
* Old Inline Editor settings UI and the Queue Operations feature-preview
UI removed.
* **Refactor**
* Consolidated dashboard preferences into a single settings surface;
banners and actions now navigate to preferences; account/preferences
layouts and back-navigation behavior adjusted for platform vs
self-hosted.
* **Tests**
* Added tests for settings UI, menu generation, redirects, and
local-storage.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
## 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?
Adds a tooltip for the account settings button
## What is the current behavior?
It has no tooltip
Closes#44524
## What is the new behavior?
Has Tooltip
## Additional context
<img width="552" height="167" alt="Screenshot 2026-04-03 at 22 21 35"
src="https://github.com/user-attachments/assets/e41caee7-e688-4bd9-8823-0c47133c5470"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Improved interface usability by adding descriptive tooltips to
dropdown menu triggers in the studio. The settings dropdown trigger now
displays a "Settings" tooltip, while the user account dropdown trigger
displays "Account settings" to provide clearer guidance, help users
navigate key interface controls, and enhance the overall user
experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Ali Waseem <waseema393@gmail.com>
## 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 / UI Polish
## What is the current behavior?
Interactive menu items in the User Account dropdown (top right profile
picture) use the `default` (arrow) cursor. This makes it less intuitive
that these items are clickable.
Closes#42360
## What is the new behavior?
This PR adds `cursor-pointer` to all interactive menu items in both the
[UserDropdown](cci:1://file:///home/erik/Documents/supabase/apps/studio/components/interfaces/UserDropdown.tsx:27:0-140:1)
(platform) and
[LocalDropdown](cci:1://file:///home/erik/Documents/supabase/apps/studio/components/interfaces/LocalDropdown.tsx:21:0-68:1)
(local/self-hosted) components. This provides correct visual feedback to
users when hovering over:
- Account preferences
- Feature previews
- Command menu (local)
- Theme selections
- Logout
## Additional context
Verified the changes locally for both
[LocalDropdown](cci:1://file:///home/erik/Documents/supabase/apps/studio/components/interfaces/LocalDropdown.tsx:21:0-68:1)
and
[UserDropdown](cci:1://file:///home/erik/Documents/supabase/apps/studio/components/interfaces/UserDropdown.tsx:27:0-140:1).
### Screenshots
Before:
<img width="262" height="301" alt="image"
src="https://github.com/user-attachments/assets/0c985b1b-065c-49d4-94d4-8dd07fa0ff67"
/>
After:
<img width="262" height="301" alt="image"
src="https://github.com/user-attachments/assets/e2ade471-0a84-4405-8e2c-8f757f5dfaf4"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Cursor-pointer indicators added to interactive dropdown items across
the app (account settings, feature previews, command menu entries, theme
selection radios, logout), improving hover feedback and visual
consistency for menu interactions.
<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Danny White
