getrector-com icon indicating copy to clipboard operation
getrector-com copied to clipboard

Published 20 hours ago • verified publisher icon rectorphp

feat: move code diff to separate tab

Open calebdw opened this issue 2 months ago • 4 comments

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

image

After

image image image

Thanks!

calebdw avatar Sep 14 '25 00:09 calebdw

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

samsonasik avatar Sep 14 '25 04:09 samsonasik

Yes, it's automatically selected on page load

calebdw avatar Sep 14 '25 04:09 calebdw

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.

TomasVotruba avatar Sep 14 '25 06:09 TomasVotruba

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:

image image

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

image

Thoughts?

calebdw avatar Sep 14 '25 18:09 calebdw