This PR fixes some prettier issues:
- Bump and unify all prettier versions to 3.7.3 across teh whole repo
- Bump the SQL prettier plugin
- When running `test:prettier`, check `mdx` files also
- Run the new prettier format on all files
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## What kind of change does this PR introduce?
UI touch-up
## What is the current behavior?
Explorer rows in file storage is a bit rough around the edges.
## What is the new behavior?
- Consistent loaders
- Consistent icons
Also includes:
- Fix to `stroke-width` on files-bucket.svg as documented in icons.mdx
| Before | After |
| --- | --- |
| <img width="1024" height="563" alt="Buckets Storage AWS Healthy
Toolshed Supabase"
src="https://github.com/user-attachments/assets/055518b2-6d93-4c9d-879b-6e7dd51e0620"
/> | <img width="1024" height="563" alt="Buckets Storage AWS Healthy
Toolshed Supabase"
src="https://github.com/user-attachments/assets/fae05446-95d9-4ca1-b441-7cd39d1c6036"
/> |
When the dashboard hits a DB connection timeout, users currently see a
raw error message with no
path forward. This PR adds an inline troubleshooting system that detects
known error types and
surfaces contextual next steps — restart the DB, read the docs, or debug
with AI.
## Changes
- New ErrorDisplay component (packages/ui-patterns) — styled error card
with a title, monospace error
block, optional troubleshooting slot, and a "Contact support" link that
always renders. Accepts
typed supportFormParams to pre-fill the support form.
- Error classification in handleError (data/fetchers.ts) — on every API
error, the message is tested
against ERROR_PATTERNS. If matched, handleError throws a typed subclass
(ConnectionTimeoutError
extends ResponseError) instead of a plain ResponseError. Stack traces
now show the exact error
class. All existing instanceof ResponseError checks continue to work.
- ErrorMatcher component — reads errorType from the thrown class
instance, does an O(1) lookup into
ERROR_MAPPINGS, and renders the matching troubleshooting accordion as
children of ErrorDisplay.
Falls back to plain ErrorDisplay for unclassified errors.
- Connection timeout mapping — first error type wired up, with three
troubleshooting steps: restart
the database, link to the docs, and "Debug with AI" (opens the AI
assistant sidebar with a
pre-filled prompt).
- Telemetry — three new typed events track when the troubleshooter is
shown, when accordion steps are
toggled, and which CTAs are clicked.
## Adding a new error type
1. Add a class to types/api-errors.ts
2. Add { pattern, ErrorClass } to data/error-patterns.ts
3. Create a troubleshooting component in errorMappings/
4. Add an entry to error-mappings.tsx
## 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 5/5 for page title improvements. Includes /new and
/new/[slug] title updates plus navigation docs note.
_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?
Includes /new and /new/[slug] title updates plus navigation docs note.
Adopts 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/43534
- https://github.com/supabase/supabase/pull/43535
- https://github.com/supabase/supabase/pull/43536
## What kind of change does this PR introduce?
Feature
## What is the current behavior?
- Platform webhooks have a ‘tap target on tap target’ pattern with
`DropdownMenu` being on top of a clickable `TableRow`
- Misclicks are common (at least for me)
- @jordienr recently added the `hit-area` Tailwind plugin that helps
with misclicks
- https://github.com/supabase/supabase/pull/43636
## What is the new behavior?
- The aforementioned `DropdownMenu` in platform webhooks now uses
`hit-area` to avoid misclicks
- Design system documentation
- Extracted `hit-area` Tailwind plugin to shared packages so it can be
used in design-system as well as studio
## Preview
https://github.com/user-attachments/assets/89f9110a-6c99-4eed-a386-a6f646b1f4f6
## 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?
Formalising our status code component that was introduced in the new
charts + update auth overview page.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a StatusCode UI component to display HTTP methods and status
codes with color-coded indicators.
* Added a demo showcasing multiple StatusCode examples and alignment
variants.
* **Documentation**
* Added a documentation fragment and sidebar entry for Status Codes with
a preview of the demo.
* **Refactor**
* Updated an Auth Overview view to use the new StatusCode component for
consistent status rendering.
<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Bug fix: custom icons now respect their source SVG’s stroke/fill and
stroke-width instead of always getting a global stroke.
## What is the current behavior?
Every custom icon gets `stroke="currentColor"` and `strokeWidth={2}`
from `createSupabaseIcon`, so fill-only logos get an extra stroke and
icons designed at `stroke-width="1"` (e.g. postgres, auth) render too
thick. Call sites and the design-system grid needed workarounds
(`strokeWidth={0}`, `FILL_ONLY_ICONS`, `STROKE_WIDTH_FROM_SOURCE`).
## What is the new behavior?
The icon build reads root SVG attributes (`fill`, `stroke`,
`stroke-width`, etc.) and passes them as per-icon defaults. Fill-only
icons (chatgpt, claude, axiom, last9) have `stroke="none"` in source and
render with no stroke; stroke icons keep their source stroke-width (e.g.
postgres at 1). No `strokeWidth={0}` or allowlists needed at call sites
or in the icon grid.
| Before | After |
| --- | --- |
| <img width="1826" height="552" alt="CleanShot 2026-03-05 at 10 53
31@2x-3D63CEF0-1132-44F5-A382-730346432F1E"
src="https://github.com/user-attachments/assets/9caf73fa-351b-4ea2-a420-b3339f934742"
/> | <img width="1814" height="552" alt="CleanShot 2026-03-05 at 10 53
40@2x-514FC8BD-D30F-4D23-B209-0ECD6D13A184"
src="https://github.com/user-attachments/assets/936ea5a5-dae0-413f-8545-b90a502cea69"
/> |
## Additional context
- Added `stroke="none"` to the four fill-only source SVGs;
sentry/grafana/otlp/datadog already had `stroke-width="0"`.
- `createSupabaseIcon` only applies `color`/`strokeWidth` when the
consumer passes them, so `svgDefaults` from the build are used
otherwise.
- Removed workarounds from `icons.tsx` and GuidesSidebar; updated
icons.mdx (defaults + fill-only guidance).
## What kind of change does this PR introduce?
Form handling improvement.
## What is the current behavior?
https://github.com/supabase/supabase/pull/43201/ standardised our
discard changes behaviour with a shared hook and
`DiscardChangesConfirmationDialog` component. But many forms and sheets
still:
1. Don’t have any Discard-confirm close behaviour, making it too easy to
make accidental discards
2. Use a more complicated, manually-created `CloseConfirmationModal`
approach
## What is the new behavior?
- Replaced all instances of `#2` above that had `CloseConfirmationModal`
with `DiscardChangesConfirmationDialog` and its hook
- Improved design system documentation around dirty form dismissal
| Before | After |
| --- | --- |
| <img width="987" height="569" alt="Mercor Apexroles Foo
Supabase-9A40EC7C-F335-4B26-B567-450FC0845463"
src="https://github.com/user-attachments/assets/363bed82-34d2-4cc8-9164-6d18cfdbdbbc"
/> | <img width="987" height="569" alt="Mercor Apexroles Foo
Supabase-F427F1FA-DECC-4194-B663-A9E5A6F285A1"
src="https://github.com/user-attachments/assets/d49fafdc-a5c2-46df-9b67-ec42bacbe716"
/> |
## To test
Try editing values these sheets in staging, then blurring the sheet or
pressing `esc`:
- CreateQueueSheet.tsx
- CronJobsTab.tsx
- CronJobPage.tsx
- EditWrapperSheet.tsx
- OverviewTab.tsx
- WrappersTab.tsx
- CreateFunction/index.tsx
- EditHookPanel.tsx
- TriggerSheet.tsx
- SidePanelEditor.tsx
- EditSecretSheet.tsx
- PolicyEditorModal/index.tsx
- PolicyEditorPanel/index.tsx
## Still to come
- [ ] Incrementally take on `#1`: implement
`DiscardChangesConfirmationDialog` and its hook in sheets or dialog
forms that have no dirty form dismissal handling
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## What kind of change does this PR introduce?
UX consistency improvement. Updates DEPR-355.
## What is the current behavior?
Discard-confirm close behavioir is implemented inconsistently across
Studio forms:
- some sheets/dialogs used `useConfirmOnClose`
- some duplicated local `CloseConfirmationModal` components
- some (e.g. `CreateHookSheet`) closed unconditionally and could lose
unsaved changes
## What is the new behavior?
Extracts and validates a reusable discard-close pattern for
dialogs/sheets
- enhances `useConfirmOnClose` with `handleOpenChange(open)` for
`Dialog`/`Sheet` `onOpenChange`
- adds shared `DiscardChangesConfirmationDialog` (`AlertDialog`-based,
override-able copy)
- migrates:
- `InviteMemberButton`
- `CreateHookSheet`
- `EditSecretSheet`
This standardizes close-guard behavior for
backdrop/escape/close-button/cancel-button flows without trying to block
route changes or arbitrary unmounts.
## Additional context
`CreateHookSheet` now also marks the generated secret action as dirty
(`setValue(..., { shouldDirty: true })`) so the discard guard behaves
correctly.
- Added tests for `useConfirmOnClose` covering:
- clean vs dirty close
- handleOpenChange(true|false)
- confirm/cancel behavior
- latest callback ref behavior
A follow-up PR is needed to migrate remaining duplicated
`CloseConfirmationModal` usages and older `useConfirmOnClose` call sites
to the shared `DiscardChangesConfirmationDialog` + `handleOpenChange`
pattern.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## What kind of change does this PR introduce?
Minor update
## What is the current behavior?
Our design system’s breadcrumbs:
1. Are not interactive
2. ~~Repeat the page title, which is directly below~~
## What is the new behavior?
These breadcrumbs:
- Are hyperlinked
- Show all parents, if nested
- ~~Don’t repeat the page title~~
| Before | After |
| --- | --- |
| <img width="1024" height="756"
alt="Forms-FBDF180F-F101-407C-A8EB-A06BBDB3509A"
src="https://github.com/user-attachments/assets/f2592b8b-b5d4-415f-af2e-28b99d5de0a0"
/> | <img width="1024" height="794"
alt="Forms-95348190-C8B2-4A3A-AE55-A4A5A16CD4B4"
src="https://github.com/user-attachments/assets/7b296c20-b12a-48ff-9479-6547cda73cd5"
/> |
## Additional context
I wonder if we should either drop the `/docs/` subdirectory or rename
it. The latter would make sense if we split, say, `/product/` from
`/icons/` and/or `/brand`.
[Primer](https://primer.style/octicons/design-guidelines/) does this
well.
## What kind of change does this PR introduce?
- Design system docs addition
## What is the current behavior?
- We used a ’sandwiched’ style Admonition a lot but have no clear
docs/examples for it
## What is the new behavior?
- An example file and documentation around the sandwiched Admonition
- Minor unrelated changes
- Copywriting docs expansion on capitalization and declarative writing
- `pnpm format` on charts
## Additional context
| Preview |
| --- |
| <img width="1714" height="612" alt="CleanShot 2026-02-24 at 16 02
21@2x"
src="https://github.com/user-attachments/assets/f547bdea-ca31-4ba7-85eb-bd9bcbf30d35"
/> |
## What kind of change does this PR introduce?
UI improvement
## What is the current behavior?
The session expired dialog is quite hard to parse when, for most people,
the ask is simple.
## What is the new behavior?
Improved session expired dialog:
- Refactored to use AlertDialog
- Clarified copywriting
- Uses the new AlertCollapsible to hide all the complicated debugging
steps under a toggle
- This component is documented in the design-system
| Before | After |
| --- | --- |
| <img width="1024" height="563"
alt="Supabase-B1728A05-DDD2-4A50-AED4-D62EAA2E7D7C"
src="https://github.com/user-attachments/assets/771f85d8-21ea-42b5-99f5-b9b05f5617dd"
/> | <img width="1024" height="563" alt="Storage Supabase"
src="https://github.com/user-attachments/assets/b2fcab68-fb29-4cb9-bd42-aecc57b9fa32"
/> |
| <img width="1024" height="563"
alt="Supabase-B1728A05-DDD2-4A50-AED4-D62EAA2E7D7C"
src="https://github.com/user-attachments/assets/771f85d8-21ea-42b5-99f5-b9b05f5617dd"
/> | <img width="1024" height="563" alt="Storage Supabase"
src="https://github.com/user-attachments/assets/babd3711-5fdf-43b9-be06-d96268a191fd"
/> |
## To test
In apps/studio/hooks/misc/withAuth.tsx:
```diff
- const [isSessionTimeoutModalOpen, setIsSessionTimeoutModalOpen] = useState(false)
+ const [isSessionTimeoutModalOpen, setIsSessionTimeoutModalOpen] = useState(true) // Mocked as true for UI testing
```
---------
Co-authored-by: Joshen Lim <joshenlimek@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?
We are now saving our old webinar videos as unlisted YouTube videos.
I added the video embeds to previous webinars.
---------
Co-authored-by: Alan Daniel <stylesshjs@gmail.com>
## What kind of change does this PR introduce?
Component improvement
## What is the current behavior?
[Admonition](https://supabase.com/design-system/docs/fragments/admonition)
often passes `actions`, often Button(s). These either are stacked via
the `layout` prop `horizontal` or `vertical`. That binary choice often
means, given layout flex, awkward text wrapping.
## What is the new behavior?
Admonition now has a `"responsive"` value for the `layout` prop. When
`layout="responsive"`, the Alert root gets `@container` so the
Admonition is the container-query context. The Admonition stays
`vertical` when it’s narrow and switches to `horizontal` when its own
width reaches the `@md` container breakpoint, independent of page width.
## Additional context
See the _Disk Management_ section of Database Settings to see the single
in-situ example.
Video demo:
https://github.com/user-attachments/assets/318a4530-5ae4-43f3-99cf-b75967659ed3
This pull request standardizes the usage of props and value types for
the `ResizablePanelGroup` and `ResizablePanel` components across
multiple files in the codebase. Specifically, it replaces the deprecated
`direction` prop with `orientation`, and updates numeric prop values
(such as `defaultSize`, `minSize`, and `maxSize`) to be passed as
strings. This ensures consistency with the updated component API and
improves type safety.
**Component API Updates:**
* Replaced the `direction` prop with `orientation` for all usages of
`ResizablePanelGroup`
* Updated all `ResizablePanel` props (`defaultSize`, `minSize`,
`maxSize`) to be passed as strings instead of numbers, ensuring
compatibility with the latest API requirements.
* Removed deprecated or unnecessary props such as `order` from
`ResizablePanel` components, and ensured all size-related props are
consistently formatted as strings.
This pull request updates the `react-data-grid` dependency and refactors
code throughout the codebase to use the new import structure and updated
APIs. The changes improve compatibility with the latest version of
`react-data-grid`, simplify imports, and update row selection logic to
match new hook signatures. Additionally, some code is reorganized to use
absolute imports for internal components.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## What kind of change does this PR introduce?
- ~Feat~ Chore
- Resolves DEPR-33
## What is the current behavior?
The dialog used to delete an organization uses a ”type this org’s name
in before you can press this button” interaction but:
- A) Enables the button the whole time
- B) We already have this componentized in TextConfirmModal
## What is the new behavior?
- Refactored this dialog to use `TextConfirmModal` instead
- Updated design docs to make this prop clearer
| Before | After |
| --- | --- |
| <img width="1024" height="759" alt="Supabase"
src="https://github.com/user-attachments/assets/85c965f6-29d4-4696-8c0c-a54ddcbe6167"
/> | <img width="1024" height="759" alt="Supabase"
src="https://github.com/user-attachments/assets/0a96ca65-15c3-4b1b-bb10-620526c059b8"
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Documentation**
* Updated Text Confirm Dialog documentation with clarifications: the
confirm action remains disabled until input exactly matches the required
string, and leading/trailing whitespace is trimmed from the input.
* **Refactor**
* Streamlined the organization deletion confirmation workflow for
improved user experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Sorted all imports in all packages, `cms`, `design-system` and
`ui-library` apps by running `pnpm format` on them.
All changes in this PR are done by the script.
## What kind of change does this PR introduce?
Bug fix
## What is the current behavior?
- Links on the UI Patterns introduction page are wrong and therefore 404
- Introduction pages on the sidebar are also wrong and 404
## What is the new behavior?
Fixes for both of the above
## Additional context
Thanks [Emilio](https://github.com/supabase/supabase/pull/42309) for
letting us know!
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Documentation**
* Updated navigation structure in the design system documentation to
direct users to introduction pages for UI Patterns, Fragments, and
Components sections.
* Refined internal documentation links for improved navigation
consistency.
<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
* Remove extra file.
* Remove unneeded tsconfig.jsons.
* Add @/* alias for importing in-package files to all apps.
* Remove baseUrl from all apps except studio (it'll require changes in almost all files).
* Fix baseUrl issues in docs, ui-library and design-system.
* Fix the typecheck for cms app. Fix all baseUrl errors in the cms app.
* Add deprecated flag to baseUrl in www.
* feat: tidy up header on mobile
* fix: graceful searchbar header
* fix: header classes and unused elements
* feat: trim down logo on header
* fix: logos again
* chore: remove dead code
* fix: classic dark logo header
* fix: page padding tidy ups
* fix: some font sizing
* feat: updated homepage cards
* fix: toc layout
* fix: toc again
* feat: homepage cards all the same size
* fix: footer paddings
* fix: pager if only 1 directional item
* fix: sidebar padding issues
* chore: killing all the defaults
* fix: import for side nav
* fix: sidebar complaining about dialog title
* fix: homepage paddings
* fix: killing one more default export
* feat: update colours icon to francescos
* fix: loose repeated copy
* chore(studio): integrate cursor rules with form patterns
* chore(studio): update FormLayout inner styling
* chore(studio): align actions form field to the right
* chore(design-system): wrap each form field in a CardContent
* feat: remove unused chart files
* chore: regenerate registry
* fix: logs bar chart positioning
* feat: add charts page to ui patterns
* chore: alphabetise ui patterns nav
* feat: base composable chart components
* chore: prettier for charts.mdx
* chore: slowly putting example together
* feat: add chart header components
* feat: add chart content wrapper
* feat: add recharts to source
* feat: add empty state handling
* feat: add loading state for content area as well
* feat: starting on actual recharts pieces
* feat: add basic api to documentation
* feat: add disabled state too
* feat: couple of basic chart types
* chore: tidy up for now
* feat: modify eslint rules for our demo files
* fix: recharts logo colour on light mode
* feat: absorb metric card into chart
* feat: align prop for chart header
* feat: refactor chart content
* feat: example with table
* chore: format for prettier
* fix: pkg lock merge conflict
* fix: small bits from danny
* feat: add link in ui pattern intro to charts
* chore: remove charts link from atoms
* chore: update metric padding to saxon suggestion
* feat: table footer overrides by default
* feat: update api props in table
* chore: formating
* feat: sort intro page entry points and sidebar
* feat: beef up getting started intro and faq
* chore: small copy fix
* feat: description for ui patterns intro
* feat: basic description for fragments intro
* feat: add description for atom components intro
* feat: add links to ui pattern docs
* chore: run prettier for mdx files
* add ts any checks
* fix linting issues
* updated more file rules
* updated runtime files
* updated turbo to remove lints
* removed eslint and reference from next
* Revert the pnpm lock to the one from master.
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
