dima/supabase

0 Fork 0

mirror of https://github.com/supabase/supabase.git synced 2026-10-05 17:35:10 +03:00

Files

T

Charis 4343e21da0 feat(studio): tighten the notebook diff preview (#49218 )

## 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?

UI refactor of the notebook create/update preview in the AI Assistant
panel, plus a small additive prop on the shared `CodeBlock`.

## What is the current behavior?

The assistant's notebook diff renders each cell as its own bordered box
with a gap between them, under a `6 cells` line that is easy to miss.
Cells can't be collapsed, each one carries a repeated `ADDED` badge and
a nested "Show more" toggle, and long markdown scrolls sideways instead
of wrapping.

## What is the new behavior?

<img width="796" height="1076" alt="CleanShot 2026-08-18 at 14 41 30@2x"
src="https://github.com/user-attachments/assets/45e58c6c-48f2-404b-8699-757ee96a4a8d"
/>

- The whole diff is one card: a distinct header row (notebook name,
summary, expand/collapse all) over cells glued together by dividers.
- Every cell is a `Collapsible`. Added and replaced cells open by
default; unchanged, moved, and removed cells stay as single rows but are
now inspectable instead of being content-free.
- The per-row badge is replaced by a colored gutter glyph (`+` `−` `~`
`↕`) with a tooltip naming the change type. The change type reaches the
accessible name via `aria-label` on the row.
- The nested "Show more" toggle inside each cell is gone — the row
itself is the only control.
- `CodeBlock` gains a `wrapLongLines` prop (default `false`, no change
for existing callers), used here so markdown and SQL soft-wrap. The
highlighter sets `white-space` inline on the `<code>` element, so a
class on the `<pre>` can't do this.

## Additional context

Towards FE-4143

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

* **New Features**
* Notebook previews now display titles, notebook icons, and clearer
bordered layouts.
* Added per-cell expand/collapse controls, including “Expand all” and
“Collapse all.”
  * Long code lines can now wrap for improved readability.

* **Improvements**
* Added mode-based fallback labels when notebook titles are unavailable.
* Newly added and replaced cells expand by default, while unchanged
cells remain collapsed.
* Improved change markers, tooltips, removed-cell styling, and notebook
proposal preview spacing.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

2026-08-19 12:11:10 -04:00

scripts

chore: UI theme cleanup (#47519 )

2026-07-02 17:03:08 +02:00

src

feat(studio): tighten the notebook diff preview (#49218 )

2026-08-19 12:11:10 -04:00

package.json

fix(docs): unify docs card hover and retire IconPanel (#48379 )

2026-07-31 06:34:05 +10:00

README.md

feat: Move some components into ui-patterns (#20774 )

2024-02-12 12:44:00 +01:00

tailwind.config.css

chore: Migrate the main Tailwind JS config to CSS (#45686 )

2026-05-13 13:14:58 +02:00

tsconfig.json

chore: Bump Typescript to v6 (#44204 )

2026-03-26 15:27:35 +01:00

vitest.config.ts

add coverage option to ui-patterns (#35669 )

2025-05-29 19:09:26 +02:00

vitest.setup.ts

chore: upgrade vite to v8 and vitest to v4 (#44833 )

2026-04-16 00:13:48 +09:00

README.md

Supabase UI Patterns

This package should be used for components which are built using NPM libraries (react-markdown, reactflow for example), which make no sense to be included in all apps. It should also be used for components which are constructed using various components from the ui package.

This package does not have a barrel file - each component has to be imported from its index (ui-patterns/PrivacySettings, for example). This is intentional so that adding a new component which is used only in 1 or 2 apps doesn't burden the rest of the apps.