feat: Add summary to recipe instructions

[boc-the-git]

What type of PR is this?

• feature

What this PR does / why we need it:

Introduce a "summary" for recipe instructions, which allows you to give an instruction a "name" beyond the generic "Step 1", "Step 2", etc...

You can set the summary blank to clear it and revert to the default.

The summary shows for "completed" or non-completed steps. It operates independently of section titles.

Which issue(s) this PR fixes:

None that I know of. Commonly requested feature on Discord at least.

Special notes for your reviewer:

I put it at the top of the list as I expect it might become the most commonly used option.

I'm not super wedded to the wording I've used, so if you have suggestions for better wording please let me know.

Testing

Manual through the UI.

[boc-the-git]

This has no direct relevance to the PR, but I renamed this function to be more accurate to what it's doing.

[Kuchenpirat]

I think there is some potential in simplifiying the UI here.
I feel that if a user is already in edit mode they should just be able to update the step name without going through the three dot menu.
An alternative but less straight foreward way would be to add an 🖋️ edit symbol next to the text that opens the edit dialog directly.

[boc-the-git]

I like that idea @Kuchenpirat . Do you have a few lines suggestion of a code change to achieve that?

[Kuchenpirat]

This should allow the user to directly edit the step summary.
Using placeholder colors the default "Step #" grey communicating that this can be changed which makes the feature more easily discoverable.

Suggested change

	<span :class="isEditForm ? 'handle' : ''">
	<v-icon v-if="isEditForm" size="26" class="pb-1">{{ $globals.icons.arrowUpDown }}</v-icon>
	{{ $t("recipe.step-index", { step: index + 1 }) }}
	{{ step.summary ? step.summary : $t("recipe.step-index", { step: index + 1 }) }}
	</span>
	<template v-if="isEditForm">
	<v-text-field
	v-if="isEditForm"
	v-model="step.summary"
	class="headline handle"
	hide-details
	dense
	solo
	flat
	:placeholder="$t('recipe.step-index', { step: index + 1 })"
	>
	<template #prepend>
	<v-icon size="26">{{ $globals.icons.arrowUpDown }}</v-icon>
	</template>
	</v-text-field>
	<span v-else>
	{{ step.summary ? step.summary : $t("recipe.step-index", { step: index + 1 }) }}
	</span>

[boc-the-git]

Thanks for the code suggestion @Kuchenpirat, I love it! The UX is a lot better now, and the code is more concise too.
I implemented almost exactly what you suggested, with just some minor formatting changes.

[Kuchenpirat]

Happy to hear, seeing the amount of code the change removed i would say sometimes the easier solution is the better solution 👍

LGTM

[felixschndr]

In German it says Schritt 1: if there is no summary. Can we get that to say Schritt 1 (without the colon)?

[boc-the-git]

In German it says Schritt 1: if there is no summary. Can we get that to say Schritt 1 (without the colon)?

That will be in the translations from Crowdin - not related to this PR 🙂