Update docs regarding sidebar

Author: AndreasArvidsson

packages/cursorless-org-docs/src/docs/user/images/sidebar-scopes.png

@@ -1,3 +1,23 @@
 # The Cursorless sidebar
 
-You can say `"bar cursorless"` to show the Cursorless sidebar. Currently, the sidebar just contains a section showing a list of all scopes, organized by whether they are present and supported in the active text editor. As you type, the list of present scopes will update in real time. Clicking on a scope will visualize it using the [scope visualizer](scope-visualizer.md). Note that for legacy scopes, we can't tell whether they are present in the active text editor, so we list them under a separate Legacy section. Clicking on these scopes will not visualize them, as we also don't support visualizing legacy scopes.
+You can say `"bar cursorless"` to show the Cursorless sidebar.
+
+## Scopes
+
+- List showing all scopes, organized by whether they are present and supported in the active text editor.
+- As you type or move your selection, the list of present scopes will update in real time.
+- Clicking on a scope will visualize it using the [scope visualizer](scope-visualizer.md).
+- Display the users custom spoken forms
+
+### Scope icons
+
+To find a scope that matches your current selection look for the following icons:
+
+🎯 scope is equal to selection\
+📦 scope contains selection
+
+![sidebar scopes](./images/sidebar-scopes.png)
+
+## Tutorial
+
+Interactive tutorial to learn Cursorless