[pull] main from tldraw:main#547
Merged
Merged
Conversation
This is a clean-history reimplementation of #8827 (branch [`steve/page-menu-no-edit-mode`](https://github.com/tldraw/tldraw/tree/steve/page-menu-no-edit-mode)) — the final diff is byte-identical, but the work is split into three reviewable commits instead of 24 incremental updates. Please review here; #8827 has been closed in favor of this PR. The page menu used to require flipping into an explicit edit mode to rename pages or reorder them. This PR removes that mode entirely. Reordering happens by dragging the row itself, renaming happens inline (double-click, Enter, or the row submenu), and the popover gains a draggable resize handle so the list height can be adjusted and persisted across sessions. https://github.com/user-attachments/assets/c9e0a4fc-e644-4134-b261-58c0515cf4a2 Closes #8814. ### Interactions | Interaction | Before | After | | ------------------ | ------------------------------------------ | ------------------------------------------- | | Reorder a page | Toggle Edit, drag the dedicated handle | Drag the row itself | | Rename a page | Toggle Edit, click the field | Double-click the row, press Enter, or use the kebab submenu | | Current page mark | Checkmark icon | Subtle background pill (matches dotcom sidebar) | | Submenu trigger | Always visible | Hidden until row hover (and hidden while renaming or dragging) | | List height | Fixed | Drag the resize handle to adjust; double-click it to reset to default. Persisted to localStorage. | | Create page button | Header | Pinned to the bottom of the popover | Renaming a non-current page no longer silently navigates to it. The rename input matches the row's vertical metrics so the label doesn't shift when editing, and blur commits the change. ### Commit storyline 1. **`feat(tldraw): redesign page menu`** — drop the edit-mode toggle, switch to inline rename, move "Create new page" to a footer button, replace the checkmark with a current-row pill, and add the auto-scrolling drag-from-row reorder behavior (plus the coarse-pointer drag handle). 2. **`feat(tldraw): make page menu list resizable and persist height`** — add the resize handle, localStorage persistence, double-click to reset, and the Radix-available-height cap. 3. **`test(e2e): extend overlay snapshot timeout for cold preview runs`** — small unrelated stability tweak that the original branch picked up along the way. ### Change type - [x] `improvement` ### Test plan 1. Open the page menu with multiple pages. 2. Drag a row by its body — it should reorder without entering any mode. 3. Double-click a row's label (or press Enter / use the kebab menu) — it should rename inline. Blur should commit. 4. Confirm the current page shows the highlight pill and renaming a non-current page does not navigate. 5. Drag the resize handle at the bottom of the popover up and down; reopen the menu and confirm the height is remembered. 6. Double-click the resize handle — the list should snap back to its default height and forget the saved preference. 7. Open the page menu when the current page is far down the list — it should scroll into view. - [x] End to end tests ### Release notes - Redesigned the page menu: reorder rows by dragging them directly, rename inline by double-clicking or pressing Enter, and resize the page list to remember your preferred height (double-click the resize handle to reset it). The explicit edit mode has been removed. ### API changes - Added `page-menu.resize` translation key for the resize handle's accessible label. - Removed unused `page-menu.max-page-count-reached` translation key. ### Code changes | Section | LOC change | | --------------- | ------------ | | Core code | +663 / -498 | | Tests | +115 / -69 | | Automated files | +1 / -1 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
See Commits and Changes for more details.
Created by
pull[bot] (v2.0.0-alpha.4)
Can you help keep this open source service alive? 💖 Please sponsor : )