In order to introduce users to some features, we're going to support user tours that explain them upon their first encounter. In particular, this first iteration will include the following 4 tours:

• Course Index: Displayed the first time a user encounters the Course Index floating button.
• Side Blocks Buttton: Displayed the first time a user encounters the Side Blocks floating button.
• Swipe Navigation: Displayed the first time a user encounters a page supporting swipe navigation, and with more than one item in the list.
• User Menu: Displayed the first time a user encounters the user menu button.

These tours will not be displayed again after users acknowledge their contents, and this applies app-wide (instead of per-site).

Technical details:

In order to implement this feature, we will create a new service to display User Tours in a similar way to Alerts or Modals in Ionic. This will take a component with the specific User Tour, and optionally indicate an element to focus. Keeping that in mind, tours can potentially have two styles:

• Focused Overlay: This style will cover the entire screen but leave a hole in the overlay to show the focused element. The tour component will be rendered inside a box pointing to the element. In this iteration, the Course Index, Side Blocks Button, and User Menu tours use this style.
• Overlay: This style will cover the entire screen in an overlay and render the tour component on top. In this iteration, the Swipe Navigation tour uses this style.

Whenever a tour has been acknowledged by the users (typically clicking a button in the modal, but that's up to each tour to define), this will be recorded in the database to prevent it from showing again. For this reason, each tour needs to be described with a unique id.

Additionally, it will be possible to disable specific tours from the config (using their id).

UI details:

The UI styles can be seen in the image attached to this issue. Additionally, an animation similar to Ionic's alert will be triggered in order to show/hide the tours.

Pressing on the background overlay or the native back button should not dismiss the User Tour, it should only be dismissed using the acknowledge button.

For dark mode, we'll follow the same principles as Ionic but the popover background will be a bit lighter to differentiate it from the overlay background (which is darker than Ionic's overlay).