Update annotation form

[jorg-vr]

This pull request restructures the annotation form in such a way that the saved annotations options don't take up to much extra space.

New:

Old:

New (save annotation):

Old (save annotation):

New (mobile):

Old (mobile):

Part of #4564

[bmesuere]

Feedback from running this on metra:

• the hover button text shows ask question instead of add comment (the global button does show add comment)
• if there are no saved annotations, the area to the right of the textarea is left blank. I would add an empty state there or show the textarea full width.
• if you check "save annotation", the title form is shown to the right of the text area. This somewhat breaks the flow. Maybe placing it inline after the checkbox + save annotation text would make more sense?
• when save annotation is checked, it would make sense to change the text on the submit button to also say something that hints that the annotation will be saved.
• the help text under the "search for annotations" combobox is too long (at least in Dutch)
• in the search annotations input, the list of suggestions is not the same width as the text input
• in the search annotations input, the list of suggestions "flickers" when searching
• when picking a suggestion, the "save annotation" checkbox is disabled, but it is also shown as checked which might be confusion. Maybe replace it with a link to the page where you can edit that annotation?
• when loading a saved annotation and then changing the text, a "not equals" sign is shown in the search annotation input. The icon is not aligned well (shown somewhere in the middle of the input field)

[jorg-vr]

when picking a suggestion, the "save annotation" checkbox is disabled, but it is also shown as checked which might be confusion. Maybe replace it with a link to the page where you can edit that annotation?

This page does not exist yet (It is a modal currently)
I will just hide the checkbox for now and reintroduce that link when that page is created.
Added this note in #4564

[jorg-vr]

when save annotation is checked, it would make sense to change the text on the submit button to also say something that hints that the annotation will be saved.

I am not the biggest fan of this. I find it hard to come up with better wording for the button. A longer text is also makes it harder to properly layout the buttons (as they are on the same line as the checkbox currently)

The checkbox is also right next to the button, so the information is already provided on almost the same place

[jorg-vr]

the help text under the "search for annotations" combobox is too long (at least in Dutch)

I removed Saved annotations are automatically filtered by course and exercise.
This will change in version 2 anyway

[bmesuere]

• The wording of "sla opmerking op om te hergebruiken" is quite verbose. Maybe make it "Opmerking opslaan" (maybe with an info icon with tooltip?). This would also help with my previous comment that it wasn't really clear that the comment would also be save when clicking the submit button
• The "Titel:" label is a bit strange. Maybe floating labels are an option here?
• Upon clicking "sla opmerking op", the titel input should get the focus
• On smaller screens, the form layout isn't optimal:
  

[jorg-vr]

The "Titel:" label is a bit strange. Maybe floating labels are an option here?

The floating labels don't work for our inputs, as we have a lot less vertical padding compared to the bootstrap default. Thus their is no vertical space for a label inside the input, without making the input look comically large compared to others.

I did make some custom styling based on the bootstrap css to put the label inside the input before the typing area

[bmesuere]

There's a JS error on mestra when signed in as staff. Otherwise, looks good 👍

[bmesuere]

I would also call select() here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select