Feature: Toggle display of ingredient references in recipe instructions

[Miroito]

Feature Description

• A new button has been added to the RecipeInstructions component to toggle the display of linked ingredients to steps.
• The new button is only visible if at least one step contains at least one linked ingredient. It is otherwise hidden.

[hay-kot]

Thanks for giving this a go. I think I'd rather integrate the "Cook" button into the recipe page instead of what you've done here.

I've outlined what I was thinking in a new Task

• [v1.0.0b] [Task] - Integrate "Cook" Page into Recipe Page #1337

What do you think?

[Miroito]

What do you think?

I answered in the task.

tldr; I think the cook button needs a change but not sure how it should look like. The rest I can start already

[hay-kot]

What do you think?

I answered in the task.

tldr; I think the cook button needs a change but not sure how it should look like. The rest I can start already

I think you could just toggle the text between "Cook" and "View" ?

We can always change what look of the button based on user feedback.

[Miroito]

Changes

• Cook mode is no longer its own page.
• The button only appears if there is at least one ingredient linked to any instruction step.
• Cook mode hides everything other than the header and the recipe instructions, additionally, it displays linked ingredients under the instructions if any.

Preview

Cook mode off

Cook mode on

[hay-kot]

Looks great, made a few small styling changes to increase padding and added support for scaling while in cook mode. Great work and thank you for your patience! 🙏