mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
Charis
4343e21da0
## 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 -->