Repository navigation
feat(editor_v2): preview versions beside the history list - #2991
Conversation
History opens as one wide dialog: the chosen version's page on the left, the page's saved versions on the right, newest first, with the current version selected and Restore beneath them. Arrow keys move through the versions and the preview follows, and links in the preview no longer leave the editor. On narrow screens only the list shows.
Amplify PR previews
Commit:
|
IsaiahSama
left a comment
There was a problem hiding this comment.
Nice rework. The radio-group list with the preview following the selection is a clean fit, and reusing PagePreviewSurface fixes links leaving the editor. Approving; the two inline comments are non-blocking decisions.
Out of scope — follow-ups, not blockers
- Nothing in
src/workspace/has a component test, so this dialog's behaviour (Restore disabled on Current, "No earlier versions", restore → unsaved changes) has none either. The base didn't have one, so this PR doesn't own the gap, but it adds behaviour that a harness would cover. - Nit:
labelFocusis now exported fromui/table/table-components.tsxfor use outside tables. It might sit better inui/item.tsxnext tosectionLabel.
| variant="accent" | ||
| size="lg" | ||
| className="w-full" | ||
| disabled={!canRestore || selected === undefined || !snapshot.data} |
There was a problem hiding this comment.
Non-blocking question. At base, the newest saved version could be restored like any other. Outside the "newer version saved" notice, that was the only one-step way to throw away unsaved edits and go back to the saved page (loadSaved only appears when stale). With Restore disabled on "Current version", that path is gone. The preview also makes it look possible, because "Current version" shows the saved copy while the editor shows the unsaved draft. One option is to allow Restore on Current when the draft has unsaved changes. Dropping it on purpose is fine too, if that's the intent.
| role="region" | ||
| aria-label="Version preview" | ||
| tabIndex={0} | ||
| className="min-w-0 flex-1 overflow-y-auto focus-visible:-outline-offset-5 focus-visible:shadow-[inset_0_0_0_2px_var(--color-ink)] max-sm:hidden" |
There was a problem hiding this comment.
Non-blocking. Below 576px the preview is hidden but Restore still works, so an author on a narrow screen can restore a version they can't see. That may be fine, since Undo reverses it. Otherwise, consider disabling Restore at that width or noting it in the description.
Preserve the side-by-side history dialog while adopting the renamed page history query and Markdown restore helper. Update the existing browser regression for version selection, preview links, narrow screens, focus return and undoable restoration.
Summary
Page History opens as one wide dialog. The chosen version's page is on the left, the page's saved versions are on the right, and Restore sits beneath them.
PagePreviewSurface.The dialog mounts already open. Base UI only sets
data-starting-stylewhenopenchanges on a root that is already mounted, so the pop-in uses Tailwind'sstarting:variant (@starting-style) instead.Screenshot
Taken against a local api_v2 with seed data, after three saves as the auth-bypass user. An earlier version is chosen, so Restore is enabled.
Test plan
apps/editor_v2:typecheck,lint,format:check,check:boundaries,test(960), andbuildwithVITE_API_ORIGINset@starting-stylerules for the pop-in