chore(docs): restore dev docs

docs/Developer Guide/Developer Guide/Development and architecture/Options/Check box option.md

@@ -0,0 +1,37 @@
+# Check box option
+In the TPL:
+
+```
+<div class="options-section">
+    <h4>Background effects</h4>
+
+    <p>On the desktop application, it's possible to use a semi-transparent background tinted in the colors of the user's wallpaper to add a touch of color.</p>
+
+    <div class="col-6 side-checkbox">
+        <label class="form-check">
+            <input type="checkbox" class="background-effects form-check-input" />
+            Enable background effects (Windows 11 only)
+        </label>
+    </div>
+</div>
+```
+
+In `doRender()`:
+
+```
+doRender() {
+	this.$backgroundEffects = this.$widget.find("input.background-effects");
+
+	this.$backgroundEffects.on("change", () => this.updateCheckboxOption("backgroundEffects", this.$backgroundEffects));
+}
+```
+
+In `optionsLoaded(options)`:
+
+```
+async optionsLoaded(options) {
+
+    this.setCheckboxState(this.$backgroundEffects, options.backgroundEffects);
+
+}
+```

docs/Developer Guide/Developer Guide/Development and architecture/Options/Creating a new option.md

@@ -0,0 +1,5 @@
+# Creating a new option
+1.  Go to `options_interface.ts` and add the option to `OptionDefinitions`, specifying its intended data type (boolean, string, number). Note that in the end the option will still be stored as a string, but this aids in type safety across the application.
+2.  To add a new option with a set default, go to `options_init.ts` in the server and add a new entry in the `defaultOptions`.
+3.  **Make the option adjustable by the client**  
+    By default options are not adjustable or visible to the client. To do so, modify `routes/api/options.ts` to add the newly added option to `ALLOWED_OPTIONS`.

docs/Developer Guide/Developer Guide/Development and architecture/Options/Displaying the option in setti.md

@@ -0,0 +1,36 @@
+# Displaying the option in settings
+Go to `src/public/app/widgets/type_widgets/options` and select a corresponding category, such as `appearance` and edit one of the JS files.
+
+For example, to create a select:
+
+First, modify the template (`TPL`), to add the new widget:
+
+```
+<div class="col-6">
+    <label>First day of the week</label>
+    <select class="first-day-of-week-select form-control">
+        <option value="0">Sunday</option>
+        <option value="1">Monday</option>
+    </select>
+</div>
+```
+
+Secondly, create a reference to the new element in `doRender()`:
+
+```
+this.$firstDayOfWeek = this.$widget.find(".first-day-of-week-select");
+```
+
+Then in `optionsLoaded` adjust the value to the one set in the database:
+
+```
+this.$firstDayOfWeek.val(options.firstDayOfWeek);
+```
+
+To actually update the option, add a listener in `doRender`:
+
+```
+this.$firstDayOfWeek.on("change", () => {
+    this.updateOption("firstDayOfWeek", this.$firstDayOfWeek.val());
+});
+```

docs/Developer Guide/Developer Guide/Development and architecture/Options/Refresh widget with option cha.md

@@ -0,0 +1,10 @@
+# Refresh widget with option change
+To make a widget react to a change of a given option, simply add the following to the widget:
+
+```javascript
+async entitiesReloadedEvent({loadResults}) {
+    if (loadResults.getOptionNames().includes("firstDayOfWeek")) {
+        // Do something.
+    }        
+}
+```

docs/Developer Guide/Developer Guide/Development and architecture/Options/Trigger UI refresh.md

@@ -0,0 +1,12 @@
+# Trigger UI refresh
+Call `utils.reloadFrontendApp`, but make sure to wait for the option to be saved first.
+
+```
+this.$backgroundEffects.on("change", async () => {
+
+    await this.updateCheckboxOption("backgroundEffects", this.$backgroundEffects);
+
+    utils.reloadFrontendApp("background effect change");
+
+});
+```