Tutorial: Refactor GestureDiagram condition

[raineorshine]

Steps to Reproduce

Start the Tutorial and advance to Tutorial Step 2 on mobile.

Can be reproduced using the device toolbar in Chrome Dev Tools.

Current Behavior

The condition specifying all the tutorial steps in which the GestureDiagram should be rendered is defined in /src/components/Tutorial/index.tsx, separately from the tutorial step components:

em/src/components/Tutorial/index.tsx

Lines 91 to 107 in a674674

	const gesture = once(
	() =>
	((tutorialStep === TUTORIAL_STEP_FIRSTTHOUGHT ||
	tutorialStep === TUTORIAL_STEP_SECONDTHOUGHT_HINT ||
	tutorialStep === TUTORIAL2_STEP_CONTEXT1_PARENT_HINT ||
	tutorialStep === TUTORIAL2_STEP_CONTEXT2_PARENT_HINT
	? shortcutById('newThought')?.gesture
	: tutorialStep === TUTORIAL_STEP_SUBTHOUGHT ||
	tutorialStep === TUTORIAL2_STEP_CONTEXT1_HINT ||
	tutorialStep === TUTORIAL2_STEP_CONTEXT1_SUBTHOUGHT_HINT ||
	tutorialStep === TUTORIAL2_STEP_CONTEXT2_HINT ||
	tutorialStep === TUTORIAL2_STEP_CONTEXT2_SUBTHOUGHT_HINT
	? shortcutById('newSubthought')?.gesture
	: tutorialStep === TUTORIAL2_STEP_CONTEXT_VIEW_TOGGLE
	? shortcutById('toggleContextView')?.gesture
	: null) || null) as GesturePath | null, // Why does it add 'string' to the type union without this?
	)

Expected Behavior

The GestureDiagram condition for each tutorial step should be co-located within the tutorial step component itself. The tutorial index can therefore stay more agnostic towards the individual tutorial steps.

Note that the GestureDiagram needs to be rendered below the .tutorial element, whose height depends on the screen size of the device. The tutorial step component just contains the content of the tutorial step, not the paginator or Next/Prev buttons. You will need to do some refactoring to render the GestureDiagram in the right place while ensuring the condition is co-located in the tutorial step component.