docs(user): document launch bar widgets

docs/User Guide/User Guide/Collections/Calendar.md

@@ -76,7 +76,7 @@ For each note of the calendar, the following attributes can be used:
 | `#startTime` | The time the event starts at. If this value is missing, then the event is considered a full-day event. The format is `HH:MM` (hours in 24-hour format and minutes). |
 | `#endTime` | Similar to `startTime`, it mentions the time at which the event ends (in relation with `endDate` if present, or `startDate`). |
 | `#color` | Displays the event with a specified color (named such as `red`, `gray` or hex such as `#FF0000`). This will also change the color of the note in other places such as the note tree. |
-| `#calendar:color` | **❌️ Removed since v0.100.0. Use** `**#color**` **instead.**<br><br>Similar to `#color`, but applies the color only for the event in the calendar and not for other places such as the note tree. |
+| `#calendar:color` | **❌️ Removed since v0.100.0. Use** `**#color**` **instead.**  <br>  <br>Similar to `#color`, but applies the color only for the event in the calendar and not for other places such as the note tree. |
 | `#iconClass` | If present, the icon of the note will be displayed to the left of the event title. |
 | `#calendar:title` | Changes the title of an event to point to an attribute of the note other than the title, can either a label or a relation (without the `#` or `~` symbol). See _Use-cases_ for more information. |
 | `#calendar:displayedAttributes` | Allows displaying the value of one or more attributes in the calendar like this:       <br>  <br>![](9_Calendar_image.png)      <br>  <br>`#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"`     <br>  <br>It can also be used with relations, case in which it will display the title of the target note:      <br>  <br>`~assignee=@My assignee #calendar:displayedAttributes="assignee"` |

docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets.md

@@ -0,0 +1,16 @@
+# Launch Bar Widgets
+Launch bar widgets are a subset of <a class="reference-link" href="Custom%20Widgets.md">Custom Widgets</a> that can be used to render custom buttons and widgets inside the <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.md">Launch Bar</a>.
+
+## Creating a launch bar widget
+
+Unlike <a class="reference-link" href="Custom%20Widgets.md">Custom Widgets</a>, the process of setting up a launch bar widget is slightly different:
+
+1.  Create a Code note of type _JavaScript (front-end)_.
+    *   The script itself uses the same concepts as <a class="reference-link" href="Custom%20Widgets.md">Custom Widgets</a>, including the use of a `NoteContextAwareWidget` or a `BasicWidget` (according to needs).
+    *   As examples, see <a class="reference-link" href="Launch%20Bar%20Widgets/Note%20Title%20Widget.md">Note Title Widget</a> and <a class="reference-link" href="Launch%20Bar%20Widgets/Analog%20Watch.md">Analog Watch</a>.
+2.  Don't set `#widget`, as that attribute is reserved for <a class="reference-link" href="Custom%20Widgets.md">Custom Widgets</a>.
+3.  In the <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Global%20menu.md">Global menu</a>, select _Configure launchbar_.
+4.  In the _Visible Launchers_ section, select _Add a custom widget_.
+5.  Give the newly created launcher a name (and optionally a name).
+6.  In the <a class="reference-link" href="../../Advanced%20Usage/Attributes/Promoted%20Attributes.md">Promoted Attributes</a> section, modify the _widget_ field to point to the newly created note.
+7.  Refresh the UI.

docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Analog Watch.md

@@ -0,0 +1,85 @@
+# Analog Watch
+<figure class="image"><img style="aspect-ratio:1007/94;" src="Analog Watch_image.png" width="1007" height="94"></figure>
+
+This is a more intricate example of a basic widget, which displays an analog watch in the launch bar. Unlike note-context aware widgets, basic widgets don't react to note navigation.
+
+```javascript
+const TPL = `
+<div class="analog-watch" style="
+    position: relative;
+    height: 38px;
+    width: 38px;
+    border-radius: 50%;
+    background: white;
+    border: 2px solid #444;
+    flex-shrink: 0;
+">
+    <!-- hour hand -->
+    <div class="hand hour" style="
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 3px;
+        height: 10px;
+        background: #333;
+        transform-origin: bottom center;
+    "></div>
+
+    <!-- minute hand -->
+    <div class="hand minute" style="
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 2px;
+        height: 13px;
+        background: #111;
+        transform-origin: bottom center;
+    "></div>
+
+    <!-- second hand -->
+    <div class="hand second" style="
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 1px;
+        height: 15px;
+        background: red;
+        transform-origin: bottom center;
+    "></div>
+</div>
+`;
+
+class AnalogWatchWidget extends api.BasicWidget {
+    doRender() {        
+        this.$widget = $(TPL);
+
+        const hourHand   = this.$widget.find('.hand.hour')[0];
+        const minuteHand = this.$widget.find('.hand.minute')[0];
+        const secondHand = this.$widget.find('.hand.second')[0];
+
+        const update = () => {
+            const now = new Date();
+            const sec  = now.getSeconds();
+            const min  = now.getMinutes();
+            const hour = now.getHours();
+
+            const secDeg  = sec * 6;
+            const minDeg  = min * 6 + sec * 0.1;
+            const hourDeg = (hour % 12) * 30 + min * 0.5;
+
+            secondHand.style.transform = `translate(-50%, -100%) rotate(${secDeg}deg)`;
+            minuteHand.style.transform = `translate(-50%, -100%) rotate(${minDeg}deg)`;
+            hourHand.style.transform   = `translate(-50%, -100%) rotate(${hourDeg}deg)`;
+        };
+
+        update();
+        this._interval = setInterval(update, 1000);
+    }
+
+    cleanup() {
+        if (this._interval) clearInterval(this._interval);
+    }
+}
+
+module.exports = new AnalogWatchWidget();
+```

docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.md

@@ -0,0 +1,32 @@
+# Note Title Widget
+<figure class="image"><img style="aspect-ratio:1007/94;" src="Note Title Widget_image.png" width="1007" height="94"></figure>
+
+This is an example of a note context-aware widget, which reacts to the currently opened note and refreshes automatically as the user navigates through the notes.
+
+In this example, the title of the note is displayed. It works best on the [horizontal layout](../../../Basic%20Concepts%20and%20Features/UI%20Elements/Vertical%20and%20horizontal%20layout.md).
+
+```javascript
+const TPL = `\
+<div style="
+    display: flex;
+    height: 53px;
+    width: fit-content;
+    font-size: 0.75em;
+    contain: none;
+    align-items: center;
+    flex-shrink: 0;
+    padding: 0 1em;
+"></div>`;
+
+class NoteTitleWidget extends api.NoteContextAwareWidget {
+    doRender() {
+        this.$widget = $(TPL);
+    }
+
+    async refreshWithNote(note) {
+        this.$widget.text(note.title);
+    }
+}
+
+module.exports = new NoteTitleWidget();
+```