More fully fleshed out UX

[kitsonk]

Enhancement

This PR more fully fleshes out the designed Workbench as well as makes various UI/UX improvements and maintainability improvements.

[codecov]

Codecov Report

Merging #27 into master will decrease coverage by 1.39%.
The diff coverage is 57.35%.

@@            Coverage Diff            @@
##           master      #27     +/-   ##
=========================================
- Coverage   67.96%   66.56%   -1.4%     
=========================================
  Files          23       17      -6     
  Lines        1414     1002    -412     
  Branches      332      239     -93     
=========================================
- Hits          961      667    -294     
+ Misses        453      335    -118

Impacted Files	Coverage Δ
src/main.ts	100% <100%> (ø)	⬆️
src/Workbench.ts	48.88% <56.71%> (-1.12%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e22caba...7547768. Read the comment docs.

[nicknisi]

Overall, this looks great! I tested in Chrome, Safari, and Firefox. Here's a couple of smaller issues I've noticed.

• This bar for the scrollbar appears as soon as anything is typed into the text editor. Not causing any issues, just looks a bit odd and doesn't go away.

• The editor doesn't resize vertically when the window is resized

• The default editor that opens with the page can't be closed or removed. This isn't causing issues, but is it expected behavior? I'm not sure what it should really do, honestly.
  

• The editor can't be easily scrolled horizontally in Chrome or Safari, or at all in Firefox.
  

[nicknisi]

missing semicolon

[kitsonk]

@nicknisi I have tried to address most of the feedback:

• There is no way to squash the navigation based on scroll, so I have added an event listener to the Workbench that asks if the user wants to navigate away.
• Added an event listener for window resize events which causes the editor to layout a bit better when resizing the window. It will "flicker" though, which is just life at the moment I am afraid.
• Changed it so that the editor is "hidden" when nothing meaningful is being displayed. Therefore when all the files a closed, there is no editor, which better deals with a "phantom" editor that doesn't do anything.

It would be good to try to land this, so I can rebase my live editor and you can rebase your stuff and we can iterate any further in future PRs.

[nicknisi]

I made a comment about the event listeners, but once you've reviewed that it looks good to me! 👍

[nicknisi]

Do we need to clean up these event listeners when the workbench is unloaded?

[kitsonk]

In the 0.2.0 there are better lifecycle methods that would make this possible, so let's open an issue to clean that up when we move to 0.2.0 (which will be my next PR).

Comments addressed