From 8aacd83474a964db834fda5296e828d4ea3b00d3 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Wed, 7 Aug 2024 02:29:19 +0400
Subject: [PATCH 1/8] Support form controls without labels, added paddings

---
 src/components/ui/forms/FormControl.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/forms/FormControl.svelte b/src/components/ui/forms/FormControl.svelte
index b9cda8f..6935307 100644
--- a/src/components/ui/forms/FormControl.svelte
+++ b/src/components/ui/forms/FormControl.svelte
@@ -1,7 +1,7 @@
 <script>
 
     /** @type {string|undefined} */
-    export let label;
+    export let label = undefined;
 </script>
 
 <label class="control">
@@ -17,6 +17,8 @@
     }
 
     .control {
+        padding: 5px 0;
+
         :global(textarea) {
             width: 100%;
             resize: vertical;

From c0b1259e458dff8879a70b4fc5ffdf36986197cf Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Wed, 7 Aug 2024 02:29:31 +0400
Subject: [PATCH 2/8] Added select and checkboxes fields

---
 src/components/ui/forms/CheckboxField.svelte | 12 +++++++
 src/components/ui/forms/SelectField.svelte   | 34 ++++++++++++++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 src/components/ui/forms/CheckboxField.svelte
 create mode 100644 src/components/ui/forms/SelectField.svelte

diff --git a/src/components/ui/forms/CheckboxField.svelte b/src/components/ui/forms/CheckboxField.svelte
new file mode 100644
index 0000000..fd42593
--- /dev/null
+++ b/src/components/ui/forms/CheckboxField.svelte
@@ -0,0 +1,12 @@
+<script>
+    /** @type {string|undefined} */
+    export let name = undefined;
+
+    /** @type {boolean} */
+    export let checked;
+</script>
+
+<input type="checkbox" {name} bind:checked={checked}>
+<span>
+    <slot></slot>
+</span>
diff --git a/src/components/ui/forms/SelectField.svelte b/src/components/ui/forms/SelectField.svelte
new file mode 100644
index 0000000..cd815c3
--- /dev/null
+++ b/src/components/ui/forms/SelectField.svelte
@@ -0,0 +1,34 @@
+<script>
+    /**
+     * @type {string[]|Record<string, string>}
+     */
+    export let options = [];
+
+    /** @type {string|undefined} */
+    export let name = undefined;
+
+    /** @type {string|undefined} */
+    export let id = undefined;
+
+    /** @type {string|undefined} */
+    export let value = undefined;
+
+    /** @type {Record<string, string>} */
+    const optionPairs = {};
+
+    if (Array.isArray(options)) {
+        for (let option of options) {
+            optionPairs[option] = option;
+        }
+    } else if (options && typeof options === 'object') {
+        Object.keys(options).forEach((key) => {
+            optionPairs[key] = options[key];
+        })
+    }
+</script>
+
+<select {name} {id} bind:value={value}>
+    {#each Object.entries(optionPairs) as [value, label]}
+        <option {value}>{label}</option>
+    {/each}
+</select>

From b0889486c785ec478129a388a444c88a8dbc4a69 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Wed, 7 Aug 2024 02:30:24 +0400
Subject: [PATCH 3/8] Added search preferences section with several initial
 settings

---
 src/routes/+page.svelte                    |  1 +
 src/routes/preferences/+page.svelte        | 10 ++++++++
 src/routes/preferences/search/+page.svelte | 27 ++++++++++++++++++++++
 src/stores/search-preferences.js           |  6 +++++
 4 files changed, 44 insertions(+)
 create mode 100644 src/routes/preferences/+page.svelte
 create mode 100644 src/routes/preferences/search/+page.svelte
 create mode 100644 src/stores/search-preferences.js

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3b14018..815dd1d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,5 +6,6 @@
 <Menu>
     <MenuItem href="/settings/maintenance">Tagging Profiles</MenuItem>
     <hr>
+    <MenuItem href="/preferences">Preferences</MenuItem>
     <MenuItem href="/about">About</MenuItem>
 </Menu>
diff --git a/src/routes/preferences/+page.svelte b/src/routes/preferences/+page.svelte
new file mode 100644
index 0000000..a50e255
--- /dev/null
+++ b/src/routes/preferences/+page.svelte
@@ -0,0 +1,10 @@
+<script>
+    import Menu from "$components/ui/menu/Menu.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
+</script>
+
+<Menu>
+    <MenuItem href="/" icon="arrow-left">Back</MenuItem>
+    <hr>
+    <MenuItem href="/preferences/search">Search</MenuItem>
+</Menu>
diff --git a/src/routes/preferences/search/+page.svelte b/src/routes/preferences/search/+page.svelte
new file mode 100644
index 0000000..6b048c4
--- /dev/null
+++ b/src/routes/preferences/search/+page.svelte
@@ -0,0 +1,27 @@
+<script>
+    import Menu from "$components/ui/menu/Menu.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
+    import FormContainer from "$components/ui/forms/FormContainer.svelte";
+    import FormControl from "$components/ui/forms/FormControl.svelte";
+    import {
+        searchPropertiesSuggestionsEnabled,
+        searchPropertiesSuggestionsPosition
+    } from "$stores/search-preferences.js";
+    import CheckboxField from "$components/ui/forms/CheckboxField.svelte";
+    import SelectField from "$components/ui/forms/SelectField.svelte";
+</script>
+
+<Menu>
+    <MenuItem icon="arrow-left" href="/preferences">Back</MenuItem>
+    <hr>
+</Menu>
+<FormContainer>
+    <FormControl>
+        <CheckboxField bind:checked={$searchPropertiesSuggestionsEnabled}>
+            Enable auto-completion for properties
+        </CheckboxField>
+    </FormControl>
+    <FormControl label="Location of properties suggestions">
+        <SelectField bind:value={$searchPropertiesSuggestionsPosition} options="{['start', 'end']}"></SelectField>
+    </FormControl>
+</FormContainer>
diff --git a/src/stores/search-preferences.js b/src/stores/search-preferences.js
new file mode 100644
index 0000000..0a150d7
--- /dev/null
+++ b/src/stores/search-preferences.js
@@ -0,0 +1,6 @@
+import {writable} from "svelte/store";
+
+export const searchPropertiesSuggestionsEnabled = writable(false);
+
+/** @type {import('svelte').Writable<"start"|"end">} */
+export const searchPropertiesSuggestionsPosition = writable('start');

From 67d3b57eb13eb8b4abe8fc0e3325927c12572d6f Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Wed, 7 Aug 2024 03:26:06 +0400
Subject: [PATCH 4/8] Implemented base class for cached settings storages

---
 src/lib/components/MaintenancePopup.js        |  6 +-
 src/lib/extension/base/CacheableSettings.js   | 79 +++++++++++++++++++
 .../extension/settings/MaintenanceSettings.js | 56 ++++---------
 src/stores/maintenance-profiles-store.js      | 12 +--
 4 files changed, 103 insertions(+), 50 deletions(-)
 create mode 100644 src/lib/extension/base/CacheableSettings.js

diff --git a/src/lib/components/MaintenancePopup.js b/src/lib/components/MaintenancePopup.js
index 1820366..bb967e5 100644
--- a/src/lib/components/MaintenancePopup.js
+++ b/src/lib/components/MaintenancePopup.js
@@ -272,12 +272,12 @@ export class MaintenancePopup extends BaseComponent {
       }
     });
 
-    const unsubscribeFromMaintenanceSettings = MaintenanceSettings.subscribe(settings => {
-      if (settings.activeProfileId === lastActiveProfileId) {
+    const unsubscribeFromMaintenanceSettings = this.#maintenanceSettings.subscribe(settings => {
+      if (settings.activeProfile === lastActiveProfileId) {
         return;
       }
 
-      lastActiveProfileId = settings.activeProfileId;
+      lastActiveProfileId = settings.activeProfile;
 
       this.#maintenanceSettings
         .resolveActiveProfileAsObject()
diff --git a/src/lib/extension/base/CacheableSettings.js b/src/lib/extension/base/CacheableSettings.js
new file mode 100644
index 0000000..6627297
--- /dev/null
+++ b/src/lib/extension/base/CacheableSettings.js
@@ -0,0 +1,79 @@
+import ConfigurationController from "$lib/extension/ConfigurationController.js";
+
+export default class CacheableSettings {
+  /** @type {ConfigurationController} */
+  #controller;
+  /** @type {Map<string, any>} */
+  #cachedValues = new Map();
+  /** @type {function[]} */
+  #disposables = [];
+
+  constructor(settingsNamespace) {
+    this.#controller = new ConfigurationController(settingsNamespace);
+
+    this.#disposables.push(
+      this.#controller.subscribeToChanges(settings => {
+        for (const key of Object.keys(settings)) {
+          this.#cachedValues.set(key, settings[key]);
+        }
+      })
+    );
+  }
+
+  /**
+   * @template SettingType
+   * @param {string} settingName
+   * @param {SettingType} defaultValue
+   * @return {Promise<SettingType>}
+   * @protected
+   */
+  async _resolveSetting(settingName, defaultValue) {
+    if (this.#cachedValues.has(settingName)) {
+      return this.#cachedValues.get(settingName);
+    }
+
+    const settingValue = await this.#controller.readSetting(settingName, defaultValue);
+
+    this.#cachedValues.set(settingName, settingValue);
+
+    return settingValue;
+  }
+
+  /**
+   * @param {string} settingName Name of the setting to write.
+   * @param {*} value Value to pass.
+   * @param {boolean} [force=false] Ignore the cache and force the update.
+   * @return {Promise<void>}
+   * @protected
+   */
+  async _writeSetting(settingName, value, force = false) {
+    if (
+      !force
+      && this.#cachedValues.has(settingName)
+      && this.#cachedValues.get(settingName) === value
+    ) {
+      return;
+    }
+
+    return this.#controller.writeSetting(settingName, value);
+  }
+
+  /**
+   * Subscribe to the changes made to the storage.
+   * @param {function(Object): void} callback Callback which will receive list of settings.
+   * @return {function(): void} Unsubscribe function.
+   */
+  subscribe(callback) {
+    const unsubscribeCallback = this.#controller.subscribeToChanges(callback);
+
+    this.#disposables.push(unsubscribeCallback);
+
+    return unsubscribeCallback;
+  }
+
+  dispose() {
+    for (let disposeCallback of this.#disposables) {
+      disposeCallback();
+    }
+  }
+}
diff --git a/src/lib/extension/settings/MaintenanceSettings.js b/src/lib/extension/settings/MaintenanceSettings.js
index a7f0c5c..adee2ef 100644
--- a/src/lib/extension/settings/MaintenanceSettings.js
+++ b/src/lib/extension/settings/MaintenanceSettings.js
@@ -1,21 +1,10 @@
 import ConfigurationController from "$lib/extension/ConfigurationController.js";
 import MaintenanceProfile from "$lib/extension/entities/MaintenanceProfile.js";
+import CacheableSettings from "$lib/extension/base/CacheableSettings.js";
 
-export default class MaintenanceSettings {
-  #isInitialized = false;
-  #activeProfileId = null;
-
+export default class MaintenanceSettings extends CacheableSettings {
   constructor() {
-    void this.#initializeSettings();
-  }
-
-  async #initializeSettings() {
-    MaintenanceSettings.#controller.subscribeToChanges(settings => {
-      this.#activeProfileId = settings.activeProfile || null;
-    });
-
-    this.#activeProfileId = await MaintenanceSettings.#controller.readSetting("activeProfile", null);
-    this.#isInitialized = true;
+    super("maintenance");
   }
 
   /**
@@ -24,18 +13,7 @@ export default class MaintenanceSettings {
    * @return {Promise<string|null>}
    */
   async resolveActiveProfileId() {
-    if (!this.#isInitialized && !this.#activeProfileId) {
-      this.#activeProfileId = await MaintenanceSettings.#controller.readSetting(
-        "activeProfile",
-        null
-      );
-    }
-
-    if (!this.#activeProfileId) {
-      return null;
-    }
-
-    return this.#activeProfileId;
+    return this._resolveSetting("activeProfile", null);
   }
 
   /**
@@ -59,31 +37,27 @@ export default class MaintenanceSettings {
    * @return {Promise<void>}
    */
   async setActiveProfileId(profileId) {
-    this.#activeProfileId = profileId;
-
-    await MaintenanceSettings.#controller.writeSetting("activeProfile", profileId);
+    await this._writeSetting("activeProfile", profileId);
   }
 
