[pavelverigo]

Title.

Initially, I considered using libghostty. Well, it does not do rendering. There is an option to use ghostty-web. It has zero dependencies, but it is quite new. After I found that xterm.js is one of the most popular options, It also has zero dependencies and a smaller bundle size.

I wanted to add an example that uses Kitty graphics to render an image in the playground. Unfortunately, the xterm addon is only available in the beta version. It is part of the xterm.js repo, which splits some addons into separate packages, has zero dependencies, and lives in the same monorepo. Since Kitty support is only available in beta, I needed to use that version. Given the playground’s current alpha state, I think using the beta branch is fine for now.

[pavelverigo]

xterm-examples-layout.webm

[techatrix]

Awesome work! Overall I'm very happy with these changes. But I do have some requests mostly regarding styling and layout choices.

I believe the footer should stay like before. We don't want to end up with two headers stacked on top of each other when file tabs are added in the future. The information on the footer is less critical to using the website so moving it there keep it away from seeking to much attention.

Here is what I suggest to do with the remaining features on the header:
The "Run" button should float at the bottom right of the page. Staying over the terminal if opened. It might also be viable to integrate it into the terminal side panel when it's opened. The dropdown to select an example should float at the top right of the editor panel. The opacity of the dropdown can be reduced when the users starts editing the code as it's less likely that they will need it anymore. In the future, this could be integrated into the tab bar.

Also, the resize bar for the terminal panel should remain visible when it's completely closed. Similar to how it used to be when split horizontally.

Feel free to let me know your thoughts on these suggestions are. Happy to reconsider or clarify. I can also take care of implementing them if you wish.

[pavelverigo]

@techatrix

I believe the footer should stay like before. We don't want to end up with two headers stacked on top of each other when file tabs are added in the future. The information on the footer is less critical to using the website so moving it there keep it away from seeking to much attention.

Vertical space is the most precious resource on a computer screen, which is why I moved everything to the header. I think having both a header and a footer for this amount of functionality is strange. I can see how the playground could grow to support more use cases and need more buttons, so this could change.

I see Godbolt as an example of a simple and good design, especially considering how much functionality they've crammed into it.

[techatrix]

Vertical space is the most precious resource on a computer screen, which is why I moved everything to the header. I think having both a header and a footer for this amount of functionality is strange. I can see how the playground could grow to support more use cases and need more buttons, so this could change.

My proposed layout does not include a header. Only a footer like before this PR. I also consider all of these design decisions to be temporary as they will need to be reconsidered when tabs are added. That will likely necessitate a switch to a header. Until then I'd like to minimize the amount of changes in this PR.

I see Godbolt as an example of a simple and good design, especially considering how much functionality they've crammed into it.

While I have no issue with Godbolt and it's UI. I'd like to make it clear that I do not plan to make this playground as verbose as Godbolt is by default. New users of the playground should be presented with an editor that is as minimal as possible that adapts to the users as they discover new features of the website.