Merge pull request #76 from koloml/release/0.4.0

Release: 0.4

.vite/lib/content-scripts.js

@@ -48,6 +48,7 @@ function wrapScriptIntoIIFE() {
  */
 function makeAliases(rootDir) {
   return {
+    "$config": path.resolve(rootDir, 'src/config'),
     "$lib": path.resolve(rootDir, 'src/lib'),
     "$entities": path.resolve(rootDir, 'src/lib/extension/entities'),
     "$styles": path.resolve(rootDir, 'src/styles'),

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.3.3",
+    "version": "0.4.0",
     "browser_specific_settings": {
         "gecko": {
             "id": "furbooru-tagging-assistant@thecore.city"
@@ -39,6 +39,9 @@
             ],
             "js": [
                 "src/content/header.js"
+            ],
+            "css": [
+                "src/styles/content/header.scss"
             ]
         },
         {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "furbooru-tagging-assistant",
-    "version": "0.3.3",
+    "version": "0.4.0",
     "private": true,
     "scripts": {
         "build": "npm run build:popup && npm run build:extension",
@@ -10,17 +10,17 @@
         "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
     },
     "devDependencies": {
-        "@sveltejs/adapter-auto": "^3.0.0",
-        "@sveltejs/adapter-static": "^3.0.1",
-        "@sveltejs/kit": "^2.0.0",
-        "@sveltejs/vite-plugin-svelte": "^3.0.0",
+        "@sveltejs/adapter-auto": "^4.0.0",
+        "@sveltejs/adapter-static": "^3.0.8",
+        "@sveltejs/kit": "^2.15.3",
+        "@sveltejs/vite-plugin-svelte": "^5.0.3",
         "@types/chrome": "^0.0.262",
-        "cheerio": "^1.0.0-rc.12",
-        "sass": "^1.71.0",
-        "svelte": "^4.2.19",
-        "svelte-check": "^3.6.0",
-        "typescript": "^5.0.0",
-        "vite": "^5.4.9"
+        "cheerio": "^1.0.0",
+        "sass": "^1.83.4",
+        "svelte": "^5.18.0",
+        "svelte-check": "^4.1.4",
+        "typescript": "^5.7.3",
+        "vite": "^6.0.7"
     },
     "type": "module",
     "dependencies": {

src/app.d.ts

@@ -1,6 +1,7 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 import MaintenanceProfile from "$entities/MaintenanceProfile.ts";
+import type TagGroup from "$entities/TagGroup.ts";
 
 declare global {
   namespace App {
@@ -24,6 +25,14 @@ declare global {
 
     interface EntityNamesMap {
       profiles: MaintenanceProfile;
+      groups: TagGroup;
+    }
+
+    interface ImageURIs {
+      full: string;
+      large: string;
+      medium: string;
+      small: string;
     }
   }
 }

src/components/features/GroupView.svelte

@@ -0,0 +1,59 @@
+<script>
+    import TagsColorContainer from "$components/tags/TagsColorContainer.svelte";
+
+    /**
+     * @type {import('$entities/TagGroup.ts').default}
+     */
+    export let group;
+
+    let sortedTagsList, sortedPrefixes;
+
+    $: sortedTagsList = group.settings.tags.sort((a, b) => a.localeCompare(b));
+    $: sortedPrefixes = group.settings.prefixes.sort((a, b) => a.localeCompare(b));
+</script>
+
+<div class="block">
+    <strong>Group Name:</strong>
+    <div>{group.settings.name}</div>
+</div>
+{#if sortedTagsList.length}
+    <div class="block">
+        <strong>Tags:</strong>
+        <TagsColorContainer targetCategory="{group.settings.category}">
+            <div class="tags-list">
+                {#each sortedTagsList as tagName}
+                    <span class="tag">{tagName}</span>
+                {/each}
+            </div>
+        </TagsColorContainer>
+    </div>
+{/if}
+{#if sortedPrefixes.length}
+    <div class="block">
+        <strong>Prefixes:</strong>
+        <TagsColorContainer targetCategory="{group.settings.category}">
+            <div class="tags-list">
+                {#each sortedPrefixes as prefixName}
+                    <span class="tag">{prefixName}*</span>
+                {/each}
+            </div>
+        </TagsColorContainer>
+    </div>
+{/if}
+
+<style lang="scss">
+    .tags-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+    }
+
+    .block + .block {
+        margin-top: .5em;
+
+        strong {
+            display: block;
+            margin-bottom: .25em;
+        }
+    }
+</style>

src/components/layout/Footer.svelte

@@ -10,7 +10,7 @@
 </footer>
 
 <style lang="scss">
-    @use 'src/styles/colors';
+    @use '$styles/colors';
 
     footer {
         display: flex;

src/components/layout/Header.svelte

@@ -3,7 +3,7 @@
 </header>
 
 <style lang="scss">
-    @use "src/styles/colors";
+    @use "$styles/colors";
 
     header {
         background: colors.$header;

src/components/tags/TagsColorContainer.svelte

@@ -0,0 +1,62 @@
+<script>
+    /** @type {string} */
+    export let targetCategory = '';
+</script>
+
+<div class="tag-color-container tag-color-container--{targetCategory || 'default'}">
+    <slot></slot>
+</div>
+
+<style lang="scss">
+    @use '$styles/colors';
+
+    .tag-color-container:is(.tag-color-container--rating) :global(.tag) {
+        background-color: colors.$tag-rating-background;
+        color: colors.$tag-rating-text;
+    }
+
+    .tag-color-container:is(.tag-color-container--spoiler) :global(.tag) {
+        background-color: colors.$tag-spoiler-background;
+        color: colors.$tag-spoiler-text;
+    }
+
+    .tag-color-container:is(.tag-color-container--origin) :global(.tag) {
+        background-color: colors.$tag-origin-background;
+        color: colors.$tag-origin-text;
+    }
+
+    .tag-color-container:is(.tag-color-container--oc) :global(.tag) {
+        background-color: colors.$tag-oc-background;
+        color: colors.$tag-oc-text;
+    }
+
+    .tag-color-container:is(.tag-color-container--error) :global(.tag) {
+        background-color: colors.$tag-error-background;
+        color: colors.$tag-error-text;
+    }
+
+    .tag-color-container:is(.tag-color-container--character) :global(.tag) {
+        background-color: colors.$tag-character-background;
+        color: colors.$tag-character-text;
+    }
+
+    .tag-color-container:is(.tag-color-container--content-official) :global(.tag) {
+        background-color: colors.$tag-content-official-background;
+        color: colors.$tag-content-official-text;
+    }
+
+    .tag-color-container:is(.tag-color-container--content-fanmade) :global(.tag) {
+        background-color: colors.$tag-content-fanmade-background;
+        color: colors.$tag-content-fanmade-text;
+    }
+
+    .tag-color-container:is(.tag-color-container--species) :global(.tag) {
+        background-color: colors.$tag-species-background;
+        color: colors.$tag-species-text;
+    }
+
+    .tag-color-container:is(.tag-color-container--body-type) :global(.tag) {
+        background-color: colors.$tag-body-type-background;
+        color: colors.$tag-body-type-text;
+    }
+</style>

src/components/ui/forms/TagCategorySelectField.svelte

@@ -0,0 +1,80 @@
+<script>
+    import SelectField from "$components/ui/forms/SelectField.svelte";
+    import { categories } from "$lib/booru/tag-categories.js";
+
+    /** @type {string} */
+    export let value = '';
+
+    /** @type {Record<string, string>} */
+    let tagCategoriesOptions = {
+        '': 'Default'
+    };
+
+    tagCategoriesOptions = categories.reduce((options, category) => {
+        options[category] = category
+                .replace('-', ' ')
+                .replace(/(?<=\s|^)\w/g, (matchedCharacter) => matchedCharacter.toUpperCase());
+
+        return options;
+    }, tagCategoriesOptions);
+</script>
+
+<SelectField bind:value={value} options={tagCategoriesOptions} name="tag_color"/>
+
+<style lang="scss">
+    @use '$styles/colors';
+
+    :global(select[name=tag_color]) {
+        :global(option) {
+            &:is(:global([value=rating])) {
+                background-color: colors.$tag-rating-background;
+                color: colors.$tag-rating-text;
+            }
+
+            &:is(:global([value=spoiler])) {
+                background-color: colors.$tag-spoiler-background;
+                color: colors.$tag-spoiler-text;
+            }
+
+            &:is(:global([value=origin])) {
+                background-color: colors.$tag-origin-background;
+                color: colors.$tag-origin-text;
+            }
+
+            &:is(:global([value=oc])) {
+                background-color: colors.$tag-oc-background;
+                color: colors.$tag-oc-text;
+            }
+
+            &:is(:global([value=error])) {
+                background-color: colors.$tag-error-background;
+                color: colors.$tag-error-text;
+            }
+
+            &:is(:global([value=character])) {
+                background-color: colors.$tag-character-background;
+                color: colors.$tag-character-text;
+            }
+
+            &:is(:global([value=content-official])) {
+                background-color: colors.$tag-content-official-background;
+                color: colors.$tag-content-official-text;
+            }
+
+            &:is(:global([value=content-fanmade])) {
+                background-color: colors.$tag-content-fanmade-background;
+                color: colors.$tag-content-fanmade-text;
+            }
+
+            &:is(:global([value=species])) {
+                background-color: colors.$tag-species-background;
+                color: colors.$tag-species-text;
+            }
+
+            &:is(:global([value=body-type])) {
+                background-color: colors.$tag-body-type-background;
+                color: colors.$tag-body-type-text;
+            }
+        }
+    }
+</style>

src/components/ui/menu/Menu.svelte

@@ -3,7 +3,7 @@
 </nav>
 
 <style lang="scss">
-    @use 'src/styles/colors';
+    @use '$styles/colors';
 
     nav {
         display: flex;

src/components/ui/menu/MenuCheckboxItem.svelte

@@ -23,7 +23,7 @@
 </script>
 
 <MenuLink {href}>
-    <input type="checkbox" {name} {value} {checked} on:input on:click|stopPropagation>
+    <input type="checkbox" {name} {value} bind:checked={checked} on:input on:click|stopPropagation>
     <slot></slot>
 </MenuLink>
 

src/components/ui/menu/MenuItem.svelte

@@ -23,7 +23,7 @@
 </svelte:element>
 
 <style lang="scss">
-    @use '../../../styles/colors';
+    @use '$styles/colors';
 
     .menu-item {
         display: flex;

src/config/tags.ts

@@ -0,0 +1,66 @@
+export const tagsBlacklist: string[] = [
+  "anthro art",
+  "anthro artist",
+  "anthro cute",
+  "anthro furry",
+  "anthro nsfw",
+  "anthro oc",
+  "anthroart",
+  "anthroartist",
+  "anthrofurry",
+  "anthronsfw",
+  "anthrooc",
+  "art",
+  "artist",
+  "artwork",
+  "cringe",
+  "cringeworthy",
+  "cute art",
+  "cute artwork",
+  "cute furry",
+  "downvotes galore",
+  "drama in comments",
+  "drama in the comments",
+  "fandom",
+  "furries",
+  "furry anthro",
+  "furry art",
+  "furry artist",
+  "furry artwork",
+  "furry character",
+  "furry community",
+  "furry cute",
+  "furry fandom",
+  "furry nsfw",
+  "furry oc",
+  "furryanthro",
+  "furryart",
+  "furryartist",
+  "furryartwork",
+  "furrynsfw",
+  "furryoc",
+  "image",
+  "no tag",
+  "not tagged",
+  "notag",
+  "notags",
+  "nsfw anthro",
+  "nsfw art",
+  "nsfw artist",
+  "nsfw artwork",
+  "nsfw",
+  "nsfwanthro",
+  "nsfwart",
+  "nsfwartist",
+  "nsfwartwork",
+  "paywall",
+  "rcf community",
+  "sfw",
+  "solo oc",
+  "tag me",
+  "tag needed",
+  "tag your shit",
+  "tagme",
+  "upvotes galore",
+  "wall of faves"
+];

src/lib/booru/tag-categories.js

@@ -0,0 +1,12 @@
+export const categories = [
+  'rating',
+  'spoiler',
+  'origin',
+  'oc',
+  'error',
+  'character',
+  'content-official',
+  'content-fanmade',
+  'species',
+  'body-type',
+];

src/lib/components/FullscreenViewer.js

@@ -1,13 +1,14 @@
 import {BaseComponent} from "$lib/components/base/BaseComponent.js";
+import MiscSettings from "$lib/extension/settings/MiscSettings.ts";
 
 export class FullscreenViewer extends BaseComponent {
   /** @type {HTMLVideoElement} */
   #videoElement = document.createElement('video');
   /** @type {HTMLImageElement} */
   #imageElement = document.createElement('img');
-
   #spinnerElement = document.createElement('i');
-
+  #sizeSelectorElement = document.createElement('select');
+  #closeButtonElement = document.createElement('i');
   /** @type {number|null} */
   #touchId = null;
   /** @type {number|null} */
@@ -16,15 +17,33 @@ export class FullscreenViewer extends BaseComponent {
   #startY = null;
   /** @type {boolean|null} */
   #isClosingSwipeStarted = null;
+  #isSizeFetched = false;
+  /** @type {App.ImageURIs|null} */
+  #currentURIs = null;
 
   /**
    * @protected
    */
   build() {
     this.container.classList.add('fullscreen-viewer');
-    this.container.append(this.#spinnerElement);
+
+    this.container.append(
+      this.#spinnerElement,
+      this.#sizeSelectorElement,
+      this.#closeButtonElement,
+    );
 
     this.#spinnerElement.classList.add('spinner', 'fa', 'fa-circle-notch', 'fa-spin');
+    this.#closeButtonElement.classList.add('close', 'fa', 'fa-xmark');
+    this.#sizeSelectorElement.classList.add('size-selector', 'input');
+
+    for (const [sizeKey, sizeName] of Object.entries(FullscreenViewer.#previewSizes)) {
+      const sizeOptionElement = document.createElement('option');
+      sizeOptionElement.value = sizeKey;
+      sizeOptionElement.innerText = sizeName;
+
+      this.#sizeSelectorElement.append(sizeOptionElement);
+    }
   }
 
   /**
@@ -40,6 +59,12 @@ export class FullscreenViewer extends BaseComponent {
 
     this.#videoElement.addEventListener('loadeddata', this.#onLoaded.bind(this));
     this.#imageElement.addEventListener('load', this.#onLoaded.bind(this));
+    this.#sizeSelectorElement.addEventListener('click', event => event.stopPropagation());
+
+    FullscreenViewer.#miscSettings
+      .resolveFullscreenViewerPreviewSize()
+      .then(this.#onSizeResolved.bind(this))
+      .then(this.#watchForSizeSelectionChanges.bind(this));
   }
 
   #onLoaded() {
@@ -163,7 +188,49 @@ export class FullscreenViewer extends BaseComponent {
     }
   }
 
+  /**
+   * @param {import("$lib/extension/settings/MiscSettings.js").FullscreenViewerSize} size
+   */
+  #onSizeResolved(size) {
+    this.#sizeSelectorElement.value = size;
+    this.#isSizeFetched = true;
+
+    this.emit('size-loaded');
+  }
+
+  #watchForSizeSelectionChanges() {
+    let lastActiveSize = this.#sizeSelectorElement.value;
+
+    FullscreenViewer.#miscSettings.subscribe(settings => {
+      const targetSize = settings.fullscreenViewerSize;
+
+      if (!targetSize || lastActiveSize === targetSize) {
+        return;
+      }
+
+      lastActiveSize = targetSize;
+      this.#sizeSelectorElement.value = targetSize;
+    });
+
+    this.#sizeSelectorElement.addEventListener('input', () => {
+      const targetSize = this.#sizeSelectorElement.value;
+
+      if (this.#currentURIs) {
+        void this.show(this.#currentURIs);
+      }
+
+      if (!targetSize || targetSize === lastActiveSize || !(targetSize in FullscreenViewer.#previewSizes)) {
+        return;
+      }
+
+      lastActiveSize = targetSize;
+      void FullscreenViewer.#miscSettings.setFullscreenViewerPreviewSize(targetSize);
+    });
+  }
+
   #close() {
+    this.#currentURIs = null;
+
     this.container.classList.remove(FullscreenViewer.#shownState);
     document.body.style.overflow = null;
 
@@ -175,9 +242,44 @@ export class FullscreenViewer extends BaseComponent {
   }
 
   /**
-   * @param {string} url
+   * @param {App.ImageURIs} imageUris
+   * @return {Promise<string|null>}
    */
-  show(url) {
+  async #resolveCurrentSelectedSizeUrl(imageUris) {
+    if (!this.#isSizeFetched) {
+      await new Promise(resolve => this.on('size-loaded', resolve))
+    }
+
+    let targetSize = this.#sizeSelectorElement.value;
+
+    if (!imageUris.hasOwnProperty(targetSize)) {
+      targetSize = FullscreenViewer.#fallbackSize;
+    }
+
+    if (!imageUris.hasOwnProperty(targetSize)) {
+      targetSize = Object.keys(imageUris)[0];
+    }
+
+    if (!targetSize) {
+      return null;
+    }
+
+    return imageUris[targetSize];
+  }
+
+  /**
+   * @param {App.ImageURIs} imageUris
+   */
+  async show(imageUris) {
+    this.#currentURIs = imageUris;
+
+    const url = await this.#resolveCurrentSelectedSizeUrl(imageUris);
+
+    if (!url) {
+      console.warn('Failed to resolve media for the viewer!');
+      return;
+    }
+
     this.container.classList.add('loading');
 
     requestAnimationFrame(() => {
@@ -214,9 +316,23 @@ export class FullscreenViewer extends BaseComponent {
     return url.endsWith('.mp4') || url.endsWith('.webm');
   }
 
+  static #miscSettings = new MiscSettings();
+
   static #offsetProperty = '--offset';
   static #opacityProperty = '--opacity';
   static #shownState = 'shown';
   static #swipeState = 'swiped';
   static #minRequiredDistance = 50;
+
+  /**
+   * @type {Record<import("$lib/extension/settings/MiscSettings.js").FullscreenViewerSize, string>}
+   */
+  static #previewSizes = {
+    full: 'Full',
+    large: 'Large',
+    medium: 'Medium',
+    small: 'Small'
+  }
+
+  static #fallbackSize = 'large';
 }

src/lib/components/ImageShowFullscreenButton.js

@@ -1,6 +1,6 @@
 import {BaseComponent} from "$lib/components/base/BaseComponent.js";
 import {getComponent} from "$lib/components/base/ComponentUtils.js";
-import MiscSettings from "$lib/extension/settings/MiscSettings.js";
+import MiscSettings from "$lib/extension/settings/MiscSettings.ts";
 import {FullscreenViewer} from "$lib/components/FullscreenViewer.js";
 
 export class ImageShowFullscreenButton extends BaseComponent {
@@ -33,7 +33,7 @@ export class ImageShowFullscreenButton extends BaseComponent {
         })
         .then(() => {
           ImageShowFullscreenButton.#miscSettings.subscribe(settings => {
-            this.#isFullscreenButtonEnabled = settings.fullscreenViewer;
+            this.#isFullscreenButtonEnabled = settings.fullscreenViewer ?? true;
             this.#updateFullscreenButtonVisibility();
           })
         })
@@ -47,7 +47,7 @@ export class ImageShowFullscreenButton extends BaseComponent {
   #onButtonClicked() {
     ImageShowFullscreenButton
       .#resolveViewer()
-      .show(this.#mediaBoxTools.mediaBox.imageLinks.large);
+      .show(this.#mediaBoxTools.mediaBox.imageLinks);
   }
 
   /**

src/lib/components/MaintenancePopup.js

@@ -1,8 +1,18 @@
-import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings.js";
+import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings.ts";
 import MaintenanceProfile from "$entities/MaintenanceProfile.ts";
 import {BaseComponent} from "$lib/components/base/BaseComponent.js";
 import {getComponent} from "$lib/components/base/ComponentUtils.js";
 import ScrapedAPI from "$lib/booru/scraped/ScrapedAPI.js";
+import {tagsBlacklist} from "$config/tags.ts";
+
+class BlackListedTagsEncounteredError extends Error {
+  /**
+   * @param {string} tagName
+   */
+  constructor(tagName) {
+    super(`This tag is blacklisted and prevents submission: ${tagName}`);
+  }
+}
 
 export class MaintenancePopup extends BaseComponent {
   /** @type {HTMLElement} */
@@ -11,6 +21,9 @@ export class MaintenancePopup extends BaseComponent {
   /** @type {HTMLElement[]} */
   #tagsList = [];
 
+  /** @type {Map<string, HTMLElement>} */
+  #suggestedInvalidTags = new Map();
+
   /** @type {MaintenanceProfile|null} */
   #activeProfile = null;
 
@@ -89,11 +102,16 @@ export class MaintenancePopup extends BaseComponent {
     /** @type {string[]} */
     const activeProfileTagsList = this.#activeProfile?.settings.tags || [];
 
-    for (let tagElement of this.#tagsList) {
+    for (const tagElement of this.#tagsList) {
+      tagElement.remove();
+    }
+
+    for (const tagElement of this.#suggestedInvalidTags.values()) {
       tagElement.remove();
     }
 
     this.#tagsList = new Array(activeProfileTagsList.length);
+    this.#suggestedInvalidTags.clear();
 
     const currentPostTags = this.#mediaBoxTools.mediaBox.tagsAndAliases;
 
@@ -109,6 +127,12 @@ export class MaintenancePopup extends BaseComponent {
         tagElement.classList.toggle('is-present', isPresent);
         tagElement.classList.toggle('is-missing', !isPresent);
         tagElement.classList.toggle('is-aliased', isPresent && currentPostTags.get(tagName) !== tagName);
+
+        // Just to prevent duplication, we need to include this tag to the map of suggested invalid tags
+        if (tagsBlacklist.includes(tagName)) {
+          MaintenancePopup.#markTagAsInvalid(tagElement);
+          this.#suggestedInvalidTags.set(tagName, tagElement);
+        }
       });
   }
 
@@ -188,6 +212,8 @@ export class MaintenancePopup extends BaseComponent {
 
     let maybeTagsAndAliasesAfterUpdate;
 
+    const shouldAutoRemove = await MaintenancePopup.#maintenanceSettings.resolveStripBlacklistedTags();
+
     try {
       maybeTagsAndAliasesAfterUpdate = await MaintenancePopup.#scrapedAPI.updateImageTags(
         this.#mediaBoxTools.mediaBox.imageId,
@@ -200,11 +226,27 @@ export class MaintenancePopup extends BaseComponent {
             tagsList.add(tagName);
           }
 
+          if (shouldAutoRemove) {
+            for (let tagName of tagsBlacklist) {
+              tagsList.delete(tagName);
+            }
+          } else {
+            for (let tagName of tagsList) {
+              if (tagsBlacklist.includes(tagName)) {
+                throw new BlackListedTagsEncounteredError(tagName);
+              }
+            }
+          }
+
           return tagsList;
         }
       );
     } catch (e) {
-      console.warn('Tags submission failed:', e);
+      if (e instanceof BlackListedTagsEncounteredError) {
+        this.#revealInvalidTags();
+      } else {
+        console.warn('Tags submission failed:', e);
+      }
 
       MaintenancePopup.#notifyAboutPendingSubmission(false);
       this.emit('maintenance-state-change', 'failed');
@@ -228,6 +270,36 @@ export class MaintenancePopup extends BaseComponent {
     this.#isSubmitting = false;
   }
 
+  #revealInvalidTags() {
+    const tagsAndAliases = this.#mediaBoxTools.mediaBox.tagsAndAliases;
+
+    if (!tagsAndAliases) {
+      return;
+    }
+
+    const firstTagInList = this.#tagsList[0];
+
+    for (let tagName of tagsBlacklist) {
+      if (tagsAndAliases.has(tagName)) {
+        if (this.#suggestedInvalidTags.has(tagName)) {
+          continue;
+        }
+
+        const tagElement = MaintenancePopup.#buildTagElement(tagName);
+        MaintenancePopup.#markTagAsInvalid(tagElement);
+        tagElement.classList.add('is-present');
+
+        this.#suggestedInvalidTags.set(tagName, tagElement);
+
+        if (firstTagInList && firstTagInList.isConnected) {
+          this.#tagsListElement.insertBefore(tagElement, firstTagInList);
+        } else {
+          this.#tagsListElement.appendChild(tagElement);
+        }
+      }
+    }
+  }
+
   /**
    * @return {boolean}
    */
@@ -248,6 +320,15 @@ export class MaintenancePopup extends BaseComponent {
     return tagElement;
   }
 
+  /**
+   * Marks the tag with red color.
+   * @param {HTMLElement} tagElement Element to mark.
+   */
+  static #markTagAsInvalid(tagElement) {
+    tagElement.dataset.tagCategory = 'error';
+    tagElement.setAttribute('data-tag-category', 'error');
+  }
+
   /**
    * Controller with maintenance settings.
    * @type {MaintenanceSettings}

src/lib/components/MediaBoxWrapper.js

@@ -56,7 +56,7 @@ export class MediaBoxWrapper extends BaseComponent {
   }
 
   /**
-   * @return {ImageURIs}
+   * @return {App.ImageURIs}
    */
   get imageLinks() {
     return JSON.parse(this.#thumbnailContainer.dataset.uris);
@@ -100,10 +100,3 @@ export function calculateMediaBoxesPositions(mediaBoxesList) {
     }
   })
 }
-
-/**
- * @typedef {Object} ImageURIs
- * @property {string} full
- * @property {string} large
- * @property {string} small
- */

src/lib/components/SearchWrapper.js

@@ -1,6 +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";
+import SearchSettings from "$lib/extension/settings/SearchSettings.ts";
 
 export class SearchWrapper extends BaseComponent {
   /** @type {HTMLInputElement|null} */
@@ -289,6 +289,10 @@ export class SearchWrapper extends BaseComponent {
     suggestionItem.dataset.value = suggestedTerm;
     suggestionItem.innerText = suggestedTerm;
 
+    const propertyIcon = document.createElement('i');
+    propertyIcon.classList.add('fa', 'fa-info-circle');
+    suggestionItem.insertAdjacentElement('afterbegin', propertyIcon);
+
     suggestionItem.addEventListener('mouseover', () => {
       SearchWrapper.#findAndResetSelectedSuggestion(suggestionItem);
       suggestionItem.classList.add('autocomplete__item--selected');
@@ -347,24 +351,42 @@ export class SearchWrapper extends BaseComponent {
   static #typeDate = Symbol();
   static #typeLiteral = Symbol();
   static #typePersonal = Symbol();
+  static #typeBoolean = Symbol();
 
   static #properties = new Map([
+    ['animated', SearchWrapper.#typeBoolean],
     ['aspect_ratio', SearchWrapper.#typeNumeric],
+    ['body_type_tag_count', SearchWrapper.#typeNumeric],
+    ['character_tag_count', SearchWrapper.#typeNumeric],
     ['comment_count', SearchWrapper.#typeNumeric],
+    ['content_fanmade_tag_count', SearchWrapper.#typeNumeric],
+    ['content_official_tag_count', SearchWrapper.#typeNumeric],
     ['created_at', SearchWrapper.#typeDate],
     ['description', SearchWrapper.#typeLiteral],
     ['downvotes', SearchWrapper.#typeNumeric],
+    ['duration', SearchWrapper.#typeNumeric],
+    ['error_tag_count', SearchWrapper.#typeNumeric],
     ['faved_by', SearchWrapper.#typeLiteral],
     ['faved_by_id', SearchWrapper.#typeNumeric],
     ['faves', SearchWrapper.#typeNumeric],
+    ['file_name', SearchWrapper.#typeLiteral],
     ['first_seen_at', SearchWrapper.#typeDate],
     ['height', SearchWrapper.#typeNumeric],
     ['id', SearchWrapper.#typeNumeric],
+    ['oc_tag_count', SearchWrapper.#typeNumeric],
     ['orig_sha512_hash', SearchWrapper.#typeLiteral],
+    ['original_format', SearchWrapper.#typeLiteral],
+    ['pixels', SearchWrapper.#typeNumeric],
+    ['rating_tag_count', SearchWrapper.#typeNumeric],
     ['score', SearchWrapper.#typeNumeric],
     ['sha512_hash', SearchWrapper.#typeLiteral],
+    ['size', SearchWrapper.#typeNumeric],
+    ['source_count', SearchWrapper.#typeNumeric],
     ['source_url', SearchWrapper.#typeLiteral],
+    ['species_tag_count', SearchWrapper.#typeNumeric],
+    ['spoiler_tag_count', SearchWrapper.#typeNumeric],
     ['tag_count', SearchWrapper.#typeNumeric],
+    ['updated_at', SearchWrapper.#typeDate],
     ['uploader', SearchWrapper.#typeLiteral],
     ['uploader_id', SearchWrapper.#typeNumeric],
     ['upvotes', SearchWrapper.#typeNumeric],
@@ -388,6 +410,10 @@ export class SearchWrapper extends BaseComponent {
       'uploads',
       'upvotes',
       'watched',
+    ]],
+    [SearchWrapper.#typeBoolean, [
+      'true',
+      'false',
     ]]
   ]);
 }

src/lib/components/TagDropdownWrapper.js

@@ -1,11 +1,13 @@
 import {BaseComponent} from "$lib/components/base/BaseComponent.js";
 import MaintenanceProfile from "$entities/MaintenanceProfile.ts";
-import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings.js";
+import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings.ts";
 import {getComponent} from "$lib/components/base/ComponentUtils.js";
+import CustomCategoriesResolver from "$lib/extension/CustomCategoriesResolver";
 
 const isTagEditorProcessedKey = Symbol();
+const categoriesResolver = new CustomCategoriesResolver();
 
-class TagDropdownWrapper extends BaseComponent {
+export class TagDropdownWrapper extends BaseComponent {
   /**
    * Container with dropdown elements to insert options into.
    * @type {HTMLElement}
@@ -36,6 +38,11 @@ class TagDropdownWrapper extends BaseComponent {
    */
   #isEntered = false;
 
+  /**
+   * @type {string|undefined|null}
+   */
+  #originalCategory = null;
+
   build() {
     this.#dropdownContainer = this.container.querySelector('.dropdown__content');
   }
@@ -53,10 +60,45 @@ class TagDropdownWrapper extends BaseComponent {
     });
   }
 
-  get #tagName() {
+  get tagName() {
     return this.container.dataset.tagName;
   }
 
+  /**
+   * @return {string|undefined}
+   */
+  get tagCategory() {
+    return this.container.dataset.tagCategory;
+  }
+
+  /**
+   * @param {string|undefined} targetCategory
+   */
+  set tagCategory(targetCategory) {
+    // Make sure original category is properly stored.
+    this.originalCategory;
+
+    this.container.dataset.tagCategory = targetCategory;
+
+    if (targetCategory) {
+      this.container.setAttribute('data-tag-category', targetCategory);
+      return;
+    }
+
+    this.container.removeAttribute('data-tag-category');
+  }
+
+  /**
+   * @return {string|undefined}
+   */
+  get originalCategory() {
+    if (this.#originalCategory === null) {
+      this.#originalCategory = this.tagCategory;
+    }
+
+    return this.#originalCategory;
+  }
+
   #onDropdownEntered() {
     this.#isEntered = true;
     this.#updateButtons();
@@ -89,7 +131,7 @@ class TagDropdownWrapper extends BaseComponent {
       const profileName = this.#activeProfile.settings.name;
       let profileSpecificButtonText = `Add to profile "${profileName}"`;
 
-      if (this.#activeProfile.settings.tags.includes(this.#tagName)) {
+      if (this.#activeProfile.settings.tags.includes(this.tagName)) {
         profileSpecificButtonText = `Remove from profile "${profileName}"`;
       }
 
@@ -108,7 +150,8 @@ class TagDropdownWrapper extends BaseComponent {
   async #onAddToNewClicked() {
     const profile = new MaintenanceProfile(crypto.randomUUID(), {
       name: 'Temporary Profile (' + (new Date().toISOString()) + ')',
-      tags: [this.#tagName]
+      tags: [this.tagName],
+      temporary: true,
     });
 
     await profile.save();
@@ -121,7 +164,7 @@ class TagDropdownWrapper extends BaseComponent {
     }
 
     const tagsList = new Set(this.#activeProfile.settings.tags);
-    const targetTagName = this.#tagName;
+    const targetTagName = this.tagName;
 
     if (tagsList.has(targetTagName)) {
       tagsList.delete(targetTagName);
@@ -195,7 +238,10 @@ export function wrapTagDropdown(element) {
     return;
   }
 
-  new TagDropdownWrapper(element).initialize();
+  const tagDropdown = new TagDropdownWrapper(element);
+  tagDropdown.initialize();
+
+  categoriesResolver.addElement(tagDropdown);
 }
 
 export function watchTagDropdownsInTagsEditor() {

src/lib/extension/CustomCategoriesResolver.ts

@@ -0,0 +1,110 @@
+import type {TagDropdownWrapper} from "$lib/components/TagDropdownWrapper";
+import TagGroup from "$entities/TagGroup.ts";
+import {escapeRegExp} from "$lib/utils";
+
+export default class CustomCategoriesResolver {
+  #tagCategories = new Map<string, string>();
+  #compiledRegExps = new Map<RegExp, string>();
+  #tagDropdowns: TagDropdownWrapper[] = [];
+  #nextQueuedUpdate = -1;
+
+  constructor() {
+    TagGroup.subscribe(this.#onTagGroupsReceived.bind(this));
+    TagGroup.readAll().then(this.#onTagGroupsReceived.bind(this));
+  }
+
+  public addElement(tagDropdown: TagDropdownWrapper): void {
+    this.#tagDropdowns.push(tagDropdown);
+
+    if (!this.#tagCategories.size && !this.#compiledRegExps.size) {
+      return;
+    }
+
+    this.#queueUpdatingTags();
+  }
+
+  #queueUpdatingTags() {
+    clearTimeout(this.#nextQueuedUpdate);
+
+    this.#nextQueuedUpdate = setTimeout(
+      this.#updateUnprocessedTags.bind(this),
+      CustomCategoriesResolver.#unprocessedTagsTimeout
+    );
+  }
+
+  #updateUnprocessedTags() {
+    this.#tagDropdowns
+      .filter(CustomCategoriesResolver.#skipTagsWithOriginalCategory)
+      .filter(this.#applyCustomCategoryForExactMatches.bind(this))
+      .filter(this.#matchCustomCategoryByRegExp.bind(this))
+      .forEach(CustomCategoriesResolver.#resetToOriginalCategory);
+  }
+
+  /**
+   * Apply custom categories for the exact tag names.
+   * @param tagDropdown Element to try applying the category for.
+   * @return {boolean} Will return false when tag is processed and true when it is not found.
+   * @private
+   */
+  #applyCustomCategoryForExactMatches(tagDropdown: TagDropdownWrapper): boolean {
+    const tagName = tagDropdown.tagName!;
+
+    if (!this.#tagCategories.has(tagName)) {
+      return true;
+    }
+
+    tagDropdown.tagCategory = this.#tagCategories.get(tagName)!;
+    return false;
+  }
+
+  #matchCustomCategoryByRegExp(tagDropdown: TagDropdownWrapper) {
+    const tagName = tagDropdown.tagName!;
+
+    for (const targetRegularExpression of this.#compiledRegExps.keys()) {
+      if (!targetRegularExpression.test(tagName)) {
+        continue;
+      }
+
+      tagDropdown.tagCategory = this.#compiledRegExps.get(targetRegularExpression)!;
+      return false;
+    }
+
+    return true;
+  }
+
+  #onTagGroupsReceived(tagGroups: TagGroup[]) {
+    this.#tagCategories.clear();
+    this.#compiledRegExps.clear();
+
+    if (!tagGroups.length) {
+      return;
+    }
+
+    for (const tagGroup of tagGroups) {
+      const categoryName = tagGroup.settings.category;
+
+      for (const tagName of tagGroup.settings.tags) {
+        this.#tagCategories.set(tagName, categoryName);
+      }
+
+      for (const tagPrefix of tagGroup.settings.prefixes) {
+        this.#compiledRegExps.set(
+          new RegExp(`^${escapeRegExp(tagPrefix)}`),
+          categoryName
+        );
+      }
+    }
+
+    this.#queueUpdatingTags();
+  }
+
+  static #skipTagsWithOriginalCategory(tagDropdown: TagDropdownWrapper): boolean {
+    return !tagDropdown.originalCategory;
+  }
+
+  static #resetToOriginalCategory(tagDropdown: TagDropdownWrapper): void {
+    tagDropdown.tagCategory = tagDropdown.originalCategory;
+  }
+
+  static #unprocessedTagsTimeout = 0;
+}

src/lib/extension/base/CacheableSettings.ts

@@ -1,20 +1,20 @@
 import ConfigurationController from "$lib/extension/ConfigurationController.js";
 
-export default class CacheableSettings {
-  /** @type {ConfigurationController} */
-  #controller;
-  /** @type {Map<string, any>} */
-  #cachedValues = new Map();
-  /** @type {function[]} */
-  #disposables = [];
+export default class CacheableSettings<Fields> {
+  #controller: ConfigurationController;
+  #cachedValues: Map<keyof Fields, any> = new Map();
+  #disposables: Function[] = [];
 
-  constructor(settingsNamespace) {
+  constructor(settingsNamespace: string) {
     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]);
+          this.#cachedValues.set(
+            key as keyof Fields,
+            settings[key]
+          );
         }
       })
     );
@@ -27,12 +27,12 @@ export default class CacheableSettings {
    * @return {Promise<SettingType>}
    * @protected
    */
-  async _resolveSetting(settingName, defaultValue) {
+  protected async _resolveSetting<Key extends keyof Fields>(settingName: Key, defaultValue: Fields[Key]): Promise<Fields[Key]> {
     if (this.#cachedValues.has(settingName)) {
       return this.#cachedValues.get(settingName);
     }
 
-    const settingValue = await this.#controller.readSetting(settingName, defaultValue);
+    const settingValue = await this.#controller.readSetting(settingName as string, defaultValue);
 
     this.#cachedValues.set(settingName, settingValue);
 
@@ -40,13 +40,12 @@ export default class CacheableSettings {
   }
 
   /**
-   * @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>}
+   * @param settingName Name of the setting to write.
+   * @param value Value to pass.
+   * @param force Ignore the cache and force the update.
    * @protected
    */
-  async _writeSetting(settingName, value, force = false) {
+  async _writeSetting<Key extends keyof Fields>(settingName: Key, value: Fields[Key], force: boolean = false): Promise<void> {
     if (
       !force
       && this.#cachedValues.has(settingName)
@@ -55,7 +54,10 @@ export default class CacheableSettings {
       return;
     }
 
-    return this.#controller.writeSetting(settingName, value);
+    return this.#controller.writeSetting(
+      settingName as string,
+      value
+    );
   }
 
   /**
@@ -63,8 +65,8 @@ export default class CacheableSettings {
    * @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);
+  subscribe(callback: (settings: Partial<Fields>) => void): () => void {
+    const unsubscribeCallback = this.#controller.subscribeToChanges(callback as (fields: Record<string, any>) => void);
 
     this.#disposables.push(unsubscribeCallback);
 

src/lib/extension/entities/MaintenanceProfile.ts

@@ -4,6 +4,7 @@ import EntitiesController from "$lib/extension/EntitiesController.ts";
 export interface MaintenanceProfileSettings {
   name: string;
   tags: string[];
+  temporary: boolean;
 }
 
 /**
@@ -17,9 +18,18 @@ export default class MaintenanceProfile extends StorageEntity<MaintenanceProfile
   constructor(id: string, settings: Partial<MaintenanceProfileSettings>) {
     super(id, {
       name: settings.name || '',
-      tags: settings.tags || []
+      tags: settings.tags || [],
+      temporary: settings.temporary ?? false
     });
   }
 
+  async save(): Promise<void> {
+    if (this.settings.temporary && !this.settings.tags?.length) {
+      return this.delete();
+    }
+
+    return super.save();
+  }
+
   public static readonly _entityName = "profiles";
 }

src/lib/extension/entities/TagGroup.ts

@@ -0,0 +1,21 @@
+import StorageEntity from "$lib/extension/base/StorageEntity.ts";
+
+export interface TagGroupSettings {
+  name: string;
+  tags: string[];
+  prefixes: string[];
+  category: string;
+}
+
+export default class TagGroup extends StorageEntity<TagGroupSettings> {
+  constructor(id: string, settings: Partial<TagGroupSettings>) {
+    super(id, {
+      name: settings.name || '',
+      tags: settings.tags || [],
+      prefixes: settings.prefixes || [],
+      category: settings.category || ''
+    });
+  }
+
+  static _entityName = 'groups';
+}

src/lib/extension/settings/MaintenanceSettings.js

@@ -1,63 +0,0 @@
-import ConfigurationController from "$lib/extension/ConfigurationController.js";
-import MaintenanceProfile from "$entities/MaintenanceProfile.ts";
-import CacheableSettings from "$lib/extension/base/CacheableSettings.js";
-
-export default class MaintenanceSettings extends CacheableSettings {
-  constructor() {
-    super("maintenance");
-  }
-
-  /**
-   * Set the active maintenance profile.
-   *
-   * @return {Promise<string|null>}
-   */
-  async resolveActiveProfileId() {
-    return this._resolveSetting("activeProfile", null);
-  }
-
-  /**
-   * Get the active maintenance profile if it is set.
-   *
-   * @return {Promise<MaintenanceProfile|null>}
-   */
-  async resolveActiveProfileAsObject() {
-    const resolvedProfileId = await this.resolveActiveProfileId();
-
-    return (await MaintenanceProfile.readAll())
-      .find(profile => profile.id === resolvedProfileId) || null;
-  }
-
-  /**
-   * Set the active maintenance profile.
-   *
-   * @param {string|null} profileId ID of the profile to set as active. If `null`, the active profile will be considered
-   * unset.
-   *
-   * @return {Promise<void>}
-   */
-  async setActiveProfileId(profileId) {
-    await this._writeSetting("activeProfile", profileId);
-  }
-
-  /**
-   * Subscribe to the changes in the maintenance-related settings.
-   *
-   * @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.
-   */
-  subscribe(callback) {
-    return super.subscribe(settings => {
-      callback({
-        activeProfile: settings.activeProfile || null,
-      });
-    });
-  }
-}
-
-/**
- * @typedef {Object} MaintenanceSettingsObject
- * @property {string|null} activeProfile
- */

src/lib/extension/settings/MaintenanceSettings.ts

@@ -0,0 +1,48 @@
+import MaintenanceProfile from "$entities/MaintenanceProfile.ts";
+import CacheableSettings from "$lib/extension/base/CacheableSettings.ts";
+
+interface MaintenanceSettingsFields {
+  activeProfile: string | null;
+  stripBlacklistedTags: boolean;
+}
+
+export default class MaintenanceSettings extends CacheableSettings<MaintenanceSettingsFields> {
+  constructor() {
+    super("maintenance");
+  }
+
+  /**
+   * Set the active maintenance profile.
+   */
+  async resolveActiveProfileId() {
+    return this._resolveSetting("activeProfile", null);
+  }
+
+  /**
+   * Get the active maintenance profile if it is set.
+   */
+  async resolveActiveProfileAsObject(): Promise<MaintenanceProfile | null> {
+    const resolvedProfileId = await this.resolveActiveProfileId();
+
+    return (await MaintenanceProfile.readAll())
+      .find(profile => profile.id === resolvedProfileId) || null;
+  }
+
+  async resolveStripBlacklistedTags() {
+    return this._resolveSetting('stripBlacklistedTags', false);
+  }
+
+  /**
+   * Set the active maintenance profile.
+   *
+   * @param profileId ID of the profile to set as active. If `null`, the active profile will be considered
+   * unset.
+   */
+  async setActiveProfileId(profileId: string | null): Promise<void> {
+    await this._writeSetting("activeProfile", profileId);
+  }
+
+  async setStripBlacklistedTags(isEnabled: boolean) {
+    await this._writeSetting('stripBlacklistedTags', isEnabled);
+  }
+}

src/lib/extension/settings/MiscSettings.js

@@ -1,39 +0,0 @@
-import CacheableSettings from "$lib/extension/base/CacheableSettings.js";
-
-export default class MiscSettings extends CacheableSettings {
-  constructor() {
-    super("misc");
-  }
-
-  /**
-   * @return {Promise<boolean>}
-   */
-  async resolveFullscreenViewerEnabled() {
-    return this._resolveSetting("fullscreenViewer", true);
-  }
-
-  /**
-   * @param {boolean} isEnabled
-   * @return {Promise<void>}
-   */
-  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/lib/extension/settings/MiscSettings.ts

@@ -0,0 +1,30 @@
+import CacheableSettings from "$lib/extension/base/CacheableSettings.ts";
+
+export type FullscreenViewerSize = 'small' | 'medium' | 'large' | 'full';
+
+interface MiscSettingsFields {
+  fullscreenViewer: boolean;
+  fullscreenViewerSize: FullscreenViewerSize;
+}
+
+export default class MiscSettings extends CacheableSettings<MiscSettingsFields> {
+  constructor() {
+    super("misc");
+  }
+
+  async resolveFullscreenViewerEnabled() {
+    return this._resolveSetting("fullscreenViewer", true);
+  }
+
+  async resolveFullscreenViewerPreviewSize() {
+    return this._resolveSetting('fullscreenViewerSize', 'large');
+  }
+
+  async setFullscreenViewerEnabled(isEnabled: boolean) {
+    return this._writeSetting("fullscreenViewer", isEnabled);
+  }
+
+  async setFullscreenViewerPreviewSize(size: FullscreenViewerSize | string) {
+    return this._writeSetting('fullscreenViewerSize', size as FullscreenViewerSize);
+  }
+}

src/lib/extension/settings/SearchSettings.js

@@ -1,42 +0,0 @@
-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
- */

src/lib/extension/settings/SearchSettings.ts

@@ -0,0 +1,28 @@
+import CacheableSettings from "$lib/extension/base/CacheableSettings.ts";
+
+interface SearchSettingsFields {
+  suggestProperties: boolean;
+  suggestPropertiesPosition: "start" | "end";
+}
+
+export default class SearchSettings extends CacheableSettings<SearchSettingsFields> {
+  constructor() {
+    super("search");
+  }
+
+  async resolvePropertiesSuggestionsEnabled() {
+    return this._resolveSetting("suggestProperties", false);
+  }
+
+  async resolvePropertiesSuggestionsPosition() {
+    return this._resolveSetting("suggestPropertiesPosition", "start");
+  }
+
+  async setPropertiesSuggestions(isEnabled: boolean) {
+    return this._writeSetting("suggestProperties", isEnabled);
+  }
+
+  async setPropertiesSuggestionsPosition(position: "start" | "end") {
+    return this._writeSetting("suggestPropertiesPosition", position);
+  }
+}

src/lib/extension/transporting/exporters.ts

@@ -13,6 +13,15 @@ const entitiesExporters: ExportersMap = {
       tags: entity.settings.tags,
     }
   },
+  groups: entity => {
+    return {
+      v: 1,
+      id: entity.id,
+      name: entity.settings.name,
+      tags: entity.settings.tags,
+      prefixes: entity.settings.prefixes,
+    }
+  }
 };
 
 export function exportEntityToObject(entityInstance: StorageEntity<any>, entityName: string): Record<string, any> {

src/lib/utils.js

@@ -21,3 +21,23 @@ export function findDeepObject(targetObject, path) {
 
   return result;
 }
+
+/**
+ * Matches all the characters needing replacement.
+ *
+ * Gathered from right here: https://stackoverflow.com/a/3561711/16048617. Because I don't want to introduce some
+ * library for that.
+ *
+ * @type {RegExp}
+ */
+const unsafeRegExpCharacters = /[/\-\\^$*+?.()|[\]{}]/g;
+
+/**
+ * Escape all the RegExp syntax-related characters in the following value.
+ * @param {string} value Original value.
+ * @return {string} Resulting value with all needed characters escaped.
+ */
+export function escapeRegExp(value) {
+  unsafeRegExpCharacters.lastIndex = 0;
+  return value.replace(unsafeRegExpCharacters, "\\$&");
+}

src/routes/+page.svelte

@@ -22,6 +22,7 @@
         <hr>
     {/if}
     <MenuItem href="/features/maintenance">Tagging Profiles</MenuItem>
+    <MenuItem href="/features/groups">Tag Groups</MenuItem>
     <hr>
     <MenuItem href="/preferences">Preferences</MenuItem>
     <MenuItem href="/about">About</MenuItem>

src/routes/features/groups/+page.svelte

@@ -0,0 +1,23 @@
+<script>
+    import Menu from "$components/ui/menu/Menu.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
+    import { tagGroupsStore } from "$stores/tag-groups-store.js";
+
+    /** @type {import('$entities/TagGroup.ts').default[]} */
+    let groups = [];
+
+    $: groups = $tagGroupsStore.sort((a, b) => a.settings.name.localeCompare(b.settings.name));
+</script>
+
+<Menu>
+    <MenuItem href="/" icon="arrow-left">Back</MenuItem>
+    <MenuItem href="/features/groups/new/edit" icon="plus">Create New</MenuItem>
+    {#if groups.length}
+        <hr>
+        {#each groups as group}
+            <MenuItem href="/features/groups/{group.id}">{group.settings.name}</MenuItem>
+        {/each}
+    {/if}
+    <hr>
+    <MenuItem href="/features/groups/import">Import Group</MenuItem>
+</Menu>

src/routes/features/groups/[id]/+page.svelte

@@ -0,0 +1,39 @@
+<script>
+    import { goto } from "$app/navigation";
+    import { page } from "$app/stores";
+    import GroupView from "$components/features/GroupView.svelte";
+    import Menu from "$components/ui/menu/Menu.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
+    import { tagGroupsStore } from "$stores/tag-groups-store.js";
+
+    const groupId = $page.params.id;
+    /** @type {import('$entities/TagGroup.ts').default|null} */
+    let group = null;
+
+    if (groupId==='new') {
+        goto('/features/groups/new/edit');
+    }
+
+    $: {
+        group = $tagGroupsStore.find(group => group.id===groupId) || null;
+
+        if (!group) {
+            console.warn(`Group ${ groupId } not found.`);
+            goto('/features/groups');
+        }
+    }
+</script>
+
+<Menu>
+    <MenuItem href="/features/groups" icon="arrow-left">Back</MenuItem>
+    <hr>
+</Menu>
+{#if group}
+    <GroupView {group}/>
+{/if}
+<Menu>
+    <hr>
+    <MenuItem href="/features/groups/{groupId}/edit" icon="wrench">Edit Group</MenuItem>
+    <MenuItem href="/features/groups/{groupId}/export" icon="file-export">Export Group</MenuItem>
+    <MenuItem href="/features/groups/{groupId}/delete" icon="trash">Delete Group</MenuItem>
+</Menu>

src/routes/features/groups/[id]/delete/+page.svelte

@@ -0,0 +1,41 @@
+<script>
+    import { goto } from "$app/navigation";
+    import { page } from "$app/stores";
+    import Menu from "$components/ui/menu/Menu.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
+    import { tagGroupsStore } from "$stores/tag-groups-store.js";
+
+    const groupId = $page.params.id;
+    const targetGroup = $tagGroupsStore.find(group => group.id===groupId);
+
+    if (!targetGroup) {
+        void goto('/features/groups');
+    }
+
+    async function deleteGroup() {
+        if (!targetGroup) {
+            console.warn('Attempting to delete the group, but the group is not loaded yet.');
+            return;
+        }
+
+        await targetGroup.delete();
+        await goto('/features/groups');
+    }
+</script>
+
+<Menu>
+    <MenuItem icon="arrow-left" href="/features/groups/{groupId}">Back</MenuItem>
+    <hr>
+</Menu>
+{#if targetGroup}
+    <p>
+        Do you want to remove group "{targetGroup.settings.name}"? This action is irreversible.
+    </p>
+    <Menu>
+        <hr>
+        <MenuItem on:click={deleteGroup}>Yes</MenuItem>
+        <MenuItem href="/features/groups/{groupId}">No</MenuItem>
+    </Menu>
+{:else}
+    <p>Loading...</p>
+{/if}

src/routes/features/groups/[id]/edit/+page.svelte

@@ -0,0 +1,82 @@
+<script>
+    import {goto} from "$app/navigation";
+    import {page} from "$app/stores";
+    import TagsColorContainer from "$components/tags/TagsColorContainer.svelte";
+    import FormContainer from "$components/ui/forms/FormContainer.svelte";
+    import FormControl from "$components/ui/forms/FormControl.svelte";
+    import TagCategorySelectField from "$components/ui/forms/TagCategorySelectField.svelte";
+    import TextField from "$components/ui/forms/TextField.svelte";
+    import Menu from "$components/ui/menu/Menu.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
+    import TagsEditor from "$components/web-components/TagsEditor.svelte";
+    import TagGroup from "$entities/TagGroup.ts";
+    import {tagGroupsStore} from "$stores/tag-groups-store.js";
+
+    const groupId = $page.params.id;
+    /** @type {TagGroup|null} */
+    let targetGroup = null;
+
+    let groupName = '';
+    /** @type {string[]} */
+    let tagsList = [];
+    /** @type {string[]} */
+    let prefixesList = [];
+    let tagCategory = '';
+
+    if (groupId==='new') {
+        targetGroup = new TagGroup(crypto.randomUUID(), {});
+    } else {
+        targetGroup = $tagGroupsStore.find(group => group.id===groupId) || null;
+
+        if (targetGroup) {
+            groupName = targetGroup.settings.name;
+            tagsList = [...targetGroup.settings.tags].sort((a, b) => a.localeCompare(b));
+            prefixesList = [...targetGroup.settings.prefixes].sort((a, b) => a.localeCompare(b));
+            tagCategory = targetGroup.settings.category;
+        } else {
+            goto('/features/groups');
+        }
+    }
+
+    async function saveGroup() {
+        if (!targetGroup) {
+            console.warn('Attempting to save group, but group is not loaded yet.');
+            return;
+        }
+
+        targetGroup.settings.name = groupName;
+        targetGroup.settings.tags = [...tagsList];
+        targetGroup.settings.prefixes = [...prefixesList];
+        targetGroup.settings.category = tagCategory;
+
+        await targetGroup.save();
+        await goto(`/features/groups/${targetGroup.id}`);
+    }
+</script>
+
+<Menu>
+    <MenuItem href="/features/groups/${groupId}" icon="arrow-left">Back</MenuItem>
+    <hr>
+</Menu>
+<FormContainer>
+    <FormControl label="Group Name">
+        <TextField bind:value={groupName} placeholder="Group Name"></TextField>
+    </FormControl>
+    <FormControl label="Group Color">
+        <TagCategorySelectField bind:value={tagCategory}/>
+    </FormControl>
+    <TagsColorContainer targetCategory="{tagCategory}">
+        <FormControl label="Tags">
+            <TagsEditor bind:tags={tagsList}/>
+        </FormControl>
+    </TagsColorContainer>
+    <TagsColorContainer targetCategory="{tagCategory}">
+        <FormControl label="Tag Prefixes">
+            <TagsEditor bind:tags={prefixesList}/>
+        </FormControl>
+    </TagsColorContainer>
+</FormContainer>
+<Menu>
+    <hr>
+    <MenuItem on:click={saveGroup}>Save Group</MenuItem>
+</Menu>

src/routes/features/groups/[id]/export/+page.svelte

@@ -0,0 +1,50 @@
+<script>
+    import { goto } from "$app/navigation";
+    import { page } from "$app/stores";
+    import FormContainer from "$components/ui/forms/FormContainer.svelte";
+    import FormControl from "$components/ui/forms/FormControl.svelte";
+    import Menu from "$components/ui/menu/Menu.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
+    import TagGroup from "$entities/TagGroup.ts";
+    import EntitiesTransporter from "$lib/extension/EntitiesTransporter.ts";
+    import { tagGroupsStore } from "$stores/tag-groups-store.js";
+
+    const groupId = $page.params.id;
+    const groupTransporter = new EntitiesTransporter(TagGroup);
+    const group = $tagGroupsStore.find(group => group.id===groupId);
+
+    /** @type {string} */
+    let rawExportedGroup;
+    /** @type {string} */
+    let encodedExportedGroup;
+
+    if (!group) {
+        goto('/features/groups');
+    } else {
+        rawExportedGroup = groupTransporter.exportToJSON(group);
+        encodedExportedGroup = groupTransporter.exportToCompressedJSON(group);
+    }
+
+    let isEncodedGroupShown = true;
+</script>
+
+<Menu>
+    <MenuItem href="/features/groups/{groupId}" icon="arrow-left">Back</MenuItem>
+    <hr>
+</Menu>
+<FormContainer>
+    <FormControl label="Export string">
+        <textarea readonly rows="6">{isEncodedGroupShown ? encodedExportedGroup : rawExportedGroup}</textarea>
+    </FormControl>
+</FormContainer>
+<Menu>
+    <hr>
+    <MenuItem on:click={() => isEncodedGroupShown = !isEncodedGroupShown}>
+        Switch Format:
+        {#if isEncodedGroupShown}
+            Base64-Encoded
+        {:else}
+            Raw JSON
+        {/if}
+    </MenuItem>
+</Menu>

src/routes/features/groups/import/+page.svelte

@@ -0,0 +1,134 @@
+<script>
+    import { goto } from "$app/navigation";
+    import GroupView from "$components/features/GroupView.svelte";
+    import FormContainer from "$components/ui/forms/FormContainer.svelte";
+    import FormControl from "$components/ui/forms/FormControl.svelte";
+    import Menu from "$components/ui/menu/Menu.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
+    import TagGroup from "$entities/TagGroup.ts";
+    import EntitiesTransporter from "$lib/extension/EntitiesTransporter.ts";
+    import { tagGroupsStore } from "$stores/tag-groups-store.js";
+
+    const groupTransporter = new EntitiesTransporter(TagGroup);
+
+    /** @type {string} */
+    let importedString = '';
+    /** @type {string} */
+    let errorMessage = '';
+
+    /** @type {TagGroup|null} */
+    let candidateGroup = null;
+    /** @type {TagGroup|null} */
+    let existingGroup = null;
+
+    function tryImportingGroup() {
+        candidateGroup = null;
+        existingGroup = null;
+
+        errorMessage = '';
+        importedString = importedString.trim();
+
+        if (!importedString) {
+            errorMessage = 'Nothing to import.';
+            return;
+        }
+
+        try {
+            if (importedString.trim().startsWith('{')) {
+                candidateGroup = groupTransporter.importFromJSON(importedString);
+            }
+
+            candidateGroup = groupTransporter.importFromCompressedJSON(importedString);
+        } catch (error) {
+            errorMessage = error instanceof Error
+                    ? error.message
+                    :'Unknown error';
+        }
+
+        if (candidateGroup) {
+            existingGroup = $tagGroupsStore.find(group => group.id===candidateGroup?.id) ?? null;
+        }
+    }
+
+    function saveGroup() {
+        if (!candidateGroup) {
+            return;
+        }
+
+        candidateGroup.save().then(() => {
+            goto(`/features/groups`);
+        });
+    }
+
+    function cloneAndSaveGroup() {
+        if (!candidateGroup) {
+            return;
+        }
+
+        const clonedProfile = new TagGroup(crypto.randomUUID(), candidateGroup.settings);
+        clonedProfile.settings.name += ` (Clone ${ new Date().toISOString() })`;
+        clonedProfile.save().then(() => {
+            goto(`/features/groups`);
+        });
+    }
+</script>
+
+<Menu>
+    <MenuItem icon="arrow-left" href="/features/groups">Back</MenuItem>
+    <hr>
+</Menu>
+{#if errorMessage}
+    <p class="error">Failed to import: {errorMessage}</p>
+    <Menu>
+        <hr>
+    </Menu>
+{/if}
+{#if !candidateGroup}
+    <FormContainer>
+        <FormControl label="Import string">
+            <textarea bind:value={importedString} rows="6"></textarea>
+        </FormControl>
+    </FormContainer>
+    <Menu>
+        <hr>
+        <MenuItem on:click={tryImportingGroup}>Import</MenuItem>
+    </Menu>
+{:else}
+    {#if existingGroup}
+        <p class="warning">
+            This group will replace the existing "{existingGroup.settings.name}" group, since it have the same ID.
+        </p>
+    {/if}
+    <GroupView group="{candidateGroup}"></GroupView>
+    <Menu>
+        <hr>
+        {#if existingGroup}
+            <MenuItem on:click={saveGroup}>Replace Existing Group</MenuItem>
+            <MenuItem on:click={cloneAndSaveGroup}>Save as New Group</MenuItem>
+        {:else}
+            <MenuItem on:click={saveGroup}>Import New Group</MenuItem>
+        {/if}
+        <MenuItem on:click={() => candidateGroup = null}>Cancel</MenuItem>
+    </Menu>
+{/if}
+
+<style lang="scss">
+    @use '$styles/colors';
+
+    .error, .warning {
+        padding: 5px 24px;
+        margin: {
+            left: -24px;
+            right: -24px;
+        }
+    }
+
+    .error {
+        background: colors.$error-background;
+    }
+
+    .warning {
+        background: colors.$warning-background;
+        margin-bottom: .5em;
+    }
+</style>

src/routes/features/maintenance/[id]/+page.svelte

@@ -5,18 +5,18 @@
     import {goto} from "$app/navigation";
     import {activeProfileStore, maintenanceProfilesStore} from "$stores/maintenance-profiles-store.js";
     import ProfileView from "$components/maintenance/ProfileView.svelte";
+    import MenuCheckboxItem from "$components/ui/menu/MenuCheckboxItem.svelte";
 
     const profileId = $page.params.id;
     /** @type {import('$entities/MaintenanceProfile.ts').default|null} */
     let profile = null;
-    let isActiveProfile = false;
 
-    if (profileId === 'new') {
-        goto('/maintenance/profiles/new/edit');
+    if (profileId==='new') {
+        goto('/features/maintenance/new/edit');
     }
 
     $: {
-        const resolvedProfile = $maintenanceProfilesStore.find(profile => profile.id === profileId);
+        const resolvedProfile = $maintenanceProfilesStore.find(profile => profile.id===profileId);
 
         if (resolvedProfile) {
             profile = resolvedProfile;
@@ -26,14 +26,16 @@
         }
     }
 
-    $: isActiveProfile = $activeProfileStore === profileId;
+    let isActiveProfile = $activeProfileStore===profileId;
 
-    function activateProfile() {
-        if (isActiveProfile) {
-            return;
+    $: {
+        if (isActiveProfile && $activeProfileStore!==profileId) {
+            $activeProfileStore = profileId;
         }
 
-        $activeProfileStore = profileId;
+        if (!isActiveProfile && $activeProfileStore===profileId) {
+            $activeProfileStore = null;
+        }
     }
 </script>
 
@@ -47,13 +49,9 @@
 <Menu>
     <hr>
     <MenuItem icon="wrench" href="/features/maintenance/{profileId}/edit">Edit Profile</MenuItem>
-    <MenuItem icon="tag" href="#" on:click={activateProfile}>
-        {#if isActiveProfile}
-            <span>Profile is Active</span>
-        {:else}
-            <span>Activate Profile</span>
-        {/if}
-    </MenuItem>
+    <MenuCheckboxItem bind:checked={isActiveProfile}>
+        Activate Profile
+    </MenuCheckboxItem>
     <MenuItem icon="file-export" href="/features/maintenance/{profileId}/export">
         Export Profile
     </MenuItem>

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

@@ -42,6 +42,7 @@
 
         targetProfile.settings.name = profileName;
         targetProfile.settings.tags = [...tagsList];
+        targetProfile.settings.temporary = false;
 
         await targetProfile.save();
         await goto('/features/maintenance/' + targetProfile.id);

src/routes/features/maintenance/import/+page.svelte

@@ -113,7 +113,7 @@
 {/if}
 
 <style lang="scss">
-    @use '../../../../styles/colors';
+    @use '$styles/colors';
 
     .error, .warning {
         padding: 5px 24px;

src/routes/preferences/+page.svelte

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

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

@@ -0,0 +1,20 @@
+<script>
+    import CheckboxField from "$components/ui/forms/CheckboxField.svelte";
+    import FormContainer from "$components/ui/forms/FormContainer.svelte";
+    import FormControl from "$components/ui/forms/FormControl.svelte";
+    import Menu from "$components/ui/menu/Menu.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
+    import { stripBlacklistedTagsEnabled } from "$stores/maintenance-preferences.ts";
+</script>
+
+<Menu>
+    <MenuItem icon="arrow-left" href="/preferences">Back</MenuItem>
+    <hr>
+</Menu>
+<FormContainer>
+    <FormControl>
+        <CheckboxField bind:checked={$stripBlacklistedTagsEnabled}>
+            Automatically remove black-listed tags from the images
+        </CheckboxField>
+    </FormControl>
+</FormContainer>

src/stores/maintenance-preferences.ts

@@ -0,0 +1,18 @@
+import {writable} from "svelte/store";
+import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings.ts";
+
+export const stripBlacklistedTagsEnabled = writable(true);
+
+const maintenanceSettings = new MaintenanceSettings();
+
+Promise
+  .all([
+    maintenanceSettings.resolveStripBlacklistedTags().then(v => stripBlacklistedTagsEnabled.set(v ?? true))
+  ])
+  .then(() => {
+    maintenanceSettings.subscribe(settings => {
+      stripBlacklistedTagsEnabled.set(typeof settings.stripBlacklistedTags === 'boolean' ? settings.stripBlacklistedTags : true);
+    });
+
+    stripBlacklistedTagsEnabled.subscribe(v => maintenanceSettings.setStripBlacklistedTags(v));
+  });

src/stores/maintenance-profiles-store.js

@@ -1,6 +1,6 @@
 import {writable} from "svelte/store";
 import MaintenanceProfile from "$entities/MaintenanceProfile.ts";
-import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings.js";
+import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings.ts";
 
 /**
  * Store for working with maintenance profiles in the Svelte popup.

src/stores/misc-preferences.js

@@ -1,5 +1,5 @@
 import {writable} from "svelte/store";
-import MiscSettings from "$lib/extension/settings/MiscSettings.js";
+import MiscSettings from "$lib/extension/settings/MiscSettings.ts";
 
 export const fullScreenViewerEnabled = writable(true);
 
@@ -13,6 +13,6 @@ Promise.allSettled([
   });
 
   miscSettings.subscribe(settings => {
-    fullScreenViewerEnabled.set(settings.fullscreenViewer);
+    fullScreenViewerEnabled.set(Boolean(settings.fullscreenViewer));
   });
 });

src/stores/search-preferences.js

@@ -1,5 +1,5 @@
 import {writable} from "svelte/store";
-import SearchSettings from "$lib/extension/settings/SearchSettings.js";
+import SearchSettings from "$lib/extension/settings/SearchSettings.ts";
 
 export const searchPropertiesSuggestionsEnabled = writable(false);
 
@@ -23,7 +23,7 @@ Promise.allSettled([
   });
 
   searchSettings.subscribe(settings => {
-    searchPropertiesSuggestionsEnabled.set(settings.suggestProperties);
-    searchPropertiesSuggestionsPosition.set(settings.suggestPropertiesPosition);
+    searchPropertiesSuggestionsEnabled.set(Boolean(settings.suggestProperties));
+    searchPropertiesSuggestionsPosition.set(settings.suggestPropertiesPosition || 'start');
   });
 })

src/stores/tag-groups-store.js

@@ -0,0 +1,12 @@
+import {writable} from "svelte/store";
+import TagGroup from "$entities/TagGroup.ts";
+
+/** @type {import('svelte/store').Writable<TagGroup[]>} */
+export const tagGroupsStore = writable([]);
+
+TagGroup
+  .readAll()
+  .then(groups => tagGroupsStore.set(groups))
+  .then(() => {
+    TagGroup.subscribe(groups => tagGroupsStore.set(groups));
+  });

src/styles/colors.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $background: #15121a;
 
 $text: #dadada;
@@ -25,6 +27,27 @@ $tag-background: #1b3c21;
 $tag-count-background: #2d6236;
 $tag-text: #4aa158;
 
+$tag-rating-text: #418dd9;
+$tag-rating-background: color.adjust($tag-rating-text, $lightness: -35%);
+$tag-spoiler-text: #d49b39;
+$tag-spoiler-background: color.adjust($tag-spoiler-text, $lightness: -34%);
+$tag-origin-text: #6f66d6;
+$tag-origin-background: color.adjust($tag-origin-text, $lightness: -40%);
+$tag-oc-text: #b157b7;
+$tag-oc-background: color.adjust($tag-oc-text, $lightness: -33%);
+$tag-error-text: #d45460;
+$tag-error-background: color.adjust($tag-error-text, $lightness: -38%, $saturation: -6%, $space: hsl);
+$tag-character-text: #4aaabf;
+$tag-character-background: color.adjust($tag-character-text, $lightness: -33%);
+$tag-content-official-text: #b9b541;
+$tag-content-official-background: color.adjust($tag-content-official-text, $lightness: -29%, $saturation: -2%, $space: hsl);
+$tag-content-fanmade-text: #cc8eb5;
+$tag-content-fanmade-background: color.adjust($tag-content-fanmade-text, $lightness: -40%);
+$tag-species-text: #b16b50;
+$tag-species-background: color.adjust($tag-species-text, $lightness: -35%);
+$tag-body-type-text: #b8b8b8;
+$tag-body-type-background: color.adjust($tag-body-type-text, $lightness: -35%, $saturation: -10%, $space: hsl);
+
 $input-background: #26232d;
 $input-border: #5c5a61;
 

src/styles/content/header.scss

@@ -0,0 +1,9 @@
+.autocomplete {
+  &__item {
+    &--property {
+      i {
+        margin-right: .5em;
+      }
+    }
+  }
+}

src/styles/content/listing.scss

@@ -70,6 +70,11 @@
         color: colors.$tag-background;
       }
 
+      &[data-tag-category=error]:hover {
+        background: colors.$tag-error-text;
+        color: colors.$tag-error-background;
+      }
+
       &.is-missing:not(.is-added),
       &.is-present.is-removed {
         opacity: 0.5;
@@ -194,6 +199,30 @@
     transition: opacity .25s ease;
   }
 
+  .size-selector {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    z-index: 1;
+  }
+
+  .close {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    z-index: 1;
+    padding: 5px;
+    background-color: colors.$text;
+    color: colors.$background;
+    font-size: 20px;
+    line-height: 20px;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    display: block;
+    cursor: pointer;
+  }
+
   &.shown {
     opacity: var(--opacity, 1);
     pointer-events: initial;

src/styles/injectable/base-styles.scss

@@ -0,0 +1,40 @@
+@use '../colors';
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+body {
+  width: 320px;
+
+  // Hacky class which is added by the JavaScript indicating that page was (probably) opened in the tab
+  &.is-in-tab {
+    width: 100%;
+    max-width: 640px;
+    margin: 0 auto;
+  }
+}
+
+html, body {
+  background-color: colors.$background;
+  color: colors.$text;
+  font-size: 16px;
+  font-family: verdana, arial, helvetica, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: colors.$link;
+  text-decoration: none;
+
+  &:hover, &:focus {
+    color: colors.$link-hover;
+  }
+}

src/styles/popup.scss

@@ -1,44 +1,5 @@
-@use './colors';
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  text-decoration: none;
-  color: inherit;
-  font-family: inherit;
-  font-size: inherit;
-}
-
-body {
-  width: 320px;
-
-  // Hacky class which is added by the JavaScript indicating that page was (probably) opened in the tab
-  &.is-in-tab {
-    width: 100%;
-    max-width: 640px;
-    margin: 0 auto;
-  }
-}
-
-html, body {
-  background-color: colors.$background;
-  color: colors.$text;
-  font-size: 16px;
-  font-family: verdana, arial, helvetica, sans-serif;
-  margin: 0;
-  padding: 0;
-}
-
-a {
-  color: colors.$link;
-  text-decoration: none;
-
-  &:hover, &:focus {
-    color: colors.$link-hover;
-  }
-}
-
-@import "injectable/input";
-@import "injectable/tag";
-@import "injectable/icons";
+@use 'colors';
+@use 'injectable/base-styles';
+@use 'injectable/input';
+@use 'injectable/tag';
+@use 'injectable/icons';

svelte.config.js

@@ -14,6 +14,7 @@ const config = {
       name: Date.now().toString(36)
     },
     alias: {
+      "$config": "./src/config",
       "$components": "./src/components",
       "$styles": "./src/styles",
       "$stores": "./src/stores",