Add extra button "Next step" to ingredient linker dialog

[RealFoxie]

What type of PR is this?

• feature

What this PR does / why we need it:

Currently, linking ingredients is a lot of work, with a lot of clicks. This reduces the clicks a ton.
This is definitely not the only step to take to make this feature nicer (see #2835), but already fixes the biggest issue in a straightforward manner

Special notes for your reviewer:

I could not figure out a clean (and working) way to reset the scrollbar to the top. I made it so the dialog gets unloaded when closed (with v-if) and when clicking "Next Step", the dialog is closed and opened, making the scrollTop reset.
It does look a bit ugly (the UI flashes), but is a lot better in usability. This "bug" also only happens for this new button. No old features are impacted as far as I can tell.

Testing

Go to any recipe and link ingredients. Scroll down and click the "Next Step" button.
This button does not appear when linking on the last recipe step.
The button should save your changes and show the next step to link.

[Kuchenpirat]

This is pretty great. Thanks for the Work.
Some verry small feedback. Otherwiese this looks pretty good to me

[RealFoxie]

Comments resolved 👍

[Kuchenpirat]

The additional button seems to be to much for mobile devices widthwise.

So we could either:

• make the next button the default and only display the save button on the last step.
• move some buttons arround. Finding another sensible place for the auto button might be possible.

[RealFoxie]

Your problem actually happens without this change for me already: auto and save are under each other (As I use a different local which has longer strings for these buttons). I already thought about this happening for languages where "next step" is a lot longer.
As the width might always be too small (depending on language), irregardless of moving "auto", it should look okay either way. Just some top margin might be enough.

I do have some ideas to make the UI better, but mostly for desktop:
I'd put "auto" maybe under the step text (so above the ingredients), as I see this more as a function of the text (automatically extract from text), than an action and the end of a dialog. (this could also be done for mobile to avoid the problem you have in English local)
Already linked ingredients could be in a second column (for desktop, on mobile would still need to be under each other).
I personally feel like save (and next/previous step) should always be visible somehow. Could maybe do that with showing them left/right of the ingredient list (in just icon form), but also show them at the bottom like it is now (to keep accessibility).

Except for the small padding fix (which can belong in this PR), I'd personally keep the other notes (like moving the "auto" button) to a different PR.

[Kuchenpirat]

After looking at it a bit more I agree with your assessment.
I would suggest that you add the top margin in this pr.

And then we need a future pr to rework the buttons in this dialog.

[Kuchenpirat]

I would use class="my-1" instead of mb-1 as this keeps the button on the same plane as the cancel button and gives us a bit more room around the buttons making them less crammed and easier to tap the right button on mobile.

[Kuchenpirat]

thanks for this. This really improves the ingredient linking 'flow'.