Merge pull request #161 from koloml/feature/tagging-profiles-code-renaming

Refactoring: Renaming the entity classes, updating the API for accessing preferences values

.github/workflows/build-extensions.yml

@@ -0,0 +1,63 @@
+name: Build Extensions
+
+on:
+  push:
+    branches: [ master ]
+
+jobs:
+  build-extensions:
+    runs-on: ubuntu-latest
+    
+    strategy:
+      matrix:
+        site: [furbooru, derpibooru, tantabus]
+    
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+      
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+        cache: 'npm'
+        
+    - name: Install dependencies
+      run: npm ci
+      
+    - name: Build extension for ${{ matrix.site }}
+      run: |
+        if [ "${{ matrix.site }}" = "furbooru" ]; then
+          npm run build
+        else
+          npm run build:${{ matrix.site }}
+        fi
+        
+    - name: Create extension zip
+      run: |
+        cd build
+        zip -r "../${{ matrix.site }}-tagging-assistant-extension.zip" .
+        
+    - name: Upload extension artifact
+      uses: actions/upload-artifact@v4
+      with:
+        name: ${{ matrix.site }}-tagging-assistant-extension
+        path: ${{ matrix.site }}-tagging-assistant-extension.zip
+        retention-days: 30
+
+  create-release-artifacts:
+    runs-on: ubuntu-latest
+    needs: build-extensions
+    
+    steps:
+    - name: Download all artifacts
+      uses: actions/download-artifact@v4
+      with:
+        path: artifacts
+        
+    - name: Create combined artifact
+      uses: actions/upload-artifact@v4
+      with:
+        name: all-extensions
+        path: artifacts/
+        retention-days: 90

.vite/lib/content-scripts.js

@@ -1,7 +1,9 @@
-import {build} from "vite";
-import {createHash} from "crypto";
+import { build } from "vite";
+import { createHash } from "crypto";
 import path from "path";
 import fs from "fs";
+import { SwapDefinedVariablesPlugin } from "../plugins/swap-defined-variables.js";
+import { ScssViteReadEnvVariableFunctionPlugin } from "../plugins/scss-read-env-variable-function.js";
 
 /**
  * Create the result base file name for the file.
@@ -49,6 +51,7 @@ function wrapScriptIntoIIFE() {
 function makeAliases(rootDir) {
   return {
     "$config": path.resolve(rootDir, 'src/config'),
+    "$content": path.resolve(rootDir, 'src/content'),
     "$lib": path.resolve(rootDir, 'src/lib'),
     "$entities": path.resolve(rootDir, 'src/lib/extension/entities'),
     "$styles": path.resolve(rootDir, 'src/styles'),
@@ -56,69 +59,198 @@ function makeAliases(rootDir) {
 }
 
 /**
- * Build the selected script separately.
- * @param {AssetBuildOptions} buildOptions Building options for the script.
- * @return {Promise<string>} Result file path.
+ * @param {import('rollup').OutputChunk} chunk
+ * @param {import('rollup').OutputBundle} bundle
+ * @param {Set<import('rollup').OutputChunk>} processedChunks
+ * @return string[]
  */
-export async function buildScript(buildOptions) {
-  const outputBaseName = createOutputBaseName(buildOptions.input);
+function collectChunkDependencies(chunk, bundle, processedChunks = new Set()) {
+  if (processedChunks.has(chunk) || !chunk.imports) {
+    return [];
+  }
 
+  processedChunks.add(chunk);
+
+  return chunk.imports.concat(
+    chunk.imports
+      .map(importedChunkName => {
+        const module = bundle[importedChunkName];
+
+        if (module.type === 'chunk') {
+          return collectChunkDependencies(module, bundle, processedChunks);
+        }
+
+        return [];
+      })
+      .flat()
+  );
+}
+
+/**
+ * @param {(fileName: string, dependencies: string[]) => void} onDependencyResolvedCallback
+ * @returns {import('vite').Plugin}
+ */
+function collectDependenciesForManifestBuilding(onDependencyResolvedCallback) {
+  return {
+    name: 'extract-dependencies-for-content-scripts',
+    enforce: "post",
+    /**
+     * @param {any} options
+     * @param {import('rollup').OutputBundle} bundle
+     */
+    writeBundle(options, bundle) {
+      Object.keys(bundle).forEach(fileName => {
+        const chunk = bundle[fileName];
+
+        if (chunk.type !== "chunk" || !chunk.facadeModuleId) {
+          return;
+        }
+
+        const dependencies = Array.from(
+          new Set(
+            collectChunkDependencies(chunk, bundle)
+          )
+        );
+
+        onDependencyResolvedCallback(fileName, dependencies);
+      });
+    }
+  }
+}
+
+/**
+ * Second revision of the building logic for the content scripts. This method tries to address duplication of
+ * dependencies generated with the previous method, where every single content script was built separately.
+ * @param {BatchBuildOptions} buildOptions
+ * @returns {Promise<Map<string, string[]>>}
+ */
+export async function buildScriptsAndStyles(buildOptions) {
+  /** @type {Map<string, string[]>} */
+  const pathsReplacement = new Map();
+  /** @type {Map<string, string[]>} */
+  const pathsReplacementByOutputPath = new Map();
+
+  const amdScriptsInput = {};
+  const libsAndStylesInput = {};
+
+  for (const inputPath of buildOptions.inputs) {
+    let outputExtension = path.extname(inputPath);
+
+    if (outputExtension === '.scss') {
+      outputExtension = '.css';
+    }
+
+    if (outputExtension === '.ts') {
+      outputExtension = '.js';
+    }
+
+    const outputPath = createOutputBaseName(inputPath);
+    const replacementsArray = [`${outputPath}${outputExtension}`];
+
+    pathsReplacement.set(inputPath, replacementsArray);
+
+    if (outputExtension === '.css' || inputPath.includes('/deps/')) {
+      libsAndStylesInput[outputPath] = inputPath;
+      continue;
+    }
+
+    pathsReplacementByOutputPath.set(outputPath + '.js', replacementsArray);
+
+    amdScriptsInput[outputPath] = inputPath;
+  }
+
+  const aliasesSettings = makeAliases(buildOptions.rootDir);
+  const defineConstants = {
+    __CURRENT_SITE__: JSON.stringify('furbooru'),
+    __CURRENT_SITE_NAME__: JSON.stringify('Furbooru'),
+  };
+
+  const derpibooruSwapPlugin = SwapDefinedVariablesPlugin({
+    envVariable: 'SITE',
+    expectedValue: 'derpibooru',
+    define: {
+      __CURRENT_SITE__: JSON.stringify('derpibooru'),
+      __CURRENT_SITE_NAME__: JSON.stringify('Derpibooru'),
+    }
+  });
+
+  const tantabusSwapPlugin = SwapDefinedVariablesPlugin({
+    envVariable: 'SITE',
+    expectedValue: 'tantabus',
+    define: {
+      __CURRENT_SITE__: JSON.stringify('tantabus'),
+      __CURRENT_SITE_NAME__: JSON.stringify('Tantabus'),
+    }
+  });
+
+  // Building all scripts together with AMD loader in mind
   await build({
     configFile: false,
     publicDir: false,
     build: {
       rollupOptions: {
-        input: {
-          [outputBaseName]: buildOptions.input
-        },
+        input: amdScriptsInput,
         output: {
           dir: buildOptions.outputDir,
-          entryFileNames: '[name].js'
+          entryFileNames: '[name].js',
+          chunkFileNames: 'chunks/[name]-[hash].js',
+          // ManifestV3 doesn't allow to use modern ES modules syntax, so we build all content scripts as AMD modules.
+          format: "amd",
+          inlineDynamicImports: false,
+          amd: {
+            // amd-lite requires names even for the entry-point scripts, so we should make sure to add those.
+            autoId: true,
+          },
+          // All these modules are not intended to be used outside of extension anyway
+          minifyInternalExports: true,
         }
       },
       emptyOutDir: false,
     },
     resolve: {
-      alias: makeAliases(buildOptions.rootDir)
+      alias: aliasesSettings,
     },
     plugins: [
-      wrapScriptIntoIIFE()
-    ]
+      wrapScriptIntoIIFE(),
+      collectDependenciesForManifestBuilding((fileName, dependencies) => {
+        pathsReplacementByOutputPath
+          .get(fileName)
+          ?.push(...dependencies);
+      }),
+      derpibooruSwapPlugin,
+      tantabusSwapPlugin,
+    ],
+    define: defineConstants,
   });
 
-  return path.resolve(buildOptions.outputDir, `${outputBaseName}.js`);
-}
-
-/**
- * Build the selected stylesheet.
- * @param {AssetBuildOptions} buildOptions Build options for the stylesheet.
- * @return {Promise<string>} Result file path.
- */
-export async function buildStyle(buildOptions) {
-  const outputBaseName = createOutputBaseName(buildOptions.input);
-
+  // Build styles separately because AMD converts styles to JS files.
   await build({
     configFile: false,
     publicDir: false,
     build: {
       rollupOptions: {
-        input: {
-          [outputBaseName]: buildOptions.input
-        },
+        input: libsAndStylesInput,
         output: {
           dir: buildOptions.outputDir,
           entryFileNames: '[name].js',
           assetFileNames: '[name].[ext]',
         }
       },
-      emptyOutDir: false,
+      emptyOutDir: false
     },
     resolve: {
-      alias: makeAliases(buildOptions.rootDir)
-    }
+      alias: aliasesSettings,
+    },
+    plugins: [
+      wrapScriptIntoIIFE(),
+      ScssViteReadEnvVariableFunctionPlugin(),
+      derpibooruSwapPlugin,
+      tantabusSwapPlugin,
+    ],
+    define: defineConstants,
   });
 
-  return path.resolve(buildOptions.outputDir, `${outputBaseName}.css`);
+  return pathsReplacement;
 }
 
 /**
@@ -127,3 +259,11 @@ export async function buildStyle(buildOptions) {
  * @property {string} outputDir Destination folder for the script.
  * @property {string} rootDir Root directory of the repository.
  */
+
+/**
+ * @typedef {Object} BatchBuildOptions
+ * @property {Set<string>} inputs Set of all scripts and styles to build.
+ * @property {string} outputDir Destination folder for the assets.
+ * @property {string} rootDir Root directory of the repository.
+ * @property {(fileName: string, dependencies: string[]) => void} onDependenciesResolved Callback for dependencies.
+ */

.vite/lib/manifest.js

@@ -17,6 +17,38 @@ class ManifestProcessor {
     this.#manifestObject = parsedManifest;
   }
 
+  /**
+   * Collect all the content scripts & stylesheets for single build action.
+   *
+   * @returns {Set<string>}
+   */
+  collectContentScripts() {
+    const contentScripts = this.#manifestObject.content_scripts;
+
+    if (!contentScripts) {
+      console.info('No content scripts to collect.');
+      return new Set();
+    }
+
+    const entryPoints = new Set();
+
+    for (let entry of contentScripts) {
+      if (entry.js) {
+        for (let jsPath of entry.js) {
+          entryPoints.add(jsPath);
+        }
+      }
+
+      if (entry.css) {
+        for (let cssPath of entry.css) {
+          entryPoints.add(cssPath);
+        }
+      }
+    }
+
+    return entryPoints;
+  }
+
   /**
    * Map over every content script defined in the manifest. If no content scripts defined, no calls will be made to the
    * callback.
@@ -54,6 +86,53 @@ class ManifestProcessor {
     }
   }
 
+  /**
+   * Find all patterns in content scripts and host permissions and replace the hostname to the different one.
+   *
+   * @param {string|string[]} singleOrMultipleHostnames One or multiple hostnames to replace the original hostname with.
+   */
+  replaceHostTo(singleOrMultipleHostnames) {
+    if (typeof singleOrMultipleHostnames === 'string') {
+      singleOrMultipleHostnames = [singleOrMultipleHostnames];
+    }
+
+    this.#manifestObject.host_permissions = singleOrMultipleHostnames.map(hostname => `*://*.${hostname}/`);
+
+    this.#manifestObject.content_scripts?.forEach(entry => {
+      entry.matches = entry.matches.reduce((resultMatches, originalMatchPattern) => {
+        for (const updatedHostname of singleOrMultipleHostnames) {
+          resultMatches.push(
+            originalMatchPattern.replace(
+              /\*:\/\/\*\.[a-z]+\.[a-z]+\//,
+              `*://*.${updatedHostname}/`
+            ),
+          );
+        }
+
+        return resultMatches;
+      }, []);
+    })
+  }
+
+  /**
+   * Set different identifier for Gecko-based browsers (Firefox).
+   *
+   * @param {string} id ID of the extension to use.
+   */
+  setGeckoIdentifier(id) {
+    this.#manifestObject.browser_specific_settings.gecko.id = id;
+  }
+
+  /**
+   * Set the different extension name.
+   *
+   * @param {string} booruName
+   */
+  replaceBooruNameWith(booruName) {
+    this.#manifestObject.name = this.#manifestObject.name.replaceAll('Furbooru', booruName);
+    this.#manifestObject.description = this.#manifestObject.description.replaceAll('Furbooru', booruName);
+  }
+
   /**
    * Save the current state of the manifest into the selected file.
    *
@@ -86,13 +165,27 @@ export function loadManifest(filePath) {
 
 /**
  * @typedef {Object} Manifest
+ * @property {string} name
+ * @property {string} description
  * @property {string} version
+ * @property {BrowserSpecificSettings} browser_specific_settings
+ * @property {string[]} host_permissions
  * @property {ContentScriptsEntry[]|undefined} content_scripts
  */
 
+/**
+ * @typedef {Object} BrowserSpecificSettings
+ * @property {GeckoSettings} gecko
+ */
+
+/**
+ * @typedef {Object} GeckoSettings
+ * @property {string} id
+ */
+
 /**
  * @typedef {Object} ContentScriptsEntry
- * @property {string[]} mathces
+ * @property {string[]} matches
  * @property {string[]|undefined} js
  * @property {string[]|undefined} css
  */

.vite/pack-extension.js

@@ -1,8 +1,8 @@
-import {loadManifest} from "./lib/manifest.js";
+import { loadManifest } from "./lib/manifest.js";
 import path from "path";
-import {buildScript, buildStyle} from "./lib/content-scripts.js";
-import {normalizePath} from "vite";
-import {extractInlineScriptsFromIndex} from "./lib/index-file.js";
+import { buildScriptsAndStyles } from "./lib/content-scripts.js";
+import { extractInlineScriptsFromIndex } from "./lib/index-file.js";
+import { normalizePath } from "vite";
 
 /**
  * Build addition assets required for the extension and pack it into the directory.
@@ -11,45 +11,81 @@ import {extractInlineScriptsFromIndex} from "./lib/index-file.js";
 export async function packExtension(settings) {
   const manifest = loadManifest(path.resolve(settings.rootDir, 'manifest.json'));
 
-  // Since we CAN'T really build all scripts and stylesheets in a single build entry, we will run build for every single
-  // one of them in a row. This way, no chunks will be generated. Thanks, ManifestV3!
-  await manifest.mapContentScripts(async (entry) => {
-    if (entry.js) {
-      for (let scriptIndex = 0; scriptIndex < entry.js.length; scriptIndex++) {
-        const builtScriptFilePath = await buildScript({
-          input: path.resolve(settings.rootDir, entry.js[scriptIndex]),
-          outputDir: settings.contentScriptsDir,
-          rootDir: settings.rootDir,
-        });
+  const replacementMapping = await buildScriptsAndStyles({
+    inputs: manifest.collectContentScripts(),
+    outputDir: settings.contentScriptsDir,
+    rootDir: settings.rootDir,
+  });
 
-        entry.js[scriptIndex] = normalizePath(
-          path.relative(
-            settings.exportDir,
-            builtScriptFilePath
+  await manifest.mapContentScripts(async entry => {
+    if (entry.js) {
+      entry.js = entry.js
+        .map(jsSourcePath => {
+          if (!replacementMapping.has(jsSourcePath)) {
+            return [];
+          }
+
+          return replacementMapping.get(jsSourcePath);
+        })
+        .flat(1)
+        .map(pathName => {
+          return normalizePath(
+            path.relative(
+              settings.exportDir,
+              path.join(
+                settings.contentScriptsDir,
+                pathName
+              )
+            )
           )
-        );
-      }
+        });
     }
 
     if (entry.css) {
-      for (let styleIndex = 0; styleIndex < entry.css.length; styleIndex++) {
-        const builtStylesheetFilePath = await buildStyle({
-          input: path.resolve(settings.rootDir, entry.css[styleIndex]),
-          outputDir: settings.contentScriptsDir,
-          rootDir: settings.rootDir
-        });
+      entry.css = entry.css
+        .map(jsSourcePath => {
+          if (!replacementMapping.has(jsSourcePath)) {
+            return [];
+          }
 
-        entry.css[styleIndex] = normalizePath(
-          path.relative(
-            settings.exportDir,
-            builtStylesheetFilePath
+          return replacementMapping.get(jsSourcePath);
+        })
+        .flat(1)
+        .map(pathName => {
+          return normalizePath(
+            path.relative(
+              settings.exportDir,
+              path.join(
+                settings.contentScriptsDir,
+                pathName
+              )
+            )
           )
-        );
-      }
+        })
     }
 
     return entry;
-  });
+  })
+
+  switch (process.env.SITE) {
+    case 'derpibooru':
+      manifest.replaceHostTo([
+        'derpibooru.org',
+        'trixiebooru.org'
+      ]);
+      manifest.replaceBooruNameWith('Derpibooru');
+      manifest.setGeckoIdentifier('derpibooru-tagging-assistant@thecore.city');
+      break;
+
+    case 'tantabus':
+      manifest.replaceHostTo('tantabus.ai');
+      manifest.replaceBooruNameWith('Tantabus');
+      manifest.setGeckoIdentifier('tantabus-tagging-assistant@thecore.city');
+      break;
+
+    default:
+      console.warn('No replacement set up for site: ' + process.env.SITE);
+  }
 
   manifest.passVersionFromPackage(path.resolve(settings.rootDir, 'package.json'));
   manifest.saveTo(path.resolve(settings.exportDir, 'manifest.json'));

.vite/plugins/scss-read-env-variable-function.js

@@ -0,0 +1,46 @@
+import { SassString, Value } from "sass";
+
+/**
+ * @return {import('vite').Plugin}
+ */
+export function ScssViteReadEnvVariableFunctionPlugin() {
+  return {
+    name: 'koloml:scss-read-env-variable-function',
+    apply: 'build',
+    enforce: 'post',
+
+    configResolved: config => {
+      config.css.preprocessorOptions ??= {};
+      config.css.preprocessorOptions.scss ??= {};
+      config.css.preprocessorOptions.scss.functions ??= {};
+
+      /**
+       * @param {Value[]} args
+       * @return {SassString}
+       */
+      config.css.preprocessorOptions.scss.functions['vite-read-env-variable($constant-name)'] = (args) => {
+        const constName = args[0].assertString('constant-name').text;
+
+        if (config.define && config.define.hasOwnProperty(constName)) {
+          let returnedValue = config.define[constName];
+
+          try {
+            returnedValue = JSON.parse(returnedValue);
+          } catch {
+            returnedValue = null;
+          }
+
+          if (typeof returnedValue !== 'string') {
+            console.warn(`Attempting to read the constant with non-string type: ${constName}`);
+            return new SassString('');
+          }
+
+          return new SassString(returnedValue);
+        }
+
+        console.warn(`Constant does not exist: ${constName}`);
+        return new SassString('');
+      }
+    }
+  }
+}

