Switch diff viewers to single viewer

[Kevinjil]

Render the diff viewers for a submission as if it was a single IDE, in which you can select the submission to diff against. We move the button interface out of the tabs and create functions to update the state of individual editors.

This PR is pushed already s.t. we can have a discussion whether or not we want this, before spending even more time polishing it.

Main goals:

• Increase the information density for working efficiency.
• Clear as much vertical space as possible, in preparation for Double scrollbar when viewing submission source #3058.
• Improve UX (although this is subjective)

Notes:

• No longer uses diff logic on the back-end: Monaco has to compute it anyway.
• Replace the very space-consuming changed files table(s) with icons in the source tabs.
• Synchronizes diff mode across all source tabs in the diff viewer.

Screen recording:

dark mode is not included in the PR ;)

TODO:

• Store and restore diff tag preference to/from local storage.
• Add tab panes for deleted source files.
• Discuss: show source code instead of diff to empty file for new/removed files?
• Handle single-file submission case with renamed file.
• Remove some now dead code from TwigUtils
• Polish some code
• Correctly update title after changing the file that is diffed against or remove diff from title
• Rebase onto main

[meisterT]

Nice, I think this looks very promising!

Discuss: show source code instead of diff to empty file for new/removed files?

Indeed it looks weird, but I would still prefer the source code in the side by side view on half of the page / the correct side (left for deleted files, right for added files) if possible.

How hard is it to remember to the diff preference? For example: I personally prefer to always show a diff; if the submission has been resubmitted, then the diff to the original, otherwise the diff to the previous submission if exists.

[Kevinjil]

How hard is it to remember to the diff preference? For example: I personally prefer to always show a diff; if the submission has been resubmitted, then the diff to the original, otherwise the diff to the previous submission if exists.

@meisterT My idea is currently to use the tagged diff submission and store / restore those with similar logic to how the diff mode (side-by-side vs inline) is stored. In this PR, all selectable diff submissions have a tag (either being the previous or the original submission). So if a user selects a submission to diff against or no submission, the tag (or no-diff) is stored in local storage. When a submission source page is opened (same or other), the diff viewer is initialized with the last stored tag.

I also experimented a little bit with loading all previous submissions of the team for a problem, because teams sometimes might be working on 2 versions of code for a problem simultaneously and you might want to diff against the non-previous one. The UI scales perfectly with that (assuming a "normal" contests). In such a case, the "untagged" diff submissions will not be stored, but I will not include loading these in this PR and prefer to discuss such cases later.

[Kevinjil]

Indeed it looks weird, but I would still prefer the source code in the side by side view on half of the page / the correct side (left for deleted files, right for added files) if possible.

That is currently what is implemented for new files. Just have to replicate it for deleted files.

[RagnarGrootKoerkamp]

Looks pretty nice! Just noticed that maybe the title isn't updated correctly after changing the file that is diffed against?