Skip to content

Style side panel buttons and toggle terminal#2369

Open
laurensvalk wants to merge 3 commits intodoc-scrollfrom
sidepanel
Open

Style side panel buttons and toggle terminal#2369
laurensvalk wants to merge 3 commits intodoc-scrollfrom
sidepanel

Conversation

@laurensvalk
Copy link
Copy Markdown
Member

  • Styles the doc button as blue
  • Adds a terminal toggle button
  • Adds a close all button

reason 1: Generalize side panel

We'd like to use this for more than just docs, such as a camera view or telemetry.


reason 2:

This fixes some usability issues for beginning users:

  • When dragging the terminal or docs to nearly closed, it could be hard to know where they went. Clicking the docs button would not make it re-appear. The buttons will now restore them to default size.
  • The docs button was harder to discover since it looked like an character in the editor. Now it looks like the other buttons.
new-2026-03-30_14.50.02.mp4

Allow adding several views to be opened and closed. Also make it easily discoverable by making them the same color as the main buttons.
Users sometimes hide the docs by dragging them to the side, in which case clicking on the docs icon should restore to the default size instead of unintuitively doing nothing.
@dlech
Copy link
Copy Markdown
Member

dlech commented Mar 30, 2026

Does clicking the "Close all panels" button again restore all panels the way they were before closing? As a user, this is the behavior I would expect.

I would also expect "app: Preserve terminal state on hide." to be squashed with the previous commit. I was looking at each commit individually and almost made a comment about how the previous commit was broken. Then I saw the next commit that fixes it.

And I would like to see if we can find something better than the resetSplitterSize() hack.

};

const [terminalSplit, setTerminalSplit] = useLocalStorage('app-terminal-split', 30);
const [terminalVisible, setTerminalVisible] = useState(true);
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should use local storage so that it stays in the same state when the app is restarted.

src/app/App.tsx Outdated
};

const defaultTerminalSplit = 30;
const defaultTerminalSplit = 20;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't see anything explaining why this value is changed.

@laurensvalk
Copy link
Copy Markdown
Member Author

Does clicking the "Close all panels" button again restore all panels the way they were before closing? As a user, this is the behavior I would expect.

This doesn't quite work for the file browser, so I've dropped this particular addition. We can consider it for a future round.

I didn't see anything explaining why this value is changed.

Will save this for a future generic defaults overhaul too and drop it here.

I would also expect "app: Preserve terminal state on hide." to be squashed with the previous commit. I was looking at each commit individually and almost made a comment about how the previous commit was broken. Then I saw the next commit that fixes it.

Done.

And I would like to see if we can find something better than the resetSplitterSize() hack.

I spent some time at this and it doesn't seem trivial. Doing it the "right" way seems to break in numerous ways, like losing the scroll or destroying the editor. This dependency seems to be built to use only the initial state.

Also preserve terminal state on hide.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants