Commit Graph
3 Commits
Author SHA1 Message Date
Alaister YoungandAlaister Young 55c297655e fix(studio): keep project sidebar navigation accessible (#51055)
Project sidebars now expose enabled navigation on fixed-width pages, and
the mobile project menu has an accessible dialog name. Fixed sidebar
sizing and editor resize controls remain intact.

**Changed:**

- Remove the disabled state from the shared sidebar panel while
retaining 256px fixed sizing, the disabled resize handle, and existing
editor resize limits.
- Add a screen-reader-only Project menu title inside the mobile project
sheet without changing other sheets or their titles.

**Added:**

- Tests using the actual resizable wrappers for enabled navigation and
handle semantics, and the actual mobile sheet for its accessible name
through menu navigation.

## To test

- Navigate through Database and Settings sidebar links with ordinary
clicks and Tab/Enter. Enabled links should have no disabled ancestor.
- Confirm fixed sidebars remain 256px wide, including an ordinary drag
of their disabled handle.
- In SQL Editor, verify keyboard resizing stays within 256–512px and
collapse/expand still works; restore the original width and visibility
without editing or executing anything.
- Open the mobile project menu. Confirm its dialog name is Project menu,
navigate through Tables, and close it without a missing-title warning.
Restore the viewport.

Validation: real regressions reproduce disabled navigation inheritance
and the unnamed mobile dialog before their fixes. All 26 focused
layout/menu/utility tests and source checks passed. Initial full browser
checks passed normal mouse/keyboard navigation, fixed-handle drag
resistance, editor resize limits, collapse/expand, and mobile
navigation, with viewport/state restored and no backend writes. Both
Next and TanStack production rebuilds passed. The focused mobile retest
passed the linked Project menu title through sections, closing,
navigation, and reopening with no new missing-title warnings, followed
by desktop sidebar and editor controls; viewport, width, and visibility
were restored. Unrelated development React mount/ref warnings remain
separately recorded; native Next local browser and catalog data were not
verified.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Project sidebar links remain available when sidebar resizing is turned
off; the resize handle stays unavailable in that setting.
* The mobile project menu retains the “Project menu” name as you
navigate between sections.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-10-07 18:45:58 +02:00
+8 e273d2b818 chore(studio): move Explorer SQL Editor link to sidebar footer (#50829)
## What

- Moves the temporary "Switch to SQL Editor" button out of the Explorer
sidebar header into a footer section ("Looking for snippets?") with a
short explanation and an **Open SQL Editor** button.
- Replaces the header slot with a menu for the Explorer startup
preference (**Start page** / **SQL query**), instead of linking out to
account preferences.

## How to test

1. Enable the Explorer feature preview and open
`/project/<ref>/explorer`.
2. **Header menu:** click the ⋮ button next to the Explorer title. Pick
**SQL query**, then check that **Explorer startup** on `/account/me`
shows the same value (and vice versa).
3. **Footer:** click **Open SQL Editor**. You should land in the SQL
Editor with the **Back to Explorer** button in its title bar.
4. Open **Notebooks** or **Chats** in the sidebar and check that the
menu and footer are hidden there, like the old button was.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Choose whether the Explorer opens to the Start page or SQL query from
the Explorer preferences menu. Your selection is saved and retained when
you reopen the menu.
  * Access the SQL Editor from the Explorer’s sidebar footer.
* Explorer preferences are available from the Explorer navigation
header.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
Co-authored-by: Tyler <dshukertjr@gmail.com>
Co-authored-by: Nik Richers <nrichers@gmail.com>
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Jordi Enric <37541088+jordienr@users.noreply.github.com>
Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Co-authored-by: Katerina Skroumpelou <mandarini@users.noreply.github.com>
Co-authored-by: Franek <franek@ferly.co.uk>
Co-authored-by: Franek Richardson <franek@supabase.io>
Co-authored-by: Michał Olszewski <35968924+charconstpointer@users.noreply.github.com>
Co-authored-by: Steven Eubank <47563310+smeubank@users.noreply.github.com>
Co-authored-by: Anthony Lio <lionnet.ant@gmail.com>
Co-authored-by: Joey Lei <6957385+leizerbeam@users.noreply.github.com>
Co-authored-by: Ali Waseem <waseema393@gmail.com>
Co-authored-by: Samir Ketema <6003000+samirketema@users.noreply.github.com>
Co-authored-by: K-Dog (Kevin) <k.grueneberg1994@gmail.com>
2026-09-25 14:31:46 +08:00
Saxon FletcherandJoshen Lim d9742d707f chore(studio): refine Explorer sidebar breadcrumbs (#50188)
Moves Explorer’s back navigation and create actions into a reusable
sidebar breadcrumb header. Reduces product-menu headings globally to
`text-sm` and keeps breadcrumb links free of padding, borders, and
backgrounds.

### How to test

1. Open `/project/<ref>/explorer` and confirm the header shows Explorer
and the SQL Editor switch action.
2. Open Notebooks and Chats. Confirm the header shows `Explorer >
Notebooks/Chats` and the corresponding create action works.
3. Return using the Explorer breadcrumb with a click or Tab + Enter.
Check that the label stays aligned and has no hover background.
4. Open another product, such as Database, and confirm its sidebar
heading uses the smaller font size.

5. At a mobile viewport, open the menu and repeat the notebook/chat
actions and back navigation without closing the sheet. Confirm the
header stays current and disappears when returning to the main menu or
opening another product.

Validation: 18 focused tests, typecheck, formatting, and lint ratchet
passed.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added a shared Explorer sidebar header with breadcrumbs and contextual
actions for creating notebooks and chats.
- Added keyboard-accessible navigation between the Explorer overview and
notebook or chat sections.
- Added support for customized product menu headers across project
layouts.

- **Improvements**
- Centralized Explorer navigation and actions in the shared sidebar
layout.
- Improved mobile menu updates when navigating between Explorer
resources.
- Refined Explorer home layout and drag-handle behavior across screen
sizes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-09-10 15:38:19 +08:00