Improve user interface design

[tomsmeding]

This is a discussion issue for suggestions on how to improve the web user interface of the playground.

If your idea has already been mentioned earlier in the thread, please upvote the post suggesting that improvement, instead of posting your own reply saying "me too".

I'd like the interface to remain as simple as possible, but suggestions are always welcome. :)

[TheBFL]

Perhaps the user interface for the save/share feature could be improved. Rather than using the browser default popup, there could be an html dialog element that shows the link for revisiting that program, along with some text like "Saved. You can share or revisit your program using this link".

[tomsmeding]

If you mean using a

element: that's still a modal, right? So the only difference with the current UI would be that we have the option to put formatting inside the dialog.

Which is perhaps a good thing, because then we can decently put the link in there as well, in addition to putting it in the URL bar.

Was that what you intended, @TheBFL?

[TheBFL]

Yes that's exactly what I was thinking. It'd be basically the same as it is now, except the pop-up would look a bit nicer and there could be a link in the pop-up (perhaps even with a "copy link" button).

[tomsmeding]

I'd be open to discuss a mockup / prototype implementation for that :)

[TheBFL]

@tomsmeding I've got a rough prototype of what I'm thinking of in this repository https://github.com/TheBFL/play-haskell/ The layout and colors will need to be changed, but the rough idea is there. Presently looks like this:

[tomsmeding]

Sorry for the super delayed response; I like it! I had feared that <dialog> would have too little support in browsers, but not so, it seems. I made some modifications, and it's live!

Thanks :)

[sliminality]

Hi, I'm interested in prototyping some changes to the UI. Out of curiosity, was the current codebase organization (a single TS file, no dependencies other than tsc) chosen out of a principled desire to keep the build process simple? I'm curious whether you'd be open to rewriting the UI in a framework (e.g. the Rust playground uses React). I understand the risk of frontend complexity bloat so I want to be cognizant of that too.

[tomsmeding]

Hi, thanks for reaching out!

Yep, I'd rather keep the number of dependencies very low (tsc is good because it's not something that gets sent to clients). I feel like this kind of application is not complex enough to warrant a framework like React. But if there is some existing implementation of a user interface element that really improves the experience, then of course it makes sense to use that. I'm just mostly ignorant of the world of modern web development, so I cobbled something together with what I knew (and a little help from hasufell). :)

It currently being a single file is of course immaterial, feel free to reorganise.

I'm fairly busy these months, but I'll have regular time for eyeballing some mockups/prototypes/whatever or giving opinions on code decisions, so don't hesitate to post -- the less we have to backtrack. :)