.vite/plugins/swap-defined-variables.js

@@ -0,0 +1,28 @@
+/**
+ * @param {SwapDefinedVariablesSettings} settings
+ * @return {import('vite').Plugin}
+ */
+export function SwapDefinedVariablesPlugin(settings) {
+  return {
+    name: 'koloml:swap-defined-variables',
+    enforce: 'post',
+    configResolved: (config) => {
+      if (
+        config.define
+        && process.env.hasOwnProperty(settings.envVariable)
+        && process.env[settings.envVariable] === settings.expectedValue
+      ) {
+        for (const [key, value] of Object.entries(settings.define)) {
+          config.define[key] = value;
+        }
+      }
+    }
+  }
+}
+
+/**
+ * @typedef {Object} SwapDefinedVariablesSettings
+ * @property {string} envVariable
+ * @property {string} expectedValue
+ * @property {Record<string, string>} define
+ */

README.md

@@ -1,10 +1,48 @@
-# Furbooru Tagging Assistant
+# Philomena Tagging Assistant
+
+This is a browser extension written for the [Furbooru](https://furbooru.org), [Derpibooru](https://derpibooru.org) and
+[Tantabus](https://tantabus.ai) image-boards. It gives you the ability to manually go over the list of images and apply 
+tags to them without opening each individual image.
+
+## Installation
+
+This extension is available for both Chromium- and Firefox-based browsers. You can find the links to the extension pages
+below.
+
+### 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.
+### Derpibooru Tagging Assistant
+
+[![Get the Add-on on Firefox](.github/assets/firefox.png)](https://addons.mozilla.org/en-US/firefox/addon/derpibooru-tagging-assistant/)
+[![Get the extension on Chrome](.github/assets/chrome.png)](https://chromewebstore.google.com/detail/pnmbomcdbfcghgmegklfofncfigdielb)
+
+## Features
+
+### Tagging Profiles
+
+Select a set of tags and add/remove them from images without opening them. Just hover over image, click on tags and 
+you're done!
+
+![Tagging Profiles Showcase](.github/assets/profiles-showcase.png)
+
+### Custom Tag Groups
+
+Customize the list of tags with your own custom tag groups. Apply custom colors to different groups or even separate 
+them from each other with group titles.
+
+![Tag Groups Showcase](.github/assets/groups-showcase.png)
+
+### Fullscreen Viewer
+
+Open up the specific image or video in fullscreen mode by clicking 🔍 icon in the bottom left corner of the image. This 
+feature is opt-in and should be enabled in the settings first.
+
+![Fullscreen Viewer Icon](.github/assets/fullscreen-viewer-icon.png)
+
+![Fullscreen Viewer Showcase](.github/assets/fullscreen-viewer-showcase.png)
 
 ## Building
 
@@ -19,11 +57,21 @@ 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:
+content scripts/stylesheets and copy the manifest afterward.
+
+Extension can currently be built for multiple different imageboards using one of the following commands:
 
 ```shell
+# Furbooru:
 npm run build
+
+# Derpibooru:
+npm run build:derpibooru
+
+# Tantabus:
+npm run build:tantabus
 ```
 
-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.  
+When build is complete, extension  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 and loaded
+into Firefox.

manifest.json

@@ -1,10 +1,15 @@
 {
     "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.4.5",
+    "description": "Small experimental extension for slightly quicker tagging experience. Furbooru Edition.",
+    "version": "0.6.1",
     "browser_specific_settings": {
         "gecko": {
-            "id": "furbooru-tagging-assistant@thecore.city"
+            "id": "furbooru-tagging-assistant@thecore.city",
+            "data_collection_permissions": {
+                "required": [
+                    "none"
+                ]
+            }
         }
     },
     "icons": {
@@ -18,6 +23,14 @@
         "*://*.furbooru.org/"
     ],
     "content_scripts": [
+        {
+            "matches": [
+                "*://*.furbooru.org/*"
+            ],
+            "js": [
+                "src/content/deps/amd.ts"
+            ]
+        },
         {
             "matches": [
                 "*://*.furbooru.org/",
@@ -33,23 +46,15 @@
                 "src/styles/content/listing.scss"
             ]
         },
-        {
-            "matches": [
-                "*://*.furbooru.org/*"
-            ],
-            "js": [
-                "src/content/header.ts"
-            ],
-            "css": [
-                "src/styles/content/header.scss"
-            ]
-        },
         {
             "matches": [
                 "*://*.furbooru.org/images/*"
             ],
             "js": [
                 "src/content/tags-editor.ts"
+            ],
+            "css": [
+                "src/styles/content/tags-editor.scss"
             ]
         },
         {
@@ -69,6 +74,19 @@
             "js": [
                 "src/content/tags.ts"
             ]
+        },
+        {
+            "matches": [
+                "*://*.furbooru.org/posts",
+                "*://*.furbooru.org/posts?*",
+                "*://*.furbooru.org/forums/*/topics/*"
+            ],
+            "js": [
+                "src/content/posts.ts"
+            ],
+            "css": [
+                "src/styles/content/posts.scss"
+            ]
         }
     ],
     "action": {

package.json

@@ -1,9 +1,12 @@
 {
     "name": "furbooru-tagging-assistant",
-    "version": "0.4.5",
+    "version": "0.6.1",
     "private": true,
+    "type": "module",
     "scripts": {
         "build": "npm run build:popup && npm run build:extension",
+        "build:derpibooru": "cross-env SITE=derpibooru npm run build",
+        "build:tantabus": "cross-env SITE=tantabus npm run build",
         "build:popup": "vite build",
         "build:extension": "node build-extension.js",
         "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -11,25 +14,26 @@
         "test": "vitest run --coverage",
         "test:watch": "vitest watch --coverage"
     },
-    "devDependencies": {
-        "@sveltejs/adapter-static": "^3.0.8",
-        "@sveltejs/kit": "^2.21.1",
-        "@sveltejs/vite-plugin-svelte": "^5.0.3",
-        "@types/chrome": "^0.0.326",
-        "@types/node": "^22.15.29",
-        "@vitest/coverage-v8": "^3.2.0",
-        "cheerio": "^1.0.0",
-        "jsdom": "^26.1.0",
-        "sass": "^1.89.1",
-        "svelte": "^5.33.14",
-        "svelte-check": "^4.2.1",
-        "typescript": "^5.8.3",
-        "vite": "^6.3.5",
-        "vitest": "^3.2.0"
-    },
-    "type": "module",
     "dependencies": {
-        "@fortawesome/fontawesome-free": "^6.7.2",
-        "lz-string": "^1.5.0"
+        "@sveltejs/adapter-static": "^3.0.10",
+        "@sveltejs/kit": "^2.53.0",
+        "@fortawesome/fontawesome-free": "^7.2.0",
+        "amd-lite": "^1.0.1",
+        "lz-string": "^1.5.0",
+        "sass": "^1.97.3",
+        "svelte": "^5.53.3"
+    },
+    "devDependencies": {
+        "@sveltejs/vite-plugin-svelte": "^6.2.4",
+        "@types/chrome": "^0.1.37",
+        "@types/node": "^25.3.0",
+        "@vitest/coverage-v8": "^4.0.18",
+        "cheerio": "^1.2.0",
+        "cross-env": "^10.1.0",
+        "jsdom": "^28.1.0",
+        "svelte-check": "^4.4.3",
+        "typescript": "^5.9.3",
+        "vite": "^7.3.1",
+        "vitest": "^4.0.18"
     }
 }

src/app.d.ts

@@ -1,9 +1,19 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
-import MaintenanceProfile from "$entities/MaintenanceProfile";
+import TaggingProfile from "$entities/TaggingProfile";
 import type TagGroup from "$entities/TagGroup";
 
 declare global {
+  /**
+   * Identifier of the current site this extension is built for.
+   */
+  const __CURRENT_SITE__: string;
+
+  /**
+   * Name of the site.
+   */
+  const __CURRENT_SITE_NAME__: string;
+
   // Helper type to not deal with differences between the setTimeout of @types/node and usual web browser's type.
   type Timeout = ReturnType<typeof setTimeout>;
 
@@ -27,7 +37,7 @@ declare global {
       );
 
     interface EntityNamesMap {
-      profiles: MaintenanceProfile;
+      profiles: TaggingProfile;
       groups: TagGroup;
     }
 

src/components/features/ProfileView.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-  import type MaintenanceProfile from "$entities/MaintenanceProfile";
+  import type TaggingProfile from "$entities/TaggingProfile";
 
   interface ProfileViewProps {
-    profile: MaintenanceProfile;
+    profile: TaggingProfile;
   }
 
   let { profile }: ProfileViewProps = $props();
 
-  const sortedTagsList = profile.settings.tags.sort((a, b) => a.localeCompare(b));
+  const sortedTagsList = $derived(profile.settings.tags.sort((a, b) => a.localeCompare(b)));
 </script>
 
 <div class="block">

src/components/layout/Header.svelte

@@ -1,5 +1,9 @@
+<script lang="ts">
+  import { PLUGIN_NAME } from "$lib/constants";
+</script>
+
 <header>
-  <a href="/">Furbooru Tagging Assistant</a>
+  <a href="/">{PLUGIN_NAME}</a>
 </header>
 
 <style lang="scss">

src/components/tags/TagsColorContainer.svelte

@@ -19,50 +19,60 @@
   .tag-color-container:is(:global(.tag-color-container--rating)) :global(.tag) {
     background-color: colors.$tag-rating-background;
     color: colors.$tag-rating-text;
+    border-color: colors.$tag-rating-border;
   }
 
   .tag-color-container:is(:global(.tag-color-container--spoiler)) :global(.tag) {
     background-color: colors.$tag-spoiler-background;
     color: colors.$tag-spoiler-text;
+    border-color: colors.$tag-spoiler-border;
   }
 
   .tag-color-container:is(:global(.tag-color-container--origin)) :global(.tag) {
     background-color: colors.$tag-origin-background;
     color: colors.$tag-origin-text;
+    border-color: colors.$tag-origin-border;
   }
 
   .tag-color-container:is(:global(.tag-color-container--oc)) :global(.tag) {
     background-color: colors.$tag-oc-background;
     color: colors.$tag-oc-text;
+    border-color: colors.$tag-oc-border;
   }
 
   .tag-color-container:is(:global(.tag-color-container--error)) :global(.tag) {
     background-color: colors.$tag-error-background;
     color: colors.$tag-error-text;
+    border-color: colors.$tag-error-border;
   }
 
   .tag-color-container:is(:global(.tag-color-container--character)) :global(.tag) {
     background-color: colors.$tag-character-background;
     color: colors.$tag-character-text;
+    border-color: colors.$tag-character-border;
   }
 
   .tag-color-container:is(:global(.tag-color-container--content-official)) :global(.tag) {
     background-color: colors.$tag-content-official-background;
     color: colors.$tag-content-official-text;
+    border-color: colors.$tag-content-official-border;
   }
 
   .tag-color-container:is(:global(.tag-color-container--content-fanmade)) :global(.tag) {
     background-color: colors.$tag-content-fanmade-background;
     color: colors.$tag-content-fanmade-text;
+    border-color: colors.$tag-content-fanmade-border;
   }
 
   .tag-color-container:is(:global(.tag-color-container--species)) :global(.tag) {
     background-color: colors.$tag-species-background;
     color: colors.$tag-species-text;
+    border-color: colors.$tag-species-border;
   }
 
   .tag-color-container:is(:global(.tag-color-container--body-type)) :global(.tag) {
     background-color: colors.$tag-body-type-background;
     color: colors.$tag-body-type-text;
+    border-color: colors.$tag-body-type-border;
   }
 </style>

src/components/ui/Notice.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  interface MessageProps {
+    children?: import('svelte').Snippet;
+    level: 'warning' | 'error';
+  }
+
+  let { children, level }: MessageProps = $props();
+</script>
+
+<p class="{level}">
+  {@render children?.()}
+</p>
+
+<style lang="scss">
+  @use '$styles/colors';
+
+  p {
+    padding: 5px 24px;
+    margin: {
+      left: -24px;
+      right: -24px;
+    }
+  }
+
+  .warning {
+    background: colors.$warning-background;
+  }
+
+  .error {
+    background: colors.$error-background;
+  }
+</style>

src/components/ui/forms/TagCategorySelectField.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import SelectField from "$components/ui/forms/SelectField.svelte";
-  import { categories } from "$lib/booru/tag-categories";
+  import { categories } from "$config/tags";
 
   interface TagCategorySelectFieldProps {
     value?: string;

src/components/ui/menu/MenuCheckboxItem.svelte

@@ -9,10 +9,19 @@
     value?: string;
     href?: string;
     children?: Snippet;
+    /**
+     * Click event received by the checkbox input element.
+     */
     onclick?: MouseEventHandler<HTMLInputElement>;
     oninput?: FormEventHandler<HTMLInputElement>;
+    /**
+     * Click event received by the menu item instead of the checkbox element.
+     */
+    onitemclick?: MouseEventHandler<HTMLElement>;
   }
 
+  let checkboxElement: HTMLInputElement;
+
   let {
     checked = $bindable(),
     name = undefined,
@@ -21,16 +30,61 @@
     children,
     onclick,
     oninput,
+    onitemclick,
   }: MenuCheckboxItemProps = $props();
 
+  /**
+   * Prevent clicks from getting sent to the menu link if user clicked directly on the checkbox.
+   * @param originalEvent
+   */
   function stopPropagationAndPassCallback(originalEvent: MouseEvent) {
     originalEvent.stopPropagation();
     onclick?.(originalEvent as MouseEvent & { currentTarget: HTMLInputElement });
   }
+
+  /**
+   * Check and try to toggle checkbox if href was not provided for the menu item.
+   */
+  function maybeToggleCheckboxOnOuterLinkClicked(event: MouseEvent) {
+    // Call the event handler if present.
+    if (onitemclick) {
+      onitemclick(event as MouseEvent & {currentTarget: HTMLElement});
+
+      // If it was prevented, then don't attempt to run checkbox toggling workaround.
+      if (event.defaultPrevented) {
+        return;
+      }
+    }
+
+    // When menu link does not contain any link, we should just treat clicks on it as toggle action on checkbox.
+    if (!href) {
+      checked = !checked;
+
+      // Since we've toggled it using the `checked` property and input does not trigger `onclick` when we do something
+      // programmatically, we should create valid event and send it back to the parent component so it will handle
+      // whatever it wants.
+      if (oninput) {
+        // Uhh, not sure if this is how it should be done, but we need `currentTarget` to point on the checkbox. Without
+        // dispatching the event, we can't fill it normally. Also, input element does not return us untrusted input
+        // events automatically. Probably should make the util function later in case I'd need something similar.
+        checkboxElement.addEventListener('input', (inputEvent: Event) => {
+          oninput(inputEvent as Event & { currentTarget: HTMLInputElement });
+        }, { once: true })
+
+        checkboxElement.dispatchEvent(new InputEvent('input'));
+      }
+    }
+  }
 </script>
 
-<MenuLink {href}>
-  <input bind:checked={checked} {name} onclick={stopPropagationAndPassCallback} {oninput} type="checkbox" {value}>
+<MenuLink {href} onclick={maybeToggleCheckboxOnOuterLinkClicked}>
+  <input bind:this={checkboxElement}
+         bind:checked={checked}
+         {name}
+         onclick={stopPropagationAndPassCallback}
+         {oninput}
+         type="checkbox"
+         {value}>
   {@render children?.()}
 </MenuLink>
 

src/config/tags.ts

@@ -1,4 +1,51 @@
-export const tagsBlacklist: string[] = [
+/**
+ * List of categories defined by the sites.
+ */
+export const categories: string[] = [
+  'rating',
+  'spoiler',
+  'origin',
+  'oc',
+  'error',
+  'character',
+  'content-official',
+  'content-fanmade',
+  'species',
+  'body-type',
+];
+
+/**
+ * Mapping of namespaces to their respective categories. These namespaces are automatically assigned to them, so we can
+ * automatically assume categories of tags which start with them. Mapping is extracted from Philomena directly.
+ *
+ * This mapping may differ between boorus.
+ *
+ * @see https://github.com/philomena-dev/philomena/blob/6086757b654da8792ae52adb2a2f501ea6c30d12/lib/philomena/tags/tag.ex#L33-L45
+ */
+export const namespaceCategories: Map<string, string> = new Map([
+  ['artist', 'origin'],
+  ['art pack', 'content-fanmade'],
+  ['colorist', 'origin'],
+  ['comic', 'content-fanmade'],
+  ['editor', 'origin'],
+  ['fanfic', 'content-fanmade'],
+  ['oc', 'oc'],
+  ['photographer', 'origin'],
+  ['series', 'content-fanmade'],
+  ['spoiler', 'spoiler'],
+  ['video', 'content-fanmade'],
+  ...(__CURRENT_SITE__ === 'tantabus' ? <const> [
+    ["prompter", "origin"],
+    ["creator", "origin"],
+    ["generator", "origin"]
+  ] : [])
+]);
+
+/**
+ * List of tags which marked by the site as blacklisted. These tags are blocked from being added by the tag editor and
+ * should usually just be removed automatically.
+ */
+export const tagsBlacklist: string[] = (__CURRENT_SITE__ === 'furbooru' ? [
   "anthro art",
   "anthro artist",
   "anthro cute",
@@ -63,4 +110,21 @@ export const tagsBlacklist: string[] = [
   "tagme",
   "upvotes galore",
   "wall of faves"
-];
+] : [
+  "tagme",
+  "tag me",
+  "not tagged",
+  "no tag",
+  "notag",
+  "notags",
+  "upvotes galore",
+  "downvotes galore",
+  "wall of faves",
+  "drama in the comments",
+  "drama in comments",
+  "tag needed",
+  "paywall",
+  "cringeworthy",
+  "solo oc",
+  "tag your shit"
+]);

src/content/components/base/BaseComponent.ts

@@ -1,4 +1,4 @@
-import { bindComponent } from "$lib/components/base/component-utils";
+import { bindComponent } from "$content/components/base/component-utils";
 
 type ComponentEventListener<EventName extends keyof HTMLElementEventMap> =
   (this: HTMLElement, event: HTMLElementEventMap[EventName]) => void;

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

@@ -1,4 +1,4 @@
-import type { BaseComponent } from "$lib/components/base/BaseComponent";
+import type { BaseComponent } from "$content/components/base/BaseComponent";
 
 const instanceSymbol = Symbol.for('instance');
 

src/content/components/events/comms.ts

@@ -1,9 +1,9 @@
-import type { MaintenancePopupEventsMap } from "$lib/components/events/maintenance-popup-events";
-import { BaseComponent } from "$lib/components/base/BaseComponent";
-import type { FullscreenViewerEventsMap } from "$lib/components/events/fullscreen-viewer-events";
-import type { BooruEventsMap } from "$lib/components/events/booru-events";
-import type { TagsFormEventsMap } from "$lib/components/events/tags-form-events";
-import type { TagDropdownEvents } from "$lib/components/events/tag-dropdown-events";
+import type { MaintenancePopupEventsMap } from "$content/components/events/maintenance-popup-events";
+import { BaseComponent } from "$content/components/base/BaseComponent";
+import type { FullscreenViewerEventsMap } from "$content/components/events/fullscreen-viewer-events";
+import type { BooruEventsMap } from "$content/components/events/booru-events";
+import type { TagsFormEventsMap } from "$content/components/events/tags-form-events";
+import type { TagDropdownEvents } from "$content/components/events/tag-dropdown-events";
 
 type EventsMapping =
   MaintenancePopupEventsMap

src/content/components/events/fullscreen-viewer-events.ts

@@ -1,4 +1,4 @@
-import type { FullscreenViewerSize } from "$lib/extension/settings/MiscSettings";
+import type { FullscreenViewerSize } from "$lib/extension/preferences/MiscPreferences";
 
 export const EVENT_SIZE_LOADED = 'size-loaded';
 

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

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

src/content/components/extension/FullscreenViewer.ts

@@ -1,7 +1,7 @@
-import { BaseComponent } from "$lib/components/base/BaseComponent";
-import MiscSettings, { type FullscreenViewerSize } from "$lib/extension/settings/MiscSettings";
-import { emit, on } from "$lib/components/events/comms";
-import { EVENT_SIZE_LOADED } from "$lib/components/events/fullscreen-viewer-events";
+import { BaseComponent } from "$content/components/base/BaseComponent";
+import MiscPreferences, { type FullscreenViewerSize } from "$lib/extension/preferences/MiscPreferences";
+import { emit, on } from "$content/components/events/comms";
+import { EVENT_SIZE_LOADED } from "$content/components/events/fullscreen-viewer-events";
 
 export class FullscreenViewer extends BaseComponent {
   #videoElement: HTMLVideoElement = document.createElement('video');
@@ -53,8 +53,8 @@ export class FullscreenViewer extends BaseComponent {
     this.#imageElement.addEventListener('load', this.#onLoaded.bind(this));
     this.#sizeSelectorElement.addEventListener('click', event => event.stopPropagation());
 
-    FullscreenViewer.#miscSettings
-      .resolveFullscreenViewerPreviewSize()
+    FullscreenViewer.#preferences
+      .fullscreenViewerSize.get()
       .then(this.#onSizeResolved.bind(this))
       .then(this.#watchForSizeSelectionChanges.bind(this));
   }
@@ -179,7 +179,7 @@ export class FullscreenViewer extends BaseComponent {
   #watchForSizeSelectionChanges() {
     let lastActiveSize = this.#sizeSelectorElement.value;
 
-    FullscreenViewer.#miscSettings.subscribe(settings => {
+    FullscreenViewer.#preferences.subscribe(settings => {
       const targetSize = settings.fullscreenViewerSize;
 
       if (!targetSize || lastActiveSize === targetSize) {
@@ -202,7 +202,7 @@ export class FullscreenViewer extends BaseComponent {
       }
 
       lastActiveSize = targetSize;
-      void FullscreenViewer.#miscSettings.setFullscreenViewerPreviewSize(targetSize);
+      void FullscreenViewer.#preferences.fullscreenViewerSize.set(targetSize as FullscreenViewerSize);
     });
   }
 
@@ -289,7 +289,7 @@ export class FullscreenViewer extends BaseComponent {
     return url.endsWith('.mp4') || url.endsWith('.webm');
   }
 
-  static #miscSettings = new MiscSettings();
+  static #preferences = new MiscPreferences();
 
   static #offsetProperty = '--offset';
   static #opacityProperty = '--opacity';

src/content/components/extension/ImageShowFullscreenButton.ts

@@ -1,8 +1,8 @@
-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";
-import type { MediaBoxTools } from "$lib/components/MediaBoxTools";
+import { BaseComponent } from "$content/components/base/BaseComponent";
+import { getComponent } from "$content/components/base/component-utils";
+import MiscPreferences from "$lib/extension/preferences/MiscPreferences";
+import { FullscreenViewer } from "$content/components/extension/FullscreenViewer";
+import type { MediaBoxTools } from "$content/components/extension/MediaBoxTools";
 
 export class ImageShowFullscreenButton extends BaseComponent {
   #mediaBoxTools: MediaBoxTools | null = null;
@@ -10,8 +10,6 @@ export class ImageShowFullscreenButton extends BaseComponent {
 
   protected build() {
     this.container.innerText = '🔍';
-
-    ImageShowFullscreenButton.#miscSettings ??= new MiscSettings();
   }
 
   protected init() {
@@ -27,14 +25,14 @@ export class ImageShowFullscreenButton extends BaseComponent {
 
     this.on('click', this.#onButtonClicked.bind(this));
 
-    if (ImageShowFullscreenButton.#miscSettings) {
-      ImageShowFullscreenButton.#miscSettings.resolveFullscreenViewerEnabled()
+    if (ImageShowFullscreenButton.#preferences) {
+      ImageShowFullscreenButton.#preferences.fullscreenViewer.get()
         .then(isEnabled => {
           this.#isFullscreenButtonEnabled = isEnabled;
           this.#updateFullscreenButtonVisibility();
         })
         .then(() => {
-          ImageShowFullscreenButton.#miscSettings?.subscribe(settings => {
+          ImageShowFullscreenButton.#preferences?.subscribe(settings => {
             this.#isFullscreenButtonEnabled = settings.fullscreenViewer ?? true;
             this.#updateFullscreenButtonVisibility();
           })
@@ -58,6 +56,15 @@ export class ImageShowFullscreenButton extends BaseComponent {
       ?.show(imageLinks);
   }
 
+  static create(): HTMLElement {
+    const element = document.createElement('div');
+    element.classList.add('media-box-show-fullscreen');
+
+    new ImageShowFullscreenButton(element);
+
+    return element;
+  }
+
   static #viewer: FullscreenViewer | null = null;
 
   static #resolveViewer(): FullscreenViewer {
@@ -76,14 +83,5 @@ export class ImageShowFullscreenButton extends BaseComponent {
     return viewer;
   }
 
-  static #miscSettings: MiscSettings | null = null;
-}
-
-export function createImageShowFullscreenButton() {
-  const element = document.createElement('div');
-  element.classList.add('media-box-show-fullscreen');
-
-  new ImageShowFullscreenButton(element);
-
-  return element;
+  static #preferences = new MiscPreferences();
 }

src/content/components/extension/MediaBoxTools.ts

@@ -0,0 +1,74 @@
+import { BaseComponent } from "$content/components/base/BaseComponent";
+import { getComponent } from "$content/components/base/component-utils";
+import { TaggingProfilePopup } from "$content/components/extension/profiles/TaggingProfilePopup";
+import { on } from "$content/components/events/comms";
+import { EVENT_ACTIVE_PROFILE_CHANGED } from "$content/components/events/maintenance-popup-events";
+import type { MediaBox } from "$content/components/philomena/MediaBox";
+import type TaggingProfile from "$entities/TaggingProfile";
+
+export class MediaBoxTools extends BaseComponent {
+  #mediaBox: MediaBox | null = null;
+  #maintenancePopup: TaggingProfilePopup | null = null;
+
+  init() {
+    const mediaBoxElement = this.container.closest<HTMLElement>('.media-box');
+
+    if (!mediaBoxElement) {
+      throw new Error('Toolbox element initialized outside of the media box!');
+    }
+
+    this.#mediaBox = getComponent(mediaBoxElement);
+
+    for (let childElement of this.container.children) {
+      if (!(childElement instanceof HTMLElement)) {
+        continue;
+      }
+
+      const component = getComponent(childElement);
+
+      if (!component) {
+        continue;
+      }
+
+      if (!component.isInitialized) {
+        component.initialize();
+      }
+
+      if (!this.#maintenancePopup && component instanceof TaggingProfilePopup) {
+        this.#maintenancePopup = component;
+      }
+    }
+
+    on(this, EVENT_ACTIVE_PROFILE_CHANGED, this.#onActiveProfileChanged.bind(this));
+  }
+
+  #onActiveProfileChanged(profileChangedEvent: CustomEvent<TaggingProfile | null>) {
+    this.container.classList.toggle('has-active-profile', profileChangedEvent.detail !== null);
+  }
+
+  get maintenancePopup(): TaggingProfilePopup | null {
+    return this.#maintenancePopup;
+  }
+
+  get mediaBox(): MediaBox | null {
+    return this.#mediaBox;
+  }
+
+  /**
+   * Create a maintenance popup element.
+   * @param childrenElements List of children elements to append to the component.
+   * @return The maintenance popup element.
+   */
+  static create(...childrenElements: HTMLElement[]): HTMLElement {
+    const mediaBoxToolsContainer = document.createElement('div');
+    mediaBoxToolsContainer.classList.add('media-box-tools');
+
+    if (childrenElements.length) {
+      mediaBoxToolsContainer.append(...childrenElements);
+    }
+
+    new MediaBoxTools(mediaBoxToolsContainer);
+
+    return mediaBoxToolsContainer;
+  }
+}

src/content/components/extension/profiles/TaggingProfilePopup.ts

@@ -1,16 +1,17 @@
-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 TaggingProfilesPreferences from "$lib/extension/preferences/TaggingProfilesPreferences";
+import TaggingProfile from "$entities/TaggingProfile";
+import { BaseComponent } from "$content/components/base/BaseComponent";
+import { getComponent } from "$content/components/base/component-utils";
+import ScrapedAPI from "$lib/philomena/scraping/ScrapedAPI";
 import { tagsBlacklist } from "$config/tags";
-import { emitterAt } from "$lib/components/events/comms";
+import { emitterAt } from "$content/components/events/comms";
 import {
   EVENT_ACTIVE_PROFILE_CHANGED,
   EVENT_MAINTENANCE_STATE_CHANGED,
   EVENT_TAGS_UPDATED
-} from "$lib/components/events/maintenance-popup-events";
-import type { MediaBoxTools } from "$lib/components/MediaBoxTools";
+} from "$content/components/events/maintenance-popup-events";
+import type { MediaBoxTools } from "$content/components/extension/MediaBoxTools";
+import { resolveTagCategoryFromTagName } from "$lib/philomena/tag-utils";
 
 class BlackListedTagsEncounteredError extends Error {
   constructor(tagName: string) {
@@ -20,11 +21,11 @@ class BlackListedTagsEncounteredError extends Error {
   }
 }
 
-export class MaintenancePopup extends BaseComponent {
+export class TaggingProfilePopup extends BaseComponent {
   #tagsListElement: HTMLElement = document.createElement('div');
   #tagsList: HTMLElement[] = [];
   #suggestedInvalidTags: Map<string, HTMLElement> = new Map();
-  #activeProfile: MaintenanceProfile | null = null;
+  #activeProfile: TaggingProfile | null = null;
   #mediaBoxTools: MediaBoxTools | null = null;
   #tagsToRemove: Set<string> = new Set();
   #tagsToAdd: Set<string> = new Set();
@@ -65,7 +66,7 @@ export class MaintenancePopup extends BaseComponent {
 
     this.#mediaBoxTools = mediaBoxTools;
 
-    MaintenancePopup.#watchActiveProfile(this.#onActiveProfileChanged.bind(this));
+    TaggingProfilePopup.#watchActiveProfile(this.#onActiveProfileChanged.bind(this));
     this.#tagsListElement.addEventListener('click', this.#handleTagClick.bind(this));
 
     const mediaBox = this.#mediaBoxTools.mediaBox;
@@ -78,7 +79,7 @@ export class MaintenancePopup extends BaseComponent {
     mediaBox.on('mouseover', this.#onMouseEnteredArea.bind(this));
   }
 
-  #onActiveProfileChanged(activeProfile: MaintenanceProfile | null) {
+  #onActiveProfileChanged(activeProfile: TaggingProfile | null) {
     this.#activeProfile = activeProfile;
     this.container.classList.toggle('is-active', activeProfile !== null);
     this.#refreshTagsList();
@@ -109,7 +110,7 @@ export class MaintenancePopup extends BaseComponent {
     activeProfileTagsList
       .sort((a, b) => a.localeCompare(b))
       .forEach((tagName, index) => {
-        const tagElement = MaintenancePopup.#buildTagElement(tagName);
+        const tagElement = TaggingProfilePopup.#buildTagElement(tagName);
         this.#tagsList[index] = tagElement;
         this.#tagsListElement.appendChild(tagElement);
 
@@ -121,8 +122,13 @@ export class MaintenancePopup extends BaseComponent {
 
         // Just to prevent duplication, we need to include this tag to the map of suggested invalid tags
         if (tagsBlacklist.includes(tagName)) {
-          MaintenancePopup.#markTagAsInvalid(tagElement);
+          TaggingProfilePopup.#markTagElementWithCategory(tagElement, 'error');
           this.#suggestedInvalidTags.set(tagName, tagElement);
+        } else {
+          TaggingProfilePopup.#markTagElementWithCategory(
+            tagElement,
+            resolveTagCategoryFromTagName(tagName) ?? '',
+          );
         }
       });
   }
@@ -173,7 +179,7 @@ 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);
+        TaggingProfilePopup.#notifyAboutPendingSubmission(true);
       }
 
       this.#isPlanningToSubmit = true;
@@ -191,7 +197,7 @@ export class MaintenancePopup extends BaseComponent {
     if (this.#isPlanningToSubmit && !this.#isSubmitting) {
       this.#tagsSubmissionTimer = setTimeout(
         this.#onSubmissionTimerPassed.bind(this),
-        MaintenancePopup.#delayBeforeSubmissionMs
+        TaggingProfilePopup.#delayBeforeSubmissionMs
       );
     }
   }
@@ -208,10 +214,10 @@ export class MaintenancePopup extends BaseComponent {
 
     let maybeTagsAndAliasesAfterUpdate;
 
-    const shouldAutoRemove = await MaintenancePopup.#maintenanceSettings.resolveStripBlacklistedTags();
+    const shouldAutoRemove = await TaggingProfilePopup.#preferences.stripBlacklistedTags.get();
 
     try {
-      maybeTagsAndAliasesAfterUpdate = await MaintenancePopup.#scrapedAPI.updateImageTags(
+      maybeTagsAndAliasesAfterUpdate = await TaggingProfilePopup.#scrapedAPI.updateImageTags(
         this.#mediaBoxTools.mediaBox.imageId,
         tagsList => {
           for (let tagName of this.#tagsToRemove) {
@@ -244,7 +250,7 @@ export class MaintenancePopup extends BaseComponent {
         console.warn('Tags submission failed:', e);
       }
 
-      MaintenancePopup.#notifyAboutPendingSubmission(false);
+      TaggingProfilePopup.#notifyAboutPendingSubmission(false);
 
       this.#emitter.emit(EVENT_MAINTENANCE_STATE_CHANGED, 'failed');
       this.#isSubmitting = false;
@@ -262,7 +268,7 @@ export class MaintenancePopup extends BaseComponent {
     this.#tagsToRemove.clear();
 
     this.#refreshTagsList();
-    MaintenancePopup.#notifyAboutPendingSubmission(false);
+    TaggingProfilePopup.#notifyAboutPendingSubmission(false);
 
     this.#isSubmitting = false;
   }
@@ -286,8 +292,8 @@ export class MaintenancePopup extends BaseComponent {
           continue;
         }
 
-        const tagElement = MaintenancePopup.#buildTagElement(tagName);
-        MaintenancePopup.#markTagAsInvalid(tagElement);
+        const tagElement = TaggingProfilePopup.#buildTagElement(tagName);
+        TaggingProfilePopup.#markTagElementWithCategory(tagElement, 'error');
         tagElement.classList.add('is-present');
 
         this.#suggestedInvalidTags.set(tagName, tagElement);
@@ -305,6 +311,14 @@ export class MaintenancePopup extends BaseComponent {
     return this.container.classList.contains('is-active');
   }
 
+  static create(): HTMLElement {
+    const container = document.createElement('div');
+
+    new this(container);
+
+    return container;
+  }
+
   static #buildTagElement(tagName: string): HTMLElement {
     const tagElement = document.createElement('span');
     tagElement.classList.add('tag');
@@ -315,18 +329,19 @@ export class MaintenancePopup extends BaseComponent {
   }
 
   /**
-   * Marks the tag with red color.
+   * Mark the tag element with specified category.
    * @param tagElement Element to mark.
+   * @param category Code name of category to mark.
    */
-  static #markTagAsInvalid(tagElement: HTMLElement) {
-    tagElement.dataset.tagCategory = 'error';
-    tagElement.setAttribute('data-tag-category', 'error');
+  static #markTagElementWithCategory(tagElement: HTMLElement, category: string) {
+    tagElement.dataset.tagCategory = category;
+    tagElement.setAttribute('data-tag-category', category);
   }
 
   /**
    * Controller with maintenance settings.
    */
-  static #maintenanceSettings = new MaintenanceSettings();
+  static #preferences = new TaggingProfilesPreferences();
 
   /**
    * Subscribe to all necessary feeds to watch for every active profile change. Additionally, will execute the callback
@@ -334,10 +349,10 @@ export class MaintenancePopup extends BaseComponent {
    * @param callback Callback to execute whenever selection of active profile or profile itself has been changed.
    * @return Unsubscribe function. Call it to stop watching for changes.
    */
-  static #watchActiveProfile(callback: (profile: MaintenanceProfile | null) => void): () => void {
+  static #watchActiveProfile(callback: (profile: TaggingProfile | null) => void): () => void {
     let lastActiveProfileId: string | null | undefined = null;
 
-    const unsubscribeFromProfilesChanges = MaintenanceProfile.subscribe(profiles => {
+    const unsubscribeFromProfilesChanges = TaggingProfile.subscribe(profiles => {
       if (lastActiveProfileId) {
         callback(
           profiles.find(profile => profile.id === lastActiveProfileId) || null
@@ -345,20 +360,18 @@ export class MaintenancePopup extends BaseComponent {
       }
     });
 
-    const unsubscribeFromMaintenanceSettings = this.#maintenanceSettings.subscribe(settings => {
+    const unsubscribeFromMaintenanceSettings = this.#preferences.subscribe(settings => {
       if (settings.activeProfile === lastActiveProfileId) {
         return;
       }
 
       lastActiveProfileId = settings.activeProfile;
 
-      this.#maintenanceSettings
-        .resolveActiveProfileAsObject()
+      this.#preferences.activeProfile.asObject()
         .then(callback);
     });
 
-    this.#maintenanceSettings
-      .resolveActiveProfileAsObject()
+    this.#preferences.activeProfile.asObject()
       .then(profileOrNull => {
         if (profileOrNull) {
           lastActiveProfileId = profileOrNull.id;
@@ -409,11 +422,3 @@ export class MaintenancePopup extends BaseComponent {
    */
   static #pendingSubmissionCount: number|null = null;
 }
-
-export function createMaintenancePopup() {
-  const container = document.createElement('div');
-
-  new MaintenancePopup(container);
-
-  return container;
-}

src/content/components/extension/profiles/TaggingProfileStatusIcon.ts

@@ -1,10 +1,10 @@
-import { BaseComponent } from "$lib/components/base/BaseComponent";
-import { getComponent } from "$lib/components/base/component-utils";
-import { on } from "$lib/components/events/comms";
-import { EVENT_MAINTENANCE_STATE_CHANGED } from "$lib/components/events/maintenance-popup-events";
-import type { MediaBoxTools } from "$lib/components/MediaBoxTools";
+import { BaseComponent } from "$content/components/base/BaseComponent";
+import { getComponent } from "$content/components/base/component-utils";
+import { on } from "$content/components/events/comms";
+import { EVENT_MAINTENANCE_STATE_CHANGED } from "$content/components/events/maintenance-popup-events";
+import type { MediaBoxTools } from "$content/components/extension/MediaBoxTools";
 
-export class MaintenanceStatusIcon extends BaseComponent {
+export class TaggingProfileStatusIcon extends BaseComponent {
   #mediaBoxTools: MediaBoxTools | null = null;
 
   build() {
@@ -52,13 +52,13 @@ export class MaintenanceStatusIcon extends BaseComponent {
         this.container.innerText = '❓';
     }
   }
-}
-
-export function createMaintenanceStatusIcon() {
-  const element = document.createElement('div');
-  element.classList.add('maintenance-status-icon');
-
-  new MaintenanceStatusIcon(element);
-
-  return element;
+
+  static create(): HTMLElement {
+    const element = document.createElement('div');
+    element.classList.add('maintenance-status-icon');
+
+    new TaggingProfileStatusIcon(element);
+
+    return element;
+  }
 }

src/content/components/philomena/BlockCommunication.ts

@@ -0,0 +1,133 @@
+import { BaseComponent } from "$content/components/base/BaseComponent";
+import TagsPreferences from "$lib/extension/preferences/TagsPreferences";
+import { getComponent } from "$content/components/base/component-utils";
+import { resolveTagNameFromLink, resolveTagCategoryFromTagName } from "$lib/philomena/tag-utils";
+
+export class BlockCommunication extends BaseComponent {
+  #contentSection: HTMLElement | null = null;
+  #tagLinks: HTMLAnchorElement[] = [];
+
+  #tagLinksReplaced: boolean | null = null;
+  #linkTextReplaced: boolean | null = null;
+
+  protected build() {
+    this.#contentSection = this.container.querySelector('.communication__content');
+    this.#tagLinks = this.#findAllTagLinks();
+  }
+
+  protected init() {
+    Promise.all([
+      BlockCommunication.#preferences.replaceLinks.get(),
+      BlockCommunication.#preferences.replaceLinkText.get(),
+    ]).then(([replaceLinks, replaceLinkText]) => {
+      this.#onReplaceLinkSettingResolved(
+        replaceLinks,
+        replaceLinkText
+      );
+    });
+
+    BlockCommunication.#preferences.subscribe(settings => {
+      this.#onReplaceLinkSettingResolved(
+        settings.replaceLinks ?? false,
+        settings.replaceLinkText ?? true
+      );
+    });
+  }
+
+  #onReplaceLinkSettingResolved(haveToReplaceLinks: boolean, shouldReplaceLinkText: boolean) {
+    if (
+      !this.#tagLinks.length
+      || this.#tagLinksReplaced === haveToReplaceLinks
+      && this.#linkTextReplaced === shouldReplaceLinkText
+    ) {
+      return;
+    }
+
+    for (const linkElement of this.#tagLinks) {
+      linkElement.classList.toggle('tag', haveToReplaceLinks);
+
+      // Sometimes tags are being decorated with the code block inside. It should be fine to replace it right away.
+      if (linkElement.childElementCount === 1 && linkElement.children[0].tagName === 'CODE') {
+        linkElement.textContent = linkElement.children[0].textContent;
+      }
+
+      /**
+       * Resolved tag name. It should be stored for the text replacement.
+       */
+      let tagName: string | undefined;
+
+      if (haveToReplaceLinks) {
+        tagName = resolveTagNameFromLink(new URL(linkElement.href)) ?? '';
+        linkElement.dataset.tagCategory = resolveTagCategoryFromTagName(tagName) ?? '';
+      } else {
+        linkElement.dataset.tagCategory = '';
+      }
+
+      this.#toggleTagLinkText(
+        linkElement,
+        haveToReplaceLinks && shouldReplaceLinkText,
+        tagName,
+      );
+    }
+
+    this.#tagLinksReplaced = haveToReplaceLinks;
+    this.#linkTextReplaced = shouldReplaceLinkText;
+  }
+
+  /**
+   * Swap the link text with the tag name or restore it back to original content. This function will only perform
+   * replacement on links without any additional tags inside. This will ensure link won't break original content.
+   * @param linkElement Element to swap the text on.
+   * @param shouldSwapToTagName Should we swap the text to tag name or retore it back from memory.
+   * @param tagName Tag name to swap the text to. If not provided, text will be swapped back.
+   * @private
+   */
+  #toggleTagLinkText(linkElement: HTMLElement, shouldSwapToTagName: boolean, tagName?: string) {
+    if (linkElement.childElementCount) {
+      return;
+    }
+
+    // Make sure we save the original text to memory.
+    if (!BlockCommunication.#originalTagLinkTexts.has(linkElement)) {
+      BlockCommunication.#originalTagLinkTexts.set(linkElement, linkElement.textContent);
+    }
+
+    if (shouldSwapToTagName && tagName) {
+      linkElement.textContent = tagName;
+    } else {
+      linkElement.textContent = BlockCommunication.#originalTagLinkTexts.get(linkElement) ?? linkElement.textContent;
+    }
+  }
+
+  #findAllTagLinks(): HTMLAnchorElement[] {
+    return Array
+      .from(this.#contentSection?.querySelectorAll('a') || [])
+      .filter(
+        link =>
+          // Support links pointing to the tag page.
+          link.pathname.startsWith('/tags/')
+          // Also capture link which point to the search results with single tag.
+          || link.pathname.startsWith('/search')
+          && link.search.includes('q=')
+      );
+  }
+
+  static #preferences = new TagsPreferences();
+
+  /**
+   * Map of links to their original texts. These texts need to be stored here to make them restorable. Keys is a link
+   * element and value is a text.
+   * @private
+   */
+  static #originalTagLinkTexts: WeakMap<HTMLElement, string> = new WeakMap();
+
+  static findAndInitializeAll() {
+    for (const container of document.querySelectorAll<HTMLElement>('.block.communication')) {
+      if (getComponent(container)) {
+        continue;
+      }
+
+      new BlockCommunication(container).initialize();
+    }
+  }
+}

src/content/components/philomena/MediaBox.ts

@@ -0,0 +1,103 @@
+import { BaseComponent } from "$content/components/base/BaseComponent";
+import { getComponent } from "$content/components/base/component-utils";
+import { buildTagsAndAliasesMap } from "$lib/philomena/tag-utils";
+import { on } from "$content/components/events/comms";
+import { EVENT_TAGS_UPDATED } from "$content/components/events/maintenance-popup-events";
+
+export class MediaBox extends BaseComponent {
+  #thumbnailContainer: HTMLElement | null = null;
+  #imageLinkElement: HTMLAnchorElement | null = null;
+  #tagsAndAliases: Map<string, string> | null = null;
+
+  init() {
+    this.#thumbnailContainer = this.container.querySelector('.image-container');
+    this.#imageLinkElement = this.#thumbnailContainer?.querySelector('a') || null;
+
+    on(this, EVENT_TAGS_UPDATED, this.#onTagsUpdatedRefreshTagsAndAliases.bind(this));
+  }
+
+  #onTagsUpdatedRefreshTagsAndAliases(tagsUpdatedEvent: CustomEvent<Map<string, string> | null>) {
+    const updatedMap = tagsUpdatedEvent.detail;
+
+    if (!(updatedMap instanceof Map)) {
+      throw new TypeError("Tags and aliases should be stored as Map!");
+    }
+
+    this.#tagsAndAliases = updatedMap;
+  }
+
+  #calculateMediaBoxTags() {
+    const tagAliases: string[] = this.#thumbnailContainer?.dataset.imageTagAliases?.split(', ') || [];
+    const actualTags = this.#imageLinkElement?.title.split(' | Tagged: ')[1]?.split(', ') || [];
+
+    return buildTagsAndAliasesMap(tagAliases, actualTags);
+  }
+
+  get tagsAndAliases(): Map<string, string> | null {
+    if (!this.#tagsAndAliases) {
+      this.#tagsAndAliases = this.#calculateMediaBoxTags();
+    }
+
+    return this.#tagsAndAliases;
+  }
+
+  get imageId(): number {
+    const imageId = this.container.dataset.imageId;
+
+    if (!imageId) {
+      throw new Error('Missing image ID');
+    }
+
+    return parseInt(imageId);
+  }
+
+  get imageLinks(): App.ImageURIs {
+    const jsonUris = this.#thumbnailContainer?.dataset.uris;
+
+    if (!jsonUris) {
+      throw new Error('Missing URIs!');
+    }
+
+    return JSON.parse(jsonUris);
+  }
+
+  /**
+   * Wrap the media box element into the special wrapper.
+   */
+  static initialize(mediaBoxContainer: HTMLElement, childComponentElements: HTMLElement[]) {
+    new MediaBox(mediaBoxContainer)
+      .initialize();
+
+    for (let childComponentElement of childComponentElements) {
+      mediaBoxContainer.appendChild(childComponentElement);
+      getComponent(childComponentElement)?.initialize();
+    }
+  }
+
+  static findElements(): NodeListOf<HTMLElement> {
+    return document.querySelectorAll('.media-box');
+  }
+
+  static initializePositionCalculation(mediaBoxesList: NodeListOf<HTMLElement>) {
+    window.addEventListener('resize', () => {
+      let lastMediaBox: HTMLElement | null = null;
+      let lastMediaBoxPosition: number | null = null;
+
+      for (const 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;
+      }
+
+      // Last-ever media box is checked separately
+      if (lastMediaBox && !lastMediaBox.nextElementSibling) {
+        lastMediaBox.classList.add('media-box--last');
+      }
+    })
+  }
+}

src/content/components/philomena/TagDropdown.ts

@@ -1,16 +1,14 @@
-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 { BaseComponent } from "$content/components/base/BaseComponent";
+import TaggingProfile from "$entities/TaggingProfile";
+import TaggingProfilesPreferences from "$lib/extension/preferences/TaggingProfilesPreferences";
+import { getComponent } from "$content/components/base/component-utils";
 import CustomCategoriesResolver from "$lib/extension/CustomCategoriesResolver";
-import { on } from "$lib/components/events/comms";
-import { EVENT_FORM_EDITOR_UPDATED } from "$lib/components/events/tags-form-events";
-import { EVENT_TAG_GROUP_RESOLVED } from "$lib/components/events/tag-dropdown-events";
+import { on } from "$content/components/events/comms";
+import { EVENT_FORM_EDITOR_UPDATED } from "$content/components/events/tags-form-events";
+import { EVENT_TAG_GROUP_RESOLVED } from "$content/components/events/tag-dropdown-events";
 import type TagGroup from "$entities/TagGroup";
 
-const categoriesResolver = new CustomCategoriesResolver();
-
-export class TagDropdownWrapper extends BaseComponent {
+export class TagDropdown extends BaseComponent {
   /**
    * Container with dropdown elements to insert options into.
    */
@@ -29,7 +27,7 @@ export class TagDropdownWrapper extends BaseComponent {
   /**
    * Local clone of the currently active profile used for updating the list of tags.
    */
-  #activeProfile: MaintenanceProfile | null = null;
+  #activeProfile: TaggingProfile | null = null;
 
   /**
    * Is cursor currently entered the dropdown.
@@ -46,7 +44,7 @@ export class TagDropdownWrapper extends BaseComponent {
     this.on('mouseenter', this.#onDropdownEntered.bind(this));
     this.on('mouseleave', this.#onDropdownLeft.bind(this));
 
-    TagDropdownWrapper.#watchActiveProfile(activeProfileOrNull => {
+    TagDropdown.#watchActiveProfile(activeProfileOrNull => {
       this.#activeProfile = activeProfileOrNull;
 
       if (this.#isEntered) {
@@ -122,7 +120,7 @@ export class TagDropdownWrapper extends BaseComponent {
 
   #updateButtons() {
     if (!this.#activeProfile) {
-      this.#addToNewButton ??= TagDropdownWrapper.#createDropdownLink(
+      this.#addToNewButton ??= TagDropdown.#createDropdownLink(
         'Add to new tagging profile',
         this.#onAddToNewClicked.bind(this)
       );
@@ -135,7 +133,7 @@ export class TagDropdownWrapper extends BaseComponent {
     }
 
     if (this.#activeProfile) {
-      this.#toggleOnExistingButton ??= TagDropdownWrapper.#createDropdownLink(
+      this.#toggleOnExistingButton ??= TagDropdown.#createDropdownLink(
         'Add to existing tagging profile',
         this.#onToggleInExistingClicked.bind(this)
       );
@@ -148,7 +146,12 @@ export class TagDropdownWrapper extends BaseComponent {
         profileSpecificButtonText = `Remove from profile "${profileName}"`;
       }
 
-      this.#toggleOnExistingButton.innerText = profileSpecificButtonText;
+      if (this.#toggleOnExistingButton.lastChild instanceof Text) {
+        this.#toggleOnExistingButton.lastChild.textContent = ` ${profileSpecificButtonText}`;
+      } else {
+        // Just in case last child is missing, then update the text on the full element.
+        this.#toggleOnExistingButton.textContent = profileSpecificButtonText;
+      }
 
       if (!this.#toggleOnExistingButton.isConnected) {
         this.#dropdownContainer?.append(this.#toggleOnExistingButton);
@@ -167,14 +170,14 @@ export class TagDropdownWrapper extends BaseComponent {
       throw new Error('Missing tag name to create the profile!');
     }
 
-    const profile = new MaintenanceProfile(crypto.randomUUID(), {
+    const profile = new TaggingProfile(crypto.randomUUID(), {
       name: 'Temporary Profile (' + (new Date().toISOString()) + ')',
       tags: [this.tagName],
       temporary: true,
     });
 
     await profile.save();
-    await TagDropdownWrapper.#maintenanceSettings.setActiveProfileId(profile.id);
+    await TagDropdown.#preferences.activeProfile.set(profile.id);
   }
 
   async #onToggleInExistingClicked() {
@@ -200,25 +203,25 @@ export class TagDropdownWrapper extends BaseComponent {
     await this.#activeProfile.save();
   }
 
-  static #maintenanceSettings = new MaintenanceSettings();
+  static #preferences = new TaggingProfilesPreferences();
 
   /**
    * Watch for changes to active profile.
    * @param onActiveProfileChange Callback to call when profile was
    * changed.
    */
-  static #watchActiveProfile(onActiveProfileChange: (profile: MaintenanceProfile | null) => void) {
+  static #watchActiveProfile(onActiveProfileChange: (profile: TaggingProfile | null) => void) {
     let lastActiveProfile: string | null = null;
 
-    this.#maintenanceSettings.subscribe((settings) => {
+    this.#preferences.subscribe((settings) => {
       lastActiveProfile = settings.activeProfile ?? null;
 
-      this.#maintenanceSettings
-        .resolveActiveProfileAsObject()
+      this.#preferences
+        .activeProfile.asObject()
         .then(onActiveProfileChange);
     });
 
-    MaintenanceProfile.subscribe(profiles => {
+    TaggingProfile.subscribe(profiles => {
       const activeProfile = profiles
         .find(profile => profile.id === lastActiveProfile);
 
@@ -226,8 +229,8 @@ export class TagDropdownWrapper extends BaseComponent {
       );
     });
 
-    this.#maintenanceSettings
-      .resolveActiveProfileAsObject()
+    this.#preferences
+      .activeProfile.asObject()
       .then(activeProfile => {
         lastActiveProfile = activeProfile?.id ?? null;
         onActiveProfileChange(activeProfile);
@@ -243,9 +246,14 @@ export class TagDropdownWrapper extends BaseComponent {
   static #createDropdownLink(text: string, onClickHandler: (event: MouseEvent) => void): HTMLAnchorElement {
     const dropdownLink = document.createElement('a');
     dropdownLink.href = '#';
-    dropdownLink.innerText = text;
     dropdownLink.className = 'tag__dropdown__link';
 
+    const dropdownLinkIcon = document.createElement('i');
+    dropdownLinkIcon.classList.add('fa', 'fa-tags');
+
+    dropdownLink.textContent = ` ${text}`;
+    dropdownLink.insertAdjacentElement('afterbegin', dropdownLinkIcon);
+
     dropdownLink.addEventListener('click', event => {
       event.preventDefault();
       onClickHandler(event);
@@ -253,58 +261,65 @@ export class TagDropdownWrapper extends BaseComponent {
 
     return dropdownLink;
   }
-}
 
-export function wrapTagDropdown(element: HTMLElement) {
-  // Skip initialization when tag component is already wrapped
-  if (getComponent(element)) {
-    return;
+  static #categoriesResolver = new CustomCategoriesResolver();
+  static #processedElements: WeakSet<HTMLElement> = new WeakSet();
+
+  static #findAll(parentNode: ParentNode = document): NodeListOf<HTMLElement> {
+    return parentNode.querySelectorAll('.tag.dropdown');
   }
 
-  const tagDropdown = new TagDropdownWrapper(element);
-  tagDropdown.initialize();
+  static #initialize(element: HTMLElement) {
+    // Skip initialization when tag component is already wrapped
+    if (getComponent(element)) {
+      return;
+    }
 
-  categoriesResolver.addElement(tagDropdown);
-}
+    const tagDropdown = new TagDropdown(element);
+    tagDropdown.initialize();
 
-const processedElementsSet = new WeakSet<HTMLElement>();
-
-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;
+    this.#categoriesResolver.addElement(tagDropdown);
   }
 
-  document.body.addEventListener('mouseover', event => {
-    const targetElement = event.target;
+  static findAllAndInitialize(parentNode: ParentNode = document) {
+    for (const element of this.#findAll(parentNode)) {
+      this.#initialize(element);
+    }
+  }
 
-    if (!(targetElement instanceof HTMLElement)) {
+  static watch() {
+    // 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;
     }
 
-    if (processedElementsSet.has(targetElement)) {
-      return;
-    }
+    document.body.addEventListener('mouseover', event => {
+      const targetElement = event.target;
 
-    const closestTagEditor = targetElement.closest<HTMLElement>('#image_tags_and_source');
+      if (!(targetElement instanceof HTMLElement)) {
+        return;
+      }
 
-    if (!closestTagEditor || processedElementsSet.has(closestTagEditor)) {
-      processedElementsSet.add(targetElement);
-      return;
-    }
+      if (this.#processedElements.has(targetElement)) {
+        return;
+      }
 
-    processedElementsSet.add(targetElement);
-    processedElementsSet.add(closestTagEditor);
+      const closestTagEditor = targetElement.closest<HTMLElement>('#image_tags_and_source');
 
-    for (const tagDropdownElement of closestTagEditor.querySelectorAll<HTMLElement>('.tag.dropdown')) {
-      wrapTagDropdown(tagDropdownElement);
-    }
-  });
+      if (!closestTagEditor || this.#processedElements.has(closestTagEditor)) {
+        this.#processedElements.add(targetElement);
+        return;
+      }
 
-  // When form is submitted, its DOM is completely updated. We need to fetch those tags in this case.
-  on(document.body, EVENT_FORM_EDITOR_UPDATED, event => {
-    for (const tagDropdownElement of event.detail.querySelectorAll<HTMLElement>('.tag.dropdown')) {
-      wrapTagDropdown(tagDropdownElement);
-    }
-  });
+      this.#processedElements.add(targetElement);
+      this.#processedElements.add(closestTagEditor);
+
+      this.findAllAndInitialize(closestTagEditor);
+    });
+
+    // When form is submitted, its DOM is completely updated. We need to fetch those tags in this case.
+    on(document.body, EVENT_FORM_EDITOR_UPDATED, event => {
+      this.findAllAndInitialize(event.detail);
+    });
+  }
 }

src/content/components/philomena/TagsForm.ts

@@ -1,8 +1,8 @@
-import { BaseComponent } from "$lib/components/base/BaseComponent";
-import { getComponent } from "$lib/components/base/component-utils";
-import { emit, on, type UnsubscribeFunction } from "$lib/components/events/comms";
-import { EVENT_FETCH_COMPLETE } from "$lib/components/events/booru-events";
-import { EVENT_FORM_EDITOR_UPDATED } from "$lib/components/events/tags-form-events";
+import { BaseComponent } from "$content/components/base/BaseComponent";
+import { getComponent } from "$content/components/base/component-utils";
+import { emit, on, type UnsubscribeFunction } from "$content/components/events/comms";
+import { EVENT_FETCH_COMPLETE } from "$content/components/events/booru-events";
+import { EVENT_FORM_EDITOR_UPDATED } from "$content/components/events/tags-form-events";
 
 export class TagsForm extends BaseComponent {
   protected init() {

src/content/components/philomena/TagsListBlock.ts

@@ -1,11 +1,11 @@
-import { BaseComponent } from "$lib/components/base/BaseComponent";
+import { BaseComponent } from "$content/components/base/BaseComponent";
 import type TagGroup from "$entities/TagGroup";
-import type { TagDropdownWrapper } from "$lib/components/TagDropdownWrapper";
-import { on } from "$lib/components/events/comms";
-import { EVENT_FORM_EDITOR_UPDATED } from "$lib/components/events/tags-form-events";
-import { getComponent } from "$lib/components/base/component-utils";
-import { EVENT_TAG_GROUP_RESOLVED } from "$lib/components/events/tag-dropdown-events";
-import TagSettings from "$lib/extension/settings/TagSettings";
+import type { TagDropdown } from "$content/components/philomena/TagDropdown";
+import { on } from "$content/components/events/comms";
+import { EVENT_FORM_EDITOR_UPDATED } from "$content/components/events/tags-form-events";
+import { getComponent } from "$content/components/base/component-utils";
+import { EVENT_TAG_GROUP_RESOLVED } from "$content/components/events/tag-dropdown-events";
+import TagsPreferences from "$lib/extension/preferences/TagsPreferences";
 
 export class TagsListBlock extends BaseComponent {
   #tagsListButtonsContainer: HTMLElement | null = null;
@@ -14,14 +14,14 @@ export class TagsListBlock extends BaseComponent {
   #toggleGroupingButton = document.createElement('a');
   #toggleGroupingButtonIcon = document.createElement('i');
 
-  #tagSettings = new TagSettings();
+  #preferences = new TagsPreferences();
 
   #shouldDisplaySeparation = false;
 
   #separatedGroups = new Map<string, TagGroup>();
   #separatedHeaders = new Map<string, HTMLElement>();
   #groupsCount = new Map<string, number>();
-  #lastTagGroup = new WeakMap<TagDropdownWrapper, TagGroup | null>;
+  #lastTagGroup = new WeakMap<TagDropdown, TagGroup | null>;
 
   #isReorderingPlanned = false;
 
@@ -44,8 +44,8 @@ export class TagsListBlock extends BaseComponent {
   }
 
   init() {
-    this.#tagSettings.resolveGroupSeparation().then(this.#onTagSeparationChange.bind(this));
-    this.#tagSettings.subscribe(settings => {
+    this.#preferences.groupSeparation.get().then(this.#onTagSeparationChange.bind(this));
+    this.#preferences.subscribe(settings => {
       this.#onTagSeparationChange(Boolean(settings.groupSeparation))
     });
 
@@ -80,7 +80,7 @@ export class TagsListBlock extends BaseComponent {
       return;
     }
 
-    const tagDropdown = getComponent<TagDropdownWrapper>(maybeDropdownElement);
+    const tagDropdown = getComponent<TagDropdown>(maybeDropdownElement);
 
     if (!tagDropdown) {
       return;
@@ -103,7 +103,7 @@ export class TagsListBlock extends BaseComponent {
 
   #onToggleGroupingClicked(event: Event) {
     event.preventDefault();
-    void this.#tagSettings.setGroupSeparation(!this.#shouldDisplaySeparation);
+    void this.#preferences.groupSeparation.set(!this.#shouldDisplaySeparation);
   }
 
   #handleTagGroupChanges(tagGroup: TagGroup) {
@@ -134,6 +134,7 @@ export class TagsListBlock extends BaseComponent {
       heading.style.display = 'none';
       heading.style.order = `var(${TagsListBlock.#orderCssVariableForGroup(group.id)}, 0)`;
       heading.style.flexBasis = '100%';
+      heading.classList.add('tag-category-headline');
 
       // We're inserting heading to the top just to make sure that heading is always in front of the tags related to
       // this category.
@@ -145,7 +146,7 @@ export class TagsListBlock extends BaseComponent {
     heading.innerText = group.settings.name;
   }
 
-  #handleResolvedTagGroup(resolvedGroup: TagGroup | null, tagComponent: TagDropdownWrapper) {
+  #handleResolvedTagGroup(resolvedGroup: TagGroup | null, tagComponent: TagDropdown) {
     const previousGroupId = this.#lastTagGroup.get(tagComponent)?.id;
     const currentGroupId = resolvedGroup?.id;
     const isDifferentId = currentGroupId !== previousGroupId;
@@ -216,28 +217,28 @@ export class TagsListBlock extends BaseComponent {
 
   static #iconGroupingDisabled = 'fa-folder';
   static #iconGroupingEnabled = 'fa-folder-tree';
-}
 
-export function initializeAllTagsLists() {
-  for (let element of document.querySelectorAll<HTMLElement>('#image_tags_and_source')) {
-    if (getComponent(element)) {
-      return;
+  static initializeAll() {
+    for (let element of document.querySelectorAll<HTMLElement>('#image_tags_and_source')) {
+      if (getComponent(element)) {
+        return;
+      }
+
+      new TagsListBlock(element)
+        .initialize();
     }
+  }
 
-    new TagsListBlock(element)
-      .initialize();
+  static watchUpdatedLists() {
+    on(document, EVENT_FORM_EDITOR_UPDATED, event => {
+      const tagsListElement = event.detail.closest<HTMLElement>('#image_tags_and_source');
+
+      if (!tagsListElement || getComponent(tagsListElement)) {
+        return;
+      }
+
+      new TagsListBlock(tagsListElement)
+        .initialize();
+    })
   }
 }
-
-export function watchForUpdatedTagLists() {
-  on(document, EVENT_FORM_EDITOR_UPDATED, event => {
-    const tagsListElement = event.detail.closest<HTMLElement>('#image_tags_and_source');
-
-    if (!tagsListElement || getComponent(tagsListElement)) {
-      return;
-    }
-
-    new TagsListBlock(tagsListElement)
-      .initialize();
-  });
-}

src/content/components/philomena/listing/ImageListContainer.ts

@@ -0,0 +1,23 @@
+import { BaseComponent } from "$content/components/base/BaseComponent";
+import { ImageListInfo } from "$content/components/philomena/listing/ImageListInfo";
+
+export class ImageListContainer extends BaseComponent {
+  #info: ImageListInfo | null = null;
+
+  protected build() {
+    const imageListInfoContainer = this.container.querySelector<HTMLElement>('.js-imagelist-info');
+
+    if (imageListInfoContainer) {
+      this.#info = new ImageListInfo(imageListInfoContainer);
+      this.#info.initialize();
+    }
+  }
+
+  static findAndInitialize() {
+    const imageListContainer = document.querySelector<HTMLElement>('#imagelist-container');
+
+    if (imageListContainer) {
+      new ImageListContainer(imageListContainer).initialize();
+    }
+  }
+}

src/content/components/philomena/listing/ImageListInfo.ts

@@ -1,4 +1,4 @@
-import { BaseComponent } from "$lib/components/base/BaseComponent";
+import { BaseComponent } from "$content/components/base/BaseComponent";
 
 export class ImageListInfo extends BaseComponent {
   #tagElement: HTMLElement | null = null;

src/content/deps/amd.ts

@@ -0,0 +1,53 @@
+import { amdLite } from "amd-lite";
+
+const originalDefine = amdLite.define;
+
+/**
+ * Set of already defined modules. Used for deduplication.
+ */
+const definedModules = new Set<string>();
+
+/**
+ * Throttle timer to make sure only one attempt at loading modules will run for a batch of loaded scripts.
+ */
+let throttledAutoRunTimer: NodeJS.Timeout | number | undefined;
+
+/**
+ * Schedule the automatic resolving of all waiting modules on the next available frame.
+ */
+function scheduleModulesAutoRun() {
+  clearTimeout(throttledAutoRunTimer);
+
+  throttledAutoRunTimer = setTimeout(() => {
+    amdLite.resolveDependencies(Object.keys(amdLite.waitingModules));
+  });
+}
+
+amdLite.define = (name, dependencies, originalCallback) => {
+  // Chrome doesn't run the same content script multiple times, while Firefox does. Since each content script and their
+  // chunks are intended to be run only once, we should just ignore any attempts of running the same module more than
+  // once. Names of the modules are assumed to be unique.
+  if (definedModules.has(name)) {
+    return;
+  }
+
+  definedModules.add(name);
+
+  originalDefine(name, dependencies, function () {
+    const callbackResult = originalCallback(...arguments);
+
+    // Workaround for the entry script not returning anything causing AMD-Lite to send warning about modules not
+    // being loaded/not existing.
+    return typeof callbackResult !== 'undefined' ? callbackResult : {};
+  });
+
+  // Schedule the auto run on the next available frame. Firefox and Chromium have a lot of differences in how they
+  // decide to execute content scripts. For example, Firefox might decide to skip a frame before attempting to load
+  // different groups of them. Chromium on the other hand doesn't have that issue, but it doesn't allow us to, for
+  // example, schedule a microtask to run the modules.
+  scheduleModulesAutoRun();
+}
+
+amdLite.init({
+  publicScope: window
+});

src/content/header.ts

@@ -1,7 +0,0 @@
-import { initializeSiteHeader } from "$lib/components/SiteHeaderWrapper";
-
-const siteHeader = document.querySelector<HTMLElement>('.header');
-
-if (siteHeader) {
-  initializeSiteHeader(siteHeader);
-}

src/content/listing.ts

@@ -1,19 +1,18 @@
-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";
-import { initializeImageListContainer } from "$lib/components/listing/ImageListContainer";
+import { TaggingProfilePopup } from "$content/components/extension/profiles/TaggingProfilePopup";
+import { MediaBoxTools } from "$content/components/extension/MediaBoxTools";
+import { MediaBox } from "$content/components/philomena/MediaBox";
+import { TaggingProfileStatusIcon } from "$content/components/extension/profiles/TaggingProfileStatusIcon";
+import { ImageShowFullscreenButton } from "$content/components/extension/ImageShowFullscreenButton";
+import { ImageListContainer } from "$content/components/philomena/listing/ImageListContainer";
 
-const mediaBoxes = document.querySelectorAll<HTMLElement>('.media-box');
-const imageListContainer = document.querySelector<HTMLElement>('#imagelist-container');
+const mediaBoxes = MediaBox.findElements();
 
 mediaBoxes.forEach(mediaBoxElement => {
-  initializeMediaBox(mediaBoxElement, [
-    createMediaBoxTools(
-      createMaintenancePopup(),
-      createMaintenanceStatusIcon(),
-      createImageShowFullscreenButton(),
+  MediaBox.initialize(mediaBoxElement, [
+    MediaBoxTools.create(
+      TaggingProfilePopup.create(),
+      TaggingProfileStatusIcon.create(),
+      ImageShowFullscreenButton.create(),
     )
   ]);
 
@@ -23,8 +22,5 @@ mediaBoxes.forEach(mediaBoxElement => {
   })
 });
 
-calculateMediaBoxesPositions(mediaBoxes);
-
-if (imageListContainer) {
-  initializeImageListContainer(imageListContainer);
-}
+MediaBox.initializePositionCalculation(mediaBoxes);
+ImageListContainer.findAndInitialize();

src/content/posts.ts

@@ -0,0 +1,3 @@
+import { BlockCommunication } from "$content/components/philomena/BlockCommunication";
+
+BlockCommunication.findAndInitializeAll();

src/content/tags-editor.ts

@@ -1,6 +1,6 @@
-import { TagsForm } from "$lib/components/TagsForm";
-import { initializeAllTagsLists, watchForUpdatedTagLists } from "$lib/components/TagsListBlock";
+import { TagsForm } from "$content/components/philomena/TagsForm";
+import { TagsListBlock } from "$content/components/philomena/TagsListBlock";
 
-initializeAllTagsLists();
-watchForUpdatedTagLists();
+TagsListBlock.initializeAll();
+TagsListBlock.watchUpdatedLists();
 TagsForm.watchForEditors();

src/content/tags.ts

@@ -1,7 +1,4 @@
-import { watchTagDropdownsInTagsEditor, wrapTagDropdown } from "$lib/components/TagDropdownWrapper";
+import { TagDropdown } from "$content/components/philomena/TagDropdown";
 
-for (let tagDropdownElement of document.querySelectorAll<HTMLElement>('.tag.dropdown')) {
-  wrapTagDropdown(tagDropdownElement);
-}
-
-watchTagDropdownsInTagsEditor();
+TagDropdown.findAllAndInitialize();
+TagDropdown.watch();

src/lib/booru/tag-categories.ts

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

src/lib/booru/tag-utils.ts

@@ -1,33 +0,0 @@
-/**
- * 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/components/MediaBoxTools.ts

@@ -1,74 +0,0 @@
-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 { EVENT_ACTIVE_PROFILE_CHANGED } from "$lib/components/events/maintenance-popup-events";
-import type { MediaBoxWrapper } from "$lib/components/MediaBoxWrapper";
-import type MaintenanceProfile from "$entities/MaintenanceProfile";
-
-export class MediaBoxTools extends BaseComponent {
-  #mediaBox: MediaBoxWrapper | null = null;
-  #maintenancePopup: MaintenancePopup | null = null;
-
-  init() {
-    const mediaBoxElement = this.container.closest<HTMLElement>('.media-box');
-
-    if (!mediaBoxElement) {
-      throw new Error('Toolbox element initialized outside of the media box!');
-    }
-
-    this.#mediaBox = getComponent(mediaBoxElement);
-
-    for (let childElement of this.container.children) {
-      if (!(childElement instanceof HTMLElement)) {
-        continue;
-      }
-
-      const component = getComponent(childElement);
-
-      if (!component) {
-        continue;
-      }
-
-      if (!component.isInitialized) {
-        component.initialize();
-      }
-
-      if (!this.#maintenancePopup && component instanceof MaintenancePopup) {
-        this.#maintenancePopup = component;
-      }
-    }
-
-    on(this, EVENT_ACTIVE_PROFILE_CHANGED, this.#onActiveProfileChanged.bind(this));
-  }
-
-  #onActiveProfileChanged(profileChangedEvent: CustomEvent<MaintenanceProfile | null>) {
-    this.container.classList.toggle('has-active-profile', profileChangedEvent.detail !== null);
-  }
-
-  get maintenancePopup(): MaintenancePopup | null {
-    return this.#maintenancePopup;
-  }
-
-  get mediaBox(): MediaBoxWrapper | null {
-    return this.#mediaBox;
-  }
-}
-
-/**
- * Create a maintenance popup element.
- * @param childrenElements List of children elements to append to the component.
- * @return The maintenance popup element.
- */
-export function createMediaBoxTools(...childrenElements: HTMLElement[]): HTMLElement {
-  const mediaBoxToolsContainer = document.createElement('div');
-  mediaBoxToolsContainer.classList.add('media-box-tools');
-
-  if (childrenElements.length) {
-    mediaBoxToolsContainer.append(...childrenElements);
-  }
-
-  new MediaBoxTools(mediaBoxToolsContainer);
-
-  return mediaBoxToolsContainer;
-}

src/lib/components/MediaBoxWrapper.ts

@@ -1,99 +0,0 @@
-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 { EVENT_TAGS_UPDATED } from "$lib/components/events/maintenance-popup-events";
-
-export class MediaBoxWrapper extends BaseComponent {
-  #thumbnailContainer: HTMLElement | null = null;
-  #imageLinkElement: HTMLAnchorElement | null = null;
-  #tagsAndAliases: Map<string, string> | null = null;
-
-  init() {
-    this.#thumbnailContainer = this.container.querySelector('.image-container');
-    this.#imageLinkElement = this.#thumbnailContainer?.querySelector('a') || null;
-
-    on(this, EVENT_TAGS_UPDATED, this.#onTagsUpdatedRefreshTagsAndAliases.bind(this));
-  }
-
-  #onTagsUpdatedRefreshTagsAndAliases(tagsUpdatedEvent: CustomEvent<Map<string, string> | null>) {
-    const updatedMap = tagsUpdatedEvent.detail;
-
-    if (!(updatedMap instanceof Map)) {
-      throw new TypeError("Tags and aliases should be stored as Map!");
-    }
-
-    this.#tagsAndAliases = updatedMap;
-  }
-
-  #calculateMediaBoxTags() {
-    const tagAliases: string[] = this.#thumbnailContainer?.dataset.imageTagAliases?.split(', ') || [];
-    const actualTags = this.#imageLinkElement?.title.split(' | Tagged: ')[1]?.split(', ') || [];
-
-    return buildTagsAndAliasesMap(tagAliases, actualTags);
-  }
-
-  get tagsAndAliases(): Map<string, string> | null {
-    if (!this.#tagsAndAliases) {
-      this.#tagsAndAliases = this.#calculateMediaBoxTags();
-    }
-
-    return this.#tagsAndAliases;
-  }
-
-  get imageId(): number {
-    const imageId = this.container.dataset.imageId;
-
-    if (!imageId) {
-      throw new Error('Missing image ID');
-    }
-
-    return parseInt(imageId);
-  }
-
-  get imageLinks(): App.ImageURIs {
-    const jsonUris = this.#thumbnailContainer?.dataset.uris;
-
-    if (!jsonUris) {
-      throw new Error('Missing URIs!');
-    }
-
-    return JSON.parse(jsonUris);
-  }
-}
-
-/**
- * Wrap the media box element into the special wrapper.
- */
-export function initializeMediaBox(mediaBoxContainer: HTMLElement, childComponentElements: HTMLElement[]) {
-  new MediaBoxWrapper(mediaBoxContainer)
-    .initialize();
-
-  for (let childComponentElement of childComponentElements) {
-    mediaBoxContainer.appendChild(childComponentElement);
-    getComponent(childComponentElement)?.initialize();
-  }
-}
-
-export function calculateMediaBoxesPositions(mediaBoxesList: NodeListOf<HTMLElement>) {
-  window.addEventListener('resize', () => {
-    let lastMediaBox: HTMLElement | null = null;
-    let lastMediaBoxPosition: number | null = null;
-
-    for (const 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;
-    }
-
-    // Last-ever media box is checked separately
-    if (lastMediaBox && !lastMediaBox.nextElementSibling) {
-      lastMediaBox.classList.add('media-box--last');
-    }
-  })
-}

src/lib/components/SearchWrapper.ts

@@ -1,429 +0,0 @@
-import { BaseComponent } from "$lib/components/base/BaseComponent";
-import { QueryLexer, QuotedTermToken, TermToken, Token } from "$lib/booru/search/QueryLexer";
-import SearchSettings, { type SuggestionsPosition } from "$lib/extension/settings/SearchSettings";
-
-export class SearchWrapper extends BaseComponent {
-  #searchField: HTMLInputElement | null = null;
-  #lastParsedSearchValue: string | null = null;
-  #cachedParsedQuery: Token[] = [];
-  #searchSettings: SearchSettings = new SearchSettings();
-  #arePropertiesSuggestionsEnabled: boolean = false;
-  #propertiesSuggestionsPosition: SuggestionsPosition = "start";
-  #cachedAutocompleteContainer: HTMLElement | null = null;
-  #lastTermToken: TermToken | QuotedTermToken | null = null;
-
-  build() {
-    this.#searchField = this.container.querySelector('input[name=q]');
-  }
-
-  init() {
-    if (this.#searchField) {
-      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 = Boolean(settings.suggestProperties);
-      this.#propertiesSuggestionsPosition = settings.suggestPropertiesPosition || "start";
-    });
-  }
-
-  /**
-   * Catch the user input and execute suggestions logic.
-   * @param event Source event to find the input element from.
-   */
-  #onInputFindProperties(event: Event) {
-    // Ignore events until option is enabled.
-    if (!this.#arePropertiesSuggestionsEnabled || !(event.currentTarget instanceof HTMLInputElement)) {
-      return;
-    }
-
-    const currentFragment = this.#findCurrentTagFragment();
-
-    if (!currentFragment) {
-      return;
-    }
-
-    this.#renderSuggestions(
-      SearchWrapper.#resolveSuggestionsFromTerm(currentFragment),
-      event.currentTarget
-    );
-  }
-
-  /**
-   * Get the selection position in the search field.
-   */
-  #getInputUserSelection(): number {
-    if (!this.#searchField) {
-      throw new Error('Missing search field!');
-    }
-
-    return Math.min(
-      this.#searchField.selectionStart ?? 0,
-      this.#searchField.selectionEnd ?? 0,
-    );
-  }
-
-  /**
-   * Parse the search query and return the list of parsed tokens. Result will be cached for current search query.
-   */
-  #resolveQueryTokens(): Token[] {
-    if (!this.#searchField) {
-      throw new Error('Missing search field!');
-    }
-
-    const searchValue = this.#searchField.value;
-
-    if (searchValue === this.#lastParsedSearchValue && this.#cachedParsedQuery) {
-      return this.#cachedParsedQuery;
-    }
-
-    this.#lastParsedSearchValue = searchValue;
-    this.#cachedParsedQuery = new QueryLexer(searchValue).parse();
-
-    return this.#cachedParsedQuery;
-  }
-
-  /**
-   * Find the currently selected term.
-   * @return Selected term or null if none found.
-   */
-  #findCurrentTagFragment(): string | null {
-    if (!this.#searchField) {
-      return null;
-    }
-
-    let searchValue = this.#searchField.value;
-
-    if (!searchValue) {
-      this.#lastTermToken = null;
-      return null;
-    }
-
-    const token = SearchWrapper.#findActiveSearchTermPosition(
-      this.#resolveQueryTokens(),
-      this.#getInputUserSelection(),
-    );
-
-    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;
-  }
-
-  /**
-   * 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 Resolved element or nothing.
-   */
-  #resolveAutocompleteContainer(): HTMLElement | null {
-    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 suggestions List of suggestion to render the popup from.
-   * @param targetInput Target input to attach the popup to.
-   */
-  #renderSuggestions(suggestions: string[], targetInput: HTMLInputElement) {
-    const suggestedListItems = suggestions
-      .map(suggestedTerm => this.#renderTermSuggestion(suggestedTerm));
-
-    requestAnimationFrame(() => {
-      const autocompleteContainer = this.#resolveAutocompleteContainer();
-
-      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');
-
-      if (!listContainer) {
-        return;
-      }
-
-      switch (this.#propertiesSuggestionsPosition) {
-        case "start":
-          listContainer.prepend(...suggestedListItems);
-          break;
-
-        case "end":
-          listContainer.append(...suggestedListItems);
-          break;
-
-        default:
-          console.warn("Invalid position for property suggestions!");
-      }
-
-      const parentScrollTop = targetInput.parentElement?.scrollTop ?? 0;
-
-      autocompleteContainer.style.position = 'absolute';
-      autocompleteContainer.style.left = `${targetInput.offsetLeft}px`;
-      autocompleteContainer.style.top = `${targetInput.offsetTop + targetInput.offsetHeight - parentScrollTop}px`;
-
-      document.body.append(autocompleteContainer);
-    })
-  }
-
-  /**
-   * Loosely estimate where current selected search term is located and return it if found.
-   * @param tokens Search value to find the actively selected term from.
-   * @param userSelectionIndex The index of the user selection.
-   * @return Search term object or NULL if nothing found.
-   */
-  static #findActiveSearchTermPosition(tokens: Token[], userSelectionIndex: number): Token | null {
-    return tokens.find(
-      token => token.index < userSelectionIndex && token.index + token.value.length >= userSelectionIndex
-    ) ?? null;
-  }
-
-  /**
-   * Regular expression to search the properties' syntax.
-   */
-  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 searchTermValue Original decoded term received from the user.
-   * @return {string[]} List of suggestions. Could be empty.
-   */
-  static #resolveSuggestionsFromTerm(searchTermValue: string): string[] {
-    const suggestionsList: string[] = [];
-
-    this.#propertySearchTermHeadingRegExp.lastIndex = 0;
-    const parsedResult = this.#propertySearchTermHeadingRegExp.exec(searchTermValue);
-
-    if (!parsedResult) {
-      return suggestionsList;
-    }
-
-    const propertyName = parsedResult.groups?.name;
-
-    if (!propertyName) {
-      return suggestionsList;
-    }
-
-    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 && propertyType) {
-      if (this.#typeValues.has(propertyType)) {
-        const givenValue = parsedResult.groups?.value;
-        const candidateValues = this.#typeValues.get(propertyType) || [];
-
-        for (let candidateValue of candidateValues) {
-          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 && propertyType) {
-      if (this.#typeOperators.has(propertyType)) {
-        const operatorName = parsedResult.groups?.op;
-        const candidateOperators = this.#typeOperators.get(propertyType) ?? [];
-
-        for (let candidateOperator of candidateOperators) {
-          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 suggestedTerm Term to use for suggestion item.
-   * @return Resulting element.
-   */
-  #renderTermSuggestion(suggestedTerm: string): 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 suggestedTerm Term to replace the value with.
-   */
-  #replaceLastActiveTokenWithSuggestion(suggestedTerm: string) {
-    if (!this.#lastTermToken || !this.#searchField) {
-      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 suggestedElement Target element to search from. If element is disconnected from the DOM, search will be
-   * halted.
-   */
-  static #findAndResetSelectedSuggestion(suggestedElement: HTMLElement) {
-    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.ts

@@ -1,22 +0,0 @@
-import { BaseComponent } from "$lib/components/base/BaseComponent";
-import { SearchWrapper } from "$lib/components/SearchWrapper";
-
-class SiteHeaderWrapper extends BaseComponent {
-  #searchWrapper: SearchWrapper | null = null;
-
-  build() {
-    const searchForm = this.container.querySelector<HTMLElement>('.header__search');
-    this.#searchWrapper = searchForm && new SearchWrapper(searchForm) || null;
-  }
-
-  init() {
-    if (this.#searchWrapper) {
-      this.#searchWrapper.initialize();
-    }
-  }
-}
-
-export function initializeSiteHeader(siteHeaderElement: HTMLElement) {
-  new SiteHeaderWrapper(siteHeaderElement)
-    .initialize();
-}

src/lib/components/listing/ImageListContainer.ts

@@ -1,19 +0,0 @@
-import { BaseComponent } from "$lib/components/base/BaseComponent";
-import { ImageListInfo } from "$lib/components/listing/ImageListInfo";
-
-export class ImageListContainer extends BaseComponent {
-  #info: ImageListInfo | null = null;
-
-  protected build() {
-    const imageListInfoContainer = this.container.querySelector<HTMLElement>('.js-imagelist-info');
-
-    if (imageListInfoContainer) {
-      this.#info = new ImageListInfo(imageListInfoContainer);
-      this.#info.initialize();
-    }
-  }
-}
-
-export function initializeImageListContainer(element: HTMLElement) {
-  new ImageListContainer(element).initialize();
-}

src/lib/constants.ts

@@ -0,0 +1,4 @@
+/**
+ * Automatically generated name of the plugin.
+ */
+export const PLUGIN_NAME = __CURRENT_SITE_NAME__ + ' Tagging Assistant';

src/lib/extension/BulkEntitiesTransporter.ts

@@ -0,0 +1,120 @@
+import type StorageEntity from "$lib/extension/base/StorageEntity";
+import { compressToEncodedURIComponent, decompressFromEncodedURIComponent } from "lz-string";
+import type { ImportableElementsList, ImportableEntityObject } from "$lib/extension/transporting/importables";
+import EntitiesTransporter, { type SameSiteStatus } from "$lib/extension/EntitiesTransporter";
+import TaggingProfile from "$entities/TaggingProfile";
+import TagGroup from "$entities/TagGroup";
+
+type TransportersMapping = {
+  [EntityName in keyof App.EntityNamesMap]: EntitiesTransporter<App.EntityNamesMap[EntityName]>;
+}
+
+export default class BulkEntitiesTransporter {
+  #lastSameSiteStatus: SameSiteStatus = null;
+
+  get lastImportSameSiteStatus() {
+    return this.#lastSameSiteStatus;
+  }
+
+  parseAndImportFromJSON(jsonString: string): StorageEntity[] {
+    let parsedObject: any;
+
+    this.#lastSameSiteStatus = null;
+
+    try {
+      parsedObject = JSON.parse(jsonString);
+    } catch (e) {
+      throw new TypeError('Invalid JSON!', {cause: e});
+    }
+
+    if (!BulkEntitiesTransporter.isList(parsedObject)) {
+      throw new TypeError('Invalid or unsupported object!');
+    }
+
+    this.#lastSameSiteStatus = EntitiesTransporter.checkIsSameSiteImportedObject(parsedObject);
+
+    let hasDifferentStatuses = false;
+
+    const resultEntities = parsedObject.elements
+      .map(importableObject => {
+        if (!(importableObject.$type in BulkEntitiesTransporter.#transporters)) {
+          console.warn('Attempting to import unsupported entity: ' + importableObject.$type);
+          return null;
+        }
+
+        const transporter = BulkEntitiesTransporter.#transporters[importableObject.$type as keyof App.EntityNamesMap];
+        const resultEntity = transporter.importFromObject(importableObject);
+
+        if (transporter.lastImportSameSiteStatus !== this.#lastSameSiteStatus) {
+          hasDifferentStatuses = true;
+        }
+
+        return resultEntity;
+      })
+      .filter(maybeEntity => !!maybeEntity);
+
+    if (hasDifferentStatuses) {
+      this.#lastSameSiteStatus = 'unknown';
+    }
+
+    return resultEntities;
+  }
+
+  parseAndImportFromCompressedJSON(compressedJsonString: string): StorageEntity[] {
+    return this.parseAndImportFromJSON(
+      decompressFromEncodedURIComponent(compressedJsonString)
+    );
+  }
+
+  exportToJSON(entities: StorageEntity[]): string {
+    return JSON.stringify({
+      $type: 'list',
+      $site: __CURRENT_SITE__,
+      elements: entities
+        .map(entity => {
+          switch (true) {
+            case entity instanceof TaggingProfile:
+              return BulkEntitiesTransporter.#transporters.profiles.exportToObject(entity);
+            case entity instanceof TagGroup:
+              return BulkEntitiesTransporter.#transporters.groups.exportToObject(entity);
+          }
+
+          return null;
+        })
+        .filter(value => !!value)
+    } as ImportableElementsList<ImportableEntityObject<StorageEntity>>, null, 2);
+  }
+
+  exportToCompressedJSON(entities: StorageEntity[]): string {
+    return compressToEncodedURIComponent(
+      this.exportToJSON(entities)
+    );
+  }
+
+  static isList(targetObject: any): targetObject is ImportableElementsList<ImportableEntityObject<StorageEntity>> {
+    return targetObject.$type
+      && targetObject.$type === 'list'
+      && targetObject.elements
+      && Array.isArray(targetObject.elements);
+  }
+
+  static #transporters: TransportersMapping = {
+    profiles: new EntitiesTransporter(TaggingProfile),
+    groups: new EntitiesTransporter(TagGroup),
+  }
+
+  /**
+   * Check if the imported object is created for the same site extension or not.
+   * @param importedObject Object to check.
+   * @private
+   */
+  static #checkIsSameSiteImportedObject(importedObject: Record<string, any>): SameSiteStatus {
+    if (!('$site' in importedObject)) {
+      return "unknown";
+    }
+
+    return importedObject.$site === __CURRENT_SITE__
+      ? "same"
+      : "different";
+  }
+}

src/lib/extension/CustomCategoriesResolver.ts

@@ -1,13 +1,13 @@
-import type { TagDropdownWrapper } from "$lib/components/TagDropdownWrapper";
+import type { TagDropdown } from "$content/components/philomena/TagDropdown";
 import TagGroup from "$entities/TagGroup";
 import { escapeRegExp } from "$lib/utils";
-import { emit } from "$lib/components/events/comms";
-import { EVENT_TAG_GROUP_RESOLVED } from "$lib/components/events/tag-dropdown-events";
+import { emit } from "$content/components/events/comms";
+import { EVENT_TAG_GROUP_RESOLVED } from "$content/components/events/tag-dropdown-events";
 
 export default class CustomCategoriesResolver {
   #exactGroupMatches = new Map<string, TagGroup>();
   #regExpGroupMatches = new Map<RegExp, TagGroup>();
-  #tagDropdowns: TagDropdownWrapper[] = [];
+  #tagDropdowns: TagDropdown[] = [];
   #nextQueuedUpdate: Timeout | null = null;
 
   constructor() {
@@ -15,7 +15,7 @@ export default class CustomCategoriesResolver {
     TagGroup.readAll().then(this.#onTagGroupsReceived.bind(this));
   }
 
-  public addElement(tagDropdown: TagDropdownWrapper): void {
+  public addElement(tagDropdown: TagDropdown): void {
     this.#tagDropdowns.push(tagDropdown);
 
     if (!this.#exactGroupMatches.size && !this.#regExpGroupMatches.size) {
@@ -49,7 +49,7 @@ export default class CustomCategoriesResolver {
    * @return {boolean} Will return false when tag is processed and true when it is not found.
    * @private
    */
-  #applyCustomCategoryForExactMatches(tagDropdown: TagDropdownWrapper): boolean {
+  #applyCustomCategoryForExactMatches(tagDropdown: TagDropdown): boolean {
     const tagName = tagDropdown.tagName!;
 
     if (!this.#exactGroupMatches.has(tagName)) {
@@ -65,7 +65,7 @@ export default class CustomCategoriesResolver {
     return false;
   }
 
-  #matchCustomCategoryByRegExp(tagDropdown: TagDropdownWrapper) {
+  #matchCustomCategoryByRegExp(tagDropdown: TagDropdown) {
     const tagName = tagDropdown.tagName!;
 
     for (const targetRegularExpression of this.#regExpGroupMatches.keys()) {
@@ -90,6 +90,7 @@ export default class CustomCategoriesResolver {
     this.#regExpGroupMatches.clear();
 
     if (!tagGroups.length) {
+      this.#queueUpdatingTags();
       return;
     }
 
@@ -116,7 +117,7 @@ export default class CustomCategoriesResolver {
     this.#queueUpdatingTags();
   }
 
-  static #resetToOriginalCategory(tagDropdown: TagDropdownWrapper): void {
+  static #resetToOriginalCategory(tagDropdown: TagDropdown): void {
     emit(
       tagDropdown,
       EVENT_TAG_GROUP_RESOLVED,

src/lib/extension/EntitiesTransporter.ts

@@ -2,17 +2,46 @@ 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";
+import type { ImportableElement } from "$lib/extension/transporting/importables";
+
+/**
+ * Status of the last import.
+ *
+ * - `NULL` - no import was done yet or was unsuccessful.
+ * - `"unknown"` — imported object was created before v0.5, when extension started to be built for multiple sites.
+ * - `"same"` — imported object is marked as generated by the same type of extension.
+ * - `"different"` — imported object is marked as generated by some other type of extension.
+ */
+export type SameSiteStatus = null | "unknown" | "same" | "different";
 
 export default class EntitiesTransporter<EntityType> {
   readonly #targetEntityConstructor: new (...any: any[]) => EntityType;
 
+  #lastSameSiteStatus: SameSiteStatus = null;
+
+  /**
+   * Read the status of the last successful import. This flag could be used to determine if it was for the same site as
+   * the current extension or when it's generated before site identity was passed to the importable object.
+   *
+   * @see {SameSiteStatus} For the list of possible statuses.
+   */
+  get lastImportSameSiteStatus() {
+    return this.#lastSameSiteStatus;
+  }
+
   /**
    * 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;
+    const entityName = ((this.#targetEntityConstructor as any) as typeof StorageEntity)._entityName;
+
+    if (entityName === "entity") {
+      throw new Error("Generic entity name encountered!");
+    }
+
+    return entityName;
   }
 
   /**
@@ -26,32 +55,47 @@ export default class EntitiesTransporter<EntityType> {
     this.#targetEntityConstructor = entityConstructor;
   }
 
-  importFromJSON(jsonString: string): EntityType {
-    const importedObject = this.#tryParsingAsJSON(jsonString);
+  isCorrectEntity(entityObject: unknown): entityObject is EntityType {
+    return entityObject instanceof this.#targetEntityConstructor;
+  }
 
-    if (!importedObject) {
-      throw new Error('Invalid JSON!');
-    }
+  importFromObject(importedObject: Record<string, any>): EntityType {
+    this.#lastSameSiteStatus = null;
 
+    // TODO: There should be an auto-upgrader somewhere before the validation. So if even the older version of schema
+    //       was used, we still will will be able to pass the validation. For now we only have non-breaking changes.
     validateImportedEntity(
+      this.#entityName,
       importedObject,
-      this.#entityName
     );
 
+    this.#lastSameSiteStatus = EntitiesTransporter.checkIsSameSiteImportedObject(importedObject);
+
     return new this.#targetEntityConstructor(
       importedObject.id,
       importedObject
     );
   }
 
+  importFromJSON(jsonString: string): EntityType {
+    const importedObject = this.#tryParsingAsJSON(jsonString);
+
+    if (!importedObject) {
+      this.#lastSameSiteStatus = null;
+      throw new Error('Invalid JSON!');
+    }
+
+    return this.importFromObject(importedObject);
+  }
+
   importFromCompressedJSON(compressedJsonString: string): EntityType {
     return this.importFromJSON(
       decompressFromEncodedURIComponent(compressedJsonString)
     )
   }
 
-  exportToJSON(entityObject: EntityType): string {
-    if (!(entityObject instanceof this.#targetEntityConstructor)) {
+  exportToObject(entityObject: EntityType) {
+    if (!this.isCorrectEntity(entityObject)) {
       throw new TypeError('Transporter should be connected to the same entity to export!');
     }
 
@@ -59,12 +103,18 @@ export default class EntitiesTransporter<EntityType> {
       throw new TypeError('Only storage entities could be exported!');
     }
 
-    const exportableObject = exportEntityToObject(
-      entityObject,
-      this.#entityName
+    return exportEntityToObject(
+      this.#entityName,
+      entityObject
     );
+  }
 
-    return JSON.stringify(exportableObject, null, 2);
+  exportToJSON(entityObject: EntityType): string {
+    return JSON.stringify(
+      this.exportToObject(entityObject),
+      null,
+      2
+    );
   }
 
   exportToCompressedJSON(entityObject: EntityType): string {
@@ -86,4 +136,18 @@ export default class EntitiesTransporter<EntityType> {
 
     return jsonObject
   }
+
+  /**
+   * Check if the imported object is created for the same site extension or not.
+   * @param importedObject Object to check.
+   */
+  static checkIsSameSiteImportedObject(importedObject: Record<string, any>): SameSiteStatus {
+    if (!('$site' in importedObject)) {
+      return "unknown";
+    }
+
+    return importedObject.$site === __CURRENT_SITE__
+      ? "same"
+      : "different";
+  }
 }

src/lib/extension/base/CacheablePreferences.ts

@@ -0,0 +1,179 @@
+import ConfigurationController from "$lib/extension/ConfigurationController";
+
+/**
+ * Initialization options for the preference field helper class.
+ */
+type PreferenceFieldOptions<FieldKey, ValueType> = {
+  /**
+   * Field name which will be read or updated.
+   */
+  field: FieldKey;
+  /**
+   * Default value for this field.
+   */
+  defaultValue: ValueType;
+}
+
+/**
+ * Helper class for a field. Contains all information needed to read or set the values into the preferences while
+ * retaining proper types for the values.
+ */
+export class PreferenceField<
+  /**
+   * Mapping of keys to fields. Usually this is the same type used for defining the structure of the storage itself.
+   * Is automatically captured when preferences class instance is passed into the constructor.
+   */
+  Fields extends Record<string, any> = Record<string, any>,
+  /**
+   * Field key for resolving which value will be resolved from getter or which value type should be passed into the
+   * setter method.
+   */
+  Key extends keyof Fields = keyof Fields
+> {
+  /**
+   * Instance of the preferences class to read/update values on.
+   * @private
+   */
+  readonly #preferences: CacheablePreferences<Fields>;
+  /**
+   * Key of a field we want to read or write with the helper class.
+   * @private
+   */
+  readonly #fieldKey: Key;
+  /**
+   * Stored default value for a field.
+   * @private
+   */
+  readonly #defaultValue: Fields[Key];
+
+  /**
+   * @param preferencesInstance Instance of preferences to work with.
+   * @param options Initialization options for this field.
+   */
+  constructor(preferencesInstance: CacheablePreferences<Fields>, options: PreferenceFieldOptions<Key, Fields[Key]>) {
+    this.#preferences = preferencesInstance;
+    this.#fieldKey = options.field;
+    this.#defaultValue = options.defaultValue;
+  }
+
+  /**
+   * Read the field value from the preferences.
+   */
+  get() {
+    return this.#preferences.readRaw(this.#fieldKey, this.#defaultValue);
+  }
+
+  /**
+   * Update the preference field with provided value.
+   * @param value Value to update the field with.
+   */
+  set(value: Fields[Key]) {
+    return this.#preferences.writeRaw(this.#fieldKey, value);
+  }
+}
+
+/**
+ * Helper type for preference classes to enforce having field objects inside the preferences instance. It should be
+ * applied on child classes of {@link CacheablePreferences}.
+ */
+export type WithFields<FieldsType extends Record<string, any>> = {
+  readonly [FieldKey in keyof FieldsType]: PreferenceField<FieldsType, FieldKey>;
+}
+
+/**
+ * Base class for any preferences instances. It contains methods for reading or updating any arbitrary values inside
+ * extension storage. It also tries to save the value resolved from the storage into special internal cache after the
+ * first call.
+ *
+ * Should be usually paired with implementation of {@link WithFields} helper type as interface for much more usable
+ * API.
+ */
+export default abstract class CacheablePreferences<Fields> {
+  #controller: ConfigurationController;
+  #cachedValues: Map<keyof Fields, any> = new Map();
+  #disposables: Function[] = [];
+
+  /**
+   * @param settingsNamespace Name of the field inside the extension storage where these preferences stored.
+   * @protected
+   */
+  protected 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]
+          );
+        }
+      })
+    );
+  }
+
+  /**
+   * Read the value from the preferences by the field. This function doesn't handle default values, so you generally
+   * should avoid using this method and accessing the special fields instead.
+   * @param settingName Name of the field to read.
+   * @param defaultValue Default value to return if value is not set.
+   * @return Value of the field or default value if it is not set.
+   */
+  public async readRaw<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;
+  }
+
+  /**
+   * Write the value into specific field of the storage. You should generally avoid calling this function directly and
+   * instead rely on special field helpers inside your preferences class.
+   * @param settingName Name of the setting to write.
+   * @param value Value to pass.
+   * @param force Ignore the cache and force the update.
+   * @protected
+   */
+  async writeRaw<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 callback Callback which will receive list of settings on every update. This function will not be called
+   * on initialization.
+   * @return Unsubscribe function to call in order to disable the watching.
+   */
+  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;
+  }
+
+  /**
+   * Completely disable all subscriptions.
+   */
+  dispose() {
+    for (let disposeCallback of this.#disposables) {
+      disposeCallback();
+    }
+  }
+}

src/lib/extension/base/CacheableSettings.ts

@@ -1,81 +0,0 @@
-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.ts

@@ -24,18 +24,22 @@ export default abstract class StorageEntity<SettingsType extends Object = {}> {
     return this.#settings;
   }
 
-  public static readonly _entityName: string = "entity";
+  get type() {
+    return (this.constructor as typeof StorageEntity)._entityName;
+  }
+
+  public static readonly _entityName: keyof App.EntityNamesMap | "entity" = "entity";
 
   async save() {
     await EntitiesController.updateEntity(
-      (this.constructor as typeof StorageEntity)._entityName,
+      this.type,
       this
     );
   }
 
   async delete() {
     await EntitiesController.deleteEntity(
-      (this.constructor as typeof StorageEntity)._entityName,
+      this.type,
       this.id
     );
   }

src/lib/extension/entities/TagGroup.ts

@@ -21,5 +21,5 @@ export default class TagGroup extends StorageEntity<TagGroupSettings> {
     });
   }
 
-  static _entityName = 'groups';
+  public static readonly _entityName: keyof App.EntityNamesMap = "groups";
 }

src/lib/extension/entities/TaggingProfile.ts

@@ -1,20 +1,20 @@
 import StorageEntity from "$lib/extension/base/StorageEntity";
 
-export interface MaintenanceProfileSettings {
+export interface TaggingProfileSettings {
   name: string;
   tags: string[];
   temporary: boolean;
 }
 
 /**
- * Class representing the maintenance profile entity.
+ * Class representing the tagging profile entity.
  */
-export default class MaintenanceProfile extends StorageEntity<MaintenanceProfileSettings> {
+export default class TaggingProfile extends StorageEntity<TaggingProfileSettings> {
   /**
    * @param id ID of the entity.
    * @param settings Maintenance profile settings object.
    */
-  constructor(id: string, settings: Partial<MaintenanceProfileSettings>) {
+  constructor(id: string, settings: Partial<TaggingProfileSettings>) {
     super(id, {
       name: settings.name || '',
       tags: settings.tags || [],
@@ -30,5 +30,5 @@ export default class MaintenanceProfile extends StorageEntity<MaintenanceProfile
     return super.save();
   }
 
-  public static readonly _entityName = "profiles";
+  public static readonly _entityName: keyof App.EntityNamesMap = "profiles";
 }

src/lib/extension/preferences/MiscPreferences.ts

@@ -0,0 +1,27 @@
+import CacheablePreferences, {
+  PreferenceField,
+  type WithFields
+} from "$lib/extension/base/CacheablePreferences";
+
+export type FullscreenViewerSize = keyof App.ImageURIs;
+
+interface MiscPreferencesFields {
+  fullscreenViewer: boolean;
+  fullscreenViewerSize: FullscreenViewerSize;
+}
+
+export default class MiscPreferences extends CacheablePreferences<MiscPreferencesFields> implements WithFields<MiscPreferencesFields> {
+  constructor() {
+    super("misc");
+  }
+
+  readonly fullscreenViewer = new PreferenceField(this, {
+    field: "fullscreenViewer",
+    defaultValue: true,
+  });
+
+  readonly fullscreenViewerSize = new PreferenceField(this, {
+    field: "fullscreenViewerSize",
+    defaultValue: "large",
+  });
+}

src/lib/extension/preferences/TaggingProfilesPreferences.ts

@@ -0,0 +1,40 @@
+import TaggingProfile from "$entities/TaggingProfile";
+import CacheablePreferences, { PreferenceField, type WithFields } from "$lib/extension/base/CacheablePreferences";
+
+interface TaggingProfilePreferencesFields {
+  activeProfile: string | null;
+  stripBlacklistedTags: boolean;
+}
+
+class ActiveProfilePreference extends PreferenceField<TaggingProfilePreferencesFields, "activeProfile"> {
+  constructor(preferencesInstance: CacheablePreferences<TaggingProfilePreferencesFields>) {
+    super(preferencesInstance, {
+      field: "activeProfile",
+      defaultValue: null,
+    });
+  }
+
+  async asObject(): Promise<TaggingProfile | null> {
+    const activeProfileId = await this.get();
+
+    if (!activeProfileId) {
+      return null;
+    }
+
+    return (await TaggingProfile.readAll())
+      .find(profile => profile.id === activeProfileId) || null;
+  }
+}
+
+export default class TaggingProfilesPreferences extends CacheablePreferences<TaggingProfilePreferencesFields> implements WithFields<TaggingProfilePreferencesFields> {
+  constructor() {
+    super("maintenance");
+  }
+
+  readonly activeProfile = new ActiveProfilePreference(this);
+
+  readonly stripBlacklistedTags = new PreferenceField(this, {
+    field: "stripBlacklistedTags",
+    defaultValue: false,
+  });
+}

src/lib/extension/preferences/TagsPreferences.ts

@@ -0,0 +1,28 @@
+import CacheablePreferences, { PreferenceField, type WithFields } from "$lib/extension/base/CacheablePreferences";
+
+interface TagsPreferencesFields {
+  groupSeparation: boolean;
+  replaceLinks: boolean;
+  replaceLinkText: boolean;
+}
+
+export default class TagsPreferences extends CacheablePreferences<TagsPreferencesFields> implements WithFields<TagsPreferencesFields> {
+  constructor() {
+    super("tag");
+  }
+
+  readonly groupSeparation = new PreferenceField(this, {
+    field: "groupSeparation",
+    defaultValue: true,
+  });
+
+  readonly replaceLinks = new PreferenceField(this, {
+    field: "replaceLinks",
+    defaultValue: false,
+  });
+
+  readonly replaceLinkText = new PreferenceField(this, {
+    field: "replaceLinkText",
+    defaultValue: true,
+  });
+}

src/lib/extension/settings/MaintenanceSettings.ts

@@ -1,48 +0,0 @@
-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

@@ -1,30 +0,0 @@
-import CacheableSettings from "$lib/extension/base/CacheableSettings";
-
-export type FullscreenViewerSize = keyof App.ImageURIs;
-
-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

@@ -1,30 +0,0 @@
-import CacheableSettings from "$lib/extension/base/CacheableSettings";
-
-export type SuggestionsPosition = "start" | "end";
-
-interface SearchSettingsFields {
-  suggestProperties: boolean;
-  suggestPropertiesPosition: SuggestionsPosition;
-}
-
-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/settings/TagSettings.ts

@@ -1,19 +0,0 @@
-import CacheableSettings from "$lib/extension/base/CacheableSettings";
-
-interface TagSettingsFields {
-  groupSeparation: boolean;
-}
-
-export default class TagSettings extends CacheableSettings<TagSettingsFields> {
-  constructor() {
-    super("tag");
-  }
-
-  async resolveGroupSeparation() {
-    return this._resolveSetting("groupSeparation", true);
-  }
-
-  async setGroupSeparation(value: boolean) {
-    return this._writeSetting("groupSeparation", Boolean(value));
-  }
-}

src/lib/extension/transporting/exporters.ts

@@ -1,21 +1,30 @@
 import StorageEntity from "$lib/extension/base/StorageEntity";
+import type { ImportableEntityObject } from "$lib/extension/transporting/importables";
+
+type ExporterFunction<EntityType extends StorageEntity> = (entity: EntityType) => ImportableEntityObject<EntityType>;
 
 type ExportersMap = {
-  [EntityName in keyof App.EntityNamesMap]: (entity: App.EntityNamesMap[EntityName]) => Record<string, any>
-};
+  [EntityName in keyof App.EntityNamesMap]: ExporterFunction<App.EntityNamesMap[EntityName]>;
+}
 
 const entitiesExporters: ExportersMap = {
   profiles: entity => {
     return {
-      v: 1,
+      $type: "profiles",
+      $site: __CURRENT_SITE__,
+      v: 2,
       id: entity.id,
       name: entity.settings.name,
       tags: entity.settings.tags,
+      // Any exported profile should be considered non-temporary.
+      temporary: false,
     }
   },
   groups: entity => {
     return {
-      v: 1,
+      $type: "groups",
+      $site: __CURRENT_SITE__,
+      v: 2,
       id: entity.id,
       name: entity.settings.name,
       tags: entity.settings.tags,
@@ -27,10 +36,13 @@ const entitiesExporters: ExportersMap = {
   }
 };
 
-export function exportEntityToObject(entityInstance: StorageEntity<any>, entityName: string): Record<string, any> {
+export function exportEntityToObject<EntityName extends keyof App.EntityNamesMap>(
+  entityName: EntityName,
+  entityInstance: App.EntityNamesMap[EntityName]
+): ImportableEntityObject<App.EntityNamesMap[EntityName]> {
   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);
+  return entitiesExporters[entityName].call(null, entityInstance);
 }

src/lib/extension/transporting/importables.ts

@@ -0,0 +1,40 @@
+import type StorageEntity from "$lib/extension/base/StorageEntity";
+
+export interface ImportableElement<Type extends string = string> {
+  /**
+   * Type of importable. Should be unique to properly import everything.
+   */
+  $type: Type;
+  /**
+   * Identifier of the site this element is built for.
+   */
+  $site?: string;
+}
+
+export interface ImportableElementsList<ElementsType extends ImportableElement = ImportableElement> extends ImportableElement<"list"> {
+  /**
+   * List of elements inside. Elements could be of any type and should be checked and mapped.
+   */
+  elements: ElementsType[];
+}
+
+/**
+ * Base information on the object which should be present on every entity.
+ */
+export interface BaseImportableEntity extends ImportableElement<keyof App.EntityNamesMap> {
+  /**
+   * 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.
+ */
+export type ImportableEntityObject<EntityType extends StorageEntity> = { [ObjectKey in keyof BaseImportableEntity]: any }
+  & { [SettingKey in keyof EntityType["settings"]]: any };

src/lib/extension/transporting/validators.ts

@@ -1,32 +1,12 @@
 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 };
+import type { ImportableEntityObject } from "$lib/extension/transporting/importables";
 
 /**
  * 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;
+type ValidationFunction<EntityType extends StorageEntity> = (importedObject: ImportableEntityObject<EntityType>) => void;
 
 /**
  * Mapping of validation functions for all entities present in the extension. Key is a name of entity and value is a
@@ -36,39 +16,70 @@ type EntitiesValidationMap = {
   [EntityKey in keyof App.EntityNamesMap]?: ValidationFunction<App.EntityNamesMap[EntityKey]>;
 };
 
+/**
+ * Check if the following value is defined, not empty and is of correct type.
+ * @param value Value to be checked.
+ */
+function validateRequiredString(value: unknown): boolean {
+  return Boolean(value && typeof value === 'string');
+}
+
+/**
+ * Check if the following value is not set or is a valid array.
+ * @param value Value to be checked.
+ */
+function validateOptionalArray(value: unknown): boolean {
+  return typeof value === 'undefined' || value === null || Array.isArray(value);
+}
+
 /**
  * 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.v || importedObject.v > 2) {
+      throw new Error('Unsupported profile version!');
     }
 
     if (
-      !importedObject.id
-      || typeof importedObject.id !== "string"
-      || !importedObject.name
-      || typeof importedObject.name !== "string"
-      || !importedObject.tags
-      || !Array.isArray(importedObject.tags)
+      !validateRequiredString(importedObject?.id)
+      || !validateRequiredString(importedObject?.name)
+      || !validateOptionalArray(importedObject?.tags)
     ) {
       throw new Error('Invalid profile format detected!');
     }
-  }
+  },
+  groups: importedObject => {
+    if (!importedObject.v || importedObject.v > 2) {
+      throw new Error('Unsupported group version!');
+    }
+
+    if (
+      !validateRequiredString(importedObject?.id)
+      || !validateRequiredString(importedObject?.name)
+      || !validateOptionalArray(importedObject?.tags)
+      || !validateOptionalArray(importedObject?.prefixes)
+      || !validateOptionalArray(importedObject?.suffixes)
+    ) {
+      throw new Error('Invalid group 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.
+ * @param importedObject Object imported from JSON.
  * @throws {Error} Error in case validation failed with the reason stored in the message.
  */
-export function validateImportedEntity(importedObject: any, entityName: string) {
+export function validateImportedEntity<EntityName extends keyof App.EntityNamesMap>(
+  entityName: EntityName,
+  importedObject: any
+) {
   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);
+  entitiesValidators[entityName]!.call(null, importedObject);
 }

src/lib/philomena/scraping/ScrapedAPI.ts

@@ -1,4 +1,4 @@
-import PostParser from "$lib/booru/scraped/parsing/PostParser";
+import PostParser from "$lib/philomena/scraping/parsing/PostParser";
 
 type UpdaterFunction = (tags: Set<string>) => Set<string>;
 

src/lib/philomena/scraping/parsing/PostParser.ts

@@ -1,5 +1,5 @@
-import PageParser from "$lib/booru/scraped/parsing/PageParser";
-import { buildTagsAndAliasesMap } from "$lib/booru/tag-utils";
+import PageParser from "$lib/philomena/scraping/parsing/PageParser";
+import { buildTagsAndAliasesMap } from "$lib/philomena/tag-utils";
 
 export default class PostParser extends PageParser {
   #tagEditorForm: HTMLFormElement | null = null;

src/lib/philomena/tag-utils.ts

@@ -0,0 +1,118 @@
+import { namespaceCategories } from "$config/tags";
+import { QueryLexer, QuotedTermToken, TermToken } from "$lib/philomena/search/QueryLexer";
+
+/**
+ * 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;
+}
+
+const tagLinkRegExp = /\/tags\/(?<encodedTagName>[^/?#]+)/;
+
+/**
+ * List of encoded characters from Philomena.
+ *
+ * @see https://github.com/philomena-dev/philomena/blob/6086757b654da8792ae52adb2a2f501ea6c30d12/lib/philomena/slug.ex#L52-L57
+ */
+const slugEncodedCharacters: Map<string, string> = new Map([
+  ['-dash-', '-'],
+  ['-fwslash-', '/'],
+  ['-bwslash-', '\\'],
+  ['-colon-', ':'],
+  ['-dot-', '.'],
+  ['-plus-', '+'],
+]);
+
+/**
+ * Try to parse the tag name from the search query URL. It uses the same tokenizer as the booru. It only returns the
+ * tag name if query contains only one single tag without any additional conditions.
+ *
+ * @param searchLink Link with search query.
+ *
+ * @return Tag name or NULL if query contains more than 1 tag or doesn't have any tags at all.
+ */
+function parseTagNameFromSearchQuery(searchLink: URL): string | null {
+  const lexer = new QueryLexer(searchLink.searchParams.get('q') || '');
+  const parsedQuery = lexer.parse();
+
+  if (parsedQuery.length !== 1) {
+    return null;
+  }
+
+  const [token] = parsedQuery;
+
+  switch (true) {
+    case token instanceof TermToken:
+      return token.value;
+    case token instanceof QuotedTermToken:
+      return token.decodedValue;
+  }
+
+  return null;
+}
+
+/**
+ * Decode the tag name from the following link.
+ *
+ * @param tagLink Search link or link to the tag to parse the tag name from.
+ *
+ * @return Tag name or NULL if function is failed to parse the name of the tag.
+ */
+export function resolveTagNameFromLink(tagLink: URL): string | null {
+  if (tagLink.pathname.startsWith('/search') && tagLink.searchParams.has('q')) {
+    return parseTagNameFromSearchQuery(tagLink);
+  }
+
+  tagLinkRegExp.lastIndex = 0;
+
+  const result = tagLinkRegExp.exec(tagLink.pathname);
+  const encodedTagName = result?.groups?.encodedTagName;
+
+  if (!encodedTagName) {
+    return null;
+  }
+
+  return decodeURIComponent(encodedTagName)
+    .replaceAll(/-[a-z]+-/gi, match => slugEncodedCharacters.get(match) ?? match)
+    .replaceAll('-', ' ')
+    .replaceAll('+', ' ');
+}
+
+/**
+ * Try to resolve the category from the tag name.
+ *
+ * @param tagName Name of the tag.
+ */
+export function resolveTagCategoryFromTagName(tagName: string): string | null {
+  const namespace = tagName.split(':')[0];
+
+  return namespaceCategories.get(namespace) ?? null;
+}

src/routes/+layout.svelte

@@ -4,6 +4,7 @@
   import Footer from "$components/layout/Footer.svelte";
   import { initializeLinksReplacement } from "$lib/popup-links";
   import { onDestroy } from "svelte";
+  import { headTitle } from "$stores/popup";
 
   interface Props {
     children?: import('svelte').Snippet;
@@ -22,6 +23,10 @@
   })
 </script>
 
+<svelte:head>
+  <title>{$headTitle}</title>
+</svelte:head>
+
 <Header/>
 <main>
   {@render children?.()}

src/routes/+page.svelte

@@ -1,29 +1,33 @@
 <script lang="ts">
   import Menu from "$components/ui/menu/Menu.svelte";
   import MenuItem from "$components/ui/menu/MenuItem.svelte";
-  import { activeProfileStore, maintenanceProfiles } from "$stores/entities/maintenance-profiles";
+  import { activeTaggingProfile, taggingProfiles } from "$stores/entities/tagging-profiles";
   import MenuCheckboxItem from "$components/ui/menu/MenuCheckboxItem.svelte";
-  import MaintenanceProfile from "$entities/MaintenanceProfile";
+  import TaggingProfile from "$entities/TaggingProfile";
+  import { popupTitle } from "$stores/popup";
 
-  let activeProfile = $derived<MaintenanceProfile | null>(
-    $maintenanceProfiles.find(profile => profile.id === $activeProfileStore) || null
+  $popupTitle = null;
+
+  let activeProfile = $derived<TaggingProfile | null>(
+    $taggingProfiles.find(profile => profile.id === $activeTaggingProfile) || null
   );
 
   function turnOffActiveProfile() {
-    $activeProfileStore = null;
+    $activeTaggingProfile = null;
   }
 </script>
 
 <Menu>
   {#if activeProfile}
-    <MenuCheckboxItem checked oninput={turnOffActiveProfile} href="/features/maintenance/{activeProfile.id}">
+    <MenuCheckboxItem checked oninput={turnOffActiveProfile} href="/features/profiles/{activeProfile.id}">
       Active Profile: {activeProfile.settings.name}
     </MenuCheckboxItem>
     <hr>
   {/if}
-  <MenuItem href="/features/maintenance">Tagging Profiles</MenuItem>
+  <MenuItem href="/features/profiles">Tagging Profiles</MenuItem>
   <MenuItem href="/features/groups">Tag Groups</MenuItem>
   <hr>
+  <MenuItem href="/transporting">Import/Export</MenuItem>
   <MenuItem href="/preferences">Preferences</MenuItem>
   <MenuItem href="/about">About</MenuItem>
 </Menu>

src/routes/about/+page.svelte

@@ -1,6 +1,20 @@
 <script>
   import Menu from "$components/ui/menu/Menu.svelte";
   import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import { PLUGIN_NAME } from "$lib/constants";
+  import { popupTitle } from "$stores/popup";
+
+  $popupTitle = 'About';
+
+  let currentSiteUrl = 'https://furbooru.org';
+
+  if (__CURRENT_SITE__ === 'derpibooru') {
+    currentSiteUrl = 'https://derpibooru.org';
+  }
+
+  if (__CURRENT_SITE__ === 'tantabus') {
+    currentSiteUrl = 'https://tantabus.ai';
+  }
 </script>
 
 <Menu>
@@ -8,18 +22,26 @@
   <hr>
 </Menu>
 <h1>
-  Furbooru Tagging Assistant
+  {PLUGIN_NAME}
 </h1>
 <p>
-  This is a tool made to help tag images on Furbooru more efficiently. It is currently in development and is not yet
-  ready for use, but it still can provide some useful functionality.
+  This is a small tool to make tagging on {__CURRENT_SITE_NAME__} just a little bit more convenient. Group tags with
+  your own rules; add or remove tags from the images without opening them up; preview images and videos on click and
+  a little bit more. This extension is highly unstable and might break at any point, so be aware.
 </p>
 <Menu>
   <hr>
-  <MenuItem href="https://furbooru.org" icon="globe" target="_blank">
-    Visit Furbooru
+  <MenuItem href={currentSiteUrl} icon="globe" target="_blank">
+    Visit {__CURRENT_SITE_NAME__}
   </MenuItem>
   <MenuItem href="https://github.com/koloml/furbooru-tagging-assistant" icon="info-circle" target="_blank">
     GitHub Repo
   </MenuItem>
 </Menu>
+
+<style>
+  h1, p {
+    margin-top: .5em;
+    margin-bottom: .5em;
+  }
+</style>

src/routes/features/+page.svelte

@@ -6,5 +6,5 @@
 <Menu>
   <MenuItem href="/">Back</MenuItem>
   <hr>
-  <MenuItem href="/features/maintenance">Tagging Profiles</MenuItem>
+  <MenuItem href="/features/profiles">Tagging Profiles</MenuItem>
 </Menu>

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

@@ -3,6 +3,9 @@
   import MenuItem from "$components/ui/menu/MenuItem.svelte";
   import { tagGroups } from "$stores/entities/tag-groups";
   import TagGroup from "$entities/TagGroup";
+  import { popupTitle } from "$stores/popup";
+
+  $popupTitle = 'Tag Groups';
 
   let groups = $derived<TagGroup[]>($tagGroups.sort((a, b) => a.settings.name.localeCompare(b.settings.name)));
 </script>

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

@@ -6,6 +6,7 @@
   import MenuItem from "$components/ui/menu/MenuItem.svelte";
   import { tagGroups } from "$stores/entities/tag-groups";
   import TagGroup from "$entities/TagGroup";
+  import { popupTitle } from "$stores/popup";
 
   let groupId = $derived<string>(page.params.id);
   let group = $derived<TagGroup | null>($tagGroups.find(group => group.id === groupId) || null);
@@ -19,6 +20,8 @@
     if (!group) {
       console.warn(`Group ${groupId} not found.`);
       goto('/features/groups');
+    } else {
+      $popupTitle = `Tag Group: ${group.settings.name}`;
     }
   })
 </script>

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

@@ -5,6 +5,7 @@
   import MenuItem from "$components/ui/menu/MenuItem.svelte";
   import { tagGroups } from "$stores/entities/tag-groups";
   import type TagGroup from "$entities/TagGroup";
+  import { popupTitle } from "$stores/popup";
 
   const groupId = $derived<string>(page.params.id);
   const targetGroup = $derived<TagGroup | undefined>($tagGroups.find(group => group.id === groupId));
@@ -12,6 +13,8 @@
   $effect(() => {
     if (!targetGroup) {
       goto('/features/groups');
+    } else {
+      $popupTitle = `Deleting Tag Group: ${targetGroup.settings.name}`;
     }
   })
 

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

@@ -12,6 +12,7 @@
   import TagGroup from "$entities/TagGroup";
   import { tagGroups } from "$stores/entities/tag-groups";
   import CheckboxField from "$components/ui/forms/CheckboxField.svelte";
+  import { popupTitle } from "$stores/popup";
 
   let groupId = $derived(page.params.id);
 
@@ -32,6 +33,7 @@
 
   $effect(() => {
     if (groupId === 'new') {
+      $popupTitle = 'Create Tag Group';
       return;
     }
 
@@ -40,6 +42,8 @@
       return;
     }
 
+    $popupTitle = `Edit Tag Group: ${targetGroup.settings.name}`;
+
     groupName = targetGroup.settings.name;
     tagsList = [...targetGroup.settings.tags].sort((a, b) => a.localeCompare(b));
     prefixesList = [...targetGroup.settings.prefixes].sort((a, b) => a.localeCompare(b));

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

@@ -8,6 +8,7 @@
   import TagGroup from "$entities/TagGroup";
   import EntitiesTransporter from "$lib/extension/EntitiesTransporter";
   import { tagGroups } from "$stores/entities/tag-groups";
+  import { popupTitle } from "$stores/popup";
 
   let isEncodedGroupShown = $state(true);
 
@@ -17,6 +18,8 @@
   $effect(() => {
     if (!group) {
       goto('/features/groups');
+    } else {
+      $popupTitle = `Export Tag Group: ${group.settings.name}`;
     }
   });
 

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

@@ -8,6 +8,8 @@
   import TagGroup from "$entities/TagGroup";
   import EntitiesTransporter from "$lib/extension/EntitiesTransporter";
   import { tagGroups } from "$stores/entities/tag-groups";
+  import { popupTitle } from "$stores/popup";
+  import Notice from "$components/ui/Notice.svelte";
 
   const groupTransporter = new EntitiesTransporter(TagGroup);
 
@@ -17,6 +19,12 @@
   let candidateGroup = $state<TagGroup | null>(null);
   let existingGroup = $state<TagGroup | null>(null);
 
+  $effect(() => {
+    $popupTitle = candidateGroup
+      ? 'Confirm Imported Tag Group'
+      : 'Import Tag Group';
+  });
+
   function tryImportingGroup() {
     candidateGroup = null;
     existingGroup = null;
@@ -74,7 +82,7 @@
   <hr>
 </Menu>
 {#if errorMessage}
-  <p class="error">Failed to import: {errorMessage}</p>
+  <Notice level="error">Failed to import: {errorMessage}</Notice>
   <Menu>
     <hr>
   </Menu>
@@ -91,9 +99,10 @@
   </Menu>
 {:else}
   {#if existingGroup}
-    <p class="warning">
+    <Notice level="warning">
       This group will replace the existing "{existingGroup.settings.name}" group, since it have the same ID.
-    </p>
+    </Notice>
+    <br>
   {/if}
   <GroupView group={candidateGroup}></GroupView>
   <Menu>
@@ -107,24 +116,3 @@
     <MenuItem onclick={() => candidateGroup = null}>Cancel</MenuItem>
   </Menu>
 {/if}
-
-<style lang="scss">
-  @use '$styles/colors';
-
-  .error, .warning {
-    padding: 5px 24px;
-    margin: {
-      left: -24px;
-      right: -24px;
-    }
-  }
-
-  .error {
-    background: colors.$error-background;
-  }
-
-  .warning {
-    background: colors.$warning-background;
-    margin-bottom: .5em;
-  }
-</style>

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

@@ -1,69 +0,0 @@
-<script lang="ts">
-  import { run } from 'svelte/legacy';
-  import Menu from "$components/ui/menu/Menu.svelte";
-  import MenuItem from "$components/ui/menu/MenuItem.svelte";
-  import { page } from "$app/state";
-  import { goto } from "$app/navigation";
-  import { activeProfileStore, maintenanceProfiles } from "$stores/entities/maintenance-profiles";
-  import ProfileView from "$components/features/ProfileView.svelte";
-  import MenuCheckboxItem from "$components/ui/menu/MenuCheckboxItem.svelte";
-  import MaintenanceProfile from "$entities/MaintenanceProfile";
-  import { onMount } from "svelte";
-
-  let profileId = $derived(page.params.id);
-  let profile = $derived<MaintenanceProfile|null>(
-    $maintenanceProfiles.find(profile => profile.id === profileId) || null
-  );
-
-  $effect(() => {
-    if (profileId === 'new') {
-      goto('/features/maintenance/new/edit');
-      return;
-    }
-
-    if (!profile) {
-      console.warn(`Profile ${profileId} not found.`);
-      goto('/features/maintenance');
-    }
-  });
-
-  let isActiveProfile = $state(false);
-
-  $effect.pre(() => {
-    isActiveProfile = $activeProfileStore === profileId;
-  });
-
-  $effect(() => {
-    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 href="/features/maintenance/{profileId}/edit" icon="wrench">Edit Profile</MenuItem>
-  <MenuCheckboxItem bind:checked={isActiveProfile}>
-    Activate Profile
-  </MenuCheckboxItem>
-  <MenuItem href="/features/maintenance/{profileId}/export" icon="file-export">
-    Export Profile
-  </MenuItem>
-  <MenuItem href="/features/maintenance/{profileId}/delete" icon="trash">
-    Delete Profile
-  </MenuItem>
-</Menu>
-
-<style lang="scss">
-</style>

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

@@ -2,42 +2,45 @@
   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, maintenanceProfiles } from "$stores/entities/maintenance-profiles";
-  import MaintenanceProfile from "$entities/MaintenanceProfile";
+  import { activeTaggingProfile, taggingProfiles } from "$stores/entities/tagging-profiles";
+  import TaggingProfile from "$entities/TaggingProfile";
+  import { popupTitle } from "$stores/popup";
 
-  let profiles = $derived<MaintenanceProfile[]>(
-    $maintenanceProfiles.sort((a, b) => a.settings.name.localeCompare(b.settings.name))
+  $popupTitle = 'Tagging Profiles';
+
+  let profiles = $derived<TaggingProfile[]>(
+    $taggingProfiles.sort((a, b) => a.settings.name.localeCompare(b.settings.name))
   );
 
   function resetActiveProfile() {
-    $activeProfileStore = null;
+    $activeTaggingProfile = null;
   }
 
   function enableSelectedProfile(event: Event) {
     const target = event.target;
 
     if (target instanceof HTMLInputElement && target.checked) {
-      activeProfileStore.set(target.value);
+      activeTaggingProfile.set(target.value);
     }
   }
 </script>
 
 <Menu>
   <MenuItem href="/" icon="arrow-left">Back</MenuItem>
-  <MenuItem href="/features/maintenance/new/edit" icon="plus">Create New</MenuItem>
+  <MenuItem href="/features/profiles/new/edit" icon="plus">Create New</MenuItem>
   {#if profiles.length}
     <hr>
   {/if}
   {#each profiles as profile}
-    <MenuRadioItem href="/features/maintenance/{profile.id}"
+    <MenuRadioItem href="/features/profiles/{profile.id}"
                    name="active-profile"
                    value={profile.id}
-                   checked={$activeProfileStore === profile.id}
+                   checked={$activeTaggingProfile === profile.id}
                    oninput={enableSelectedProfile}>
       {profile.settings.name}
     </MenuRadioItem>
   {/each}
   <hr>
   <MenuItem href="#" onclick={resetActiveProfile}>Reset Active Profile</MenuItem>
-  <MenuItem href="/features/maintenance/import">Import Profile</MenuItem>
+  <MenuItem href="/features/profiles/import">Import Profile</MenuItem>
 </Menu>

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

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import Menu from "$components/ui/menu/Menu.svelte";
+  import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import { page } from "$app/state";
+  import { goto } from "$app/navigation";
+  import { activeTaggingProfile, taggingProfiles } from "$stores/entities/tagging-profiles";
+  import ProfileView from "$components/features/ProfileView.svelte";
+  import MenuCheckboxItem from "$components/ui/menu/MenuCheckboxItem.svelte";
+  import TaggingProfile from "$entities/TaggingProfile";
+  import { popupTitle } from "$stores/popup";
+
+  let profileId = $derived(page.params.id);
+  let profile = $derived<TaggingProfile|null>(
+    $taggingProfiles.find(profile => profile.id === profileId) || null
+  );
+
+  $effect(() => {
+    if (profileId === 'new') {
+      goto('/features/profiles/new/edit');
+      return;
+    }
+
+    if (!profile) {
+      console.warn(`Profile ${profileId} not found.`);
+      goto('/features/profiles');
+    } else {
+      $popupTitle = `Tagging Profile: ${profile.settings.name}`;
+    }
+  });
+
+  let isActiveProfile = $state(false);
+
+  $effect.pre(() => {
+    isActiveProfile = $activeTaggingProfile === profileId;
+  });
+
+  $effect(() => {
+    if (isActiveProfile && $activeTaggingProfile !== profileId) {
+      $activeTaggingProfile = profileId;
+    }
+
+    if (!isActiveProfile && $activeTaggingProfile === profileId) {
+      $activeTaggingProfile = null;
+    }
+  });
+</script>
+
+<Menu>
+  <MenuItem href="/features/profiles" icon="arrow-left">Back</MenuItem>
+  <hr>
+</Menu>
+{#if profile}
+  <ProfileView {profile}/>
+{/if}
+<Menu>
+  <hr>
+  <MenuItem href="/features/profiles/{profileId}/edit" icon="wrench">Edit Profile</MenuItem>
+  <MenuCheckboxItem bind:checked={isActiveProfile}>
+    Activate Profile
+  </MenuCheckboxItem>
+  <MenuItem href="/features/profiles/{profileId}/export" icon="file-export">
+    Export Profile
+  </MenuItem>
+  <MenuItem href="/features/profiles/{profileId}/delete" icon="trash">
+    Delete Profile
+  </MenuItem>
+</Menu>
+
+<style lang="scss">
+</style>

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

@@ -3,17 +3,20 @@
   import Menu from "$components/ui/menu/Menu.svelte";
   import MenuItem from "$components/ui/menu/MenuItem.svelte";
   import { page } from "$app/state";
-  import { maintenanceProfiles } from "$stores/entities/maintenance-profiles";
-  import MaintenanceProfile from "$entities/MaintenanceProfile";
+  import { taggingProfiles } from "$stores/entities/tagging-profiles";
+  import TaggingProfile from "$entities/TaggingProfile";
+  import { popupTitle } from "$stores/popup";
 
   const profileId = $derived(page.params.id);
-  const targetProfile = $derived<MaintenanceProfile | null>(
-    $maintenanceProfiles.find(profile => profile.id === profileId) || null
+  const targetProfile = $derived<TaggingProfile | null>(
+    $taggingProfiles.find(profile => profile.id === profileId) || null
   );
 
   $effect(() => {
     if (!targetProfile) {
-      goto('/features/maintenance');
+      goto('/features/profiles');
+    } else {
+      $popupTitle = `Deleting Tagging Profile: ${targetProfile.settings.name}`
     }
   });
 
@@ -24,12 +27,12 @@
     }
 
     await targetProfile.delete();
-    await goto('/features/maintenance');
+    await goto('/features/profiles');
   }
 </script>
 
 <Menu>
-  <MenuItem href="/features/maintenance/{profileId}" icon="arrow-left">Back</MenuItem>
+  <MenuItem href="/features/profiles/{profileId}" icon="arrow-left">Back</MenuItem>
   <hr>
 </Menu>
 {#if targetProfile}
@@ -39,7 +42,7 @@
   <Menu>
     <hr>
     <MenuItem onclick={deleteProfile}>Yes</MenuItem>
-    <MenuItem href="/features/maintenance/{profileId}">No</MenuItem>
+    <MenuItem href="/features/profiles/{profileId}">No</MenuItem>
   </Menu>
 {:else}
   <p>Loading...</p>