-  /**
-   * Controller for interaction with the settings stored in the extension's storage.
-   *
-   * @type {ConfigurationController}
-   */
-  static #controller = new ConfigurationController("maintenance");
-
   /**
    * Subscribe to the changes in the maintenance-related settings.
    *
-   * @param {function({activeProfileId: string|null}): void} callback Callback to call when the settings change. The new settings are
-   * passed as an argument.
+   * @param {function(MaintenanceSettingsObject): void} callback Callback to call when the settings change. The new
+   * settings are passed as an argument.
    *
    * @return {function(): void} Unsubscribe function.
    */
-  static subscribe(callback) {
-    return MaintenanceSettings.#controller.subscribeToChanges(settings => {
+  subscribe(callback) {
+    return super.subscribe(settings => {
       callback({
-        activeProfileId: settings.activeProfile || null,
+        activeProfile: settings.activeProfile || null,
       });
     });
   }
 }
+
+/**
+ * @typedef {Object} MaintenanceSettingsObject
+ * @property {string|null} activeProfile
+ */
diff --git a/src/stores/maintenance-profiles-store.js b/src/stores/maintenance-profiles-store.js
index 5b00d04..ffc0db1 100644
--- a/src/stores/maintenance-profiles-store.js
+++ b/src/stores/maintenance-profiles-store.js
@@ -30,17 +30,17 @@ maintenanceSettings.resolveActiveProfileId().then(activeProfileId => {
   activeProfileStore.set(activeProfileId);
 });
 
