feat: show call participants in room list (Discord-style)

docs/features/README.md

@@ -0,0 +1,6 @@
+# Feature documention
+
+The idea of this folder is to document the features we support in different parts of the app.
+In case anyone needs to work on a given part, and isn't aware of all the features in the area,
+they will hopefully get an idea for all the supported functionality to know what to take into account
+when making changes.

docs/features/composer.md

@@ -0,0 +1,38 @@
+# Composer Features
+
+## Auto Complete
+
+- Hitting tab tries to auto-complete the word before the caret as a room member
+    - If no matching name is found, a visual bell is shown
+- @ + a letter opens auto complete for members starting with the given letter
+    - When inserting a user pill at the start in the composer, a colon and space is appended to the pill
+    - When inserting a user pill anywhere else in composer, only a space is appended to the pill
+- # + a letter opens auto complete for rooms starting with the given letter
+- : open auto complete for emoji
+- Pressing arrow-up/arrow-down while the autocomplete is open navigates between auto complete options
+- Pressing tab while the autocomplete is open goes to the next autocomplete option,
+  wrapping around at the end after reverting to the typed text first.
+
+## Formatting
+
+- When selecting text, a formatting bar appears above the selection.
+- The formatting bar allows to format the selected test as:
+  bold, italic, strikethrough, a block quote, and a code block (inline if no linebreak is selected).
+- Formatting is applied as markdown syntax.
+- Hitting ctrl/cmd+B also marks the selected text as bold
+- Hitting ctrl/cmd+I also marks the selected text as italic
+- Hitting ctrl/cmd+> also marks the selected text as a blockquote
+
+## Misc
+
+- When hitting the arrow-up button while having the caret at the start in the composer,
+  the last message sent by the syncing user is edited.
+- Clicking a display name on an event in the timeline inserts a user pill into the composer
+- Emoticons (like :-), >:-), :-/, ...) are replaced by emojis while typing if the relevant setting is enabled
+- Typing in the composer sends typing notifications in the room
+- Pressing ctrl/mod+z and ctrl/mod+y undoes/redoes modifications
+- Pressing shift+enter inserts a line break
+- Pressing enter sends the message.
+- Choosing "Quote" in the context menu of an event inserts a quote of the event body in the composer.
+- Choosing "Reply" in the context menu of an event shows a preview above the composer to reply to.
+- Pressing alt+arrow up/arrow down navigates in previously sent messages, putting them in the composer.

docs/features/keyboardShortcuts.md

@@ -0,0 +1,59 @@
+# Keyboard shortcuts
+
+## Using the `KeyBindingManager`
+
+The `KeyBindingManager` (accessible using `getKeyBindingManager()`) is a class
+with several methods that allow you to get a `KeyBindingAction` based on a
+`KeyboardEvent | React.KeyboardEvent`.
+
+The event passed to the `KeyBindingManager` gets compared to the list of
+shortcuts that are retrieved from the `IKeyBindingsProvider`s. The
+`IKeyBindingsProvider` is in `KeyBindingDefaults`.
+
+### Examples
+
+Let's say we want to close a menu when the correct keys were pressed:
+
+```ts
+const onKeyDown = (ev: KeyboardEvent): void => {
+    let handled = true;
+    const action = getKeyBindingManager().getAccessibilityAction(ev);
+    switch (action) {
+        case KeyBindingAction.Escape:
+            closeMenu();
+            break;
+        default:
+            handled = false;
+            break;
+    }
+
+    if (handled) {
+        ev.preventDefault();
+        ev.stopPropagation();
+    }
+};
+```
+
+## Managing keyboard shortcuts
+
+There are a few things at play when it comes to keyboard shortcuts. The
+`KeyBindingManager` gets `IKeyBindingsProvider`s one of which is
+`defaultBindingsProvider` defined in `KeyBindingDefaults`. In
+`KeyBindingDefaults` a `getBindingsByCategory()` method is used to create
+`KeyBinding`s based on `KeyboardShortcutSetting`s defined in
+`KeyboardShortcuts`.
+
+### Adding keyboard shortcuts
+
+To add a keyboard shortcut there are two files we have to look at:
+`KeyboardShortcuts.ts` and `KeyBindingDefaults.ts`. In most cases we only need
+to edit `KeyboardShortcuts.ts`: add a `KeyBindingAction` and add the
+`KeyBindingAction` to the `KEYBOARD_SHORTCUTS` object.
+
+Though, to make matters worse, sometimes we want to add a shortcut that has
+multiple keybindings associated with. This keyboard shortcut won't be
+customizable as it would be rather difficult to manage both from the point of
+the settings and the UI. To do this, we have to add a `KeyBindingAction` and add
+the UI representation of that keyboard shortcut to the `getUIOnlyShortcuts()`
+method. Then, we also need to add the keybinding to the correct method in
+`KeyBindingDefaults`.