From e0820c50ec02c7a80c5b560a310890c2610e1e18 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Sat, 10 Aug 2024 15:03:39 +0400
Subject: [PATCH 1/3] Added settings for misc. & tools preferences with
 fullscreen option

---
 src/lib/extension/settings/MiscSettings.js | 32 ++++++++++++++++++++++
 src/routes/preferences/+page.svelte        |  1 +
 src/routes/preferences/misc/+page.svelte   | 20 ++++++++++++++
 src/stores/misc-preferences.js             | 14 ++++++++++
 4 files changed, 67 insertions(+)
 create mode 100644 src/lib/extension/settings/MiscSettings.js
 create mode 100644 src/routes/preferences/misc/+page.svelte
 create mode 100644 src/stores/misc-preferences.js

diff --git a/src/lib/extension/settings/MiscSettings.js b/src/lib/extension/settings/MiscSettings.js
new file mode 100644
index 0000000..19b02cc
--- /dev/null
+++ b/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
+ */
diff --git a/src/routes/preferences/+page.svelte b/src/routes/preferences/+page.svelte
index a50e255..c9f37fe 100644
--- a/src/routes/preferences/+page.svelte
+++ b/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>
diff --git a/src/routes/preferences/misc/+page.svelte b/src/routes/preferences/misc/+page.svelte
new file mode 100644
index 0000000..d02981f
--- /dev/null
+++ b/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>
diff --git a/src/stores/misc-preferences.js b/src/stores/misc-preferences.js
new file mode 100644
index 0000000..e16402c
--- /dev/null
+++ b/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);
+  })
+});

From e9b68137ded45924ad63df6bfd0ffa6000266915 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Sat, 10 Aug 2024 15:04:00 +0400
Subject: [PATCH 2/3] Apply the preference

---
 .../components/ImageShowFullscreenButton.js   | 27 +++++++++++++++++++
 src/styles/content/listing.scss               |  2 +-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/ImageShowFullscreenButton.js b/src/lib/components/ImageShowFullscreenButton.js
index ebf0df0..dd50015 100644
--- a/src/lib/components/ImageShowFullscreenButton.js
+++ b/src/lib/components/ImageShowFullscreenButton.js
@@ -1,15 +1,19 @@
 import {BaseComponent} from "$lib/components/base/BaseComponent.js";
 import {getComponent} from "$lib/components/base/ComponentUtils.js";
+import MiscSettings from "$lib/extension/settings/MiscSettings.js";
 
 export class ImageShowFullscreenButton extends BaseComponent {
   /**
    * @type {MediaBoxTools}
    */
   #mediaBoxTools;
+  #isFullscreenButtonEnabled = false;
 
   build() {
     this.container.innerText = '🔍';
     ImageShowFullscreenButton.#resolveFullscreenViewer();
+
+    ImageShowFullscreenButton.#miscSettings ??= new MiscSettings();
   }
 
   init() {
@@ -20,6 +24,24 @@ export class ImageShowFullscreenButton extends BaseComponent {
     }
 
     this.on('click', this.#onButtonClicked.bind(this));
+
+    if (ImageShowFullscreenButton.#miscSettings) {
+      ImageShowFullscreenButton.#miscSettings.resolveFullscreenViewerEnabled()
+        .then(isEnabled => {
+          this.#isFullscreenButtonEnabled = isEnabled;
+          this.#updateFullscreenButtonVisibility();
+        })
+        .then(() => {
+          ImageShowFullscreenButton.#miscSettings.subscribe(settings => {
+            this.#isFullscreenButtonEnabled = settings.fullscreenViewer;
+            this.#updateFullscreenButtonVisibility();
+          })
+        })
+    }
+  }
+
+  #updateFullscreenButtonVisibility() {
+    this.container.classList.toggle('is-visible', this.#isFullscreenButtonEnabled);
   }
 
   #onButtonClicked() {
@@ -113,6 +135,11 @@ export class ImageShowFullscreenButton extends BaseComponent {
       videoElement.remove();
     })
   }
+
+  /**
+   * @type {MiscSettings|null}
+   */
+  static #miscSettings = null;
 }
 
 export function createImageShowFullscreenButton() {
diff --git a/src/styles/content/listing.scss b/src/styles/content/listing.scss
index b9dce96..24e1b65 100644
--- a/src/styles/content/listing.scss
+++ b/src/styles/content/listing.scss
@@ -151,7 +151,7 @@
       display: block;
     }
 
-    .media-box-show-fullscreen {
+    .media-box-show-fullscreen.is-visible {
       display: block;
     }
   }

From c9d20be33df22b7b35cb9d6816351882016cc061 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Sat, 10 Aug 2024 15:05:09 +0400
Subject: [PATCH 3/3] Turn on the fullscreen viewer button by default

---
 src/lib/extension/settings/MiscSettings.js | 4 ++--
 src/stores/misc-preferences.js             | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/extension/settings/MiscSettings.js b/src/lib/extension/settings/MiscSettings.js
index 19b02cc..707ff5a 100644
--- a/src/lib/extension/settings/MiscSettings.js
+++ b/src/lib/extension/settings/MiscSettings.js
@@ -6,7 +6,7 @@ export default class MiscSettings extends CacheableSettings {
   }
 
   async resolveFullscreenViewerEnabled() {
-    return this._resolveSetting("fullscreenViewer", false);
+    return this._resolveSetting("fullscreenViewer", true);
   }
 
   async setFullscreenViewerEnabled(isEnabled) {
@@ -20,7 +20,7 @@ export default class MiscSettings extends CacheableSettings {
   subscribe(callback) {
     return super.subscribe(settings => {
       callback({
-        fullscreenViewer: settings.fullscreenViewer ?? false,
+        fullscreenViewer: settings.fullscreenViewer ?? true,
       })
     });
   }
diff --git a/src/stores/misc-preferences.js b/src/stores/misc-preferences.js
index e16402c..c2dcb04 100644
--- a/src/stores/misc-preferences.js
+++ b/src/stores/misc-preferences.js
@@ -1,7 +1,7 @@
 import {writable} from "svelte/store";
 import MiscSettings from "$lib/extension/settings/MiscSettings.js";
 
-export const fullScreenViewerEnabled = writable(false);
+export const fullScreenViewerEnabled = writable(true);
 
 const miscSettings = new MiscSettings();