Added settings for misc. & tools preferences with fullscreen option

src/lib/extension/settings/MiscSettings.js

@@ -0,0 +1,32 @@
+import CacheableSettings from "$lib/extension/base/CacheableSettings.js";
+
+export default class MiscSettings extends CacheableSettings {
+  constructor() {
+    super("misc");
+  }
+
+  async resolveFullscreenViewerEnabled() {
+    return this._resolveSetting("fullscreenViewer", false);
+  }
+
+  async setFullscreenViewerEnabled(isEnabled) {
+    return this._writeSetting("fullscreenViewer", isEnabled);
+  }
+
+  /**
+   * @param {function(MiscSettingsObject): void} callback
+   * @return {function(): void}
+   */
+  subscribe(callback) {
+    return super.subscribe(settings => {
+      callback({
+        fullscreenViewer: settings.fullscreenViewer ?? false,
+      })
+    });
+  }
+}
+
+/**
+ * @typedef {Object} MiscSettingsObject
+ * @property {boolean} fullscreenViewer
+ */

src/routes/preferences/+page.svelte

@@ -7,4 +7,5 @@
     <MenuItem href="/" icon="arrow-left">Back</MenuItem>
     <hr>
     <MenuItem href="/preferences/search">Search</MenuItem>
+    <MenuItem href="/preferences/misc">Misc & Tools</MenuItem>
 </Menu>

src/routes/preferences/misc/+page.svelte

@@ -0,0 +1,20 @@
+<script>
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
+    import Menu from "$components/ui/menu/Menu.svelte";
+    import FormContainer from "$components/ui/forms/FormContainer.svelte";
+    import FormControl from "$components/ui/forms/FormControl.svelte";
+    import CheckboxField from "$components/ui/forms/CheckboxField.svelte";
+    import {fullScreenViewerEnabled} from "$stores/misc-preferences.js";
+</script>
+
+<Menu>
+    <MenuItem icon="arrow-left" href="/preferences">Back</MenuItem>
+    <hr>
+</Menu>
+<FormContainer>
+    <FormControl>
+        <CheckboxField bind:checked={$fullScreenViewerEnabled}>
+            Enable fullscreen viewer button
+        </CheckboxField>
+    </FormControl>
+</FormContainer>

src/stores/misc-preferences.js

@@ -0,0 +1,14 @@
+import {writable} from "svelte/store";
+import MiscSettings from "$lib/extension/settings/MiscSettings.js";
+
+export const fullScreenViewerEnabled = writable(false);
+
+const miscSettings = new MiscSettings();
+
+Promise.allSettled([
+  miscSettings.resolveFullscreenViewerEnabled().then(v => fullScreenViewerEnabled.set(v))
+]).then(() => {
+  fullScreenViewerEnabled.subscribe(value => {
+    void miscSettings.setFullscreenViewerEnabled(value);
+  })
+});