Merge pull request #26 from koloml/release/0.2.1

Release: 0.2.1

manifest.json

@@ -1,7 +1,7 @@
 {
     "name": "Furbooru Tagging Assistant",
     "description": "Experimental extension with a set of tools to make the tagging faster and easier. Made specifically for Furbooru.",
-    "version": "0.2.0.1",
+    "version": "0.2.1",
     "browser_specific_settings": {
         "gecko": {
             "id": "furbooru-tagging-assistant@thecore.city"

package.json

@@ -1,6 +1,6 @@
 {
     "name": "furbooru-tagging-assistant",
-    "version": "0.2.0.1",
+    "version": "0.2.1",
     "private": true,
     "scripts": {
         "build": "npm run build:popup && npm run build:extension",

src/components/maintenance/ProfileView.svelte

@@ -1,6 +1,8 @@
 <script>
     /** @type {import('$lib/extension/entities/MaintenanceProfile.js').default} */
     export let profile;
+
+    const sortedTagsList = profile.settings.tags.sort((a, b) => a.localeCompare(b));
 </script>
 
 <div class="block">
@@ -10,7 +12,7 @@
 <div class="block">
     <strong>Tags:</strong>
     <div class="tags-list">
-        {#each profile.settings.tags as tagName}
+        {#each sortedTagsList as tagName}
             <span class="tag">{tagName}</span>
         {/each}
     </div>

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() {

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", true);
+  }
+
+  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 ?? true,
+      })
+    });
+  }
+}
+
+/**
+ * @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/routes/settings/maintenance/+page.svelte

@@ -7,7 +7,7 @@
     /** @type {import('$lib/extension/entities/MaintenanceProfile.js').default[]} */
     let profiles = [];
 
-    $: profiles = $maintenanceProfilesStore.sort((a, b) => b.settings.name.localeCompare(a.settings.name));
+    $: profiles = $maintenanceProfilesStore.sort((a, b) => a.settings.name.localeCompare(b.settings.name));
 
     function resetActiveProfile() {
         $activeProfileStore = null;

src/routes/settings/maintenance/[id]/edit/+page.svelte

@@ -28,7 +28,7 @@
         if (maybeExistingProfile) {
             targetProfile = maybeExistingProfile;
             profileName = targetProfile.settings.name;
-            tagsList = [...targetProfile.settings.tags];
+            tagsList = [...targetProfile.settings.tags].sort((a, b) => a.localeCompare(b));
         } else {
             goto('/settings/maintenance');
         }

src/stores/maintenance-profiles-store.js

@@ -9,14 +9,6 @@ import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings.js"
  */
 export const maintenanceProfilesStore = writable([]);
 
-MaintenanceProfile.readAll().then(profiles => {
-  maintenanceProfilesStore.set(profiles);
-});
-
-MaintenanceProfile.subscribe(profiles => {
-  maintenanceProfilesStore.set(profiles);
-});
-
 /**
  * Store for the active maintenance profile ID.
  *
@@ -26,29 +18,40 @@ export const activeProfileStore = writable(null);
 
 const maintenanceSettings = new MaintenanceSettings();
 
-maintenanceSettings.resolveActiveProfileId().then(activeProfileId => {
-  activeProfileStore.set(activeProfileId);
-});
-
-maintenanceSettings.subscribe(settings => {
-  activeProfileStore.set(settings.activeProfile || null);
-});
-
 /**
  * Active profile ID stored locally. Used to reset active profile once the existing profile was removed.
  * @type {string|null}
  */
 let lastActiveProfileId = null;
 
-activeProfileStore.subscribe(profileId => {
-  lastActiveProfileId = profileId;
+Promise.allSettled([
+  // Read the initial values from the storages first
+  MaintenanceProfile.readAll().then(profiles => {
+    maintenanceProfilesStore.set(profiles);
+  }),
+  maintenanceSettings.resolveActiveProfileId().then(activeProfileId => {
+    activeProfileStore.set(activeProfileId);
+  })
+]).then(() => {
+  // And only after initial values are loaded, start watching for changes from storage and from user's interaction
+  MaintenanceProfile.subscribe(profiles => {
+    maintenanceProfilesStore.set(profiles);
+  });
 
-  void maintenanceSettings.setActiveProfileId(profileId);
-});
+  maintenanceSettings.subscribe(settings => {
+    activeProfileStore.set(settings.activeProfile || null);
+  });
 
-// Watch the existence of the active profile on every change.
-MaintenanceProfile.subscribe(profiles => {
-  if (!profiles.find(profile => profile.id === lastActiveProfileId)) {
-    activeProfileStore.set(null);
-  }
+  activeProfileStore.subscribe(profileId => {
+    lastActiveProfileId = profileId;
+
+    void maintenanceSettings.setActiveProfileId(profileId);
+  });
+
+  // Watch the existence of the active profile on every change.
+  MaintenanceProfile.subscribe(profiles => {
+    if (!profiles.find(profile => profile.id === lastActiveProfileId)) {
+      activeProfileStore.set(null);
+    }
+  });
 });

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(true);
+
+const miscSettings = new MiscSettings();
+
+Promise.allSettled([
+  miscSettings.resolveFullscreenViewerEnabled().then(v => fullScreenViewerEnabled.set(v))
+]).then(() => {
+  fullScreenViewerEnabled.subscribe(value => {
+    void miscSettings.setFullscreenViewerEnabled(value);
+  })
+});

src/styles/content/listing.scss

@@ -151,7 +151,7 @@
       display: block;
     }
 
-    .media-box-show-fullscreen {
+    .media-box-show-fullscreen.is-visible {
       display: block;
     }
   }