feat: move code diff to separate tab

[calebdw]

Hello!

I've had several issues with the existing diff system:

• it's almost impossible edit code that's behind the diff if I need to update something
• diffs with long lines require a lot of back and forth horizontal scrolling to see everything
• if there's more than one diff section then only the last one has a scroll bar

So I decided to try and change that! This PR moves the diff into a separate Diff tab which allows you to: quickly switch back and forth between the code and the diff, it reduces horizontal scrolling, and every diff section has its own scroll bar if needed.

Before

After

Thanks!

[samsonasik]

is the diff default selected after submit or uri has hash target demo? If yes, then i'm ok with this.

[calebdw]

Yes, it's automatically selected on page load

[TomasVotruba]

Hey,

thanks for proposal. The idea behind demo is solely using it for simple code snippets to show bugs, typically 5-10 lines of code. It should not be used as "IDE" or coding editor.

Saying that it's a feature, not a bug :)

One way to try this out would be optional switcher, but that could lead to pretty confusing DX.

I'm open to simpler UI that would solve your problem, and navigated to short demo files at the same time.

[calebdw]

It should not be used as "IDE" or coding editor.

I understand that, but there have been cases where I tried to apply the rules, but something was messed up and I needed to edit behind the diff and rerun. There's also been times where the example is a bit longer (horizontally) and it can be difficult/tedious to view the diff

One way to try this out would be optional switcher, but that could lead to pretty confusing DX.

I agree, I would rather be consistent in the presentation

I'm open to simpler UI that would solve your problem, and navigated to short demo files at the same time.

Could you provide some ideas? I'm not too sure what you're looking for. Here's what it looks like for the example code---I think it's pretty clean:

Another option could be to show the diff under the code, something like (rough draft):

Thoughts?