Merge pull request #86 from koloml/release/0.4.1

Release: 0.4.1

.editorconfig

@@ -204,7 +204,7 @@ ij_javascript_spaces_within_brackets = false
 ij_javascript_spaces_within_catch_parentheses = false
 ij_javascript_spaces_within_for_parentheses = false
 ij_javascript_spaces_within_if_parentheses = false
-ij_javascript_spaces_within_imports = false
+ij_javascript_spaces_within_imports = true
 ij_javascript_spaces_within_interpolation_expressions = false
 ij_javascript_spaces_within_method_call_parentheses = false
 ij_javascript_spaces_within_method_parentheses = false
@@ -221,7 +221,7 @@ ij_javascript_ternary_operation_wrap = off
 ij_javascript_union_types_wrap = on_every_item
 ij_javascript_use_chained_calls_group_indents = false
 ij_javascript_use_double_quotes = true
-ij_javascript_use_explicit_js_extension = auto
+ij_javascript_use_explicit_js_extension = never
 ij_javascript_use_import_type = auto
 ij_javascript_use_path_mapping = always
 ij_javascript_use_public_modifier = false
@@ -231,6 +231,178 @@ ij_javascript_while_brace_force = never
 ij_javascript_while_on_new_line = false
 ij_javascript_wrap_comments = false
 
