feat: shepherd tour for editor

[deltork]

PR Goal?

Adding a guided tour to the read-along editor interface

Fixes?

272

Feedback sought?

Tour titles and descriptions

Priority?

Low

Tests added?

n/a

How to test?

got to https://readalong-studio.mothertongues.org/pr-preview/pr-321/#/editor press take tour button

Confidence?

High (translation into FR and ES required)

Version change?

minor?

[github-actions[bot]]

PR Preview Action v1.4.7 :---: Preview removed because the pull request was closed. 2024-07-16 19:16 UTC

[joanise]

Nice work, thanks! This will really help.

Some notes as I'm testing this:

• first box: "your export ReadAlong" -> "exported".
• For several boxes, including the first one, the period is missing at the end.
• "Edit your ReadAlongs" box: this box is not anchored on anything, can we anchor it to the +? For the text, I might start with "You can edit your ReadAlong here just like in the main ReadAlong Studio Web App, adding and removing images and translations or editing your title and subtitle as you need.", and then maybe this step doesn't need anchoring or more details.
• "Audio Toolbar" step: Maybe change the second sentence to "You can also manually adjust your audio-text alignments and fix spelling errors here." without saying how, since that comes in later steps.
• "Audio Text Alignment Visualization" I find "use the controls" not quite clear enough, maybe "You can manually adjust your alignment by dragging the bars at the word boundaries."?
• Just after that box, I would add one called "Fix Spelling Errors" with text "You can also fix spelling errors by clicking on a word and editing it."
• "Export your ReadAlong", again, I might add a reference back to the main add, maybe "You can choose from the following formats, just like in the main ReadAlong Studio Web App:"

[deltork]

Nice work, thanks! This will really help.

Some notes as I'm testing this:

• first box: "your export ReadAlong" -> "exported".

DONE

• For several boxes, including the first one, the period is missing at the end.

DONE

• "Edit your ReadAlongs" box: this box is not anchored on anything, can we anchor it to the +? For the text, I might start with "You can edit your ReadAlong here just like in the main ReadAlong Studio Web App, adding and removing images and translations or editing your title and subtitle as you need.", and then maybe this step doesn't need anchoring or more details.

DONE

• "Audio Toolbar" step: Maybe change the second sentence to "You can also manually adjust your audio-text alignments and fix spelling errors here." without saying how, since that comes in later steps.

DONE

• "Audio Text Alignment Visualization" I find "use the controls" not quite clear enough, maybe "You can manually adjust your alignment by dragging the bars at the word boundaries."?

DONE

• Just after that box, I would add one called "Fix Spelling Errors" with text "You can also fix spelling errors by clicking on a word and editing it."

DONE

• "Export your ReadAlong", again, I might add a reference back to the main add, maybe "You can choose from the following formats, just like in the main ReadAlong Studio Web App:"

I am able to make this change because the text is shared between the main page and the editor page

[joanise]

• For several boxes, including the first one, the period is missing at the end.

Sorry for not being clear, I meant on the text, not on the titles. I've got a few small suggestions to make, I'll push a second commit on top of yours that you can review and see if you agree with my ideas.

[joanise]

This looks great now, I'll start working on the translations.

[deltork]

This is excellent feedback, @joanise and @roedoejet. Whoever said, "Too many cooks spoil the broth," never coded with you two! I will get the updates ready shortly

[joanise]

All translations added. This is now ready to merge as far as I'm concerned.