- Remove the 'Restoring is non-destructive' admonition from the
bottom of the Versions tab
- Refactor getMockObjectVersions to accept the bucket's current
cap and expiryDays and adapt its output so version-list labels
are always consistent with the policy:
* Never returns a version older than the retention window
(no 'Past Nd limit' surprises when the user set fewer days)
* Never returns more noncurrent versions than the cap
(no '#3 of 2' when the user tightened the cap)
- Anchor all version timestamps to the real clock via
daysAgoFromNow so the mock stays fresh regardless of when the
prototype is opened, instead of drifting away from the fixed
BASE_DATE
- Wire useObjectVersionsQuery to look up the bucket's protection
and pass it into the mock on every fetch, so policy edits from
the bucket modal reflect in the panel next time it opens
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
Show expiration policy context directly in the Versions tab:
- Cap badge and retention badge in the header section
- Combined mode indicator (both/either) when both policies are set
- At-cap and nearing-cap warnings
- Per-version VersionExpiryIndicator showing days remaining and
cap position (#N of M) with warning colors based on combined
and/or policy logic
- Pre-computed noncurrent indices for efficient lookup
- Versioning-suspended admonition banner
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
Replace bg-border-stronger (oklch with alpha) with solid hsl values:
- Light mode: hsl(0 0% 80%) — neutral mid-gray
- Dark mode: hsl(0 0% 30%) — neutral mid-gray
This prevents the accentuated color at the intersection where
the vertical and horizontal lines overlap.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Lift expandedVersionIds state to DeletedFilesContext (shared between
DeletedFilesList and FileExplorerHeader)
- Move 'Expand all' / 'Collapse all' buttons from the table header into
the FileExplorerHeader top bar with outline button variant
- Change tree-connector line color from bg-foreground-muted to
bg-border-stronger for a subtler appearance
- Increase gap between horizontal tree branch and version title text
(pl-[22px] → pl-[36px], w-[11px] → w-[8px])
- Apply same tree line changes to standalone Trash page (TrashList)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Tree connector lines use bg-foreground-muted instead of bg-border for
better visibility
- Horizontal branch shortened from w-[15px] to w-[11px], creating a 4px
gap between the line end and the version text (text still aligns with
parent name)
- Replaced the icon-only expand/collapse toggle in the table header with
two separate text buttons: 'Expand all' and 'Collapse all', separated
by a dot divider
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
Replace CornerDownRight icon with CSS tree-connector lines for nested
version rows. Each version draws:
- A vertical line from the top border to the junction point (center)
- A horizontal branch from the junction to the version text
- For non-last versions, the vertical line continues to the bottom
border, connecting seamlessly with the next row
- For the last version, the vertical line stops at the junction (└ shape)
Lines are positioned at left-[23px] to align with the parent row's
chevron center (16px cell padding + 7px icon center). Version text
starts at pl-[22px] to align with the parent row's name text.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Version rows are now selectable via checkboxes for batch multi-selection,
using composite keys (objectId::versionId) in the shared selection state
- Clicking a version row opens the preview panel with version-specific
metadata (version ID, action, created date, size) and a 'no preview
available' placeholder
- Aligned CornerDownRight icon with parent row chevron and version text
with parent name text (both use gap-x-2 and size-14 icons)
- Added expand/collapse all toggle button in the table header top right
(ChevronsUpDown / ChevronsDownUp icons)
- Restore and delete actions on version rows now perform real client-side
effects: version-level mock store mutations + query cache invalidation
- Removed the Expires column from both DeletedFilesList and TrashList
- Extended DeletedFilesContext with selectedDeletedVersion state
- Added version-level mutation functions to protection-mocks.ts
- Added useTrashVersionRestoreMutation and useTrashVersionDeleteMutation
hooks to bucket-trash-query.ts
- Updated Trash page (standalone) with version-level mutation wiring
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- PreviewPane: add Info hint below Delete button when versioning is
active, explaining that deleting soft-deletes the object and all
versions and they can be restored from the deleted versions view
- VersionHistory: add Get URL (Copy) icon button on every version row
alongside existing Download/Restore/Delete actions
- DeletedFilesList & TrashList: implement collapsible nested grouping
for noncurrent versions under parent objects with ChevronRight/Down
expand toggle, version count badge, and per-version Restore/Delete
actions on hover
- protection-mocks: expand mock data from 8 to 12 trash objects with
richer version histories (up to 6 noncurrent versions per object)
to properly showcase the nested deleted versions UI
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
Task A: Add ExpirationMode (and/or) toggle between retention-days and
max-versions fields in bucket settings. 'and' = single S3 lifecycle policy
(both conditions must be met), 'or' = two independent rules (either triggers).
Wired into form schema, create/edit bucket modals, and mock store.
Task B: Move 'Show deleted versions' toggle from breadcrumb bar into the
file explorer table header, right of the search input. Switch is on the left
of the label text.
Task C: Add noncurrent version rows beneath each deleted object in TrashList.
Nested rows have left indentation with a CornerDownRight icon and lighter
background. Added DeletedObjectVersion interface and mock data to
protection-mocks.ts. Updated all user-facing terminology from 'files' to
'versions' across Trash, TrashList, TrashSelectionBar, DeletedFilesList,
DeletedFilesHeaderSelection, DeletedFilePreviewPane, and bucket page tabs.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Reverted the timeline row's Restore action back to its icon-only
text-variant button — the ask to make Restore a default-variant
button was about the "Back to latest" action in the version
preview banner, not the per-row action in the Versions tab
- The version preview banner's action is now labeled Restore, styled
as a default-variant button, and actually restores the previewed
version as current (instead of just clearing the preview)
- Versioning can no longer be turned fully "off" on a bucket that's
ever had it enabled — it moves to a new suspended state instead,
matching how bucket versioning actually behaves. Suspending only
stops new noncurrent versions from being created; nothing already
retained is deleted, so the destructive typed-confirmation flow for
disabling versioning is gone
- Added `hasVersioningHistory` (enabled OR suspended) alongside the
existing `isBucketVersioned` (enabled only) and repointed every
surface that manages or warns about retained version/trash data to
the former, since a suspended bucket can still be sitting on plenty
of it
- Bucket list "Versioning" column, plan-downgrade admonition, and the
Versions tab now all reflect the three states (Enabled / Suspended /
never enabled)
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Versions tab in file preview now only shows when the current bucket
has object versioning enabled, instead of the global feature flag
- Renamed the current-version badge from Latest to Current
- Previewing-version banner now puts the version date on its own line
- Restore action is now a labeled default-variant button instead of
an icon-only text button
- Hover-underline moved from the timeline dot to the version date, and
the currently-previewed version is now highlighted by coloring its
date text and dot to match the brand color
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
Usage breakdown & chart:
- Split "Object versions" into "Noncurrent versions" and "Soft-deleted files"
in the Storage Size breakdown, in the mock data model, and in the chart's
stacked bars.
- Wire the mock retention series into the Storage Size chart itself so the
daily bars actually visualize the live / noncurrent / soft-deleted split,
not just the inline breakdown.
Edge cases:
- Tightening retention (fewer days or fewer versions than the bucket already
has) shows an inline admonition in the edit modal explaining that some
retained data will be permanently expired on save.
- EmptyBucketModal: when the bucket is versioned, the destructive banner
copy and an extra warning admonition call out that emptying also purges
every noncurrent version and soft-deleted file.
- DeleteBucketModal: appends a note that all versions and soft-deleted files
will be lost, when the bucket is versioned.
- Plan downgrade auto-disable-and-purge: on the buckets list, an effect
detects when the org plan no longer supports versioning and invokes a new
purgeVersioningOnPlanDowngrade() helper that flips every enabled bucket in
the mock store back to disabled and clears the shared trash store, then
shows a warning admonition listing the affected buckets.
- Public bucket + versioning: inline admonition in the modal explains that
public buckets expose every version by default and points to an RLS-based
mitigation (filter storage.objects by an isCurrent metadata flag).
Version cap indicator:
- In VersionHistory, show a `{count} / {cap} noncurrent` badge when a cap is
configured, with contextual copy at ≥80% and at cap explaining that older
versions auto-expire on the next overwrite.
Copy:
- Reword "Noncurrent version retention" and "Max noncurrent versions"
descriptions to be concise/factual instead of using "this many" phrasing.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Prefill "Noncurrent version retention" and "Max noncurrent versions"
with the plan's default values when the Object versioning switch is
turned on (only if the fields are still empty), so users can save
immediately instead of starting from a blank input.
- In the deleted files view, render the preview panel as an absolutely
positioned overlay over the rows instead of a flex sibling that
shrinks the table. Rows keep their full width and stay horizontally
scrollable underneath the panel.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Show an "Enabled" badge instead of "object-level" text under the
buckets list "Versioning" column, since only object-level versioning
exists in this scope.
- Tighten vertical padding on deleted files table rows (px-4 py-2
instead of the default p-4).
- Only show the "Show deleted files" toggle for buckets with versioning
enabled; move the Switch to the right of its label.
- Move isShowingDeleted from local useState to a nuqs query param
(?deletedFiles=true) so the deleted files view is linkable/bookmarkable.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Fix "Cannot read properties of undefined (reading 'content')" crash:
the snapshot-removal pass dropped the required `tooltip` prop from two
ButtonTooltip calls (TrashList's per-row delete, Trash's "Delete all
permanently"). Swap both to plain Button since no dynamic tooltip is
needed there.
- Rework DeletedFilesList (the "Show deleted files" switch view, now
the default buckets page) from stacked card rows into a proper single-line
Table matching the Files/Deleted files tab's TrashList row styling and
column headers (Object, Original location, Deleted, Size, Expires).
- Add per-row Restore/Delete permanently actions that only reveal on row
hover, alongside the existing multiselect checkbox and click-to-preview
behavior.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
Snapshots aren't implemented in this branch yet, so drop the
heldBySnapshot field from TrashObject/ObjectVersion mocks and all
related UI: disabled states, tooltips, badges, and copy across the
deleted files list/preview, version history, and bulk trash actions.
Delete-all/permanent-delete mutations now act on every selected/listed
item unconditionally.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Bucket versioning: create/edit bucket modals now write to an in-memory
mock store (setMockBucketProtection) on save, so the buckets list
"Versioning" column reflects the change immediately. Resets on page
refresh since it's plain module state (no real API yet).
- Deleted files: restore/permanent-delete mutations now actually mutate
the trash mock store instead of no-op delaying, so the deleted files
list updates after restoring or hard-deleting items.
- Added 5 more dummy trash entries (8 total) with varied held/expiry
states.
- Changed all "Delete permanently"/"Delete all permanently" trigger
buttons to the `danger` Button variant.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Reduce per-item bottom padding from pb-8 to pb-4
- Remove the hover/selected background on each version row entirely;
instead underline the timeline dot on hover to signal interactivity
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
Deleted files batch actions:
- Move Restore/Delete permanently buttons into the StorageExplorer header
row (same position as the normal file selection bar)
- Show "X items selected" text on the far left, actions on the far right
- Update select-all row to show "Select/Unselect all X files" label
Bucket versioning fields:
- Use FormItemLayout with flex-row-reverse layout for retention and max
versions fields (label left, input right)
- Use InputGroup with InputGroupAddon for unit suffixes ("days", "versions")
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Reduce vertical gap between detail fields from space-y-6 to space-y-3
- Make Restore/Delete permanently actions sticky at the bottom with a
border-t separator, only the preview + details area scrolls
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
- Move "Show deleted files" toggle from StorageExplorer header to
page-level breadcrumbs as a Switch control, left of Policies button
- Add checkbox multiselect for deleted files with bulk Restore/Delete
permanently actions and shift-click range selection
- Keep search input visible when showing deleted files, with contextual
placeholder text
- Add file preview thumbnail to deleted file preview pane
- Change "Delete permanently" button to default variant (matching Restore)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
Add an alternative bucket view at /storage/files/bucketsV2/[bucketId]
that replaces the separate Files/Deleted files tabs with a unified
StorageExplorer. A "Deleted files" toggle button in the header's
actions bar (left of Navigate) switches between live files and
soft-deleted items inline.
When showing deleted files:
- The file listing is replaced with a DeletedFilesList showing all
soft-deleted objects with name, size, deletion time, and origin
- Clicking a deleted item opens a dedicated DeletedFilePreviewPane
with Original location, Deleted at, Deleted by, Size, Expires,
and Restore / Delete permanently actions
- Upload, search, view options, and folder creation are hidden
The existing bucket page is unchanged (wrapped in DeletedFilesProvider
with enabled=false). The bucketsV2 route is navigable only via URL.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
Scoped-down storage protection prototype with three features:
- Bucket-level versioning policy (retention days, max versions) in create/edit modals
- Object version history in the file preview pane with restore/delete actions
- Per-bucket deleted files (trash) view with bulk selection, restore, and permanent delete
All data is mock-backed behind the STORAGE_PROTECTION_ENABLED feature flag.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiUEvmC84bRsteqsWXHY2p
## What kind of change does this PR introduce?
Bug fix stacked on #48478.
## What is the current behavior?
Storage Explorer renders the custom closed-folder icon at `1.5` but
leaves the Lucide open-folder icon at its default `2`. The duplicated
file-picker implementation also uses a different set of stroke-width
overrides.
## What is the new behavior?
A shared `StorageRowIcon` renders loading, open and closed folder,
image, audio, video and generic file icons at `1.5` across Storage
Explorer, row editing and the bucket file picker.
Test by comparing open and closed folders and file-type rows in Storage
Explorer and the bucket file picker.
| Before | After |
| --- | --- |
| <img width="524" height="336" alt="CleanShot 2026-08-03 at 18 38
06@2x"
src="https://github.com/user-attachments/assets/15eb8b9f-69fc-4eee-8428-d7ec26dce8dc"
/> | <img width="522" height="328" alt="CleanShot 2026-08-03 at 18 39
20@2x"
src="https://github.com/user-attachments/assets/17b7dddd-8d36-421c-8356-c9c1bd7456e8"
/> |
| _Thicker image and file icon compared to folder icon_ | _Every icon
has the same stroke thickness_ |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Standardized file, folder, media, and loading icons across storage
views.
* Improved visual consistency with unified icon sizing, styling, and
stroke width.
* **Tests**
* Added coverage for loading, folder, media, and generic file icon
states.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Accessibility / UX fix
([DEPR-630](https://linear.app/supabase/issue/DEPR-630)).
## What is the current behavior?
In Storage **As columns** view, keyboard select is unclear: the checkbox
stays hidden until hover, so Tab/Space selection is hard to see. The row
actions (three dots) menu also shows a browser default blue outline on
Tab.
## What is the new behavior?
Same icon/checkbox swap as list/hover, but also on keyboard focus:
- Checkbox replaces the icon on hover, `:focus-within`, and when
selected (no layout shift)
- Checkbox becomes visible when focused via keyboard (without needing
hover)
- Row gets an inset outline while the checkbox is focused
- Folders have no checkbox (non-focusable spacer only)
- Row actions trigger uses `focus-ring` instead of the browser blue
outline
| Before | After |
| --- | --- |
| <img width="1046" height="362" alt="CleanShot 2026-07-31 at 14 37
47@2x"
src="https://github.com/user-attachments/assets/9b827627-17e6-49a6-87a3-1253b4cef1da"
/> | <img width="1046" height="390" alt="CleanShot 2026-07-31 at 14 37
13@2x"
src="https://github.com/user-attachments/assets/2fd2b426-a8e2-4fda-b1ba-4df728b7b2f1"
/> |
| _Checkbox focussed but not visually shown_ | _Checkbox focussed and
visually shown_ |
## To test
1. Open the **Studio preview** for this PR.
2. Go to **Storage → Files** → open a bucket with several files.
3. Set view to **As columns**.
4. Tab until a **file** checkbox is focused.
**Expect:**
- Icon is replaced by the checkbox (same slot; neighbouring row icons
should not look shifted)
- Checkbox visible without hovering
- Row shows an inset outline
5. Press **Space** to select. Checkbox stays in the icon slot; selection
background applies.
6. Hover another file. Same icon to checkbox swap as before.
7. Tab to the three-dot actions control on a row. Expect the shared
focus ring (not a blue browser outline); the menu icon should become
visible.
8. Folders: no checkbox in the tab order; click icon/name still opens
the folder.
9. Smoke **As list**. Same swap behaviour.
## Additional context
From Kemal's DEPR-621 review.
## 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?
Chore / build (ESLint config upgrade + lint cleanup).
## What is the current behavior?
`eslint-plugin-react-hooks` v5 (pulled in transitively by
`eslint-config-next` v15) doesn't recognize stable `useEffectEvent`, so
every effect that calls an effect-event handler needs an `eslint-disable
react-hooks/exhaustive-deps` to silence a false positive. There are 30
such dead disables across Studio.
## What is the new behavior?
Bumps `eslint-config-next` to v16, which pulls in
`eslint-plugin-react-hooks` v7 whose `exhaustive-deps` understands
`useEffectEvent`, and removes the 30 now-dead disable directives (and
their orphaned explanatory comments).
Supporting changes:
- **Flat-config migration**: v16 is a native flat-config array (v15 was
eslintrc), so `eslint-config-supabase` now spreads it directly instead
of bridging through `FlatCompat`.
- **React Compiler rules off**: v16 enables react-hooks v7's
`recommended`, which layers the React Compiler lint rules on top of the
two classic rules. These are switched off (derived dynamically from what
next enables) to keep this change scoped to the `exhaustive-deps`
improvement.
- **Plugin-registration fallout** (v16 scopes plugin registration to a
file glob rather than registering globally like FlatCompat did): stop
re-registering `@typescript-eslint` (shared) and `jsx-a11y` (studio);
scope our react / react-hooks / jsx-a11y rule overrides (studio, www) to
v16's plugin glob so they don't error on files outside it (e.g. `.cjs`).
- **Lint surface preserved**: v16's glob newly includes `.mts`/`.cts`
(v15 didn't lint them), which surfaced pre-existing errors in tooling
scripts. The shared config keeps the prior surface by leaving
`.mts`/`.cts` unlinted; linting them is left as a separate change.
- **Ratchet**: rebaselines `@tanstack/query/exhaustive-deps` 9 → 89. v15
forced next's `@babel/eslint-parser` onto `.ts` files, hiding these
deps; v16 parses `.ts` with `@typescript-eslint/parser` and correctly
surfaces the intentional `connectionString`-excluded-from-`queryKey`
pattern. Worth a follow-up to review whether any are real
cache-correctness bugs.
- Drops three now-dead devDeps from `eslint-config-supabase`:
`@eslint/eslintrc`, `@eslint/js`, `@typescript-eslint/eslint-plugin`.
Verified locally: `turbo run lint` → 7/7 packages pass with 0 errors;
Studio `lint:ratchet` passes; Prettier clean on changed files; typecheck
unaffected.
## Additional context
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Refined linting configuration and removed outdated lint suppressions
across Studio.
* Updated Next.js linting support and refreshed related development
configuration.
* Expanded lint baseline coverage for query-related code.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
A11y cleanup follow-up to #47984 /
[DEPR-626](https://linear.app/supabase/issue/DEPR-626).
## What is the current behavior?
Studio had 82 ratcheted `supabase/require-explicit-tabindex` violations
(raw `<button>` / `role="button"` without explicit `tabIndex`).
## What is the new behavior?
- Explicit `tabIndex={0}` (or disabled → `-1`) on those Studio call
sites across nav, `components/ui`, Database, Storage, and the remainder
- Ratchet baseline cleared (**82 → 0**) and the rule **removed from the
Studio ratchet** (debt is gone; ratchet is temporary)
- Rule remains a shared **`warn`** for now — promoting to `error` (and
sweeping www/docs/design-system) is a follow-up
- Also fixed the learn/ui-library call sites that surfaced while
experimenting with error promotion
- Small follow-ups where making controls focusable exposed gaps:
accessible names, disabled/focus consistency, focus-ring polish on
To-test surfaces, home section `KeyboardSensor`, and an E2E locator
tightened after `aria-label="Remove column"`
Prefer migrating to `Button` from `ui` in future touch-ups; this PR
takes the minimal path so Studio debt can stay at zero.
## Additional context
Batches landed together so baseline conflicts stayed simple while
chipping away:
- Hotspots / nav (FirstLevelNav, Marketplace, AttachmentUpload, Column,
Tabs, …)
- `components/ui` shared
- Database + Storage
- Remainder
**Out of scope / intentional deferrals**
- Promoting `supabase/require-explicit-tabindex` to a lint **error**
(follow-up after www/docs/design-system sweeps)
- Tabs/Radio roving, tooltips, context menus, in-menu items
- Full keyboard-accessible tab-close UX (close stays hover +
`tabIndex={-1}`; context menu still closes tabs)
- Data API docs links (`/project/<ref>/api` redirect)
**Reviewer notes**
- Rule only flags raw `<button>` / `role="button"` without a `tabIndex`
prop. `Button` from `ui` already bakes this in
- `tabIndex={-1}` is intentional for disabled controls, in-menu /
roving-focus children, and hover-only tab close
- For dnd-kit grips, put `tabIndex` **after** `{...attributes}` so it
isn’t overwritten (TS2783)
### To test
Use **Safari** with macOS Keyboard navigation **off** (System Settings →
Keyboard). Chrome once for a sanity pass. For each surface below: Tab
until the control is focused, then activate with Enter/Space where
relevant.
1. **API Docs side panel** (Table Editor → open a table → **API docs**)
- Floating API Docs panel — **not** `/project/<ref>/api` (that redirects
to Data API docs; language ToggleGroup uses arrow keys; links are out of
scope)
- Left nav buttons — Tab through several and activate one; active
highlight / navigation still works
2. **Integrations → Marketplace**
- Enable **Integrations layout** feature preview first (avatar menu →
Feature previews)
- `/org/<slug>/integrations` or project integrations marketplace
- “Clear all”, grid/list toggles — Tab + activate
3. **Table Editor → create a table → Columns**
- Drag handles only appear while **creating** (not when editing an
existing table)
- Tab to grip / remove (X) / sensitive-data eye if shown
4. **Project Home** — section drag handles
- Tab to a grip (visible focus ring)
- Optional: Space to pick up, arrows to move, Space/Esc to drop
(KeyboardSensor added)
- Mouse dnd still works
5. **Storage → Policies** — expand/collapse bucket list chevron
(design-system focus ring, no stuck grey open bg)
6. **Support form** (Help → Support) — attachment remove (×) and
add-attachment control when visible
Disabled controls should be **skipped** by Tab.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Accessibility Improvements**
* Improved keyboard navigation throughout Studio by explicitly managing
focus (`tabIndex`) across many interactive controls (menus, tabs,
tables, charts, dialogs, navigation, and form actions).
* Disabled or non-interactive controls are now removed from the tab
order (or made unfocusable), while available actions remain reachable.
* Ensured `type="button"` on relevant controls to prevent unintended
submissions, and refined keyboard focus behavior for various toggles and
copy/remove actions.
* **Chores**
* Updated the ESLint rule baseline configuration to match the new focus
behavior.
<!-- 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?
- Noticing our code we have many patterns of calling localstorage and
handling those errors
- We should add those in a single well tested file
- Handle those errors in the singleton which makes it easier for us to
debug customer issues. Logger is outputing local storage warnings for
feature we expose
- Side effect of this is random crashes on studio when local storage
isn't available or handled correctly
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Improved browser storage handling across the app for more reliable
persistence and graceful behavior in restricted or non-browser
environments (settings, previews, charts, tabs, sign-in/session flows,
integrations, and UI state).
* **New Features**
* Introduced a safe storage layer to standardize and harden
local/session persistence.
* **Tests**
* Added comprehensive tests covering the new safe storage behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Studio is on `react@^19.2.6`, and `useEffectEvent` shipped stable in
React 19.2 with the same signature as the userland polyfill. This drops
the local hook in `apps/studio` and `apps/www` in favor of the built-in.
**Removed:**
- `apps/studio/hooks/useStaticEffectEvent.ts`
- `apps/www/hooks/useStaticEffectEvent.ts`
- `.claude/skills/use-static-effect-event/` — skill is obsolete
**Changed:**
- 26 call sites: dropped the `useStaticEffectEvent` import, added
`useEffectEvent` to the existing `react` import, renamed call sites
- `.claude/CLAUDE.md`: `apps/studio` row updated React 18 → React 19
- `.claude/skills/vercel-composition-patterns/SKILL.md`: removed stale
"Studio uses React 18, skip these patterns" warning
## To test
- `pnpm typecheck --filter=studio` — passes locally
- `pnpm typecheck --filter=www` — passes locally
- `grep -rn "useStaticEffectEvent"` returns nothing outside
`node_modules`
- Smoke-test areas that use the hook: schema visualizer edges
(intersection check), spreadsheet import, sign-in/CLI login flows, side
panels with unsaved-changes prompts
**Out of scope:** pre-existing Tailwind lint warning on
`DefaultEdge.tsx:141` (`outline` + `outline-1` conflict) — unrelated to
this migration
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Internal event handling migrated to React’s built-in event hooks
across the Studio app; no user-facing changes.
* **Documentation**
* Clarified React 19 compatibility and noted Studio now targets React
19.
* Removed obsolete documentation for a deprecated internal hook.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46415?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: Alaister Young <10985857+alaister@users.noreply.github.com>
<img width="1285" height="654" alt="image"
src="https://github.com/user-attachments/assets/10074f07-3ac0-4f1f-b920-4255c67968d6"
/>
Updates file storage buckets to make use of new page components and
follow more standard full width pages as recommended in our design
system.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Search input now always visible with dynamic placeholder and cancel
control.
* “Go up one level” navigation button shown in list view when not at
bucket root.
* **Style**
* Thinner icon strokes and smaller button/icon sizing across the Storage
Explorer and preview.
* Header, breadcrumbs, and page container spacing/layout refined;
explorer outer container simplified.
* Selection count UI made compact/monospaced; new layout tokens for
header and bulk-action rows.
* **Tests**
* Unit and e2e tests updated; added e2e helper for rename/create inputs.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46184?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 -->
## Problem
The `_Shadcn_` suffix isn't needed anymore on `Select` components
## Solution
Remove it. No other changes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Updated internal component architecture to standardize and simplify
the codebase. These changes improve code maintainability and consistency
across the application without affecting existing functionality or user
experience.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45988)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
- Most changes are related to either types or `useRef` usages (it now
requires an initial value).
- also updated `vaul` to its latest version and haven't noticed any
change ([design-system
demo](https://design-system-git-react-19-supabase.vercel.app/design-system/docs/components/drawer))
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Upgraded workspace to React 19.
* **Bug Fixes**
* Improved null-safety and ref handling across editors, UI components,
shortcuts, and markdown/image rendering to reduce runtime errors.
* Safer event/timeout/interval cleanup and more robust command/context
handling.
* **Chores**
* Bumped vaul dependency versions.
* **Documentation**
* Type and TypeScript accuracy improvements for clearer developer
feedback.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45886)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The `_Shadcn_` suffix isn't needed anymore on label component
## Solution
Remove it. No other changes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Standardized Label usage across the codebase by removing the legacy
alias and using the direct Label export from the UI package
consistently.
* **Documentation**
* Updated component examples and docs to use the standardized Label
component in usage snippets and demos.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45986)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## TL;DR
fixes a few storage shortcut edge cases
## ref:
- closes https://github.com/supabase/supabase/issues/45977
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* The storage bucket creation shortcut now respects user permissions and
will only be available when allowed.
* Storage file deletion shortcut now requires appropriate write
permission before it can be used on selections.
* Refresh shortcut in the storage explorer is always available
regardless of selection state.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45978)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The `_Shadcn_` suffix isn't needed anymore on `<ContextMenu_Shadcn_>`
and related components
## Solution
Remove it. No other changes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Replaced legacy context-menu component variants with the unified UI
context-menu components across the app for consistent rendering and
imports; behavior and menu content remain unchanged.
* **Tests**
* Updated a test mock to track the unified context-menu component mount
count.
* **Chores**
* Simplified UI package re-exports to expose the canonical context-menu
symbols.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45971)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The `_Shadcn_` suffix isn't needed anymore on fields components
## Solution
Remove it. No other changes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **Refactor**
* Streamlined internal component export patterns and standardized import
references to improve code organization and maintainability.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45972)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Summary
Adds keyboard shortcuts to the Storage section, mirroring the
conventions already established for Auth Users and Database pages:
- **Storage navigation chords** (`S, F` / `S, A` / `S, V` / `S, 3`)
active only inside `StorageLayout`.
- **Files (bucket list) page** shortcuts for search, create, refresh,
reset filters, reset sort.
- **Storage Explorer** shortcuts for upload, new folder, view toggle,
refresh, search, multi-select download/move/delete, and an Escape
ladder.
- `ShortcutTooltip` wired into the relevant buttons so users can
discover keybinds on hover.
- Reload spinner is now driven by a shared store flag, so it shows
whether you click the button or fire the shortcut.
## Test plan
### Storage navigation chords
Active anywhere under `/project/<ref>/storage/*`.
| Keybind | Action |
|---------|--------|
| `S` then `F` | Go to Files |
| `S` then `A` | Go to Analytics buckets (platform + feature-flagged) |
| `S` then `V` | Go to Vector buckets (platform + feature-flagged) |
| `S` then `3` | Go to S3 settings (platform only) |
### Files (bucket list) page
At `/project/<ref>/storage/files`.
| Keybind | Action | Notes |
|---------|--------|-------|
| `Shift+F` | Focus search ("Search buckets") | Selects existing text |
| `Shift+N` | Create new bucket | Opens the create-bucket modal |
| `F` then `C` | Reset filters | Clears the search string |
| `Shift+R` | Refresh buckets | Refetches the bucket list |
| `S` then `C` | Reset bucket sort | Only fires when sort ≠ default
(Created at) |
### Storage Explorer (inside a bucket)
At `/project/<ref>/storage/files/buckets/<bucketId>`.
| Keybind | Action | Notes |
|---------|--------|-------|
| `Shift+F` | Focus search ("Search files") | Opens the search input if
hidden, then focuses |
| `Shift+R` | Refresh | Refetches all opened folders; spinner reflects
state |
| `I` then `F` | Upload files | Disabled w/o ` STORAGE_WRITE ` or at
bucket root with no folder |
| `I` then `N` | Create folder | Same permission gates as Upload |
| `V` then `C` | View as columns | |
| `V` then `L` | View as list | |
| `Shift+D` | Download selected | Only fires when ≥1 item selected;
single vs many handled |
| `Shift+M` | Move selected | Only fires when ≥1 item selected AND `
STORAGE_WRITE ` granted |
| `Mod+Backspace` | Delete selected | Only fires when ≥1 item selected
(` Mod ` = ⌘ on macOS / ` Ctrl ` on Win/Linux) |
| `Escape` | Clear selection | If ≥1 item selected |
| `Escape` | Close file preview | If no selection and preview pane open
|
| `Escape` | Close search | If no selection, no preview, and search is
open |
### Tips while testing
- [x] Chords (two-key sequences): press the first key, release, then
press the second key within ~1s
- [x] Hover any wired button (search, Refresh, Upload, Create folder,
View, Download, Move, Delete, the bucket Create button, sidebar items)
to see the keybind in a tooltip
- [x] Most actions also appear under "Shortcuts" in `Cmd+P`
- [x] Chords starting with a plain letter (` S, F ` / ` I, F ` / ` V, C
` / ` F, C ` / ` S, C `) won't fire while typing in an input — click out
first
- [x] `Escape` does fire from inside the search field (closes the
search)
- [x] `Cmd+/` opens the full shortcuts reference
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Keyboard shortcuts added across Storage: buckets (refresh, clear sort,
create, search), explorer (upload, create folder, refresh, download,
move, delete, clear search), and navigation shortcuts for
Files/Analytics/Vectors/S3.
* **UI**
* Shortcut keytips/tooltips added to relevant buttons and menu items for
discoverability.
* **Documentation/Tests**
* Shortcut reference sheet labels updated and covered by a new test.
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45837)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Logo field now accepts/editable logo URL, plus a new storage-based
Logo Picker to select or remove images from project storage.
* Full storage picker: browse buckets, columns/list views, search,
drag‑and‑drop uploads, file previews (image/audio/video), and
single-file selection with responsive mobile/desktop layouts.
* **Refactor**
* Logo submission streamlined to send the provided URL directly (legacy
file-read/upload flow removed).
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.
---------
Co-authored-by: Jordi Enric <jordi.err@gmail.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.
## Problem
With #45211 and #45218 merged, we don't need the `_Shadcn_` suffix
anymore
## Solution
- [x] Remove the `_Shadcn_` suffix
- [x] Update exports and imports
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Standardized UI component exports by removing legacy naming
conventions and providing direct imports for checkbox and radio group
components throughout the design system.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
We want to reduce the code we ship and maintain.
## Solution
Migrate old `<Checkbox />` usage to the new Shadcn component.
There's one visual change: no more green background or outline.
## Screenshots
### On `apps/www`
Before:
<img width="1095" height="772" alt="image"
src="https://github.com/user-attachments/assets/b14a0477-d8ac-4ae5-a1c3-63657609e4e5"
/>
After:
<img width="1085" height="766" alt="image"
src="https://github.com/user-attachments/assets/f4c2156c-38e1-4834-b013-e39b8c3dd76e"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Unified checkbox appearance and behavior across the app for consistent
toggles, labels, and interactions.
* **Bug Fixes**
* Fixed selection issues including shift-select edge cases and
click-propagation in lists; added ARIA labels for improved
accessibility.
* **Chores**
* Removed legacy checkbox implementation, associated styles, tests, and
deprecated theme entries.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
We used to have a `_Shadcn_` suffix for all the shadcn form components
because we also had `formik` form components.
This is not needed anymore.
## Solution
- Remove the suffix
- Update all usages
Remove `@headlessui/react` as a direct dependency from both
`apps/studio` and `packages/ui`. It's incompatible with React 19 (at the
pinned v1 version) and overlaps with our existing Radix/shadcn
primitives.
The only usage was the `<Transition>` component in 3 files + a dead
`Overlay` component in `packages/ui`.
**Removed:**
- `@headlessui/react` from `apps/studio/package.json` and
`packages/ui/package.json`
- Dead `packages/ui/src/lib/Overlay/` directory (not exported or
imported anywhere)
**Changed:**
- `ChooseFunctionForm.tsx` — replaced `Transition` with a shadcn
`Accordion` for the "View definition" toggle
- `FileExplorerColumn.tsx` — replaced `Transition` with `framer-motion`
`AnimatePresence` for drag-over overlay
- `PreviewPane.tsx` — removed `Transition` wrapper entirely (wasn't
visually animating on prod), replaced with simple conditional render
Note: `@headlessui/react` will remain in `pnpm-lock.yaml` as a
transitive dependency of `@graphiql/react` and
`@graphiql/plugin-doc-explorer` — that's expected and not something we
control.
## To test
- **Triggers page** (`/dashboard/project/_/database/triggers`): Create
or edit a trigger, click "Choose a function" to open the side panel.
Click "View definition" on a function row — the SQL definition should
expand/collapse with a smooth height animation. Clicking the row itself
should still select the function.
- **Storage explorer**
(`/dashboard/project/_/storage/buckets/<bucket>`): Navigate into a
folder, drag a file over the column — the drag overlay should fade
in/out smoothly.
- **Storage file preview**
(`/dashboard/project/_/storage/buckets/<bucket>`): Click on a file — the
preview pane should appear on the right (no animation, same as current
prod behaviour).
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Replaced several transition wrappers with new animation/mounting
behavior for overlays, preview panes, and drag-over UI to improve
consistency and responsiveness.
* Swapped the function-definition toggle for an Accordion and updated
click handling to prevent accidental row selection.
* Removed the legacy overlay component, its context, and associated
overlay styling.
* **Chores**
* Removed HeadlessUI dependency from project packages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
## Summary
- Removes the "API Docs" navigation item from the sidebar and mobile
menu
- Removes the `UI_PREVIEW_API_SIDE_PANEL` feature preview flag since the
feature is fully rolled out
- Makes API docs buttons unconditionally visible across Auth Users,
Storage, Edge Functions, and SecondLevelNav
## Test plan
- [x] `NavigationBar.utils` tests pass (26 tests)
- [x] `FileExplorerHeader` tests pass (6 tests)
- [x] TypeScript compiles with no errors
- [ ] Verify sidebar no longer shows "API Docs" nav item
- [ ] Verify API docs buttons still appear in Auth Users, Storage, and
Edge Functions pages
- [ ] Verify feature preview modal no longer lists "Project API
documentation"
Resolves FE-2759
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* APIDocs button can optionally display a label and use a custom
tooltip.
* **Chores**
* Removed the API docs side-panel feature flag and its localStorage key.
* “API Docs” navigation entry removed; sidebar no longer special-cases
that route.
* Back links and API Docs buttons now render consistently across the app
(no flag gating).
* **Tests**
* Tests updated to stop depending on the removed feature-flag behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Claude
