IDE User Interface

[Shimon-Schocken]

The basic UI that David created is excellent. But, once we'll complete developing the IDE functionality, we'll want to experiment with different UI's, with the goal of making the IDE more accessible and intuitive. So, there will be small local changes, like modifying button labels, and bigger layout changes, like moving panes around. Ideally, the code should be developed so that these changes will be easy to make. I believe that this is the case anyway.

[AvivYaish]

Have you thought about integrating syntax highlighting and/or advanced functionality (such as autocomplete)? VSCode uses TextMate grammars, if these were adopted one could use the grammars I've included in my VSCode plugin.

[Shimon-Schocken]

Appendix 4 of the book's 2nd edition lists the APIs of all the chips in the Hack chip set. Each chip is listed with its I/O pins, e.g. And(a = , b = , out =); Students can copy-paste these templates / stubs into their HDL code, and proceed filling the bindings. Indeed, when writing the PARTS section of an HDL program, it will be nice if writing a chip-part name will cause the editor to propose an auto-complete of the chip's template.

[DavidSouther]

Added syntax highlighting in #80. The next step will be building out an LSP completion provider and registering it with Monaco. This would be great to add to the current language features, see https://github.com/DavidSouther/computron5k/blob/main/src/languages/loader.js and https://github.com/DavidSouther/computron5k/tree/main/src/languages/grammars.

[AvivYaish]

80 is fantastic!

Building an LSP provider could be amazing, and would also enable adoption by other IDEs. I have a few comments regarding the Monaco editor:

• A wordwrap toggle could be helpful!
• The editor itself cannot be resized, and text size cannot be changed too. When it comes to the "old" software suite, this might be the number one complaint by my students, who sometimes have small low-res screens
• It seems its theme which might not fit the page's theme:

[DavidSouther]

The theme is easy to change, you can take a crack at it. Pico uses media query prefers-color-scheme: dark for its toggle; window.matchMedia can get the same in JS. put that in the AppContext to have it in a central place, and we could also tie a settings widget up to it.

In Editor.tsx, the onMount callback calls editor.updateOptions. You can store that in a ref and use the wordWrap options flag. These are great first issues, if you want to open them be my guest! For these code changes, please wait for me to review the PR before submitting.

We have an open "redo all the layout" issue. For now, the columns are set to 512px, and media queries control the number of columns based on size. The more we push at that, the more I think this whole thing should just be in the VSCode plug-in! Writing these components and letting VSCode handle the layouts is an interesting trade off. --

David Souther http://davidsouther.com (406) 545-9223

[DavidSouther]

Dark mode for editor in #85

[DavidSouther]

With the current view having most of these features & several enhancements, and the conversation about the VSCode extension, I'm closing this in favor of new specific bug & features issues