+[{*.ts,*.tsx}]
+indent_size = 2
+tab_width = 2
+ij_continuation_indent_size = 2
+ij_typescript_align_imports = false
+ij_typescript_align_multiline_array_initializer_expression = false
+ij_typescript_align_multiline_binary_operation = false
+ij_typescript_align_multiline_chained_methods = false
+ij_typescript_align_multiline_extends_list = false
+ij_typescript_align_multiline_for = true
+ij_typescript_align_multiline_parameters = true
+ij_typescript_align_multiline_parameters_in_calls = false
+ij_typescript_align_multiline_ternary_operation = false
+ij_typescript_align_object_properties = 0
+ij_typescript_align_union_types = false
+ij_typescript_align_var_statements = 0
+ij_typescript_array_initializer_new_line_after_left_brace = false
+ij_typescript_array_initializer_right_brace_on_new_line = false
+ij_typescript_array_initializer_wrap = off
+ij_typescript_assignment_wrap = off
+ij_typescript_binary_operation_sign_on_next_line = false
+ij_typescript_binary_operation_wrap = off
+ij_typescript_blacklist_imports = rxjs/Rx, node_modules/**, **/node_modules/**, @angular/material, @angular/material/typings/**
+ij_typescript_blank_lines_after_imports = 1
+ij_typescript_blank_lines_around_class = 1
+ij_typescript_blank_lines_around_field = 0
+ij_typescript_blank_lines_around_function = 1
+ij_typescript_blank_lines_around_method = 1
+ij_typescript_block_brace_style = end_of_line
+ij_typescript_block_comment_add_space = false
+ij_typescript_block_comment_at_first_column = true
+ij_typescript_call_parameters_new_line_after_left_paren = false
+ij_typescript_call_parameters_right_paren_on_new_line = false
+ij_typescript_call_parameters_wrap = off
+ij_typescript_catch_on_new_line = false
+ij_typescript_chained_call_dot_on_new_line = true
+ij_typescript_class_brace_style = end_of_line
+ij_typescript_comma_on_new_line = false
+ij_typescript_do_while_brace_force = never
+ij_typescript_else_on_new_line = false
+ij_typescript_enforce_trailing_comma = keep
+ij_typescript_extends_keyword_wrap = off
+ij_typescript_extends_list_wrap = off
+ij_typescript_field_prefix = _
+ij_typescript_file_name_style = relaxed
+ij_typescript_finally_on_new_line = false
+ij_typescript_for_brace_force = never
+ij_typescript_for_statement_new_line_after_left_paren = false
+ij_typescript_for_statement_right_paren_on_new_line = false
+ij_typescript_for_statement_wrap = off
+ij_typescript_force_quote_style = false
+ij_typescript_force_semicolon_style = false
+ij_typescript_function_expression_brace_style = end_of_line
+ij_typescript_if_brace_force = never
+ij_typescript_import_merge_members = global
+ij_typescript_import_prefer_absolute_path = global
+ij_typescript_import_sort_members = true
+ij_typescript_import_sort_module_name = false
+ij_typescript_import_use_node_resolution = true
+ij_typescript_imports_wrap = on_every_item
+ij_typescript_indent_case_from_switch = true
+ij_typescript_indent_chained_calls = true
+ij_typescript_indent_package_children = 0
+ij_typescript_jsx_attribute_value = braces
+ij_typescript_keep_blank_lines_in_code = 2
+ij_typescript_keep_first_column_comment = true
+ij_typescript_keep_indents_on_empty_lines = false
+ij_typescript_keep_line_breaks = true
+ij_typescript_keep_simple_blocks_in_one_line = false
+ij_typescript_keep_simple_methods_in_one_line = false
+ij_typescript_line_comment_add_space = true
+ij_typescript_line_comment_at_first_column = false
+ij_typescript_method_brace_style = end_of_line
+ij_typescript_method_call_chain_wrap = off
+ij_typescript_method_parameters_new_line_after_left_paren = false
+ij_typescript_method_parameters_right_paren_on_new_line = false
+ij_typescript_method_parameters_wrap = off
+ij_typescript_object_literal_wrap = on_every_item
+ij_typescript_object_types_wrap = on_every_item
+ij_typescript_parentheses_expression_new_line_after_left_paren = false
+ij_typescript_parentheses_expression_right_paren_on_new_line = false
+ij_typescript_place_assignment_sign_on_next_line = false
+ij_typescript_prefer_as_type_cast = false
+ij_typescript_prefer_explicit_types_function_expression_returns = false
+ij_typescript_prefer_explicit_types_function_returns = false
+ij_typescript_prefer_explicit_types_vars_fields = false
+ij_typescript_prefer_parameters_wrap = false
+ij_typescript_property_prefix =
+ij_typescript_reformat_c_style_comments = false
+ij_typescript_space_after_colon = true
+ij_typescript_space_after_comma = true
+ij_typescript_space_after_dots_in_rest_parameter = false
+ij_typescript_space_after_generator_mult = true
+ij_typescript_space_after_property_colon = true
+ij_typescript_space_after_quest = true
+ij_typescript_space_after_type_colon = true
+ij_typescript_space_after_unary_not = false
+ij_typescript_space_before_async_arrow_lparen = true
+ij_typescript_space_before_catch_keyword = true
+ij_typescript_space_before_catch_left_brace = true
+ij_typescript_space_before_catch_parentheses = true
+ij_typescript_space_before_class_lbrace = true
+ij_typescript_space_before_class_left_brace = true
+ij_typescript_space_before_colon = true
+ij_typescript_space_before_comma = false
+ij_typescript_space_before_do_left_brace = true
+ij_typescript_space_before_else_keyword = true
+ij_typescript_space_before_else_left_brace = true
+ij_typescript_space_before_finally_keyword = true
+ij_typescript_space_before_finally_left_brace = true
+ij_typescript_space_before_for_left_brace = true
+ij_typescript_space_before_for_parentheses = true
+ij_typescript_space_before_for_semicolon = false
+ij_typescript_space_before_function_left_parenth = true
+ij_typescript_space_before_generator_mult = false
+ij_typescript_space_before_if_left_brace = true
+ij_typescript_space_before_if_parentheses = true
+ij_typescript_space_before_method_call_parentheses = false
+ij_typescript_space_before_method_left_brace = true
+ij_typescript_space_before_method_parentheses = false
+ij_typescript_space_before_property_colon = false
+ij_typescript_space_before_quest = true
+ij_typescript_space_before_switch_left_brace = true
+ij_typescript_space_before_switch_parentheses = true
+ij_typescript_space_before_try_left_brace = true
+ij_typescript_space_before_type_colon = false
+ij_typescript_space_before_unary_not = false
+ij_typescript_space_before_while_keyword = true
+ij_typescript_space_before_while_left_brace = true
+ij_typescript_space_before_while_parentheses = true
+ij_typescript_spaces_around_additive_operators = true
+ij_typescript_spaces_around_arrow_function_operator = true
+ij_typescript_spaces_around_assignment_operators = true
+ij_typescript_spaces_around_bitwise_operators = true
+ij_typescript_spaces_around_equality_operators = true
+ij_typescript_spaces_around_logical_operators = true
+ij_typescript_spaces_around_multiplicative_operators = true
+ij_typescript_spaces_around_relational_operators = true
+ij_typescript_spaces_around_shift_operators = true
+ij_typescript_spaces_around_unary_operator = false
+ij_typescript_spaces_within_array_initializer_brackets = false
+ij_typescript_spaces_within_brackets = false
+ij_typescript_spaces_within_catch_parentheses = false
+ij_typescript_spaces_within_for_parentheses = false
+ij_typescript_spaces_within_if_parentheses = false
+ij_typescript_spaces_within_imports = true
+ij_typescript_spaces_within_interpolation_expressions = false
+ij_typescript_spaces_within_method_call_parentheses = false
+ij_typescript_spaces_within_method_parentheses = false
+ij_typescript_spaces_within_object_literal_braces = false
+ij_typescript_spaces_within_object_type_braces = true
+ij_typescript_spaces_within_parentheses = false
+ij_typescript_spaces_within_switch_parentheses = false
+ij_typescript_spaces_within_type_assertion = false
+ij_typescript_spaces_within_union_types = true
+ij_typescript_spaces_within_while_parentheses = false
+ij_typescript_special_else_if_treatment = true
+ij_typescript_ternary_operation_signs_on_next_line = false
+ij_typescript_ternary_operation_wrap = off
+ij_typescript_union_types_wrap = on_every_item
+ij_typescript_use_chained_calls_group_indents = false
+ij_typescript_use_double_quotes = true
+ij_typescript_use_explicit_js_extension = never
+ij_typescript_use_import_type = auto
+ij_typescript_use_path_mapping = always
+ij_typescript_use_public_modifier = false
+ij_typescript_use_semicolon_after_statement = true
+ij_typescript_var_declaration_wrap = normal
+ij_typescript_while_brace_force = never
+ij_typescript_while_on_new_line = false
+ij_typescript_wrap_comments = false
+
 [{*.htm,*.html,*.sht,*.shtm,*.shtml}]
 ij_html_add_new_line_before_tags = body, div, p, form, h1, h2, h3
 ij_html_align_attributes = true

.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'),
@@ -111,6 +112,9 @@ export async function buildStyle(buildOptions) {
         }
       },
       emptyOutDir: false,
+    },
+    resolve: {
+      alias: makeAliases(buildOptions.rootDir)
     }
   });
 

README.md

@@ -1,4 +1,29 @@
 # Furbooru Tagging Assistant
 
+[![Get the Add-on on Firefox](.github/assets/firefox.png)](https://addons.mozilla.org/en-US/firefox/addon/furbooru-tagging-assistant/)
+[![Get the extension on Chrome](.github/assets/chrome.png)](https://chromewebstore.google.com/detail/kpgaphaooaaodgodmnkamhmoedjcnfkj)
+
 This is a browser extension written for the [Furbooru](https://furbooru.org) image-board. It gives you the ability to
-tag the images more easily and quickly.
+tag the images more easily and quickly.
+
+## Building
+
+Recommendations on environment:
+
+- Recommended version of Node.js: LTS (20)
+
+First you need to clone the repository and install all packages:
+
+```shell
+npm install --save-dev
+```
+
+Second, you need to run the `build` command. It will first build the popup using SvelteKit and then build all the 
+content scripts/stylesheets and copy the manifest afterward. Simply run:
+
+```shell
+npm run build
+```
+
+When building is complete, resulting files can be found in the `/build` directory. These files can be either used 
+directly in Chrome (via loading the extension as unpacked extension) or manually compressed into `*.zip` file.  

jsconfig.json

@@ -1,18 +0,0 @@
-{
-    "extends": "./.svelte-kit/tsconfig.json",
-    "compilerOptions": {
-        "allowJs": true,
-        "checkJs": true,
-        "esModuleInterop": true,
-        "forceConsistentCasingInFileNames": true,
-        "resolveJsonModule": true,
-        "skipLibCheck": true,
-        "sourceMap": true,
-        "strict": true,
-        "moduleResolution": "bundler"
-    }
-    // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
-    //
-    // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-    // from the referenced tsconfig.json - TypeScript does not merge them in
-}

manifest.json

@@ -1,7 +1,12 @@
 {
     "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.1.0",
+    "version": "0.4.1",
+    "browser_specific_settings": {
+        "gecko": {
+            "id": "furbooru-tagging-assistant@thecore.city"
+        }
+    },
     "icons": {
         "16": "icon16.png",
         "48": "icon48.png",
@@ -18,7 +23,8 @@
                 "*://*.furbooru.org/",
                 "*://*.furbooru.org/images?*",
                 "*://*.furbooru.org/search?*",
-                "*://*.furbooru.org/tags/*"
+                "*://*.furbooru.org/tags/*",
+                "*://*.furbooru.org/galleries/*"
             ],
             "js": [
                 "src/content/listing.js"
@@ -37,6 +43,32 @@
             "css": [
                 "src/styles/content/header.scss"
             ]
+        },
+        {
+            "matches": [
+                "*://*.furbooru.org/images?*",
+                "*://*.furbooru.org/images/*",
+                "*://*.furbooru.org/images/*/tag_changes",
+                "*://*.furbooru.org/images/*/tag_changes?*",
+                "*://*.furbooru.org/search?*",
+                "*://*.furbooru.org/tags",
+                "*://*.furbooru.org/tags?*",
+                "*://*.furbooru.org/tags/*",
+                "*://*.furbooru.org/profiles/*/tag_changes",
+                "*://*.furbooru.org/profiles/*/tag_changes?*",
+                "*://*.furbooru.org/filters/*"
+            ],
+            "js": [
+                "src/content/tags.js"
+            ]
+        },
+        {
+            "matches": [
+                "*://*.furbooru.org/images/*"
+            ],
+            "js": [
+                "src/content/tags-editor.js"
+            ]
         }
     ],
     "action": {

package.json

@@ -1,26 +1,30 @@
 {
     "name": "furbooru-tagging-assistant",
-    "version": "0.1.0",
+    "version": "0.4.1",
     "private": true,
     "scripts": {
         "build": "npm run build:popup && npm run build:extension",
         "build:popup": "vite build",
         "build:extension": "node build-extension.js",
-        "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
-        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"
+        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+        "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",
-        "@types/chrome": "^0.0.262",
-        "cheerio": "^1.0.0-rc.12",
-        "sass": "^1.71.0",
-        "svelte": "^4.2.7",
-        "svelte-check": "^3.6.0",
-        "typescript": "^5.0.0",
-        "vite": "^5.0.3"
+        "@sveltejs/adapter-auto": "^4.0.0",
+        "@sveltejs/adapter-static": "^3.0.8",
+        "@sveltejs/kit": "^2.17.2",
+        "@sveltejs/vite-plugin-svelte": "^5.0.3",
+        "@types/chrome": "^0.0.304",
+        "cheerio": "^1.0.0",
+        "sass": "^1.85.0",
+        "svelte": "^5.20.1",
+        "svelte-check": "^4.1.4",
+        "typescript": "^5.7.3",
+        "vite": "^6.1.0"
     },
-    "type": "module"
+    "type": "module",
+    "dependencies": {
+        "@fortawesome/fontawesome-free": "^6.7.2",
+        "lz-string": "^1.5.0"
+    }
 }

src/app.d.ts

@@ -1,13 +1,40 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
+import MaintenanceProfile from "$entities/MaintenanceProfile";
+import type TagGroup from "$entities/TagGroup";
+
 declare global {
-    namespace App {
-        // interface Error {}
-        // interface Locals {}
-        // interface PageData {}
-        // interface PageState {}
-        // interface Platform {}
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+    type LinkTarget = "_blank" | "_self" | "_parent" | "_top";
+    type IconName = (
+      "tag"
+      | "paint-brush"
+      | "arrow-left"
+      | "info-circle"
+      | "wrench"
+      | "globe"
+      | "plus"
+      | "file-export"
+      | "trash"
+      );
+
+    interface EntityNamesMap {
+      profiles: MaintenanceProfile;
+      groups: TagGroup;
     }
+
+    interface ImageURIs {
+      full: string;
+      large: string;
+      medium: string;
+      small: string;
+    }
+  }
 }
 
 export {};

src/components/debugging/StorageViewer.svelte

@@ -0,0 +1,93 @@
+<script>
+    import Menu from "$components/ui/menu/Menu.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
+    import { storagesCollection } from "$stores/debug";
+    import { goto } from "$app/navigation";
+    import { findDeepObject } from "$lib/utils";
+
+    /** @type {string} */
+    export let storage;
+
+    /** @type {string[]} */
+    export let path;
+
+    /** @type {Object|null} */
+    let targetStorage = null;
+    /** @type {[string, string][]} */
+    let breadcrumbs = [];
+    /** @type {Object<string, any>|null} */
+    let targetObject = null;
+    let targetPathString = '';
+
+    $: {
+        /** @type {[string, string][]} */
+        const builtBreadcrumbs = [];
+
+        breadcrumbs = path.reduce((resultCrumbs, entry) => {
+            let entryPath = entry;
+
+            if (resultCrumbs.length) {
+                entryPath = resultCrumbs[resultCrumbs.length - 1][1] + "/" + entryPath;
+            }
+
+            resultCrumbs.push([entry, entryPath]);
+
+            return resultCrumbs;
+        }, builtBreadcrumbs);
+
+        targetPathString = path.join("/");
+
+        if (targetPathString.length) {
+            targetPathString += "/";
+        }
+    }
+
+    $: {
+        targetStorage = $storagesCollection[storage];
+
+        if (!targetStorage) {
+            goto("/preferences/debug/storage");
+        }
+    }
+
+    $: {
+        targetObject = targetStorage
+                ? findDeepObject(targetStorage, path)
+                : null;
+    }
+</script>
+
+<Menu>
+    <MenuItem href="/preferences/debug/storage" icon="arrow-left">Back</MenuItem>
+    <hr>
+</Menu>
+<p class="path">
+    <span>/ <a href="/preferences/debug/storage/{storage}">{storage}</a></span>
+    {#each breadcrumbs as [name, entryPath]}
+        <span>/ <a href="/preferences/debug/storage/{storage}/{entryPath}/">{name}</a></span>
+    {/each}
+</p>
+{#if targetObject}
+    <Menu>
+        <hr>
+        {#each Object.entries(targetObject) as [key, value]}
+            {#if targetObject[key] && typeof targetObject[key] === 'object'}
+                <MenuItem href="/preferences/debug/storage/{storage}/{targetPathString}{key}">
+                    {key}: Object
+                </MenuItem>
+            {:else}
+                <MenuItem>
+                    {key}: {typeof targetObject[key]} = {targetObject[key]}
+                </MenuItem>
+            {/if}
+        {/each}
+    </Menu>
+{/if}
+
+<style lang="scss">
+    .path {
+        display: flex;
+        flex-wrap: wrap;
+        column-gap: .5em;
+    }
+</style>

src/components/features/GroupView.svelte

@@ -0,0 +1,59 @@
+<script>
+    import TagsColorContainer from "$components/tags/TagsColorContainer.svelte";
+
+    /**
+     * @type {import('$entities/TagGroup').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/features/ProfileView.svelte

@@ -0,0 +1,36 @@
+<script>
+    /** @type {import('$entities/MaintenanceProfile').default} */
+    export let profile;
+
+    const sortedTagsList = profile.settings.tags.sort((a, b) => a.localeCompare(b));
+</script>
+
+<div class="block">
+    <strong>Profile:</strong>
+    <div>{profile.settings.name}</div>
+</div>
+<div class="block">
+    <strong>Tags:</strong>
+    <div class="tags-list">
+        {#each sortedTagsList as tagName}
+            <span class="tag">{tagName}</span>
+        {/each}
+    </div>
+</div>
+
+<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

@@ -1,19 +1,32 @@
 <script>
-    import {version} from "$app/environment";
+    import { version } from "$app/environment";
 </script>
 
 <footer>
-    v{version}, made with ♥ by KoloMl.
+    <a href="https://github.com/koloml/furbooru-tagging-assistant/releases/tag/{version}" target="_blank">
+        v{version}
+    </a>
+    <span>, made with ♥ by KoloMl.</span>
 </footer>
 
 <style lang="scss">
-    @use 'src/styles/colors';
+    @use '$styles/colors';
 
     footer {
+        display: flex;
+        width: 100%;
         background: colors.$footer;
         color: colors.$footer-text;
         padding: 0 24px;
         font-size: 12px;
         line-height: 36px;
+
+        a {
+            color: inherit;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
     }
 </style>

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/tags/TagsEditor.svelte

@@ -0,0 +1,106 @@
+<script>
+    /**
+     * List of tags to edit. Any duplicated tags present in the array will be removed on the first edit.
+     * @type {string[]}
+     */
+    export let tags = [];
+
+    /** @type {Set<string>} */
+    let uniqueTags = new Set();
+
+    $: uniqueTags = new Set(tags);
+
+    /** @type {string} */
+    let addedTagName = '';
+
+    /**
+     * Create a callback function to pass into both mouse & keyboard events for tag removal.
+     * @param {string} tagName
+     * @return {function(Event)} Callback to pass as event listener.
+     */
+    function createTagRemoveHandler(tagName) {
+        return event => {
+            if (event.type === 'click') {
+                removeTag(tagName);
+            }
+
+            if (event instanceof KeyboardEvent && (event.code === 'Enter' || event.code === 'Space')) {
+                // To be more comfortable, automatically focus next available tag's remove button in the list.
+                if (event.currentTarget instanceof HTMLElement) {
+                    const currenTagElement = event.currentTarget.closest('.tag');
+                    const nextTagElement = currenTagElement?.previousElementSibling ?? currenTagElement?.parentElement?.firstElementChild;
+                    const nextRemoveButton = nextTagElement?.querySelector('.remove');
+
+                    if (nextRemoveButton instanceof HTMLElement) {
+                        nextRemoveButton.focus();
+                    }
+                }
+
+                removeTag(tagName);
+            }
+        }
+    }
+
+    /**
+     * @param {string} tagName
+     */
+    function removeTag(tagName) {
+        uniqueTags.delete(tagName);
+        tags = Array.from(uniqueTags);
+    }
+
+    /**
+     * @param {string} tagName
+     */
+    function addTag(tagName) {
+        uniqueTags.add(tagName);
+        tags = Array.from(uniqueTags);
+    }
+
+    /**
+     * Handle adding new tags to the list or removing them when backspace is pressed.
+     *
+     * Additional note: For some reason, mobile Chrome breaks the usual behaviour inside extension. `code` is becoming
+     * empty, while usually it should contain proper button code.
+     *
+     * @param {KeyboardEvent} event
+     */
+    function handleKeyPresses(event) {
+        if ((event.code === 'Enter' || event.key === 'Enter') && addedTagName.length) {
+            addTag(addedTagName)
+            addedTagName = '';
+        }
+
+        if ((event.code === 'Backspace' || event.key === 'Backspace') && !addedTagName.length && tags?.length) {
+            removeTag(tags[tags.length - 1]);
+        }
+    }
+</script>
+
+<div class="tags-editor">
+    {#each uniqueTags.values() as tagName}
+        <div class="tag">
+            {tagName}
+            <span class="remove" on:click={createTagRemoveHandler(tagName)}
+                  on:keydown={createTagRemoveHandler(tagName)}
+                  role="button" tabindex="0">x</span>
+        </div>
+    {/each}
+    <input type="text"
+           bind:value={addedTagName}
+           on:keydown={handleKeyPresses}
+           autocomplete="off"
+           autocapitalize="none"/>
+</div>
+
+<style lang="scss">
+    .tags-editor {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+
+        input {
+            width: 100%;
+        }
+    }
+</style>

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>

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">
@@ -12,5 +12,16 @@
 </label>
 
 <style lang="scss">
+    .label {
+        margin-bottom: .5em;
+    }
 
+    .control {
+        padding: 5px 0;
+
+        :global(textarea) {
+            width: 100%;
+            resize: vertical;
+        }
+    }
 </style>

src/components/ui/forms/SelectField.svelte

@@ -0,0 +1,40 @@
+<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>
+
+<style lang="scss">
+    select {
+        width: 100%;
+    }
+</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";
+
+    /** @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/forms/TextField.svelte

@@ -10,3 +10,9 @@
 </script>
 
 <input type="text" {name} {placeholder} bind:value={value}>
+
+<style lang="scss">
+    :global(.control) input {
+        width: 100%;
+    }
+</style>

src/components/ui/menu/Menu.svelte

@@ -3,17 +3,17 @@
 </nav>
 
 <style lang="scss">
-    @use 'src/styles/colors';
+    @use '$styles/colors';
 
     nav {
         display: flex;
         flex-direction: column;
 
-        & > :global(a) {
+        & > :global(.menu-item) {
             padding: 5px 24px;
         }
 
-        :global(a) {
+        :global(.menu-item) {
             color: colors.$text;
 
             &:hover {

src/components/ui/menu/MenuCheckboxItem.svelte

@@ -0,0 +1,37 @@
+<script>
+    import MenuLink from "$components/ui/menu/MenuItem.svelte";
+
+    /**
+     * @type {boolean}
+     */
+    export let checked;
+
+    /**
+     * @type {string|undefined}
+     */
+    export let name = undefined;
+
+    /**
+     * @type {string|undefined}
+     */
+    export let value = undefined;
+
+    /**
+     * @type {string|null}
+     */
+    export let href = null;
+</script>
+
+<MenuLink {href}>
+    <input type="checkbox" {name} {value} bind:checked={checked} on:input on:click|stopPropagation>
+    <slot></slot>
+</MenuLink>
+
+<style lang="scss">
+    :global(.menu-item) input {
+        width: 16px;
+        height: 16px;
+        margin-right: 6px;
+        flex-shrink: 0;
+    }
+</style>

src/components/ui/menu/MenuItem.svelte

@@ -0,0 +1,41 @@
+<script>
+    /**
+     * @type {string|null}
+     */
+    export let href = null;
+
+    /**
+     * @type {App.IconName|null}
+     */
+    export let icon = null;
+
+    /**
+     * @type {App.LinkTarget|undefined}
+     */
+    export let target = undefined;
+</script>
+
+<svelte:element this="{href ? 'a': 'span'}" class="menu-item" {href} {target} on:click role="link" tabindex="0">
+    {#if icon}
+        <i class="icon icon-{icon}"></i>
+    {/if}
+    <slot></slot>
+</svelte:element>
+
+<style lang="scss">
+    @use '$styles/colors';
+
+    .menu-item {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        user-select: none;
+
+        i {
+            width: 16px;
+            height: 16px;
+            background: colors.$text;
+            margin-right: 6px;
+        }
+    }
+</style>

src/components/ui/menu/MenuLink.svelte

@@ -1,41 +0,0 @@
-<script>
-    /**
-     * @type {string}
-     */
-    export let href;
-
-    /**
-     * @type {"tag"|"paint-brush"|"arrow-left"|"info-circle"|"wrench"|"globe"|"plus"|null}
-     */
-    export let icon = null;
-
-    /**
-     * @type {"_blank"|"_self"|"_parent"|"_top"|undefined}
-     */
-    export let target = undefined;
-</script>
-
-{#if href}
-    <a {href} {target} on:click>
-        {#if icon}
-            <i class="icon icon-{icon}"></i>
-        {/if}
-        <slot></slot>
-    </a>
-{/if}
-
-<style lang="scss">
-    @use '../../../styles/colors';
-
-    a {
-        display: flex;
-        align-items: center;
-
-        i {
-            width: 16px;
-            height: 16px;
-            background: colors.$text;
-            margin-right: 6px;
-        }
-    }
-</style>

src/components/ui/menu/MenuRadioItem.svelte

@@ -0,0 +1,37 @@
+<script>
+    import MenuLink from "$components/ui/menu/MenuItem.svelte";
+
+    /**
+     * @type {boolean}
+     */
+    export let checked;
+
+    /**
+     * @type {string}
+     */
+    export let name;
+
+    /**
+     * @type {string}
+     */
+    export let value;
+
+    /**
+     * @type {string|null}
+     */
+    export let href = null;
+</script>
+
+<MenuLink {href}>
+    <input type="radio" {name} {value} {checked} on:input on:click|stopPropagation>
+    <slot></slot>
+</MenuLink>
+
+<style lang="scss">
+    :global(.menu-item) input {
+        width: 16px;
+        height: 16px;
+        margin-right: 6px;
+        flex-shrink: 0;
+    }
+</style>

src/components/web-components/TagsEditor.svelte

@@ -1,21 +0,0 @@
-<script>
-    import "$lib/web-components/TagEditorComponent.js";
-
-    /**
-     * @type {string[]}
-     */
-    export let tags = [];
-
-    let tagsAttribute = tags.join(',');
-
-    /**
-     * @param {CustomEvent<string[]>} event
-     */
-    function onTagsChanged(event) {
-        tags = event.detail;
-    }
-
-    $: tagsAttribute = tags.join(',');
-</script>
-
-<tags-editor tags="{tagsAttribute}" on:change={onTagsChanged}></tags-editor>

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/content/header.js

@@ -1,4 +1,4 @@
-import {initializeSiteHeader} from "$lib/components/SiteHeaderWrapper.js";
+import { initializeSiteHeader } from "$lib/components/SiteHeaderWrapper";
 
 const siteHeader = document.querySelector('.header');
 

src/content/listing.js

@@ -1,10 +1,13 @@
-import {createMaintenancePopup} from "$lib/components/MaintenancePopup.js";
-import {createMediaBoxTools} from "$lib/components/MediaBoxTools.js";
-import {initializeMediaBox} from "$lib/components/MediaBoxWrapper.js";
-import {createMaintenanceStatusIcon} from "$lib/components/MaintenanceStatusIcon.js";
-import {createImageShowFullscreenButton} from "$lib/components/ImageShowFullscreenButton.js";
+import { createMaintenancePopup } from "$lib/components/MaintenancePopup";
+import { createMediaBoxTools } from "$lib/components/MediaBoxTools";
+import { calculateMediaBoxesPositions, initializeMediaBox } from "$lib/components/MediaBoxWrapper";
+import { createMaintenanceStatusIcon } from "$lib/components/MaintenanceStatusIcon";
+import { createImageShowFullscreenButton } from "$lib/components/ImageShowFullscreenButton";
 
-document.querySelectorAll('.media-box').forEach(mediaBoxElement => {
+/** @type {NodeListOf<HTMLElement>} */
+const mediaBoxes = document.querySelectorAll('.media-box');
+
+mediaBoxes.forEach(mediaBoxElement => {
   initializeMediaBox(mediaBoxElement, [
     createMediaBoxTools(
       createMaintenancePopup(),
@@ -18,3 +21,5 @@ document.querySelectorAll('.media-box').forEach(mediaBoxElement => {
     window.dispatchEvent(new CustomEvent('resize'));
   })
 });
+
+calculateMediaBoxesPositions(mediaBoxes);

src/content/tags-editor.js

@@ -0,0 +1,3 @@
+import { TagsForm } from "$lib/components/TagsForm";
+
+TagsForm.watchForEditors();

src/content/tags.js

@@ -0,0 +1,7 @@
+import { watchTagDropdownsInTagsEditor, wrapTagDropdown } from "$lib/components/TagDropdownWrapper";
+
+for (let tagDropdownElement of document.querySelectorAll('.tag.dropdown')) {
+  wrapTagDropdown(tagDropdownElement);
+}
+
+watchTagDropdownsInTagsEditor();

src/lib/booru/TagsUtils.js

@@ -1,34 +0,0 @@
-/**
- * Build the map containing both real tags and their aliases.
- *
- * @param {string[]} realAndAliasedTags List combining aliases and tag names.
- * @param {string[]} realTags List of actual tag names, excluding aliases.
- *
- * @return {Map<string, string>} Map where key is a tag or alias and value is an actual tag name.
- */
-export function buildTagsAndAliasesMap(realAndAliasedTags, realTags) {
-  /** @type {Map<string, string>} */
-  const tagsAndAliasesMap = new Map();
-
-  for (let tagName of realTags) {
-    tagsAndAliasesMap.set(tagName, tagName);
-  }
-
-  let realTagName = null;
-
-  for (let tagNameOrAlias of realAndAliasedTags) {
-    if (tagsAndAliasesMap.has(tagNameOrAlias)) {
-      realTagName = tagNameOrAlias;
-      continue;
-    }
-
-    if (!realTagName) {
-      console.warn('No real tag found for the alias:', tagNameOrAlias);
-      continue;
-    }
-
-    tagsAndAliasesMap.set(tagNameOrAlias, realTagName);
-  }
-
-  return tagsAndAliasesMap;
-}

src/lib/booru/scraped/ScrapedAPI.js

@@ -1,4 +1,4 @@
-import PostParser from "$lib/booru/scraped/parsing/PostParser.js";
+import PostParser from "$lib/booru/scraped/parsing/PostParser";
 
 export default class ScrapedAPI {
   /**

src/lib/booru/scraped/parsing/PostParser.js

@@ -1,5 +1,5 @@
-import PageParser from "$lib/booru/scraped/parsing/PageParser.js";
-import {buildTagsAndAliasesMap} from "$lib/booru/TagsUtils.js";
+import PageParser from "$lib/booru/scraped/parsing/PageParser";
+import { buildTagsAndAliasesMap } from "$lib/booru/tag-utils";
 
 export default class PostParser extends PageParser {
   /** @type {HTMLFormElement} */

src/lib/booru/search/QueryLexer.ts

@@ -1,8 +1,8 @@
 export class Token {
-  index;
-  value;
+  readonly index: number;
+  readonly value: string;
 
-  constructor(index, value) {
+  constructor(index: number, value: string) {
     this.index = index;
     this.value = value;
   }
@@ -28,12 +28,9 @@ export class BoostToken extends Token {
 }
 
 export class QuotedTermToken extends Token {
-  /**
-   * @type {string}
-   */
-  #quotedValue;
+  readonly #quotedValue: string;
 
-  constructor(index, value, quotedValue) {
+  constructor(index: number, value: string, quotedValue: string) {
     super(index, value);
 
     this.#quotedValue = quotedValue;
@@ -43,19 +40,11 @@ export class QuotedTermToken extends Token {
     return QuotedTermToken.decode(this.#quotedValue);
   }
 
-  /**
-   * @param {string} value
-   * @return {string}
-   */
-  static decode(value) {
+  static decode(value: string): string {
     return value.replace(/\\([\\"])/g, "$1");
   }
 
-  /**
-   * @param {string} value
-   * @return {string}
-   */
-  static encode(value) {
+  static encode(value: string): string {
     return value.replace(/[\\"]/g, "\\$&");
   }
 }
@@ -63,6 +52,10 @@ export class QuotedTermToken extends Token {
 export class TermToken extends Token {
 }
 
+type MatchResultCarry = {
+  match?: RegExpMatchArray | null
+}
+
 /**
  * Search query tokenizer. Should mostly work for the cases of parsing and finding the selected term for
  * auto-completion. Follows the rules described in the Philomena booru engine.
@@ -70,38 +63,28 @@ export class TermToken extends Token {
 export class QueryLexer {
   /**
    * The original value to be parsed.
-   * @type {string}
    */
-  #value;
+  readonly #value: string;
 
   /**
    * Current position of the parser in the value.
-   * @type {number}
    */
-  #index = 0;
+  #index: number = 0;
 
-  /**
-   * @param {string} value
-   */
-  constructor(value) {
+  constructor(value: string) {
     this.#value = value;
   }
 
   /**
    * Parse the query and get the list of tokens.
    *
-   * @return {Token[]} List of tokens.
+   * @return List of tokens.
    */
-  parse() {
-    /** @type {Token[]} */
-    const tokens = [];
+  parse(): Token[] {
+    const tokens: Token[] = [];
+    const result: MatchResultCarry = {};
 
-    /**
-     * @type {{match: RegExpMatchArray|null}}
-     */
-    const result = {};
-
-    let dirtyText;
+    let dirtyText: string;
 
     while (this.#index < this.#value.length) {
       if (this.#value[this.#index] === QueryLexer.#commaCharacter) {
@@ -111,26 +94,26 @@ export class QueryLexer {
       }
 
       if (this.#match(QueryLexer.#negotiationOperator, result)) {
-        tokens.push(new NotToken(this.#index, result.match[0]));
-        this.#index += result.match[0].length;
+        tokens.push(new NotToken(this.#index, result.match![0]));
+        this.#index += result.match![0].length;
         continue;
       }
 
       if (this.#match(QueryLexer.#andOperator, result)) {
-        tokens.push(new AndToken(this.#index, result.match[0]));
-        this.#index += result.match[0].length;
+        tokens.push(new AndToken(this.#index, result.match![0]));
+        this.#index += result.match![0].length;
         continue;
       }
 
       if (this.#match(QueryLexer.#orOperator, result)) {
-        tokens.push(new OrToken(this.#index, result.match[0]));
-        this.#index += result.match[0].length;
+        tokens.push(new OrToken(this.#index, result.match![0]));
+        this.#index += result.match![0].length;
         continue;
       }
 
       if (this.#match(QueryLexer.#notOperator, result)) {
-        tokens.push(new NotToken(this.#index, result.match[0]));
-        this.#index += result.match[0].length;
+        tokens.push(new NotToken(this.#index, result.match![0]));
+        this.#index += result.match![0].length;
         continue;
       }
 
@@ -147,19 +130,19 @@ export class QueryLexer {
       }
 
       if (this.#match(QueryLexer.#boostOperator, result)) {
-        tokens.push(new BoostToken(this.#index, result.match[0]));
-        this.#index += result.match[0].length;
+        tokens.push(new BoostToken(this.#index, result.match![0]));
+        this.#index += result.match![0].length;
         continue;
       }
 
       if (this.#match(QueryLexer.#whitespaces, result)) {
-        this.#index += result.match[0].length;
+        this.#index += result.match![0].length;
         continue;
       }
 
       if (this.#match(QueryLexer.#quotedText, result)) {
-        tokens.push(new QuotedTermToken(this.#index, result.match[0], result.match[1]));
-        this.#index += result.match[0].length;
+        tokens.push(new QuotedTermToken(this.#index, result.match![0], result.match![1]));
+        this.#index += result.match![0].length;
         continue;
       }
 
@@ -180,25 +163,25 @@ export class QueryLexer {
   /**
    * Match the provided regular expression on the string with the current parser position.
    *
-   * @param {RegExp} targetRegExp Target RegExp to parse with.
-   * @param {{match: any}} [resultCarrier] Object for passing the results into.
+   * @param targetRegExp Target RegExp to parse with.
+   * @param [resultCarrier] Object for passing the results into.
    *
-   * @return {boolean} Is there a match?
+   * @return Is there a match?
    */
-  #match(targetRegExp, resultCarrier = {}) {
+  #match(targetRegExp: RegExp, resultCarrier: MatchResultCarry = {}): boolean {
     return this.#matchAt(targetRegExp, this.#index, resultCarrier);
   }
 
   /**
    * Match the provided regular expression in the string with the specific index.
    *
-   * @param {RegExp} targetRegExp Target RegExp to parse with.
-   * @param {number} index Index to match the expression from.
-   * @param {{match: any}} [resultCarrier] Object for passing the results into.
+   * @param targetRegExp Target RegExp to parse with.
+   * @param index Index to match the expression from.
+   * @param [resultCarrier] Object for passing the results into.
    *
-   * @return {boolean} Is there a match?
+   * @return Is there a match?
    */
-  #matchAt(targetRegExp, index, resultCarrier = {}) {
+  #matchAt(targetRegExp: RegExp, index: number, resultCarrier: MatchResultCarry = {}): boolean {
     targetRegExp.lastIndex = index;
     resultCarrier.match = this.#value.match(targetRegExp);
 
@@ -212,11 +195,10 @@ export class QueryLexer {
    *
    * @return {string} Matched text.
    */
-  #parseDirtyText(index) {
-    let resultValue = '';
+  #parseDirtyText(index: number): string {
+    let resultValue: string = '';
 
-    /** @type {{match: RegExpMatchArray|null}} */
-    const result = {match: null};
+    const result: MatchResultCarry = {match: null};
 
     // Loop over
     while (index < this.#value.length) {
@@ -226,8 +208,8 @@ export class QueryLexer {
       }
 
       if (this.#matchAt(QueryLexer.#dirtyTextContent, index, result)) {
-        resultValue += result.match[0];
-        index += result.match[0].length;
+        resultValue += result.match![0];
+        index += result.match![0].length;
         continue;
       }
 

src/lib/booru/tag-categories.ts

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

src/lib/booru/tag-utils.ts

@@ -0,0 +1,33 @@
+/**
+ * Build the map containing both real tags and their aliases.
+ *
+ * @param realAndAliasedTags List combining aliases and tag names.
+ * @param realTags List of actual tag names, excluding aliases.
+ *
+ * @return Map where key is a tag or alias and value is an actual tag name.
+ */
+export function buildTagsAndAliasesMap(realAndAliasedTags: string[], realTags: string[]): Map<string, string> {
+  const tagsAndAliasesMap: Map<string, string> = new Map();
+
+  for (const tagName of realTags) {
+    tagsAndAliasesMap.set(tagName, tagName);
+  }
+
+  let realTagName: string | null = null;
+
+  for (const tagNameOrAlias of realAndAliasedTags) {
+    if (tagsAndAliasesMap.has(tagNameOrAlias)) {
+      realTagName = tagNameOrAlias;
+      continue;
+    }
+
+    if (!realTagName) {
+      console.warn('No real tag found for the alias:', tagNameOrAlias);
+      continue;
+    }
+
+    tagsAndAliasesMap.set(tagNameOrAlias, realTagName);
+  }
+
+  return tagsAndAliasesMap;
+}

src/lib/browser/StorageHelper.ts

@@ -0,0 +1,53 @@
+/**
+ * Changes subscribe function. It receives changes with old and new value for keys of the storage.
+ */
+export type StorageChangeSubscriber = (changes: Record<string, chrome.storage.StorageChange>) => void;
+
+/**
+ * Helper class to read and write JSON objects to the local storage.
+ */
+export default class StorageHelper {
+  readonly #storageArea: chrome.storage.StorageArea;
+
+  constructor(storageArea: chrome.storage.StorageArea) {
+    this.#storageArea = storageArea;
+  }
+
+  /**
+   * Read the following entry from the local storage as a JSON object.
+   *
+   * @param key Key of the entry to read.
+   * @param defaultValue Default value to return if the entry does not exist.
+   *
+   * @return The JSON object or the default value if the entry does not exist.
+   */
+  async read<Type = any, DefaultType = any>(key: string, defaultValue: DefaultType | null = null): Promise<Type | DefaultType> {
+    return (await this.#storageArea.get(key))?.[key] || defaultValue;
+  }
+
+  /**
+   * Write the following JSON object to the local storage.
+   *
+   * @param key Key of the entry to write.
+   * @param value Value to write.
+   */
+  write(key: string, value: any): void {
+    void this.#storageArea.set({[key]: value});
+  }
+
+  /**
+   * Subscribe to changes in the local storage.
+   * @param callback Listener function to receive changes.
+   */
+  subscribe(callback: StorageChangeSubscriber): void {
+    this.#storageArea.onChanged.addListener(callback);
+  }
+
+  /**
+   * Unsubscribe from changes in the local storage.
+   * @param callback Reference to the callback for unsubscribing.
+   */
+  unsubscribe(callback: StorageChangeSubscriber): void {
+    this.#storageArea.onChanged.removeListener(callback);
+  }
+}

src/lib/chrome/StorageHelper.js

@@ -1,57 +0,0 @@
-/**
- * Helper class to read and write JSON objects to the local storage.
- * @class
- */
-class StorageHelper {
-  /**
-   * @type {import('@types/chrome').storage.StorageArea}
-   */
-  #storageArea;
-
-  /**
-   * @param {import('@types/chrome').storage.StorageArea} storageArea
-   */
-  constructor(storageArea) {
-    this.#storageArea = storageArea;
-  }
-
-  /**
-   * Read the following entry from the local storage as a JSON object.
-   *
-   * @param {string} key Key of the entry to read.
-   * @param {any} defaultValue Default value to return if the entry does not exist.
-   *
-   * @return {Promise<any>} The JSON object or the default value if the entry does not exist.
-   */
-  async read(key, defaultValue = null) {
-    return (await this.#storageArea.get(key))?.[key] || defaultValue;
-  }
-
-  /**
-   * Write the following JSON object to the local storage.
-   *
-   * @param {string} key Key of the entry to write.
-   * @param {any} value JSON object to write.
-   */
-  write(key, value) {
-    void this.#storageArea.set({[key]: value});
-  }
-
-  /**
-   * Subscribe to changes in the local storage.
-   * @param {function(Record<string, StorageChange>): void} callback
-   */
-  subscribe(callback) {
-    this.#storageArea.onChanged.addListener(callback);
-  }
-
-  /**
-   * Unsubscribe from changes in the local storage.
-   * @param {function(Record<string, StorageChange>): void} callback
-   */
-  unsubscribe(callback) {
-    this.#storageArea.onChanged.removeListener(callback);
-  }
-}
-
-export default StorageHelper;

src/lib/components/FullscreenViewer.js

@@ -0,0 +1,338 @@
+import { BaseComponent } from "$lib/components/base/BaseComponent";
+import MiscSettings from "$lib/extension/settings/MiscSettings";
+
+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} */
+  #startX = null;
+  /** @type {number|null} */
+  #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.#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);
+    }
+  }
+
+  /**
+   * @protected
+   */
+  init() {
+    document.addEventListener('keydown', this.#onDocumentKeyPressed.bind(this));
+    this.on('click', this.#close.bind(this));
+
+    this.on('touchstart', this.#onTouchStart.bind(this));
+    this.on('touchmove', this.#onTouchMove.bind(this));
+    this.on('touchend', this.#onTouchEnd.bind(this));
+
+    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() {
+    this.container.classList.remove('loading');
+  }
+
+  /**
+   * @param {TouchEvent} event
+   */
+  #onTouchStart(event) {
+    if (this.#touchId !== null) {
+      return;
+    }
+
+    const firstTouch = event.touches.item(0);
+
+    if (!firstTouch) {
+      return;
+    }
+
+    this.#touchId = firstTouch.identifier;
+    this.#startX = firstTouch.clientX;
+    this.#startY = firstTouch.clientY;
+    this.container.classList.add(FullscreenViewer.#swipeState);
+  }
+
+  /**
+   * @param {TouchEvent} event
+   */
+  #onTouchEnd(event) {
+    if (this.#touchId === null) {
+      return;
+    }
+
+    const endedTouch = Array.from(event.changedTouches)
+      .find(touch => touch.identifier === this.#touchId);
+
+    if (!endedTouch) {
+      return;
+    }
+
+    const verticalDistance = Math.abs(endedTouch.clientY - this.#startY);
+    const requiredClosingDistance = window.innerHeight / 3;
+
+    if (this.#isClosingSwipeStarted && verticalDistance > requiredClosingDistance) {
+      this.#close();
+    }
+
+    this.#touchId = null;
+    this.#startX = null;
+    this.#startY = null;
+    this.#isClosingSwipeStarted = null;
+
+    this.container.classList.remove(FullscreenViewer.#swipeState);
+
+    requestAnimationFrame(() => {
+      this.container.style.removeProperty(FullscreenViewer.#offsetProperty);
+      this.container.style.removeProperty(FullscreenViewer.#opacityProperty);
+    });
+  }
+
+  /**
+   * @param {TouchEvent} event
+   */
+  #onTouchMove(event) {
+    if (this.#touchId === null) {
+      return;
+    }
+
+    if (this.#isClosingSwipeStarted === false) {
+      return;
+    }
+
+    for (const changedTouch of event.changedTouches) {
+      if (changedTouch.identifier !== this.#touchId) {
+        continue;
+      }
+
+      const verticalDistance = changedTouch.clientY - this.#startY;
+
+      if (this.#isClosingSwipeStarted === null) {
+        const horizontalDistance = changedTouch.clientX - this.#startX;
+
+        if (Math.abs(verticalDistance) >= FullscreenViewer.#minRequiredDistance) {
+          this.#isClosingSwipeStarted = true;
+        } else if (Math.abs(horizontalDistance) >= FullscreenViewer.#minRequiredDistance) {
+          this.#isClosingSwipeStarted = false;
+          break;
+        } else {
+          break;
+        }
+      }
+
+      this.container.style.setProperty(
+        FullscreenViewer.#offsetProperty,
+        verticalDistance.toString().concat('px')
+      );
+
+      const maxDistance = window.innerHeight * 2;
+      let opacity = 1;
+
+      if (verticalDistance !== 0) {
+        opacity -= Math.min(1, Math.abs(verticalDistance) / maxDistance);
+      }
+
+      this.container.style.setProperty(
+        FullscreenViewer.#opacityProperty,
+        opacity.toString()
+      );
+
+      break;
+    }
+  }
+
+  /**
+   * @param {KeyboardEvent} event
+   */
+  #onDocumentKeyPressed(event) {
+    if (event.code === 'Escape' || event.code === 'Esc') {
+      this.#close();
+    }
+  }
+
+  /**
+   * @param {import("$lib/extension/settings/MiscSettings").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;
+
+    requestAnimationFrame(() => {
+      this.#videoElement.volume = 0;
+      this.#videoElement.pause();
+      this.#videoElement.remove();
+    });
+  }
+
+  /**
+   * @param {App.ImageURIs} imageUris
+   * @return {Promise<string|null>}
+   */
+  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(() => {
+      this.container.classList.add(FullscreenViewer.#shownState);
+      document.body.style.overflow = 'hidden';
+    });
+
+    if (FullscreenViewer.#isVideoUrl(url)) {
+      this.#imageElement.remove();
+
+      this.#videoElement.src = url;
+      this.#videoElement.volume = 0;
+      this.#videoElement.autoplay = true;
+      this.#videoElement.loop = true;
+      this.#videoElement.controls = true;
+
+      this.container.append(this.#videoElement);
+
+      return;
+    }
+
+    this.#videoElement.remove();
+
+    this.#imageElement.src = url;
+
+    this.container.append(this.#imageElement);
+  }
+
+  /**
+   * @param {string} url
+   * @return {boolean}
+   */
+  static #isVideoUrl(url) {
+    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").FullscreenViewerSize, string>}
+   */
+  static #previewSizes = {
+    full: 'Full',
+    large: 'Large',
+    medium: 'Medium',
+    small: 'Small'
+  }
+
+  static #fallbackSize = 'large';
+}

src/lib/components/ImageShowFullscreenButton.js

@@ -1,15 +1,19 @@
-import {BaseComponent} from "$lib/components/base/BaseComponent.js";
-import {getComponent} from "$lib/components/base/ComponentUtils.js";
+import { BaseComponent } from "$lib/components/base/BaseComponent";
+import { getComponent } from "$lib/components/base/component-utils";
+import MiscSettings from "$lib/extension/settings/MiscSettings";
+import { FullscreenViewer } from "$lib/components/FullscreenViewer";
 
 export class ImageShowFullscreenButton extends BaseComponent {
   /**
-   * @type {MediaBoxTools}
+   * @type {import('./MediaBoxTools').MediaBoxTools|null}
    */
-  #mediaBoxTools;
+  #mediaBoxTools= null;
+  #isFullscreenButtonEnabled = false;
 
   build() {
     this.container.innerText = '🔍';
-    ImageShowFullscreenButton.#resolveFullscreenViewer();
+
+    ImageShowFullscreenButton.#miscSettings ??= new MiscSettings();
   }
 
   init() {
@@ -20,49 +24,63 @@ export class ImageShowFullscreenButton extends BaseComponent {
     }
 
     this.on('click', this.#onButtonClicked.bind(this));
+
+    if (ImageShowFullscreenButton.#miscSettings) {
+      ImageShowFullscreenButton.#miscSettings.resolveFullscreenViewerEnabled()
+        .then(isEnabled => {
+          this.#isFullscreenButtonEnabled = isEnabled;
+          this.#updateFullscreenButtonVisibility();
+        })
+        .then(() => {
+          ImageShowFullscreenButton.#miscSettings.subscribe(settings => {
+            this.#isFullscreenButtonEnabled = settings.fullscreenViewer ?? true;
+            this.#updateFullscreenButtonVisibility();
+          })
+        })
+    }
+  }
+
+  #updateFullscreenButtonVisibility() {
+    this.container.classList.toggle('is-visible', this.#isFullscreenButtonEnabled);
   }
 
   #onButtonClicked() {
-    const imageViewer = ImageShowFullscreenButton.#resolveFullscreenViewer();
-    let imageElement = imageViewer.querySelector('img') ?? document.createElement('img');
-
-    imageElement.src = this.#mediaBoxTools.mediaBox.imageLinks.large;
-    imageViewer.appendChild(imageElement);
-
-    imageViewer.classList.add('shown');
+    ImageShowFullscreenButton
+      .#resolveViewer()
+      .show(this.#mediaBoxTools.mediaBox.imageLinks);
   }
 
   /**
-   * @type {HTMLElement|null}
+   * @type {FullscreenViewer|null}
    */
-  static #fullscreenViewerElement = null;
+  static #viewer = null;
 
   /**
-   * @return {HTMLElement}
+   * @return {FullscreenViewer}
    */
-  static #resolveFullscreenViewer() {
-    this.#fullscreenViewerElement ??= this.#buildFullscreenViewer();
-    return this.#fullscreenViewerElement;
+  static #resolveViewer() {
+    this.#viewer ??= this.#buildViewer();
+    return this.#viewer;
   }
 
   /**
-   * @return {HTMLElement}
+   * @return {FullscreenViewer}
    */
-  static #buildFullscreenViewer() {
+  static #buildViewer() {
     const element = document.createElement('div');
-    element.classList.add('fullscreen-viewer');
+    const viewer = new FullscreenViewer(element);
+
+    viewer.initialize();
 
     document.body.append(element);
 
-    document.addEventListener('keydown', event => {
-      // When ESC pressed
-      if (event.code === 'Escape' || event.code === 'Esc') {
-        element.classList.remove('shown');
-      }
-    });
-
-    return element;
+    return viewer;
   }
+
+  /**
+   * @type {MiscSettings|null}
+   */
+  static #miscSettings = null;
 }
 
 export function createImageShowFullscreenButton() {

src/lib/components/MaintenancePopup.js

@@ -1,8 +1,24 @@
-import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings.js";
-import MaintenanceProfile from "$entities/MaintenanceProfile.js";
-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 MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings";
+import MaintenanceProfile from "$entities/MaintenanceProfile";
+import { BaseComponent } from "$lib/components/base/BaseComponent";
+import { getComponent } from "$lib/components/base/component-utils";
+import ScrapedAPI from "$lib/booru/scraped/ScrapedAPI";
+import { tagsBlacklist } from "$config/tags";
+import { emitterAt } from "$lib/components/events/comms";
+import {
+  eventActiveProfileChanged,
+  eventMaintenanceStateChanged,
+  eventTagsUpdated
+} from "$lib/components/events/maintenance-popup-events";
+
+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,10 +27,13 @@ export class MaintenancePopup extends BaseComponent {
   /** @type {HTMLElement[]} */
   #tagsList = [];
 
+  /** @type {Map<string, HTMLElement>} */
+  #suggestedInvalidTags = new Map();
+
   /** @type {MaintenanceProfile|null} */
   #activeProfile = null;
 
-  /** @type {import('$lib/components/MediaBoxTools.js').MediaBoxTools} */
+  /** @type {import('$lib/components/MediaBoxTools').MediaBoxTools} */
   #mediaBoxTools = null;
 
   /** @type {Set<string>} */
@@ -32,6 +51,8 @@ export class MaintenancePopup extends BaseComponent {
   /** @type {number|null} */
   #tagsSubmissionTimer = null;
 
+  #emitter = emitterAt(this);
+
   /**
    * @protected
    */
@@ -82,18 +103,24 @@ export class MaintenancePopup extends BaseComponent {
     this.#activeProfile = activeProfile;
     this.container.classList.toggle('is-active', activeProfile !== null);
     this.#refreshTagsList();
-    this.emit('active-profile-changed', activeProfile);
+
+    this.#emitter.emit(eventActiveProfileChanged, activeProfile);
   }
 
   #refreshTagsList() {
     /** @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 +136,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);
+        }
       });
   }
 
@@ -151,8 +184,13 @@ export class MaintenancePopup extends BaseComponent {
     }
 
     if (this.#tagsToAdd.size || this.#tagsToRemove.size) {
+      // Notify only once, when first planning to submit
+      if (!this.#isPlanningToSubmit) {
+        MaintenancePopup.#notifyAboutPendingSubmission(true);
+      }
+
       this.#isPlanningToSubmit = true;
-      this.emit('maintenance-state-change', 'waiting');
+      this.#emitter.emit(eventMaintenanceStateChanged, 'waiting');
     }
   }
 
@@ -179,37 +217,99 @@ export class MaintenancePopup extends BaseComponent {
     this.#isPlanningToSubmit = false;
     this.#isSubmitting = true;
 
-    this.emit('maintenance-state-change', 'processing');
+    this.#emitter.emit(eventMaintenanceStateChanged, 'processing');
 
-    const maybeTagsAndAliasesAfterUpdate = await MaintenancePopup.#scrapedAPI.updateImageTags(
-      this.#mediaBoxTools.mediaBox.imageId,
-      tagsList => {
-        for (let tagName of this.#tagsToRemove) {
-          tagsList.delete(tagName);
+    let maybeTagsAndAliasesAfterUpdate;
+
+    const shouldAutoRemove = await MaintenancePopup.#maintenanceSettings.resolveStripBlacklistedTags();
+
+    try {
+      maybeTagsAndAliasesAfterUpdate = await MaintenancePopup.#scrapedAPI.updateImageTags(
+        this.#mediaBoxTools.mediaBox.imageId,
+        tagsList => {
+          for (let tagName of this.#tagsToRemove) {
+            tagsList.delete(tagName);
+          }
+
+          for (let tagName of this.#tagsToAdd) {
+            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;
         }
-
-        for (let tagName of this.#tagsToAdd) {
-          tagsList.add(tagName);
-        }
-
-        return tagsList;
+      );
+    } catch (e) {
+      if (e instanceof BlackListedTagsEncounteredError) {
+        this.#revealInvalidTags();
+      } else {
+        console.warn('Tags submission failed:', e);
       }
-    );
 
-    if (maybeTagsAndAliasesAfterUpdate) {
-      this.emit('tags-updated', maybeTagsAndAliasesAfterUpdate);
+      MaintenancePopup.#notifyAboutPendingSubmission(false);
+
+      this.#emitter.emit(eventMaintenanceStateChanged, 'failed');
+      this.#isSubmitting = false;
+
+      return;
     }
 
-    this.emit('maintenance-state-change', 'complete');
+    if (maybeTagsAndAliasesAfterUpdate) {
+      this.#emitter.emit(eventTagsUpdated, maybeTagsAndAliasesAfterUpdate);
+    }
+
+    this.#emitter.emit(eventMaintenanceStateChanged, 'complete');
 
     this.#tagsToAdd.clear();
     this.#tagsToRemove.clear();
 
     this.#refreshTagsList();
+    MaintenancePopup.#notifyAboutPendingSubmission(false);
 
     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}
    */
@@ -230,6 +330,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}
@@ -254,12 +363,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()
@@ -268,7 +377,13 @@ export class MaintenancePopup extends BaseComponent {
 
     this.#maintenanceSettings
       .resolveActiveProfileAsObject()
-      .then(callback);
+      .then(profileOrNull => {
+        if (profileOrNull) {
+          lastActiveProfileId = profileOrNull.id;
+        }
+
+        callback(profileOrNull);
+      });
 
     return () => {
       unsubscribeFromProfilesChanges();
@@ -276,9 +391,42 @@ export class MaintenancePopup extends BaseComponent {
     }
   }
 
+  /**
+   * Notify the frontend about new pending submission started.
+   * @param {boolean} isStarted True if started, false if ended.
+   */
+  static #notifyAboutPendingSubmission(isStarted) {
+    if (this.#pendingSubmissionCount === null) {
+      this.#pendingSubmissionCount = 0;
+      this.#initializeExitPromptHandler();
+    }
+
+    this.#pendingSubmissionCount += isStarted ? 1 : -1;
+  }
+
+  /**
+   * Subscribe to the global window closing event, show the prompt when there are pending submission.
+   */
+  static #initializeExitPromptHandler() {
+    window.addEventListener('beforeunload', event => {
+      if (!this.#pendingSubmissionCount) {
+        return;
+      }
+
+      event.preventDefault();
+      event.returnValue = true;
+    });
+  }
+
   static #scrapedAPI = new ScrapedAPI();
 
   static #delayBeforeSubmissionMs = 500;
+
+  /**
+   * Amount of pending submissions or NULL if logic was not yet initialized.
+   * @type {number|null}
+   */
+  static #pendingSubmissionCount = null;
 }
 
 export function createMaintenancePopup() {

src/lib/components/MaintenanceStatusIcon.js

@@ -1,8 +1,10 @@
-import {BaseComponent} from "$lib/components/base/BaseComponent.js";
-import {getComponent} from "$lib/components/base/ComponentUtils.js";
+import { BaseComponent } from "$lib/components/base/BaseComponent";
+import { getComponent } from "$lib/components/base/component-utils";
+import { on } from "$lib/components/events/comms";
+import { eventMaintenanceStateChanged } from "$lib/components/events/maintenance-popup-events";
 
 export class MaintenanceStatusIcon extends BaseComponent {
-  /** @type {import('MediaBoxTools.js').MediaBoxTools} */
+  /** @type {import('./MediaBoxTools').MediaBoxTools} */
   #mediaBoxTools;
 
   build() {
@@ -16,7 +18,7 @@ export class MaintenanceStatusIcon extends BaseComponent {
       throw new Error('Status icon element initialized outside of the media box!');
     }
 
-    this.#mediaBoxTools.on('maintenance-state-change', this.#onMaintenanceStateChanged.bind(this));
+    on(this.#mediaBoxTools, eventMaintenanceStateChanged, this.#onMaintenanceStateChanged.bind(this));
   }
 
   /**
@@ -38,7 +40,11 @@ export class MaintenanceStatusIcon extends BaseComponent {
         break;
 
       case "complete":
-        this.container.innerText = '✅'
+        this.container.innerText = '✅';
+        break;
+
+      case "failed":
+        this.container.innerText = '⚠️';
         break;
 
       default:

src/lib/components/MediaBoxTools.js

@@ -1,9 +1,11 @@
-import {BaseComponent} from "$lib/components/base/BaseComponent.js";
-import {getComponent} from "$lib/components/base/ComponentUtils.js";
-import {MaintenancePopup} from "$lib/components/MaintenancePopup.js";
+import { BaseComponent } from "$lib/components/base/BaseComponent";
+import { getComponent } from "$lib/components/base/component-utils";
+import { MaintenancePopup } from "$lib/components/MaintenancePopup";
+import { on } from "$lib/components/events/comms";
+import { eventActiveProfileChanged } from "$lib/components/events/maintenance-popup-events";
 
 export class MediaBoxTools extends BaseComponent {
-  /** @type {import('MediaBoxWrapper.js').MediaBoxWrapper|null} */
+  /** @type {import('./MediaBoxWrapper').MediaBoxWrapper|null} */
   #mediaBox;
 
   /** @type {MaintenancePopup|null} */
@@ -34,11 +36,11 @@ export class MediaBoxTools extends BaseComponent {
       }
     }
 
-    this.on('active-profile-changed', this.#onActiveProfileChanged.bind(this));
+    on(this, eventActiveProfileChanged, this.#onActiveProfileChanged.bind(this));
   }
 
   /**
-   * @param {CustomEvent<MaintenanceProfile|null>} profileChangedEvent
+   * @param {CustomEvent<import('$entities/MaintenanceProfile').default|null>} profileChangedEvent
    */
   #onActiveProfileChanged(profileChangedEvent) {
     this.container.classList.toggle('has-active-profile', profileChangedEvent.detail !== null);
@@ -52,7 +54,7 @@ export class MediaBoxTools extends BaseComponent {
   }
 
   /**
-   * @return {import('MediaBoxWrapper.js').MediaBoxWrapper|null}
+   * @return {import('./MediaBoxWrapper').MediaBoxWrapper|null}
    */
   get mediaBox() {
     return this.#mediaBox;
@@ -61,7 +63,7 @@ export class MediaBoxTools extends BaseComponent {
 
 /**
  * Create a maintenance popup element.
- * @param {HTMLElement} childrenElements List of children elements to append to the component.
+ * @param {HTMLElement[]} childrenElements List of children elements to append to the component.
  * @return {HTMLElement} The maintenance popup element.
  */
 export function createMediaBoxTools(...childrenElements) {

src/lib/components/MediaBoxWrapper.js

@@ -1,6 +1,8 @@
-import {BaseComponent} from "$lib/components/base/BaseComponent.js";
-import {getComponent} from "$lib/components/base/ComponentUtils.js";
-import {buildTagsAndAliasesMap} from "$lib/booru/TagsUtils.js";
+import { BaseComponent } from "$lib/components/base/BaseComponent";
+import { getComponent } from "$lib/components/base/component-utils";
+import { buildTagsAndAliasesMap } from "$lib/booru/tag-utils";
+import { on } from "$lib/components/events/comms";
+import { eventTagsUpdated } from "$lib/components/events/maintenance-popup-events";
 
 export class MediaBoxWrapper extends BaseComponent {
   #thumbnailContainer = null;
@@ -13,11 +15,11 @@ export class MediaBoxWrapper extends BaseComponent {
     this.#thumbnailContainer = this.container.querySelector('.image-container');
     this.#imageLinkElement = this.#thumbnailContainer.querySelector('a');
 
-    this.on('tags-updated', this.#onTagsUpdatedRefreshTagsAndAliases.bind(this));
+    on(this, eventTagsUpdated, this.#onTagsUpdatedRefreshTagsAndAliases.bind(this));
   }
 
   /**
-   * @param {CustomEvent<Map<string,string>>} tagsUpdatedEvent
+   * @param {CustomEvent<Map<string,string>|null>} tagsUpdatedEvent
    */
   #onTagsUpdatedRefreshTagsAndAliases(tagsUpdatedEvent) {
     const updatedMap = tagsUpdatedEvent.detail;
@@ -56,7 +58,7 @@ export class MediaBoxWrapper extends BaseComponent {
   }
 
   /**
-   * @return {ImageURIs}
+   * @return {App.ImageURIs}
    */
   get imageLinks() {
     return JSON.parse(this.#thumbnailContainer.dataset.uris);
@@ -79,8 +81,24 @@ export function initializeMediaBox(mediaBoxContainer, childComponentElements) {
 }
 
 /**
- * @typedef {Object} ImageURIs
- * @property {string} full
- * @property {string} large
- * @property {string} small
+ * @param {NodeListOf<HTMLElement>} mediaBoxesList
  */
+export function calculateMediaBoxesPositions(mediaBoxesList) {
+  window.addEventListener('resize', () => {
+    /** @type {HTMLElement|null} */
+    let lastMediaBox = null,
+      /** @type {number|null} */
+      lastMediaBoxPosition = null;
+
+    for (let mediaBoxElement of mediaBoxesList) {
+      const yPosition = mediaBoxElement.getBoundingClientRect().y;
+      const isOnTheSameLine = yPosition === lastMediaBoxPosition;
+
+      mediaBoxElement.classList.toggle('media-box--first', !isOnTheSameLine);
+      lastMediaBox?.classList.toggle('media-box--last', !isOnTheSameLine);
+
+      lastMediaBox = mediaBoxElement;
+      lastMediaBoxPosition = yPosition;
+    }
+  })
+}

src/lib/components/SearchWrapper.js

@@ -1,44 +1,67 @@
-import {BaseComponent} from "$lib/components/base/BaseComponent.js";
-import {QueryLexer, QuotedTermToken, TermToken, Token} from "$lib/booru/search/QueryLexer.js";
+import { BaseComponent } from "$lib/components/base/BaseComponent";
+import { QueryLexer, QuotedTermToken, TermToken, Token } from "$lib/booru/search/QueryLexer";
+import SearchSettings from "$lib/extension/settings/SearchSettings";
 
 export class SearchWrapper extends BaseComponent {
   /** @type {HTMLInputElement|null} */
   #searchField = null;
-  /** @type {HTMLInputElement|null} */
-  #autoCompleteField = null;
   /** @type {string|null} */
   #lastParsedSearchValue = null;
   /** @type {Token[]} */
   #cachedParsedQuery = [];
+  #searchSettings = new SearchSettings();
+  #arePropertiesSuggestionsEnabled = false;
+  /** @type {"start"|"end"} */
+  #propertiesSuggestionsPosition = "start";
+  /** @type {HTMLElement|null} */
+  #cachedAutocompleteContainer = null;
+  /** @type {TermToken|QuotedTermToken|null} */
+  #lastTermToken = null;
 
   build() {
-    this.container.classList.add('header__search--completable');
-
     this.#searchField = this.container.querySelector('input[name=q]');
-    this.#searchField.autocomplete = 'off'; // Browser's auto-complete will get in the way!
-
-    const autoCompleteField = document.createElement('input');
-    autoCompleteField.dataset.ac = 'true';
-    autoCompleteField.dataset.acMinLength = '3';
-    autoCompleteField.dataset.acSource = '/autocomplete/tags?term=';
-    autoCompleteField.classList.add('search-autocomplete-dummy');
-
-    this.#autoCompleteField = autoCompleteField;
-
-    this.container.appendChild(autoCompleteField);
   }
 
   init() {
-    this.#searchField.addEventListener('input', this.#updateAutoCompletedFragment.bind(this));
-    this.#searchField.addEventListener('keydown', this.#onSearchFieldKeyPressed.bind(this));
-    this.#searchField.addEventListener('selectionchange', this.#updateAutoCompletedFragment.bind(this));
+    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;
+    });
   }
 
-  #updateAutoCompletedFragment() {
-    const searchableFragment = this.#findCurrentTagFragment();
-    this.#emitAutoComplete(searchableFragment || '');
+  /**
+   * Catch the user input and execute suggestions logic.
+   * @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) {
+      return;
+    }
+
+    this.#renderSuggestions(
+      SearchWrapper.#resolveSuggestionsFromTerm(currentFragment),
+      event.currentTarget
+    );
   }
 
+  /**
+   * Get the selection position in the search field.
+   * @return {number}
+   */
   #getInputUserSelection() {
     return Math.min(
       this.#searchField.selectionStart,
@@ -46,6 +69,10 @@ export class SearchWrapper extends BaseComponent {
     );
   }
 
+  /**
+   * Parse the search query and return the list of parsed tokens. Result will be cached for current search query.
+   * @return {Token[]}
+   */
   #resolveQueryTokens() {
     const searchValue = this.#searchField.value;
 
@@ -60,69 +87,8 @@ export class SearchWrapper extends BaseComponent {
   }
 
   /**
-   * @param {KeyboardEvent} event
-   */
-  #onSearchFieldKeyPressed(event) {
-    // On enter, attempt to replace the current active tag in the query with autocomplete selection
-    if (event.code === 'Enter') {
-      this.#onEnterPressed(event);
-    }
-
-    this.#autoCompleteField.dispatchEvent(
-      new KeyboardEvent('keydown', {
-        keyCode: event.keyCode
-      })
-    );
-
-    // Similarly to the site's autocomplete logic, we need to prevent the arrows up/down from causing any issues
-    if (event.keyCode === 38 || event.keyCode === 40) {
-      event.preventDefault();
-    }
-  }
-
-  /**
-   * @param {KeyboardEvent} event
-   */
-  #onEnterPressed(event) {
-    const autocompleteSelection = document.querySelector('.autocomplete__item--selected');
-
-    if (!autocompleteSelection) {
-      return;
-    }
-
-    const activeToken = SearchWrapper.#findActiveSearchTermPosition(
-      this.#resolveQueryTokens(),
-      this.#getInputUserSelection(),
-    );
-
-    if (activeToken instanceof TermToken || activeToken instanceof QuotedTermToken) {
-      const selectionStart = activeToken.index;
-      const selectionEnd = activeToken.index + activeToken.value.length;
-
-      let autocompletedValue = autocompleteSelection.dataset.value;
-
-      if (activeToken instanceof QuotedTermToken) {
-        autocompletedValue = `"${QuotedTermToken.encode(autocompletedValue)}"`;
-      }
-
-      this.#searchField.value = this.#searchField.value.slice(0, selectionStart)
-        + autocompletedValue
-        + this.#searchField.value.slice(selectionEnd);
-
-      const newSelectionEnd = selectionStart + autocompletedValue.length;
-
-      // Place the caret at the end of the currently active tag.
-      // Actually, this does not work for some reason. After the tag is sent to the field and selection was changed to
-      // the end of the inserted tag, browser just does not scroll the input to the caret position.
-      this.#searchField.focus();
-      this.#searchField.setSelectionRange(newSelectionEnd, newSelectionEnd);
-
-      event.preventDefault();
-    }
-  }
-
-  /**
-   * @return {string|null}
+   * Find the currently selected term.
+   * @return {string|null} Selected term or null if none found.
    */
   #findCurrentTagFragment() {
     if (!this.#searchField) {
@@ -132,6 +98,7 @@ export class SearchWrapper extends BaseComponent {
     let searchValue = this.#searchField.value;
 
     if (!searchValue) {
+      this.#lastTermToken = null;
       return null;
     }
 
@@ -141,31 +108,88 @@ export class SearchWrapper extends BaseComponent {
     );
 
     if (token instanceof TermToken) {
+      this.#lastTermToken = token;
       return token.value;
     }
 
     if (token instanceof QuotedTermToken) {
+      this.#lastTermToken = token;
       return token.decodedValue;
     }
 
+    this.#lastTermToken = null;
     return searchValue;
   }
 
-  #emitAutoComplete(userInputFragment) {
-    this.#autoCompleteField.value = userInputFragment;
+  /**
+   * Resolve the autocomplete container from the document. Once resolved, it can be safely reused without breaking
+   * anything. Assuming refactored autocomplete handler is still implemented the way it is.
+   *
+   * This means, that properties will only be suggested once actual autocomplete logic was activated.
+   *
+   * @return {HTMLElement|null} Resolved element or nothing.
+   */
+  #resolveAutocompleteContainer() {
+    if (this.#cachedAutocompleteContainer) {
+      return this.#cachedAutocompleteContainer;
+    }
+
+    this.#cachedAutocompleteContainer = document.querySelector('.autocomplete');
+
+    return this.#cachedAutocompleteContainer;
+  }
+
+  /**
+   * Render the list of suggestions into the existing popup or create and populate a new one.
+   * @param {string[]} suggestions List of suggestion to render the popup from.
+   * @param {HTMLInputElement} targetInput Target input to attach the popup to.
+   */
+  #renderSuggestions(suggestions, targetInput) {
+    /** @type {HTMLElement[]} */
+    const suggestedListItems = suggestions
+      .map(suggestedTerm => this.#renderTermSuggestion(suggestedTerm));
 
-    // Should be at least one frame away, since input event always removes autocomplete window
     requestAnimationFrame(() => {
-      this.#autoCompleteField.dispatchEvent(
-        new InputEvent('input', {bubbles: true})
-      );
+      const autocompleteContainer = this.#resolveAutocompleteContainer();
 
-      const autocompleteContainer = document.querySelector('.autocomplete');
-
-      if (autocompleteContainer) {
-        autocompleteContainer.style.left = `${this.container.offsetLeft}px`;
+      if (!autocompleteContainer) {
+        return;
       }
-    });
+
+      // Since the autocomplete popup was refactored to re-use the same element over and over again, we need to remove
+      // the options from the popup manually when autocomplete was removed from the DOM, since site is not doing that.
+      const termsToRemove = autocompleteContainer.isConnected
+        // Only removing properties when element is still connected to the DOM (popup is used by the website)
+        ? autocompleteContainer.querySelectorAll('.autocomplete__item--property')
+        // Remove everything if popup was disconnected from the DOM.
+        : autocompleteContainer.querySelectorAll('.autocomplete__item')
+
+      for (let existingTerm of termsToRemove) {
+        existingTerm.remove();
+      }
+
+      const listContainer = autocompleteContainer.querySelector('ul');
+
+      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`;
+      autocompleteContainer.style.top = `${targetInput.offsetTop + targetInput.offsetHeight - targetInput.parentElement.scrollTop}px`;
+
+      document.body.append(autocompleteContainer);
+    })
   }
 
   /**
@@ -179,8 +203,217 @@ export class SearchWrapper extends BaseComponent {
       token => token.index < userSelectionIndex && token.index + token.value.length >= userSelectionIndex
     );
   }
-}
 
-export function initializeSearWrapper(formElement) {
-  new SearchWrapper(formElement).initialize();
+  /**
+   * Regular expression to search the properties' syntax.
+   * @type {RegExp}
+   */
+  static #propertySearchTermHeadingRegExp = /^(?<name>[a-z\d_]+)(?<op_syntax>\.(?<op>[a-z]*))?(?<value_syntax>:(?<value>.*))?$/;
+
+  /**
+   * Create a list of suggested elements using the input received from the user.
+   * @param {string} searchTermValue Original decoded term received from the user.
+   * @return {string[]} List of suggestions. Could be empty.
+   */
+  static #resolveSuggestionsFromTerm(searchTermValue) {
+    /** @type {string[]} */
+    const suggestionsList = [];
+
+    this.#propertySearchTermHeadingRegExp.lastIndex = 0;
+    const parsedResult = this.#propertySearchTermHeadingRegExp.exec(searchTermValue);
+
+    if (!parsedResult) {
+      return suggestionsList;
+    }
+
+    const propertyName = parsedResult.groups.name;
+    const propertyType = this.#properties.get(propertyName);
+    const hasOperatorSyntax = Boolean(parsedResult.groups.op_syntax);
+    const hasValueSyntax = Boolean(parsedResult.groups.value_syntax);
+
+    // No suggestions for values for now, maybe could add suggestions for namespaces like my:*
+    if (hasValueSyntax) {
+      if (this.#typeValues.has(propertyType)) {
+        const givenValue = parsedResult.groups.value;
+
+        for (let candidateValue of this.#typeValues.get(propertyType)) {
+          if (givenValue && !candidateValue.startsWith(givenValue)) {
+            continue;
+          }
+
+          suggestionsList.push(`${propertyName}${parsedResult.groups.op_syntax ?? ''}:${candidateValue}`);
+        }
+      }
+
+      return suggestionsList;
+    }
+
+    // If at least one dot placed, start suggesting operators
+    if (hasOperatorSyntax) {
+      if (this.#typeOperators.has(propertyType)) {
+        const operatorName = parsedResult.groups.op;
+
+        for (let candidateOperator of this.#typeOperators.get(propertyType)) {
+          if (operatorName && !candidateOperator.startsWith(operatorName)) {
+            continue;
+          }
+
+          suggestionsList.push(`${propertyName}.${candidateOperator}:`);
+        }
+      }
+
+      return suggestionsList;
+    }
+
+    // Otherwise, search for properties with names starting with the term
+    for (let [candidateProperty] of this.#properties) {
+      if (propertyName && !candidateProperty.startsWith(propertyName)) {
+        continue;
+      }
+
+      suggestionsList.push(candidateProperty);
+    }
+
+    return suggestionsList;
+  }
+
+  /**
+   * Render a single suggestion item and connect required events to interact with the user.
+   * @param {string} suggestedTerm Term to use for suggestion item.
+   * @return {HTMLElement} Resulting element.
+   */
+  #renderTermSuggestion(suggestedTerm) {
+    /** @type {HTMLElement} */
+    const suggestionItem = document.createElement('li');
+    suggestionItem.classList.add('autocomplete__item', 'autocomplete__item--property');
+    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');
+    });
+
+    suggestionItem.addEventListener('mouseout', () => {
+      SearchWrapper.#findAndResetSelectedSuggestion(suggestionItem);
+    });
+
+    suggestionItem.addEventListener('click', () => {
+      this.#replaceLastActiveTokenWithSuggestion(suggestedTerm);
+    });
+
+    return suggestionItem;
+  }
+
+  /**
+   * Automatically replace the last active token stored in the variable with the new value.
+   * @param {string} suggestedTerm Term to replace the value with.
+   */
+  #replaceLastActiveTokenWithSuggestion(suggestedTerm) {
+    if (!this.#lastTermToken) {
+      return;
+    }
+
+    const searchQuery = this.#searchField.value;
+    const beforeToken = searchQuery.substring(0, this.#lastTermToken.index);
+    const afterToken = searchQuery.substring(this.#lastTermToken.index + this.#lastTermToken.value.length);
+
+    let replacementValue = suggestedTerm;
+
+    if (replacementValue.includes('"')) {
+      replacementValue = `"${QuotedTermToken.encode(replacementValue)}"`
+    }
+
+    this.#searchField.value = beforeToken + replacementValue + afterToken;
+  }
+
+  /**
+   * Find the selected suggestion item(s) and unselect them. Similar to the logic implemented by the Philomena's
+   * front-end.
+   * @param {HTMLElement} suggestedElement Target element to search from. If element is disconnected from the DOM,
+   * search will be halted.
+   */
+  static #findAndResetSelectedSuggestion(suggestedElement) {
+    if (!suggestedElement.parentElement) {
+      return;
+    }
+
+    for (let selectedElement of suggestedElement.parentElement.querySelectorAll('.autocomplete__item--selected')) {
+      selectedElement.classList.remove('autocomplete__item--selected');
+    }
+  }
+
+  static #typeNumeric = Symbol();
+  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],
+    ['width', SearchWrapper.#typeNumeric],
+    ['wilson_score', SearchWrapper.#typeNumeric],
+    ['my', SearchWrapper.#typePersonal],
+  ]);
+
+  static #comparisonOperators = ['gt', 'gte', 'lt', 'lte'];
+
+  static #typeOperators = new Map([
+    [SearchWrapper.#typeNumeric, SearchWrapper.#comparisonOperators],
+    [SearchWrapper.#typeDate, SearchWrapper.#comparisonOperators],
+  ]);
+
+  static #typeValues = new Map([
+    [SearchWrapper.#typePersonal, [
+      'comments',
+      'faves',
+      'posts',
+      'uploads',
+      'upvotes',
+      'watched',
+    ]],
+    [SearchWrapper.#typeBoolean, [
+      'true',
+      'false',
+    ]]
+  ]);
 }

src/lib/components/SiteHeaderWrapper.js

@@ -1,5 +1,5 @@
-import {BaseComponent} from "$lib/components/base/BaseComponent.js";
-import {SearchWrapper} from "$lib/components/SearchWrapper.js";
+import { BaseComponent } from "$lib/components/base/BaseComponent";
+import { SearchWrapper } from "$lib/components/SearchWrapper";
 
 class SiteHeaderWrapper extends BaseComponent {
   /** @type {SearchWrapper|null} */

src/lib/components/TagDropdownWrapper.js

@@ -0,0 +1,276 @@
+import { BaseComponent } from "$lib/components/base/BaseComponent";
+import MaintenanceProfile from "$entities/MaintenanceProfile";
+import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings";
+import { getComponent } from "$lib/components/base/component-utils";
+import CustomCategoriesResolver from "$lib/extension/CustomCategoriesResolver";
+
+const isTagEditorProcessedKey = Symbol();
+const categoriesResolver = new CustomCategoriesResolver();
+
+export class TagDropdownWrapper extends BaseComponent {
+  /**
+   * Container with dropdown elements to insert options into.
+   * @type {HTMLElement}
+   */
+  #dropdownContainer;
+
+  /**
+   * Button to add or remove the current tag into/from the active profile.
+   * @type {HTMLAnchorElement|null}
+   */
+  #toggleOnExistingButton = null;
+
+  /**
+   * Button to create a new profile, make it active and add the current tag into the active profile.
+   * @type {HTMLAnchorElement|null}
+   */
+  #addToNewButton = null;
+
+  /**
+   * Local clone of the currently active profile used for updating the list of tags.
+   * @type {MaintenanceProfile|null}
+   */
+  #activeProfile = null;
+
+  /**
+   * Is cursor currently entered the dropdown.
+   * @type {boolean}
+   */
+  #isEntered = false;
+
+  /**
+   * @type {string|undefined|null}
+   */
+  #originalCategory = null;
+
+  build() {
+    this.#dropdownContainer = this.container.querySelector('.dropdown__content');
+  }
+
+  init() {
+    this.on('mouseenter', this.#onDropdownEntered.bind(this));
+    this.on('mouseleave', this.#onDropdownLeft.bind(this));
+
+    TagDropdownWrapper.#watchActiveProfile(activeProfileOrNull => {
+      this.#activeProfile = activeProfileOrNull;
+
+      if (this.#isEntered) {
+        this.#updateButtons();
+      }
+    });
+  }
+
+  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();
+  }
+
+  #onDropdownLeft() {
+    this.#isEntered = false;
+  }
+
+  #updateButtons() {
+    if (!this.#activeProfile) {
+      this.#addToNewButton ??= TagDropdownWrapper.#createDropdownLink(
+        'Add to new tagging profile',
+        this.#onAddToNewClicked.bind(this)
+      );
+
+      if (!this.#addToNewButton.isConnected) {
+        this.#dropdownContainer.append(this.#addToNewButton);
+      }
+    } else {
+      this.#addToNewButton?.remove();
+    }
+
+    if (this.#activeProfile) {
+      this.#toggleOnExistingButton ??= TagDropdownWrapper.#createDropdownLink(
+        'Add to existing tagging profile',
+        this.#onToggleInExistingClicked.bind(this)
+      );
+
+      const profileName = this.#activeProfile.settings.name;
+      let profileSpecificButtonText = `Add to profile "${profileName}"`;
+
+      if (this.#activeProfile.settings.tags.includes(this.tagName)) {
+        profileSpecificButtonText = `Remove from profile "${profileName}"`;
+      }
+
+      this.#toggleOnExistingButton.innerText = profileSpecificButtonText;
+
+      if (!this.#toggleOnExistingButton.isConnected) {
+        this.#dropdownContainer.append(this.#toggleOnExistingButton);
+      }
+
+      return;
+    }
+
+    this.#toggleOnExistingButton?.remove();
+  }
+
+  async #onAddToNewClicked() {
+    const profile = new MaintenanceProfile(crypto.randomUUID(), {
+      name: 'Temporary Profile (' + (new Date().toISOString()) + ')',
+      tags: [this.tagName],
+      temporary: true,
+    });
+
+    await profile.save();
+    await TagDropdownWrapper.#maintenanceSettings.setActiveProfileId(profile.id);
+  }
+
+  async #onToggleInExistingClicked() {
+    if (!this.#activeProfile) {
+      return;
+    }
+
+    const tagsList = new Set(this.#activeProfile.settings.tags);
+    const targetTagName = this.tagName;
+
+    if (tagsList.has(targetTagName)) {
+      tagsList.delete(targetTagName);
+    } else {
+      tagsList.add(targetTagName);
+    }
+
+    this.#activeProfile.settings.tags = Array.from(tagsList.values());
+
+    await this.#activeProfile.save();
+  }
+
+  static #maintenanceSettings = new MaintenanceSettings();
+
+  /**
+   * Watch for changes to active profile.
+   * @param {(profile: MaintenanceProfile|null) => void} onActiveProfileChange Callback to call when profile was
+   * changed.
+   */
+  static #watchActiveProfile(onActiveProfileChange) {
+    let lastActiveProfile;
+
+    this.#maintenanceSettings.subscribe((settings) => {
+      lastActiveProfile = settings.activeProfile;
+
+      this.#maintenanceSettings
+        .resolveActiveProfileAsObject()
+        .then(onActiveProfileChange);
+    });
+
+    MaintenanceProfile.subscribe(profiles => {
+      const activeProfile = profiles
+        .find(profile => profile.id === lastActiveProfile);
+
+      onActiveProfileChange(activeProfile);
+    });
+
+    this.#maintenanceSettings
+      .resolveActiveProfileAsObject()
+      .then(activeProfile => {
+        lastActiveProfile = activeProfile?.id ?? null;
+        onActiveProfileChange(activeProfile);
+      });
+  }
+
+  /**
+   * Create element for dropdown.
+   * @param {string} text Base text for the option.
+   * @param {(event: MouseEvent) => void} onClickHandler Click handler. Event will be prevented by default.
+   * @return {HTMLAnchorElement}
+   */
+  static #createDropdownLink(text, onClickHandler) {
+    /** @type {HTMLAnchorElement} */
+    const dropdownLink = document.createElement('a');
+    dropdownLink.href = '#';
+    dropdownLink.innerText = text;
+    dropdownLink.className = 'tag__dropdown__link';
+
+    dropdownLink.addEventListener('click', event => {
+      event.preventDefault();
+      onClickHandler(event);
+    });
+
+    return dropdownLink;
+  }
+}
+
+export function wrapTagDropdown(element) {
+  // Skip initialization when tag component is already wrapped
+  if (getComponent(element)) {
+    return;
+  }
+
+  const tagDropdown = new TagDropdownWrapper(element);
+  tagDropdown.initialize();
+
+  categoriesResolver.addElement(tagDropdown);
+}
+
+export function watchTagDropdownsInTagsEditor() {
+  // We only need to watch for new editor elements if there is a tag editor present on the page
+  if (!document.querySelector('#image_tags_and_source')) {
+    return;
+  }
+
+  document.body.addEventListener('mouseover', event => {
+    /** @type {HTMLElement} */
+    const targetElement = event.target;
+
+    if (targetElement[isTagEditorProcessedKey]) {
+      return;
+    }
+
+    /** @type {HTMLElement|null} */
+    const closestTagEditor = targetElement.closest('#image_tags_and_source');
+
+    if (!closestTagEditor || closestTagEditor[isTagEditorProcessedKey]) {
+      targetElement[isTagEditorProcessedKey] = true;
+      return;
+    }
+
+    targetElement[isTagEditorProcessedKey] = true;
+    closestTagEditor[isTagEditorProcessedKey] = true;
+
+    for (const tagDropdownElement of closestTagEditor.querySelectorAll('.tag.dropdown')) {
+      wrapTagDropdown(tagDropdownElement);
+    }
+  })
+}

src/lib/components/TagsForm.js

@@ -0,0 +1,81 @@
+import { BaseComponent } from "$lib/components/base/BaseComponent";
+import { getComponent } from "$lib/components/base/component-utils";
+
+export class TagsForm extends BaseComponent {
+  /**
+   * Collect all the tag categories available on the page and color the tags in the editor according to them.
+   */
+  refreshTagColors() {
+    const tagCategories = this.#gatherTagCategories();
+    const editableTags = this.container.querySelectorAll('.tag');
+
+    for (let tagElement of editableTags) {
+      // Tag name is stored in the "remove" link and not in the tag itself.
+      const removeLink = tagElement.querySelector('a');
+
+      if (!removeLink) {
+        continue;
+      }
+
+      const tagName = removeLink.dataset.tagName;
+
+      if (!tagCategories.has(tagName)) {
+        continue;
+      }
+
+      const categoryName = tagCategories.get(tagName);
+
+      tagElement.dataset.tagCategory = categoryName;
+      tagElement.setAttribute('data-tag-category', categoryName);
+    }
+  }
+
+  /**
+   * Collect list of categories from the tags on the page.
+   * @return {Map<string, string>}
+   */
+  #gatherTagCategories() {
+    /** @type {Map<string, string>} */
+    const tagCategories = new Map();
+
+    for (let tagElement of document.querySelectorAll('.tag[data-tag-name][data-tag-category]')) {
+      tagCategories.set(tagElement.dataset.tagName, tagElement.dataset.tagCategory);
+    }
+
+    return tagCategories;
+  }
+
+  static watchForEditors() {
+    document.body.addEventListener('click', event => {
+      const targetElement = event.target;
+
+      if (!(targetElement instanceof HTMLElement)) {
+        return;
+      }
+
+      const tagEditorWrapper = targetElement.closest('#image_tags_and_source');
+
+      if (!tagEditorWrapper) {
+        return;
+      }
+
+      const refreshTrigger = targetElement.closest('.js-taginput-show, #edit-tags')
+
+      if (!refreshTrigger) {
+        return;
+      }
+
+      const tagFormElement = tagEditorWrapper.querySelector('#tags-form');
+
+      /** @type {TagsForm|null} */
+      let tagEditor = getComponent(tagFormElement);
+
+      if (!tagEditor || (!tagEditor instanceof TagsForm)) {
+        tagEditor = new TagsForm(tagFormElement);
+        tagEditor.initialize();
+      }
+
+      tagEditor.refreshTagColors();
+    });
+  }
+}

src/lib/components/base/BaseComponent.js

@@ -1,4 +1,4 @@
-import {bindComponent} from "$lib/components/base/ComponentUtils.js";
+import { bindComponent } from "$lib/components/base/component-utils";
 
 /**
  * @abstract
@@ -45,7 +45,6 @@ export class BaseComponent {
 
   /**
    * @return {HTMLElement}
-   * @protected
    */
   get container() {
     return this.#container;

src/lib/components/base/ComponentUtils.js

@@ -1,22 +0,0 @@
-const instanceSymbol = Symbol('instance');
-
-/**
- * @param {HTMLElement} element
- * @return {import('./BaseComponent.js').BaseComponent|null}
- */
-export function getComponent(element) {
-  return element[instanceSymbol] || null;
-}
-
-/**
- * Bind the component to the selected element.
- * @param {HTMLElement} element The element to bind the component to.
- * @param {import('./BaseComponent.js').BaseComponent} instance The component instance.
- */
-export function bindComponent(element, instance) {
-  if (element[instanceSymbol]) {
-    throw new Error('The element is already bound to a component.');
-  }
-
-  element[instanceSymbol] = instance;
-}

src/lib/components/base/component-utils.ts

@@ -0,0 +1,29 @@
+import type { BaseComponent } from "$lib/components/base/BaseComponent";
+
+const instanceSymbol = Symbol('instance');
+
+interface ElementWithComponent extends HTMLElement {
+  [instanceSymbol]?: BaseComponent;
+}
+
+/**
+ * Get the component from the element, if there is one.
+ * @param {HTMLElement} element
+ * @return
+ */
+export function getComponent(element: ElementWithComponent): BaseComponent | null {
+  return element[instanceSymbol] || null;
+}
+
+/**
+ * Bind the component to the selected element.
+ * @param element The element to bind the component to.
+ * @param instance The component instance.
+ */
+export function bindComponent(element: ElementWithComponent, instance: BaseComponent): void {
+  if (element[instanceSymbol]) {
+    throw new Error('The element is already bound to a component.');
+  }
+
+  element[instanceSymbol] = instance;
+}

src/lib/components/events/comms.ts

@@ -0,0 +1,92 @@
+import type { MaintenancePopupEventsMap } from "$lib/components/events/maintenance-popup-events";
+import { BaseComponent } from "$lib/components/base/BaseComponent";
+
+interface EventsMapping extends MaintenancePopupEventsMap {
+}
+
+type EventCallback<EventDetails> = (event: CustomEvent<EventDetails>) => void;
+type UnsubscribeFunction = () => void;
+type ResolvableTarget = EventTarget | BaseComponent;
+
+function resolveTarget(componentOrElement: ResolvableTarget): EventTarget {
+  if (componentOrElement instanceof BaseComponent) {
+    return componentOrElement.container;
+  }
+
+  return componentOrElement;
+}
+
+export function emit<Event extends keyof EventsMapping>(
+  targetOrComponent: ResolvableTarget,
+  event: Event,
+  details: EventsMapping[Event]
+) {
+  const target = resolveTarget(targetOrComponent);
+
+  target.dispatchEvent(
+    new CustomEvent(event, {
+      detail: details,
+      bubbles: true
+    })
+  );
+}
+
+export function on<Event extends keyof EventsMapping>(
+  targetOrComponent: ResolvableTarget,
+  eventName: Event,
+  callback: EventCallback<EventsMapping[Event]>,
+  options: AddEventListenerOptions | null = null
+): UnsubscribeFunction {
+  const target = resolveTarget(targetOrComponent);
+  const controller = new AbortController();
+
+  target.addEventListener(
+    eventName,
+    callback as EventListener,
+    {
+      signal: controller.signal,
+      once: options?.once
+    }
+  );
+
+  return () => controller.abort();
+}
+
+const onceOptions = {once: true};
+
+export function once<Event extends keyof EventsMapping>(
+  targetOrComponent: ResolvableTarget,
+  eventName: Event,
+  callback: EventCallback<EventsMapping[Event]>
+): UnsubscribeFunction {
+  return on(
+    targetOrComponent,
+    eventName,
+    callback,
+    onceOptions
+  );
+}
+
+class TargetedEmitter {
+  readonly #element: ResolvableTarget;
+
+  constructor(targetOrComponent: ResolvableTarget) {
+    this.#element = targetOrComponent;
+  }
+
+  emit<Event extends keyof EventsMapping>(eventName: Event, details: EventsMapping[Event]): void {
+    emit(this.#element, eventName, details);
+  }
+
+  on<Event extends keyof EventsMapping>(eventName: Event, callback: EventCallback<EventsMapping[Event]>, options: AddEventListenerOptions | null = null): UnsubscribeFunction {
+    return on(this.#element, eventName, callback, options);
+  }
+
+  once<Event extends keyof EventsMapping>(eventName: Event, callback: EventCallback<EventsMapping[Event]>): UnsubscribeFunction {
+    return once(this.#element, eventName, callback);
+  }
+}
+
+export function emitterAt(targetOrComponent: ResolvableTarget): TargetedEmitter {
+  return new TargetedEmitter(targetOrComponent);
+}

src/lib/components/events/maintenance-popup-events.ts

@@ -0,0 +1,13 @@
+import type MaintenanceProfile from "$entities/MaintenanceProfile";
+
+export const eventActiveProfileChanged = 'active-profile-changed';
+export const eventMaintenanceStateChanged = 'maintenance-state-change';
+export const eventTagsUpdated = 'tags-updated';
+
+type MaintenanceState = 'processing' | 'failed' | 'complete' | 'waiting';
+
+export interface MaintenancePopupEventsMap {
+  [eventActiveProfileChanged]: MaintenanceProfile | null;
+  [eventMaintenanceStateChanged]: MaintenanceState;
+  [eventTagsUpdated]: Map<string, string> | null;
+}

src/lib/extension/ConfigurationController.ts

@@ -1,25 +1,24 @@
-import StorageHelper from "$lib/chrome/StorageHelper.js";
+import StorageHelper, { type StorageChangeSubscriber } from "$lib/browser/StorageHelper";
 
 export default class ConfigurationController {
-  /** @type {string} */
-  #configurationName;
+  readonly #configurationName: string;
 
   /**
    * @param {string} configurationName Name of the configuration to work with.
    */
-  constructor(configurationName) {
+  constructor(configurationName: string) {
     this.#configurationName = configurationName;
   }
 
   /**
    * Read the setting with the given name.
    *
-   * @param {string} settingName Setting name.
-   * @param {any} [defaultValue] Default value to return if the setting does not exist. Defaults to `null`.
+   * @param settingName Setting name.
+   * @param [defaultValue] Default value to return if the setting does not exist. Defaults to `null`.
    *
-   * @return {Promise<any|null>} The setting value or the default value if the setting does not exist.
+   * @return The setting value or the default value if the setting does not exist.
    */
-  async readSetting(settingName, defaultValue = null) {
+  async readSetting<Type = any, DefaultType = any>(settingName: string, defaultValue: DefaultType | null = null): Promise<Type | DefaultType> {
     const settings = await ConfigurationController.#storageHelper.read(this.#configurationName, {});
     return settings[settingName] ?? defaultValue;
   }
@@ -27,12 +26,12 @@ export default class ConfigurationController {
   /**
    * Write the given value to the setting.
    *
-   * @param {string} settingName Setting name.
-   * @param {any} value Value to write.
+   * @param settingName Setting name.
+   * @param value Value to write.
    *
    * @return {Promise<void>}
    */
-  async writeSetting(settingName, value) {
+  async writeSetting(settingName: string, value: any): Promise<void> {
     const settings = await ConfigurationController.#storageHelper.read(this.#configurationName, {});
 
     settings[settingName] = value;
@@ -44,10 +43,8 @@ export default class ConfigurationController {
    * Delete the specific setting.
    *
    * @param {string} settingName Setting name to delete.
-   *
-   * @return {Promise<void>}
    */
-  async deleteSetting(settingName) {
+  async deleteSetting(settingName: string): Promise<void> {
     const settings = await ConfigurationController.#storageHelper.read(this.#configurationName, {});
 
     delete settings[settingName];
@@ -63,9 +60,8 @@ export default class ConfigurationController {
    *
    * @return {function(): void} Unsubscribe function.
    */
-  subscribeToChanges(callback) {
-    /** @param {Record<string, StorageChange>} changes */
-    const changesSubscriber = changes => {
+  subscribeToChanges(callback: (record: Record<string, any>) => void): () => void {
+    const subscriber: StorageChangeSubscriber = changes => {
       if (!changes[this.#configurationName]) {
         return;
       }
@@ -73,10 +69,10 @@ export default class ConfigurationController {
       callback(changes[this.#configurationName].newValue);
     }
 
-    ConfigurationController.#storageHelper.subscribe(changesSubscriber);
+    ConfigurationController.#storageHelper.subscribe(subscriber);
 
-    return () => ConfigurationController.#storageHelper.unsubscribe(changesSubscriber);
+    return () => ConfigurationController.#storageHelper.unsubscribe(subscriber);
   }
 
   static #storageHelper = new StorageHelper(chrome.storage.local);
-}
+}

src/lib/extension/CustomCategoriesResolver.ts

@@ -0,0 +1,110 @@
+import type { TagDropdownWrapper } from "$lib/components/TagDropdownWrapper";
+import TagGroup from "$entities/TagGroup";
+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/EntitiesController.js

@@ -1,93 +0,0 @@
-import StorageHelper from "$lib/chrome/StorageHelper.js";
-
-export default class EntitiesController {
-  static #storageHelper = new StorageHelper(chrome.storage.local);
-
-  /**
-   * Read all entities of the given type from the storage. Build the entities from the raw data and return them.
-   *
-   * @template EntityClass
-   *
-   * @param {string} entityName Name of the entity to read.
-   * @param {EntityClass} entityClass Class of the entity to read. Must have a constructor that accepts the ID and the
-   * settings object.
-   *
-   * @return {Promise<InstanceType<EntityClass>[]>} List of entities of the given type.
-   */
-  static async readAllEntities(entityName, entityClass) {
-    const rawEntities = await this.#storageHelper.read(entityName, {});
-
-    if (!rawEntities || Object.keys(rawEntities).length === 0) {
-      return [];
-    }
-
-    return Object
-      .entries(rawEntities)
-      .map(([id, settings]) => new entityClass(id, settings));
-  }
-
-  /**
-   * Update the single entity in the storage. If the entity with the given ID already exists, it will be overwritten.
-   *
-   * @param {string} entityName Name of the entity to update.
-   * @param {StorageEntity} entity Entity to update.
-   *
-   * @return {Promise<void>}
-   */
-  static async updateEntity(entityName, entity) {
-    await this.#storageHelper.write(
-      entityName,
-      Object.assign(
-        await this.#storageHelper.read(
-          entityName, {}
-        ),
-        {
-          [entity.id]: entity.settings
-        }
-      )
-    );
-  }
-
-  /**
-   * Delete the entity with the given ID.
-   *
-   * @param {string} entityName Name of the entity to delete.
-   * @param {string} entityId ID of the entity to delete.
-   *
-   * @return {Promise<void>}
-   */
-  static async deleteEntity(entityName, entityId) {
-    const entities = await this.#storageHelper.read(entityName, {});
-    delete entities[entityId];
-    await this.#storageHelper.write(entityName, entities);
-  }
-
-  /**
-   * Subscribe to all changes made to the storage.
-   *
-   * @template EntityClass
-   *
-   * @param {string} entityName Name of the entity to subscribe to.
-   * @param {EntityClass} entityClass Class of the entity to subscribe to.
-   * @param {function(InstanceType<EntityClass>[]): any} callback Callback to call when the storage changes.
-   * @return {function(): void} Unsubscribe function.
-   */
-  static subscribeToEntity(entityName, entityClass, callback) {
-    /**
-     * Watch the changes made to the storage and call the callback when the entity changes.
-     * @param {Object<string, StorageChange>} changes Changes made to the storage.
-     */
-    const storageChangesSubscriber = changes => {
-      if (!changes[entityName]) {
-        return;
-      }
-
-      this.readAllEntities(entityName, entityClass)
-        .then(callback);
-    }
-
-    this.#storageHelper.subscribe(storageChangesSubscriber);
-
-    return () => this.#storageHelper.unsubscribe(storageChangesSubscriber);
-  }
-}

src/lib/extension/EntitiesController.ts

@@ -0,0 +1,87 @@
+import StorageHelper, { type StorageChangeSubscriber } from "$lib/browser/StorageHelper";
+import type StorageEntity from "$lib/extension/base/StorageEntity";
+
+export default class EntitiesController {
+  static #storageHelper = new StorageHelper(chrome.storage.local);
+
+  /**
+   * Read all entities of the given type from the storage. Build the entities from the raw data and return them.
+   *
+   * @param entityName Name of the entity to read.
+   * @param entityClass Class of the entity to read. Must have a constructor that accepts the ID and the settings
+   * object.
+   *
+   * @return List of entities of the given type.
+   */
+  static async readAllEntities<Type extends StorageEntity<any>>(entityName: string, entityClass: new (...any: any[]) => Type): Promise<Type[]> {
+    const rawEntities = await this.#storageHelper.read(entityName, {});
+
+    if (!rawEntities || Object.keys(rawEntities).length === 0) {
+      return [];
+    }
+
+    return Object
+      .entries(rawEntities)
+      .map(([id, settings]) => new entityClass(id, settings));
+  }
+
+  /**
+   * Update the single entity in the storage. If the entity with the given ID already exists, it will be overwritten.
+   *
+   * @param entityName Name of the entity to update.
+   * @param entity Entity to update.
+   */
+  static async updateEntity(entityName: string, entity: StorageEntity<Object>): Promise<void> {
+    this.#storageHelper.write(
+      entityName,
+      Object.assign(
+        await this.#storageHelper.read(
+          entityName, {}
+        ),
+        {
+          [entity.id]: entity.settings
+        }
+      )
+    );
+  }
+
+  /**
+   * Delete the entity with the given ID.
+   *
+   * @param entityName Name of the entity to delete.
+   * @param entityId ID of the entity to delete.
+   */
+  static async deleteEntity(entityName: string, entityId: string): Promise<void> {
+    const entities = await this.#storageHelper.read(entityName, {});
+    delete entities[entityId];
+    this.#storageHelper.write(entityName, entities);
+  }
+
+  /**
+   * Subscribe to all changes made to the storage.
+   *
+   * @template EntityClass
+   *
+   * @param entityName Name of the entity to subscribe to.
+   * @param entityClass Class of the entity to subscribe to.
+   * @param callback Callback to call when the storage changes.
+   * @return Unsubscribe function.
+   */
+  static subscribeToEntity<Type extends StorageEntity<any>>(entityName: string, entityClass: new (...any: any[]) => Type, callback: (entities: Type[]) => void): () => void {
+    /**
+     * Watch the changes made to the storage and call the callback when the entity changes.
+     */
+    const subscriber: StorageChangeSubscriber = changes => {
+      if (!changes[entityName]) {
+        return;
+      }
+
+      this.readAllEntities(entityName, entityClass)
+        .then(callback);
+    }
+
+    this.#storageHelper.subscribe(subscriber);
+
+    return () => this.#storageHelper.unsubscribe(subscriber);
+  }
+}

src/lib/extension/EntitiesTransporter.ts

@@ -0,0 +1,89 @@
+import { validateImportedEntity } from "$lib/extension/transporting/validators";
+import { exportEntityToObject } from "$lib/extension/transporting/exporters";
+import StorageEntity from "$lib/extension/base/StorageEntity";
+import { compressToEncodedURIComponent, decompressFromEncodedURIComponent } from "lz-string";
+
+export default class EntitiesTransporter<EntityType> {
+  readonly #targetEntityConstructor: new (...any: any[]) => EntityType;
+
+  /**
+   * Name of the entity, exported directly from the constructor.
+   * @private
+   */
+  get #entityName() {
+    // How the hell should I even do this?
+    return ((this.#targetEntityConstructor as any) as typeof StorageEntity)._entityName;
+  }
+
+  /**
+   * @param entityConstructor Class which should be used for import or export.
+   */
+  constructor(entityConstructor: new (...any: any[]) => EntityType) {
+    if (!(entityConstructor.prototype instanceof StorageEntity)) {
+      throw new TypeError('Invalid class provided as the target for importing!');
+    }
+
+    this.#targetEntityConstructor = entityConstructor;
+  }
+
+  importFromJSON(jsonString: string): EntityType {
+    const importedObject = this.#tryParsingAsJSON(jsonString);
+
+    if (!importedObject) {
+      throw new Error('Invalid JSON!');
+    }
+
+    validateImportedEntity(
+      importedObject,
+      this.#entityName
+    );
+
+    return new this.#targetEntityConstructor(
+      importedObject.id,
+      importedObject
+    );
+  }
+
+  importFromCompressedJSON(compressedJsonString: string): EntityType {
+    return this.importFromJSON(
+      decompressFromEncodedURIComponent(compressedJsonString)
+    )
+  }
+
+  exportToJSON(entityObject: EntityType): string {
+    if (!(entityObject instanceof this.#targetEntityConstructor)) {
+      throw new TypeError('Transporter should be connected to the same entity to export!');
+    }
+
+    if (!(entityObject instanceof StorageEntity)) {
+      throw new TypeError('Only storage entities could be exported!');
+    }
+
+    const exportableObject = exportEntityToObject(
+      entityObject,
+      this.#entityName
+    );
+
+    return JSON.stringify(exportableObject, null, 2);
+  }
+
+  exportToCompressedJSON(entityObject: EntityType): string {
+    return compressToEncodedURIComponent(this.exportToJSON(entityObject));
+  }
+
+  #tryParsingAsJSON(jsonString: string): Record<string, any> | null {
+    let jsonObject: Record<string, any> | null = null;
+
+    try {
+      jsonObject = JSON.parse(jsonString);
+    } catch (e) {
+
+    }
+
+    if (typeof jsonObject !== "object") {
+      throw new TypeError("Should be an object!");
+    }
+
+    return jsonObject
+  }
+}

src/lib/extension/base/CacheableSettings.ts

@@ -0,0 +1,81 @@
+import ConfigurationController from "$lib/extension/ConfigurationController";
+
+export default class CacheableSettings<Fields> {
+  #controller: ConfigurationController;
+  #cachedValues: Map<keyof Fields, any> = new Map();
+  #disposables: Function[] = [];
+
+  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 as keyof Fields,
+            settings[key]
+          );
+        }
+      })
+    );
+  }
+
+  /**
+   * @template SettingType
+   * @param {string} settingName
+   * @param {SettingType} defaultValue
+   * @return {Promise<SettingType>}
+   * @protected
+   */
+  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 as string, defaultValue);
+
+    this.#cachedValues.set(settingName, settingValue);
+
+    return settingValue;
+  }
+
+  /**
+   * @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<Key extends keyof Fields>(settingName: Key, value: Fields[Key], force: boolean = false): Promise<void> {
+    if (
+      !force
+      && this.#cachedValues.has(settingName)
+      && this.#cachedValues.get(settingName) === value
+    ) {
+      return;
+    }
+
+    return this.#controller.writeSetting(
+      settingName as string,
+      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: (settings: Partial<Fields>) => void): () => void {
+    const unsubscribeCallback = this.#controller.subscribeToChanges(callback as (fields: Record<string, any>) => void);
+
+    this.#disposables.push(unsubscribeCallback);
+
+    return unsubscribeCallback;
+  }
+
+  dispose() {
+    for (let disposeCallback of this.#disposables) {
+      disposeCallback();
+    }
+  }
+}

src/lib/extension/base/StorageEntity.js

@@ -1,56 +0,0 @@
-import EntitiesController from "$lib/extension/EntitiesController.js";
-
-class StorageEntity {
-  /**
-   * @type {string}
-   */
-  #id;
-
-  /**
-   * @type {Object}
-   */
-  #settings;
-
-  /**
-   * @param {string} id
-   * @param {Object} settings
-   */
-  constructor(id, settings = {}) {
-    this.#id = id;
-    this.#settings = settings;
-  }
-
-  /**
-   * @return {string}
-   */
-  get id() {
-    return this.#id;
-  }
-
-  /**
-   * @return {Object}
-   */
-  get settings() {
-    return this.#settings;
-  }
-
-  static _entityName = "entity";
-
-  async save() {
-    await EntitiesController.updateEntity(this.constructor._entityName, this);
-  }
-
-  async delete() {
-    await EntitiesController.deleteEntity(this.constructor._entityName, this.id);
-  }
-
-  /**
-   * Static function to read all entities of this type from the storage. Must be implemented in the child class.
-   * @return {Promise<array>}
-   */
-  static async readAll() {
-    throw new Error("Not implemented");
-  }
-}
-
-export default StorageEntity;

src/lib/extension/base/StorageEntity.ts

@@ -0,0 +1,59 @@
+import EntitiesController from "$lib/extension/EntitiesController";
+
+export default abstract class StorageEntity<SettingsType extends Object = {}> {
+  /**
+   * @type {string}
+   */
+  readonly #id: string;
+
+  /**
+   * @type {Object}
+   */
+  readonly #settings: SettingsType;
+
+  protected constructor(id: string, settings: SettingsType) {
+    this.#id = id;
+    this.#settings = settings;
+  }
+
+  get id(): string {
+    return this.#id;
+  }
+
+  get settings(): SettingsType {
+    return this.#settings;
+  }
+
+  public static readonly _entityName: string = "entity";
+
+  async save() {
+    await EntitiesController.updateEntity(
+      (this.constructor as typeof StorageEntity)._entityName,
+      this
+    );
+  }
+
+  async delete() {
+    await EntitiesController.deleteEntity(
+      (this.constructor as typeof StorageEntity)._entityName,
+      this.id
+    );
+  }
+
+  public static async readAll<Type extends StorageEntity<any>>(this: new (...args: any[]) => Type): Promise<Type[]> {
+    return await EntitiesController.readAllEntities(
+      // Voodoo magic, once again.
+      ((this as any) as typeof StorageEntity)._entityName,
+      this
+    )
+  }
+
+  public static subscribe<Type extends StorageEntity<any>>(this: new (...args: any[]) => Type, callback: (entities: Type[]) => void): () => void {
+    return EntitiesController.subscribeToEntity(
+      // And once more.
+      ((this as any) as typeof StorageEntity)._entityName,
+      this,
+      callback
+    );
+  }
+}

src/lib/extension/entities/MaintenanceProfile.js

@@ -1,63 +0,0 @@
-import StorageEntity from "$lib/extension/base/StorageEntity.js";
-import EntitiesController from "$lib/extension/EntitiesController.js";
-
-/**
- * @typedef {Object} MaintenanceProfileSettings
- * @property {string} name
- * @property {string[]} tags
- */
-
-/**
- * Class representing the maintenance profile entity.
- */
-class MaintenanceProfile extends StorageEntity {
-  /**
-   * @param {string} id ID of the entity.
-   * @param {Partial<MaintenanceProfileSettings>} settings Maintenance profile settings object.
-   */
-  constructor(id, settings) {
-    super(id, {
-      name: settings.name || '',
-      tags: settings.tags || []
-    });
-  }
-
-  /**
-   * @return {MaintenanceProfileSettings}
-   */
-  get settings() {
-    return super.settings;
-  }
-
-  static _entityName = "profiles";
-
-  /**
-   * Read all maintenance profiles from the storage.
-   *
-   * @return {Promise<InstanceType<MaintenanceProfile>[]>}
-   */
-  static async readAll() {
-    return await EntitiesController.readAllEntities(
-      this._entityName,
-      MaintenanceProfile
-    );
-  }
-
-  /**
-   * Subscribe to the changes and receive the new list of profiles when they change.
-   *
-   * @param {function(MaintenanceProfile[]): void} callback Callback to call when the profiles change. The new list of
-   * profiles is passed as an argument.
-   *
-   * @return {function(): void} Unsubscribe function.
-   */
-  static subscribe(callback) {
-    return EntitiesController.subscribeToEntity(
-      this._entityName,
-      MaintenanceProfile,
-      callback
-    );
-  }
-}
-
-export default MaintenanceProfile;

src/lib/extension/entities/MaintenanceProfile.ts

@@ -0,0 +1,34 @@
+import StorageEntity from "$lib/extension/base/StorageEntity";
+
+export interface MaintenanceProfileSettings {
+  name: string;
+  tags: string[];
+  temporary: boolean;
+}
+
+/**
+ * Class representing the maintenance profile entity.
+ */
+export default class MaintenanceProfile extends StorageEntity<MaintenanceProfileSettings> {
+  /**
+   * @param id ID of the entity.
+   * @param settings Maintenance profile settings object.
+   */
+  constructor(id: string, settings: Partial<MaintenanceProfileSettings>) {
+    super(id, {
+      name: settings.name || '',
+      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";
+
+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,89 +0,0 @@
-import ConfigurationController from "$lib/extension/ConfigurationController.js";
-import MaintenanceProfile from "$lib/extension/entities/MaintenanceProfile.js";
-
-export default class MaintenanceSettings {
-  #isInitialized = false;
-  #activeProfileId = null;
-
-  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;
-  }
-
-  /**
-   * Set the active maintenance profile.
-   *
-   * @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;
-  }
-
-  /**
-   * 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) {
-    this.#activeProfileId = profileId;
-
-    await MaintenanceSettings.#controller.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.
-   *
-   * @return {function(): void} Unsubscribe function.
-   */
-  static subscribe(callback) {
-    return MaintenanceSettings.#controller.subscribeToChanges(settings => {
-      callback({
-        activeProfileId: settings.activeProfile || null,
-      });
-    });
-  }
-}

src/lib/extension/settings/MaintenanceSettings.ts

@@ -0,0 +1,48 @@
+import MaintenanceProfile from "$entities/MaintenanceProfile";
+import CacheableSettings from "$lib/extension/base/CacheableSettings";
+
+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.ts

@@ -0,0 +1,30 @@
+import CacheableSettings from "$lib/extension/base/CacheableSettings";
+
+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.ts

@@ -0,0 +1,28 @@
+import CacheableSettings from "$lib/extension/base/CacheableSettings";
+
+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

@@ -0,0 +1,33 @@
+import StorageEntity from "$lib/extension/base/StorageEntity";
+
+type ExportersMap = {
+  [EntityName in keyof App.EntityNamesMap]: (entity: App.EntityNamesMap[EntityName]) => Record<string, any>
+};
+
+const entitiesExporters: ExportersMap = {
+  profiles: entity => {
+    return {
+      v: 1,
+      id: entity.id,
+      name: entity.settings.name,
+      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> {
+  if (!(entityName in entitiesExporters) || !entitiesExporters.hasOwnProperty(entityName)) {
+    throw new Error(`Missing exporter for entity: ${entityName}`);
+  }
+
+  return entitiesExporters[entityName as keyof App.EntityNamesMap].call(null, entityInstance);
+}

src/lib/extension/transporting/validators.ts

@@ -0,0 +1,74 @@
+import type StorageEntity from "$lib/extension/base/StorageEntity";
+
+/**
+ * Base information on the object which should be present on every entity.
+ */
+interface BaseImportableObject {
+  /**
+   * Numeric version of the entity for upgrading.
+   */
+  v: number;
+  /**
+   * Unique ID of the entity.
+   */
+  id: string;
+}
+
+/**
+ * Utility type which combines base importable object and the entity type interfaces together. It strips away any types
+ * defined for the properties, since imported object can not be trusted and should be type-checked by the validators.
+ */
+type ImportableObject<EntityType extends StorageEntity> = { [ObjectKey in keyof BaseImportableObject]: any }
+  & { [SettingKey in keyof EntityType["settings"]]: any };
+
+/**
+ * Function for validating the entities.
+ * @todo Probably would be better to replace the throw-catch method with some kind of result-error returning type.
+ *   Errors are only properly definable in the JSDoc.
+ */
+type ValidationFunction<EntityType extends StorageEntity> = (importedObject: ImportableObject<EntityType>) => void;
+
+/**
+ * Mapping of validation functions for all entities present in the extension. Key is a name of entity and value is a
+ * function which throws an error when validation is failed.
+ */
+type EntitiesValidationMap = {
+  [EntityKey in keyof App.EntityNamesMap]?: ValidationFunction<App.EntityNamesMap[EntityKey]>;
+};
+
+/**
+ * Map of validators for each entity. Function should throw the error if validation failed.
+ */
+const entitiesValidators: EntitiesValidationMap = {
+  profiles: importedObject => {
+    if (importedObject.v !== 1) {
+      throw new Error('Unsupported version!');
+    }
+
+    if (
+      !importedObject.id
+      || typeof importedObject.id !== "string"
+      || !importedObject.name
+      || typeof importedObject.name !== "string"
+      || !importedObject.tags
+      || !Array.isArray(importedObject.tags)
+    ) {
+      throw new Error('Invalid profile format detected!');
+    }
+  }
+};
+
+/**
+ * Validate the structure of the entity.
+ * @param importedObject Object imported from JSON.
+ * @param entityName Name of the entity to validate. Should be loaded from the entity class.
+ * @throws {Error} Error in case validation failed with the reason stored in the message.
+ */
+export function validateImportedEntity(importedObject: any, entityName: string) {
+  if (!entitiesValidators.hasOwnProperty(entityName)) {
+    console.error(`Trying to validate entity without the validator present! Entity name: ${entityName}`);
+    return;
+  }
+
+  entitiesValidators[entityName as keyof EntitiesValidationMap]!.call(null, importedObject);
+}

src/lib/utils.ts

@@ -0,0 +1,41 @@
+/**
+ * Traverse and find the object using the key path.
+ * @param targetObject Target object to traverse into.
+ * @param path Path of keys to traverse deep into the object.
+ * @return Resulting object or null if nothing found (or target entry is not an object).
+ */
+export function findDeepObject(targetObject: Record<string, any>, path: string[]): Object|null {
+  let result = targetObject;
+
+  for (const key of path) {
+    if (!result || typeof result !== 'object') {
+      return null;
+    }
+
+    result = result[key];
+  }
+
+  if (!result || typeof result !== "object") {
+    return null;
+  }
+
+  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.
+ */
+const unsafeRegExpCharacters: RegExp = /[/\-\\^$*+?.()|[\]{}]/g;
+
+/**
+ * Escape all the RegExp syntax-related characters in the following value.
+ * @param value Original value.
+ * @return Resulting value with all needed characters escaped.
+ */
+export function escapeRegExp(value: string): string {
+  unsafeRegExpCharacters.lastIndex = 0;
+  return value.replace(unsafeRegExpCharacters, "\\$&");
+}

src/lib/web-components/TagEditorComponent.js

@@ -1,184 +0,0 @@
-export default class TagEditorComponent extends HTMLElement {
-  /**
-   * Array of elements representing tags.
-   * @type {HTMLElement[]}
-   */
-  #tagElements = [];
-
-  /**
-   * Generated input for adding new tags to the tag list. Will be rendered on connecting.
-   * @type {HTMLInputElement|undefined}
-   */
-  #tagInput;
-
-  /**
-   * Cached list of tag names. Changing this value will not automatically change the actual tags.
-   * @type {Set<string>}
-   */
-  #tagsSet = new Set();
-
-  constructor() {
-    super();
-  }
-
-  connectedCallback() {
-    if (!this.#tagInput) {
-      this.#tagInput = document.createElement('input');
-      this.appendChild(this.#tagInput);
-      this.#tagInput.addEventListener('keydown', this.#onKeyDownDetectActions.bind(this));
-    }
-
-    if (!this.#tagElements.length) {
-      this.#renderTags();
-    }
-
-    this.addEventListener('click', this.#onClickDetectTagRemoval.bind(this));
-  }
-
-  /**
-   * Render the list of tag elements based on the tag attribute. Should be called every time tag attribute is changed.
-   */
-  #renderTags() {
-    const tags = this.getAttribute(TagEditorComponent.#tagsAttribute) || '';
-
-    const updatedTagsSet = new Set(
-      tags.split(',')
-        .map(tagName => tagName.trim())
-        .filter(Boolean)
-    );
-
-    this.#tagsSet = new Set(updatedTagsSet.values());
-
-    this.#tagElements = this.#tagElements.filter(tagElement => {
-      const tagName = tagElement.dataset.tag;
-
-      if (!updatedTagsSet.has(tagName)) {
-        tagElement.remove();
-        return false;
-      }
-
-      updatedTagsSet.delete(tagName);
-      return true;
-    });
-
-    for (let tagName of updatedTagsSet) {
-      const tagElement = document.createElement('div');
-      tagElement.classList.add('tag');
-      tagElement.innerText = tagName;
-      tagElement.dataset.tag = tagName;
-
-      const tagRemoveElement = document.createElement("span");
-      tagRemoveElement.classList.add('remove');
-      tagRemoveElement.innerText = 'x';
-
-      tagElement.appendChild(tagRemoveElement);
-
-      this.#tagInput.insertAdjacentElement('beforebegin', tagElement);
-      this.#tagElements.push(tagElement);
-    }
-  }
-
-  /**
-   * Detect add/remove keyboard shortcuts on the input.
-   * @param {KeyboardEvent} event
-   */
-  #onKeyDownDetectActions(event) {
-    const isTagSubmit = event.key === 'Enter';
-    const isTagRemove = event.key === 'Backspace' && !this.#tagInput.value.length;
-
-    if (!isTagSubmit && !isTagRemove) {
-      return;
-    }
-
-    if (isTagSubmit) {
-      event.preventDefault();
-    }
-
-    const providedTagName = this.#tagInput.value.trim();
-
-    if (providedTagName && isTagSubmit) {
-      if (!this.#tagsSet.has(providedTagName)) {
-        this.setAttribute(
-          TagEditorComponent.#tagsAttribute,
-          [...this.#tagsSet, providedTagName].join(',')
-        );
-      }
-
-      this.#tagInput.value = '';
-      return;
-    }
-
-    if (isTagRemove && this.#tagsSet.size) {
-      this.setAttribute(
-        TagEditorComponent.#tagsAttribute,
-        [...this.#tagsSet].slice(0, -1).join(',')
-      )
-    }
-  }
-
-  /**
-   * Detect clicks on the "remove" button inside tags.
-   * @param {MouseEvent} event
-   */
-  #onClickDetectTagRemoval(event) {
-    /** @type {HTMLElement} */
-    const maybeRemoveTagElement = event.target;
-
-    if (!maybeRemoveTagElement.classList.contains('remove')) {
-      return;
-    }
-
-    /** @type {HTMLElement} */
-    const tagElement = maybeRemoveTagElement.closest('.tag');
-
-    if (!tagElement) {
-      return;
-    }
-
-    const tagName = tagElement.dataset.tag;
-
-    if (this.#tagsSet.has(tagName)) {
-      this.#tagsSet.delete(tagName);
-      this.setAttribute(
-        TagEditorComponent.#tagsAttribute,
-        [...this.#tagsSet].join(",")
-      );
-    }
-  }
-
-  /**
-   * @param {string} name
-   * @param {string} from
-   * @param {string} to
-   */
-  attributeChangedCallback(name, from, to) {
-    if (!this.isConnected) {
-      return;
-    }
-
-    if (name === TagEditorComponent.#tagsAttribute) {
-      this.#renderTags();
-
-      this.dispatchEvent(
-        new CustomEvent(
-          'change',
-          {
-            detail: [...this.#tagsSet.values()]
-          }
-        )
-      );
-    }
-  }
-
-  static get observedAttributes() {
-    return [this.#tagsAttribute];
-  }
-
-  static #tagsAttribute = 'tags';
-}
-
-if (!customElements.get('tags-editor')) {
-  customElements.define('tags-editor', TagEditorComponent);
-} else {
-  console.warn('Tags Component is attempting to initialize twice!');
-}

src/routes/+layout.svelte

@@ -2,6 +2,10 @@
     import "../styles/popup.scss";
     import Header from "$components/layout/Header.svelte";
     import Footer from "$components/layout/Footer.svelte";
+
+    // Sort of a hack, detect if we rendered in the browser tab or in the popup.
+    // Popup will always should have fixed 320px size, otherwise we consider it opened in the tab.
+    document.body.classList.toggle('is-in-tab', window.innerWidth > 320);
 </script>
 
 <Header/>

src/routes/+page.svelte

@@ -1,10 +1,29 @@
 <script>
     import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuLink from "$components/ui/menu/MenuLink.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
+    import { activeProfileStore, maintenanceProfilesStore } from "$stores/maintenance-profiles-store";
+    import MenuCheckboxItem from "$components/ui/menu/MenuCheckboxItem.svelte";
+
+    /** @type {import('$entities/MaintenanceProfile').default|undefined} */
+    let activeProfile;
+
+    $: activeProfile = $maintenanceProfilesStore.find(profile => profile.id === $activeProfileStore);
+
+    function turnOffActiveProfile() {
+        $activeProfileStore = null;
+    }
 </script>
 
 <Menu>
-    <MenuLink href="/settings/maintenance">Manual Tags Maintenance</MenuLink>
+    {#if activeProfile}
+        <MenuCheckboxItem checked on:input={turnOffActiveProfile} href="/features/maintenance/{activeProfile.id}">
+            Active Profile: {activeProfile.settings.name}
+        </MenuCheckboxItem>
+        <hr>
+    {/if}
+    <MenuItem href="/features/maintenance">Tagging Profiles</MenuItem>
+    <MenuItem href="/features/groups">Tag Groups</MenuItem>
     <hr>
-    <MenuLink href="/about">About</MenuLink>
+    <MenuItem href="/preferences">Preferences</MenuItem>
+    <MenuItem href="/about">About</MenuItem>
 </Menu>

src/routes/about/+page.svelte

@@ -1,10 +1,10 @@
 <script>
     import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuLink from "$components/ui/menu/MenuLink.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
 </script>
 
 <Menu>
-    <MenuLink icon="arrow-left" href="/">Back</MenuLink>
+    <MenuItem icon="arrow-left" href="/">Back</MenuItem>
     <hr>
 </Menu>
 <h1>
@@ -16,10 +16,10 @@
 </p>
 <Menu>
     <hr>
-    <MenuLink icon="globe" href="https://furbooru.org" target="_blank">
+    <MenuItem icon="globe" href="https://furbooru.org" target="_blank">
         Visit Furbooru
-    </MenuLink>
-    <MenuLink icon="info-circle" href="https://github.com/koloml/furbooru-tagging-assistant" target="_blank">
+    </MenuItem>
+    <MenuItem icon="info-circle" href="https://github.com/koloml/furbooru-tagging-assistant" target="_blank">
         GitHub Repo
-    </MenuLink>
+    </MenuItem>
 </Menu>

src/routes/features/+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="/">Back</MenuItem>
+    <hr>
+    <MenuItem href="/features/maintenance">Tagging Profiles</MenuItem>
+</Menu>

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";
+
+    /** @type {import('$entities/TagGroup').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";
+
+    const groupId = $page.params.id;
+    /** @type {import('$entities/TagGroup').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";
+
+    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/tags/TagsEditor.svelte";
+    import TagGroup from "$entities/TagGroup";
+    import { tagGroupsStore } from "$stores/tag-groups-store";
+
+    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";
+    import EntitiesTransporter from "$lib/extension/EntitiesTransporter";
+    import { tagGroupsStore } from "$stores/tag-groups-store";
+
+    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";
+    import EntitiesTransporter from "$lib/extension/EntitiesTransporter";
+    import { tagGroupsStore } from "$stores/tag-groups-store";
+
+    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/+page.svelte

@@ -0,0 +1,46 @@
+<script>
+    import Menu from "$components/ui/menu/Menu.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
+    import MenuRadioItem from "$components/ui/menu/MenuRadioItem.svelte";
+    import { activeProfileStore, maintenanceProfilesStore } from "$stores/maintenance-profiles-store";
+
+    /** @type {import('$entities/MaintenanceProfile').default[]} */
+    let profiles = [];
+
+    $: profiles = $maintenanceProfilesStore.sort((a, b) => a.settings.name.localeCompare(b.settings.name));
+
+    function resetActiveProfile() {
+        $activeProfileStore = null;
+    }
+
+    /**
+     * @param {Event} event
+     */
+    function enableSelectedProfile(event) {
+        const target = event.target;
+
+        if (target instanceof HTMLInputElement && target.checked) {
+            activeProfileStore.set(target.value);
+        }
+    }
+</script>
+
+<Menu>
+    <MenuItem icon="arrow-left" href="/">Back</MenuItem>
+    <MenuItem icon="plus" href="/features/maintenance/new/edit">Create New</MenuItem>
+    {#if profiles.length}
+        <hr>
+    {/if}
+    {#each profiles as profile}
+        <MenuRadioItem href="/features/maintenance/{profile.id}"
+                       name="active-profile"
+                       value="{profile.id}"
+                       checked="{$activeProfileStore === profile.id}"
+                       on:input={enableSelectedProfile}>
+            {profile.settings.name}
+        </MenuRadioItem>
+    {/each}
+    <hr>
+    <MenuItem href="#" on:click={resetActiveProfile}>Reset Active Profile</MenuItem>
+    <MenuItem href="/features/maintenance/import">Import Profile</MenuItem>
+</Menu>

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

@@ -0,0 +1,64 @@
+<script>
+    import Menu from "$components/ui/menu/Menu.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
+    import { page } from "$app/stores";
+    import { goto } from "$app/navigation";
+    import { activeProfileStore, maintenanceProfilesStore } from "$stores/maintenance-profiles-store";
+    import ProfileView from "$components/features/ProfileView.svelte";
+    import MenuCheckboxItem from "$components/ui/menu/MenuCheckboxItem.svelte";
+
+    const profileId = $page.params.id;
+    /** @type {import('$entities/MaintenanceProfile').default|null} */
+    let profile = null;
+
+    if (profileId === 'new') {
+        goto('/features/maintenance/new/edit');
+    }
+
+    $: {
+        const resolvedProfile = $maintenanceProfilesStore.find(profile => profile.id === profileId);
+
+        if (resolvedProfile) {
+            profile = resolvedProfile;
+        } else {
+            console.warn(`Profile ${profileId} not found.`);
+            goto('/features/maintenance');
+        }
+    }
+
+    let isActiveProfile = $activeProfileStore === profileId;
+
+    $: {
+        if (isActiveProfile && $activeProfileStore !== profileId) {
+            $activeProfileStore = profileId;
+        }
+
+        if (!isActiveProfile && $activeProfileStore === profileId) {
+            $activeProfileStore = null;
+        }
+    }
+</script>
+
+<Menu>
+    <MenuItem href="/features/maintenance" icon="arrow-left">Back</MenuItem>
+    <hr>
+</Menu>
+{#if profile}
+    <ProfileView {profile}/>
+{/if}
+<Menu>
+    <hr>
+    <MenuItem icon="wrench" href="/features/maintenance/{profileId}/edit">Edit Profile</MenuItem>
+    <MenuCheckboxItem bind:checked={isActiveProfile}>
+        Activate Profile
+    </MenuCheckboxItem>
+    <MenuItem icon="file-export" href="/features/maintenance/{profileId}/export">
+        Export Profile
+    </MenuItem>
+    <MenuItem icon="trash" href="/features/maintenance/{profileId}/delete">
+        Delete Profile
+    </MenuItem>
+</Menu>
+
+<style lang="scss">
+</style>

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

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

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

@@ -1,15 +1,14 @@
 <script>
     import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuLink from "$components/ui/menu/MenuLink.svelte";
-    import TagsEditor from "$components/web-components/TagsEditor.svelte";
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
+    import TagsEditor from "$components/tags/TagsEditor.svelte";
     import FormControl from "$components/ui/forms/FormControl.svelte";
     import TextField from "$components/ui/forms/TextField.svelte";
     import FormContainer from "$components/ui/forms/FormContainer.svelte";
-    import {page} from "$app/stores";
-    import {goto} from "$app/navigation";
-    import {maintenanceProfilesStore} from "$stores/maintenance-profiles-store.js";
-    import MaintenanceProfile from "$entities/MaintenanceProfile.js";
-    import {onDestroy} from "svelte";
+    import { page } from "$app/stores";
+    import { goto } from "$app/navigation";
+    import { maintenanceProfilesStore } from "$stores/maintenance-profiles-store";
+    import MaintenanceProfile from "$entities/MaintenanceProfile";
 
     /** @type {string} */
     let profileId = $page.params.id;
@@ -29,9 +28,9 @@
         if (maybeExistingProfile) {
             targetProfile = maybeExistingProfile;
             profileName = targetProfile.settings.name;
-            tagsList = [...targetProfile.settings.tags];
+            tagsList = [...targetProfile.settings.tags].sort((a, b) => a.localeCompare(b));
         } else {
-            goto('/settings/maintenance');
+            goto('/features/maintenance');
         }
     }
 
@@ -43,26 +42,17 @@
 
         targetProfile.settings.name = profileName;
         targetProfile.settings.tags = [...tagsList];
+        targetProfile.settings.temporary = false;
 
         await targetProfile.save();
-        await goto('/settings/maintenance/' + targetProfile.id);
-    }
-
-    async function deleteProfile() {
-        if (!targetProfile) {
-            console.warn('Attempting to delete the profile, but the profile is not loaded yet.');
-            return;
-        }
-
-        await targetProfile.delete();
-        await goto('/settings/maintenance');
+        await goto('/features/maintenance/' + targetProfile.id);
     }
 </script>
 
 <Menu>
-    <MenuLink icon="arrow-left" href="/settings/maintenance{profileId === 'new' ? '' : '/' + profileId}">
+    <MenuItem icon="arrow-left" href="/features/maintenance{profileId === 'new' ? '' : '/' + profileId}">
         Back
-    </MenuLink>
+    </MenuItem>
     <hr>
 </Menu>
 <FormContainer>
@@ -75,8 +65,5 @@
 </FormContainer>
 <Menu>
     <hr>
-    <MenuLink href="#" on:click={saveProfile}>Save Profile</MenuLink>
-    {#if profileId !== 'new'}
-        <MenuLink href="#" on:click={deleteProfile}>Delete Profile</MenuLink>
-    {/if}
+    <MenuItem href="#" on:click={saveProfile}>Save Profile</MenuItem>
 </Menu>

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

@@ -0,0 +1,52 @@
+<script>
+    import { page } from "$app/stores";
+    import { goto } from "$app/navigation";
+    import { maintenanceProfilesStore } from "$stores/maintenance-profiles-store";
+    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 EntitiesTransporter from "$lib/extension/EntitiesTransporter";
+    import MaintenanceProfile from "$entities/MaintenanceProfile";
+
+    const profileId = $page.params.id;
+    const profile = $maintenanceProfilesStore.find(profile => profile.id === profileId);
+
+    const profilesTransporter = new EntitiesTransporter(MaintenanceProfile);
+    /** @type {string} */
+    let exportedProfile = '';
+    /** @type {string} */
+    let compressedProfile = '';
+
+    if (!profile) {
+        goto('/features/maintenance/');
+    } else {
+        exportedProfile = profilesTransporter.exportToJSON(profile);
+        compressedProfile = profilesTransporter.exportToCompressedJSON(profile);
+    }
+
+    let isCompressedProfileShown = true;
+</script>
+
+<Menu>
+    <MenuItem href="/features/maintenance/{profileId}" icon="arrow-left">
+        Back
+    </MenuItem>
+    <hr>
+</Menu>
+<FormContainer>
+    <FormControl label="Export string">
+        <textarea readonly rows="6">{isCompressedProfileShown ? compressedProfile : exportedProfile}</textarea>
+    </FormControl>
+</FormContainer>
+<Menu>
+    <hr>
+    <MenuItem on:click={() => isCompressedProfileShown = !isCompressedProfileShown}>
+        Switch Format:
+        {#if isCompressedProfileShown}
+            Base64-Encoded
+        {:else}
+            Raw JSON
+        {/if}
+    </MenuItem>
+</Menu>

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

@@ -0,0 +1,134 @@
+<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 MaintenanceProfile from "$entities/MaintenanceProfile";
+    import FormControl from "$components/ui/forms/FormControl.svelte";
+    import ProfileView from "$components/features/ProfileView.svelte";
+    import { maintenanceProfilesStore } from "$stores/maintenance-profiles-store";
+    import { goto } from "$app/navigation";
+    import EntitiesTransporter from "$lib/extension/EntitiesTransporter";
+
+    const profilesTransporter = new EntitiesTransporter(MaintenanceProfile);
+
+    /** @type {string} */
+    let importedString = '';
+    /** @type {string} */
+    let errorMessage = '';
+
+    /** @type {MaintenanceProfile|null} */
+    let candidateProfile = null;
+    /** @type {MaintenanceProfile|null} */
+    let existingProfile = null;
+
+    function tryImportingProfile() {
+        candidateProfile = null;
+        existingProfile = null;
+
+        errorMessage = '';
+        importedString = importedString.trim();
+
+        if (!importedString) {
+            errorMessage = 'Nothing to import.';
+            return;
+        }
+
+        try {
+            if (importedString.trim().startsWith('{')) {
+                candidateProfile = profilesTransporter.importFromJSON(importedString);
+            }
+
+            candidateProfile = profilesTransporter.importFromCompressedJSON(importedString);
+        } catch (error) {
+            errorMessage = error instanceof Error
+                    ? error.message
+                    : 'Unknown error';
+        }
+
+        if (candidateProfile) {
+            existingProfile = $maintenanceProfilesStore.find(profile => profile.id === candidateProfile?.id) ?? null;
+        }
+    }
+
+    function saveProfile() {
+        if (!candidateProfile) {
+            return;
+        }
+
+        candidateProfile.save().then(() => {
+            goto(`/features/maintenance`);
+        });
+    }
+
+    function cloneAndSaveProfile() {
+        if (!candidateProfile) {
+            return;
+        }
+
+        const clonedProfile = new MaintenanceProfile(crypto.randomUUID(), candidateProfile.settings);
+        clonedProfile.settings.name += ` (Clone ${new Date().toISOString()})`;
+        clonedProfile.save().then(() => {
+            goto(`/features/maintenance`);
+        });
+    }
+</script>
+
+<Menu>
+    <MenuItem icon="arrow-left" href="/features/maintenance">Back</MenuItem>
+    <hr>
+</Menu>
+{#if errorMessage}
+    <p class="error">Failed to import: {errorMessage}</p>
+    <Menu>
+        <hr>
+    </Menu>
+{/if}
+{#if !candidateProfile}
+    <FormContainer>
+        <FormControl label="Import string">
+            <textarea bind:value={importedString} rows="6"></textarea>
+        </FormControl>
+    </FormContainer>
+    <Menu>
+        <hr>
+        <MenuItem on:click={tryImportingProfile}>Import</MenuItem>
+    </Menu>
+{:else}
+    {#if existingProfile}
+        <p class="warning">
+            This profile will replace the existing "{existingProfile.settings.name}" profile, since it have the same ID.
+        </p>
+    {/if}
+    <ProfileView profile="{candidateProfile}"></ProfileView>
+    <Menu>
+        <hr>
+        {#if existingProfile}
+            <MenuItem on:click={saveProfile}>Replace Existing Profile</MenuItem>
+            <MenuItem on:click={cloneAndSaveProfile}>Save as New Profile</MenuItem>
+        {:else}
+            <MenuItem on:click={saveProfile}>Import New Profile</MenuItem>
+        {/if}
+        <MenuItem on:click={() => candidateProfile = 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/preferences/+page.svelte

@@ -0,0 +1,14 @@
+<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/tags">Tagging</MenuItem>
+    <MenuItem href="/preferences/search">Search</MenuItem>
+    <MenuItem href="/preferences/misc">Misc & Tools</MenuItem>
+    <hr>
+    <MenuItem href="/preferences/debug">Debug</MenuItem>
+</Menu>

src/routes/preferences/debug/+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="/preferences" icon="arrow-left">Back</MenuItem>
+    <hr>
+    <MenuItem href="/preferences/debug/storage">Inspect Storages</MenuItem>
+</Menu>

src/routes/preferences/debug/storage/+page.svelte

@@ -0,0 +1,13 @@
+<script>
+    import MenuItem from "$components/ui/menu/MenuItem.svelte";
+    import Menu from "$components/ui/menu/Menu.svelte";
+    import { storagesCollection } from "$stores/debug";
+</script>
+
+<Menu>
+    <MenuItem href="/preferences/debug" icon="arrow-left">Back</MenuItem>
+    <hr>
+    {#each Object.keys($storagesCollection) as storageName}
+        <MenuItem href="/preferences/debug/storage/{storageName}/">Storage: {storageName}</MenuItem>
+    {/each}
+</Menu>

src/routes/preferences/debug/storage/[...path]/+page.svelte

@@ -0,0 +1,29 @@
+<script>
+    import StorageViewer from "$components/debugging/StorageViewer.svelte";
+    import { page } from "$app/stores";
+    import { goto } from "$app/navigation";
+
+    let pathString = '';
+    /** @type {string[]} */
+    let pathArray = [];
+    /** @type {string|undefined} */
+    let storageName = void 0;
+
+    $: {
+        pathString = $page.params.path;
+        pathArray = pathString.length ? pathString.split("/") : [];
+        storageName = pathArray.shift()
+
+        if (pathArray.length && pathArray[pathArray.length - 1] === '') {
+            pathArray.pop();
+        }
+
+        if (!storageName) {
+            goto("/preferences/debug/storage");
+        }
+    }
+</script>
+
+{#if storageName}
+    <StorageViewer storage="{storageName}" path="{pathArray}"></StorageViewer>
+{/if}

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

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

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

@@ -0,0 +1,35 @@
+<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";
+    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>
+    <MenuItem icon="arrow-left" href="/preferences">Back</MenuItem>
+    <hr>
+</Menu>
+<FormContainer>
+    <FormControl>
+        <CheckboxField bind:checked={$searchPropertiesSuggestionsEnabled}>
+            Auto-complete properties
+        </CheckboxField>
+    </FormControl>
+    {#if $searchPropertiesSuggestionsEnabled}
+        <FormControl label="Show completed properties:">
+            <SelectField bind:value={$searchPropertiesSuggestionsPosition}
+                         options="{propertiesPositions}"></SelectField>
+        </FormControl>
+    {/if}
+</FormContainer>

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";
+</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/routes/settings/+page.svelte

@@ -1,10 +0,0 @@
-<script>
-    import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuLink from "$components/ui/menu/MenuLink.svelte";
-</script>
-
-<Menu>
-    <MenuLink href="/">Back</MenuLink>
-    <hr>
-    <MenuLink href="/settings/maintenance">Maintenance</MenuLink>
-</Menu>

src/routes/settings/maintenance/+page.svelte

@@ -1,30 +0,0 @@
-<script>
-    import Menu from "$components/ui/menu/Menu.svelte";
-    import MenuLink from "$components/ui/menu/MenuLink.svelte";
-    import {activeProfileStore, maintenanceProfilesStore} from "$stores/maintenance-profiles-store.js";
-
-    /** @type {import('$lib/extension/entities/MaintenanceProfile.js').default[]} */
-    let profiles = [];
-
-    $: profiles = $maintenanceProfilesStore.sort((a, b) => b.settings.name.localeCompare(a.settings.name));
-
-    function resetActiveProfile() {
-        $activeProfileStore = null;
-    }
-</script>
-
-<Menu>
-    <MenuLink icon="arrow-left" href="/">Back</MenuLink>
-    <MenuLink icon="plus" href="/settings/maintenance/new/edit">Create New</MenuLink>
-    {#if profiles.length}
-        <hr>
-    {/if}
-    {#each profiles as profile}
-        <MenuLink href="/settings/maintenance/{profile.id}"
-                  icon="{$activeProfileStore === profile.id ? 'tag' : null}">
-            {profile.settings.name}
-        </MenuLink>
-    {/each}
-    <hr>
-    <MenuLink href="#" on:click={resetActiveProfile}>Reset Active Profile</MenuLink>
-</Menu>