onlook-dev / onlook

The open source, local-first Figma for React. Design directly in your live React app and publish your changes to code.
https://onlook.dev
Apache License 2.0
3.75k stars 232 forks source link

[feat] In-Toolbar Mini Terminal #760

Open drfarrell opened 2 weeks ago

drfarrell commented 2 weeks ago

The terminal would sit on the right side of the toolbar. When a user clicks the button it expands the terminal into a minified view.

image

Minified terminal view

image image

The statuses:

The buttons on the bottom just insert and run the commands. The goal is to make it so new users to the terminal can learn how to use it through the buttons.

There are a few steps for this:

  1. Make the Terminal actually work
  2. Make the Terminal UI in the toolbar (Abhiroop used https://www.npmjs.com/package/react-terminal-ui as a quick UI out of the box)
  3. Make the UI work with the Terminal
  4. Make the Command buttons work

The design doesn't show the entire scope of everything, but let me know if you have questions.