-MaintenanceSettings.subscribe(settings => {
-  activeProfileStore.set(settings.activeProfileId || null);
+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 => {
-  if (profileId === lastActiveProfileId) {
-    return;
-  }
-
   lastActiveProfileId = profileId;
 
   void maintenanceSettings.setActiveProfileId(profileId);

From fa77e8b92315e814fa99b083f3a85989a10fc23f Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Wed, 7 Aug 2024 03:26:32 +0400
Subject: [PATCH 5/8] Added search settings controller, sync settings in popup
 with the class

---
 src/lib/extension/settings/SearchSettings.js | 42 ++++++++++++++++++++
 src/stores/search-preferences.js             | 20 +++++++++-
 2 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/extension/settings/SearchSettings.js

diff --git a/src/lib/extension/settings/SearchSettings.js b/src/lib/extension/settings/SearchSettings.js
new file mode 100644
index 0000000..e5de971
--- /dev/null
+++ b/src/lib/extension/settings/SearchSettings.js
@@ -0,0 +1,42 @@
+import CacheableSettings from "$lib/extension/base/CacheableSettings.js";
+
+export default class SearchSettings extends CacheableSettings {
+  constructor() {
+    super("search");
+  }
+
+  async resolvePropertiesSuggestionsEnabled() {
+    return this._resolveSetting("suggestProperties", false);
+  }
+
+  async resolvePropertiesSuggestionsPosition() {
+    return this._resolveSetting("suggestPropertiesPosition", "start");
+  }
+
+  async setPropertiesSuggestions(isEnabled) {
+    return this._writeSetting("suggestProperties", isEnabled);
+  }
+
+  async setPropertiesSuggestionsPosition(position) {
+    return this._writeSetting("suggestPropertiesPosition", position);
+  }
+
+  /**
+   * @param {function(SearchSettingsObject): void} callback
+   * @return {function(): void}
+   */
+  subscribe(callback) {
+    return super.subscribe(rawSettings => {
+      callback({
+        suggestProperties: rawSettings.suggestProperties ?? false,
+        suggestPropertiesPosition: rawSettings.suggestPropertiesPosition ?? "start",
+      });
+    });
+  }
+}
+
+/**
+ * @typedef {Object} SearchSettingsObject
+ * @property {boolean} suggestProperties
+ * @property {"start"|"end"} suggestPropertiesPosition
+ */
diff --git a/src/stores/search-preferences.js b/src/stores/search-preferences.js
index 0a150d7..f485261 100644
--- a/src/stores/search-preferences.js
+++ b/src/stores/search-preferences.js
@@ -1,6 +1,24 @@
 import {writable} from "svelte/store";
+import SearchSettings from "$lib/extension/settings/SearchSettings.js";
 
 export const searchPropertiesSuggestionsEnabled = writable(false);
 
-/** @type {import('svelte').Writable<"start"|"end">} */
+/** @type {import('svelte/store').Writable<"start"|"end">} */
 export const searchPropertiesSuggestionsPosition = writable('start');
+
+const searchSettings = new SearchSettings();
+
+Promise.allSettled([
+  // First we wait for all properties to load and save
+  searchSettings.resolvePropertiesSuggestionsEnabled().then(v => searchPropertiesSuggestionsEnabled.set(v)),
+  searchSettings.resolvePropertiesSuggestionsPosition().then(v => searchPropertiesSuggestionsPosition.set(v))
+]).then(() => {
+  // And then we can start reading value changes from the writable objects
+  searchPropertiesSuggestionsEnabled.subscribe(value => {
+    void searchSettings.setPropertiesSuggestions(value);
+  });
+
+  searchPropertiesSuggestionsPosition.subscribe(value => {
+    void searchSettings.setPropertiesSuggestionsPosition(value);
+  });
+})

From e85055368a2e0bd19cccbdd9c2c91c6939ebf969 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Wed, 7 Aug 2024 03:39:56 +0400
Subject: [PATCH 6/8] Apply preferences to the search wrapper

---
 src/lib/components/SearchWrapper.js | 35 ++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/SearchWrapper.js b/src/lib/components/SearchWrapper.js
index 440ca17..217c645 100644
--- a/src/lib/components/SearchWrapper.js
+++ b/src/lib/components/SearchWrapper.js
@@ -1,5 +1,6 @@
 import {BaseComponent} from "$lib/components/base/BaseComponent.js";
 import {QueryLexer, QuotedTermToken, TermToken, Token} from "$lib/booru/search/QueryLexer.js";
+import SearchSettings from "$lib/extension/settings/SearchSettings.js";
 
 export class SearchWrapper extends BaseComponent {
   /** @type {HTMLInputElement|null} */
@@ -8,6 +9,10 @@ export class SearchWrapper extends BaseComponent {
   #lastParsedSearchValue = null;
   /** @type {Token[]} */
   #cachedParsedQuery = [];
+  #searchSettings = new SearchSettings();
+  #arePropertiesSuggestionsEnabled = false;
+  /** @type {"start"|"end"} */
+  #propertiesSuggestionsPosition = "start";
 
   build() {
     this.#searchField = this.container.querySelector('input[name=q]');
@@ -15,6 +20,16 @@ export class SearchWrapper extends BaseComponent {
 
   init() {
     this.#searchField.addEventListener('input', this.#onInputFindProperties.bind(this));
+
+    this.#searchSettings.resolvePropertiesSuggestionsEnabled()
+      .then(isEnabled => this.#arePropertiesSuggestionsEnabled = isEnabled);
+    this.#searchSettings.resolvePropertiesSuggestionsPosition()
+      .then(position => this.#propertiesSuggestionsPosition = position);
+
+    this.#searchSettings.subscribe(settings => {
+      this.#arePropertiesSuggestionsEnabled = settings.suggestProperties;
+      this.#propertiesSuggestionsPosition = settings.suggestPropertiesPosition;
+    });
   }
 
   /**
@@ -22,6 +37,11 @@ export class SearchWrapper extends BaseComponent {
    * @param {InputEvent} event Source event to find the input element from.
    */
   #onInputFindProperties(event) {
+    // Ignore events until option is enabled.
+    if (!this.#arePropertiesSuggestionsEnabled) {
+      return;
+    }
+
     const currentFragment = this.#findCurrentTagFragment();
 
     if (!currentFragment) {
@@ -111,7 +131,20 @@ export class SearchWrapper extends BaseComponent {
       }
 
       const listContainer = autocompleteContainer.querySelector('ul');
-      listContainer.prepend(...suggestedListItems);
+
+      switch (this.#propertiesSuggestionsPosition) {
+        case "start":
+          listContainer.prepend(...suggestedListItems);
+          break;
+
+        case "end":
+          listContainer.append(...suggestedListItems);
+          break;
+
+        default:
+          console.warn("Invalid position for property suggestions!");
+      }
+
 
       autocompleteContainer.style.position = 'absolute';
       autocompleteContainer.style.left = `${targetInput.offsetLeft}px`;

From 56f397c2d840760f7bcdc10fa59c72b7fc33f7e3 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Wed, 7 Aug 2024 03:48:47 +0400
Subject: [PATCH 7/8] Update default appearance of selectors

---
 src/components/ui/forms/SelectField.svelte | 6 ++++++
 src/styles/injectable/input.scss           | 6 +++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/forms/SelectField.svelte b/src/components/ui/forms/SelectField.svelte
index cd815c3..f1e78a8 100644
--- a/src/components/ui/forms/SelectField.svelte
+++ b/src/components/ui/forms/SelectField.svelte
@@ -32,3 +32,9 @@
         <option {value}>{label}</option>
     {/each}
 </select>
+
+<style lang="scss">
+    select {
+        width: 100%;
+    }
+</style>
diff --git a/src/styles/injectable/input.scss b/src/styles/injectable/input.scss
index 4ceef1e..bf785a3 100644
--- a/src/styles/injectable/input.scss
+++ b/src/styles/injectable/input.scss
@@ -1,6 +1,6 @@
 @use '../colors';
 
-input, textarea {
+input, textarea, select {
   background: colors.$input-background;
   border: 1px solid colors.$input-border;
   color: colors.$text;
@@ -9,3 +9,7 @@ input, textarea {
   padding: 0 6px;
   line-height: 26px;
 }
+
+select {
+  min-height: 28px;
+}

From 5bb6055aeed175e0b7a29cdf825cf44b6fd254d6 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Wed, 7 Aug 2024 03:55:04 +0400
Subject: [PATCH 8/8] Changed texts, hiding the position option when disabled

---
 src/routes/preferences/search/+page.svelte | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/routes/preferences/search/+page.svelte b/src/routes/preferences/search/+page.svelte
index 6b048c4..29a95d2 100644
--- a/src/routes/preferences/search/+page.svelte
+++ b/src/routes/preferences/search/+page.svelte
@@ -9,6 +9,11 @@
     } from "$stores/search-preferences.js";
     import CheckboxField from "$components/ui/forms/CheckboxField.svelte";
     import SelectField from "$components/ui/forms/SelectField.svelte";
+
+    const propertiesPositions = {
+        start: "At the start of the list",
+        end: "At the end of the list",
+    }
 </script>
 
 <Menu>
@@ -18,10 +23,13 @@
 <FormContainer>
     <FormControl>
         <CheckboxField bind:checked={$searchPropertiesSuggestionsEnabled}>
-            Enable auto-completion for properties
+            Auto-complete properties
         </CheckboxField>
     </FormControl>
-    <FormControl label="Location of properties suggestions">
-        <SelectField bind:value={$searchPropertiesSuggestionsPosition} options="{['start', 'end']}"></SelectField>
-    </FormControl>
+    {#if $searchPropertiesSuggestionsEnabled}
+        <FormControl label="Show completed properties:">
+            <SelectField bind:value={$searchPropertiesSuggestionsPosition}
+                         options="{propertiesPositions}"></SelectField>
+        </FormControl>
+    {/if}
 </FormContainer>