app: Improve split view behavior.#2371
Open
laurensvalk wants to merge 1 commit into
Open
Conversation
**Move activity buttons to main toolbar** This was on a vscode-style sidebar because we originally thought we would add more. It turns out we will not. Having explorer/settings with the other buttons simplifies the UI. This also makes the buttons not jump around when you open/close the explorer. Also improves on small screens, where the explorer would obscure all buttons. Also lets us remove the blueprint hacks we had to make this work. **Add toggles for sideviews.** This lets us fix several UI/UX problems. It used to be easy to lose the terminal or docs forever. Now you can toggle them back on with a button and conveniently close them rather than dragging them down. **Improve splitters** Switch to react-resizable-panels which lets us control the split as needed. Also when dragging to near closed, it will snap to properly closed. Toggling on then restores normal size. Otherwise it preserves the split value. The collapsed state of this library is made for hiding the docs without destroying them, so we don't need some of the hacks we had to preserve the terminal and docs state.
Member
|
Now that this has been out in beta a while, were there some fixes that got added on top of this? |
There was a problem hiding this comment.
Pull request overview
This PR updates the app layout/split-view implementation to improve panel toggling and resizing behavior, and moves “activity” navigation into the main toolbar to simplify the UI and reduce layout edge cases.
Changes:
- Replaced
react-splitter-layoutwithreact-resizable-panelsand refactoredApplayout/CSS to use nested resizable panel groups. - Moved Explorer/Settings activity selection into new toolbar buttons and simplified
Activitiesto render only the selected activity’s content. - Added show/hide toggles for docs and terminal side panels and introduced a reusable
useCollapsiblePanelhook.
Reviewed changes
Copilot reviewed 20 out of 23 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| yarn.lock | Removes react-splitter-layout and adds react-resizable-panels dependency lock entries. |
| package.json | Swaps splitter dependency and removes now-unused @types/react-splitter-layout. |
| src/toolbar/Toolbar.tsx | Adds Explorer/Settings buttons to the main toolbar. |
| src/toolbar/buttons/explorer/ExplorerButton.tsx | New toolbar button to toggle Explorer activity. |
| src/toolbar/buttons/explorer/ExplorerButton.test.tsx | Tests ExplorerButton toggling behavior via activity state storage. |
| src/toolbar/buttons/explorer/i18n.ts | New i18n hook for ExplorerButton strings. |
| src/toolbar/buttons/explorer/translations/en.json | ExplorerButton label/tooltip strings. |
| src/toolbar/buttons/explorer/icon.svg | ExplorerButton icon asset. |
| src/toolbar/buttons/settings/SettingsButton.tsx | New toolbar button to toggle Settings activity. |
| src/toolbar/buttons/settings/SettingsButton.test.tsx | Tests SettingsButton toggling behavior via activity state storage. |
| src/toolbar/buttons/settings/i18n.ts | New i18n hook for SettingsButton strings. |
| src/toolbar/buttons/settings/translations/en.json | SettingsButton label/tooltip strings. |
| src/toolbar/buttons/settings/icon.svg | SettingsButton icon asset. |
| src/setupTests.ts | Adds jsdom polyfills needed by react-resizable-panels. |
| src/editor/editor.scss | Updates editor flex/overflow behavior to fit resizable panel layout. |
| src/app/translations/en.json | Adds terminal show/hide strings to app translations. |
| src/app/hooks.ts | Adds useCollapsiblePanel hook for managing collapsible panel state. |
| src/app/App.tsx | Refactors layout to resizable panels; adds terminal/docs toggle buttons. |
| src/app/App.test.tsx | Updates docs-pane expectation for the new resizable panel structure. |
| src/app/app.scss | Reworks layout and splitter styling for the new panel system. |
| src/activities/Activities.tsx | Simplifies to render only selected activity content (no Tabs UI). |
| src/activities/Activities.test.tsx | Updates tests to match simplified Activities rendering behavior. |
| src/activities/activities.scss | Removes Tabs styling and updates activity panel layout/overlay behavior. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+21
to
+24
| export function useCollapsiblePanel(initiallyVisble: boolean, initialSize: number) { | ||
| const panelRef = usePanelRef(); | ||
| const [size, _setSize] = useState(initialSize); | ||
| const [visible, _setVisible] = useState(initiallyVisble); |
Comment on lines
+110
to
+120
| <Button | ||
| large | ||
| intent="primary" | ||
| icon={<Console />} | ||
| title={ | ||
| terminal.visible | ||
| ? i18n.translate('terminal.hide') | ||
| : i18n.translate('terminal.show') | ||
| } | ||
| onClick={() => terminal.setVisible(!terminal.visible)} | ||
| /> |
| docs.visible | ||
| ? i18n.translate('docs.hide') | ||
| : i18n.translate('docs.show') | ||
| } |
Comment on lines
31
to
+40
| return ( | ||
| <UtilsToolbar | ||
| aria-label={i18n.translate('label')} | ||
| className="pb-toolbar" | ||
| firstFocusableItemId={bluetoothButtonId} | ||
| > | ||
| <ButtonGroup className="pb-toolbar-group pb-align-left"> | ||
| <ExplorerButton id="pb-toolbar-explorer-button" /> | ||
| <SettingsButton id="pb-toolbar-settings-button" /> | ||
| </ButtonGroup> |
Comment on lines
+5
to
+15
| import type { TypedI18n } from '../../../i18n'; | ||
|
|
||
| type Translations = { | ||
| label: string; | ||
| tooltip: { | ||
| show: string; | ||
| hide: string; | ||
| }; | ||
| }; | ||
|
|
||
| export function useI18n(): TypedI18n<Translations> { |
Comment on lines
+6
to
+15
|
|
||
| type Translations = { | ||
| label: string; | ||
| tooltip: { | ||
| show: string; | ||
| hide: string; | ||
| }; | ||
| }; | ||
|
|
||
| export function useI18n(): TypedI18n<Translations> { |
Comment on lines
+42
to
+47
| global.ResizeObserver = class ResizeObserver { | ||
| observe() {} | ||
| unobserve() {} | ||
| disconnect() {} | ||
| }; | ||
|
|
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 join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
new-2026-04-02_13.09.55.mp4
Move activity buttons to main toolbar
This was on a vscode-style sidebar because we originally thought we would add more. It turns out we will not, since those buttons would be too far away from the relevant actions (camera, docs). Also, having explorer/settings with the other buttons simplifies the UI.
This also makes the buttons not jump around when you open/close the explorer.
Also improves on small screens, where the explorer would obscure all buttons. Also lets us remove the blueprint hacks we had to make this work.
Add toggles for sideviews.
This lets us fix several UI/UX problems. It used to be easy to lose the terminal or docs forever. Now you can toggle them back on with a button and conveniently close them rather than dragging them down.
Improve splitters
Switch to react-resizable-panels which lets us control the split as needed. Also when dragging to near closed, it will snap to properly closed. Toggling on then restores normal size. Otherwise it preserves the split value.
The collapsed state of this library is made for hiding the docs without destroying them, so we don't need some of the hacks we had to preserve the terminal and docs state.
Camera view
All this also generalizes to a camera view on large and small screens, added in the next commit.