Merge pull request #151 from koloml/release/0.6.0

Release: 0.6.0

.github/workflows/build-extensions.yml

@@ -10,7 +10,7 @@ jobs:
     
     strategy:
       matrix:
-        site: [furbooru, derpibooru]
+        site: [furbooru, derpibooru, tantabus]
     
     steps:
     - name: Checkout repository
@@ -27,10 +27,10 @@ jobs:
       
     - name: Build extension for ${{ matrix.site }}
       run: |
-        if [ "${{ matrix.site }}" = "derpibooru" ]; then
-          npm run build:derpibooru
-        else
+        if [ "${{ matrix.site }}" = "furbooru" ]; then
           npm run build
+        else
+          npm run build:${{ matrix.site }}
         fi
         
     - name: Create extension zip

.vite/lib/content-scripts.js

@@ -51,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'),

.vite/pack-extension.js

@@ -67,13 +67,24 @@ export async function packExtension(settings) {
     return entry;
   })
 
-  if (process.env.SITE === 'derpibooru') {
-    manifest.replaceHostTo([
-      'derpibooru.org',
-      'trixiebooru.org'
-    ]);
-    manifest.replaceBooruNameWith('Derpibooru');
-    manifest.setGeckoIdentifier('derpibooru-tagging-assistant@thecore.city');
+  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'));

README.md

@@ -1,8 +1,8 @@
 # Philomena Tagging Assistant
 
-This is a browser extension written for the [Furbooru](https://furbooru.org) and [Derpibooru](https://derpibooru.org) 
-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.
+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
 
@@ -59,14 +59,17 @@ 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.
 
-Extension can currently be built for 2 different imageboards using one of the following commands:
+Extension can currently be built for multiple different imageboards using one of the following commands:
 
 ```shell
-# To build the extension for Furbooru, use:
+# Furbooru:
 npm run build
 
-# To build the extension for Derpbooru, use:
+# Derpibooru:
 npm run build:derpibooru
+
+# Tantabus:
+npm run build:tantabus
 ```
 
 When build is complete, extension  files can be found in the `/build` directory. These files can be either used 

manifest.json

@@ -1,7 +1,7 @@
 {
     "name": "Furbooru Tagging Assistant",
     "description": "Small experimental extension for slightly quicker tagging experience. Furbooru Edition.",
-    "version": "0.5.2",
+    "version": "0.6.0",
     "browser_specific_settings": {
         "gecko": {
             "id": "furbooru-tagging-assistant@thecore.city"
@@ -69,6 +69,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,10 +1,12 @@
 {
     "name": "furbooru-tagging-assistant",
-    "version": "0.5.2",
+    "version": "0.6.0",
     "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",
@@ -12,27 +14,26 @@
         "test": "vitest run --coverage",
         "test:watch": "vitest watch --coverage"
     },
-    "devDependencies": {
-        "@sveltejs/vite-plugin-svelte": "^6.2.0",
-        "@types/chrome": "^0.0.326",
-        "@types/node": "^22.18.6",
-        "@vitest/coverage-v8": "^3.2.4",
-        "cheerio": "^1.1.2",
-        "cross-env": "^10.0.0",
-        "jsdom": "^27.0.0",
-        "svelte-check": "^4.3.1",
-        "typescript": "^5.9.2",
-        "vite": "^7.1.6",
-        "vitest": "^3.2.4"
-    },
-    "type": "module",
     "dependencies": {
-        "@sveltejs/adapter-static": "^3.0.9",
-        "@sveltejs/kit": "^2.42.2",
-        "@fortawesome/fontawesome-free": "^6.7.2",
+        "@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.93.0",
-        "svelte": "^5.39.4"
+        "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/components/features/ProfileView.svelte

@@ -7,7 +7,7 @@
 
   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="/">{__CURRENT_SITE_NAME__} Tagging Assistant</a>
+  <a href="/">{PLUGIN_NAME}</a>
 </header>
 
 <style lang="scss">

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/config/tags.ts

@@ -1,3 +1,45 @@
+/**
+ * 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'],
+]);
+
+/**
+ * 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",

src/content/components/BlockCommunication.ts

@@ -0,0 +1,65 @@
+import { BaseComponent } from "$content/components/base/BaseComponent";
+import TagSettings from "$lib/extension/settings/TagSettings";
+import { getComponent } from "$content/components/base/component-utils";
+import { decodeTagNameFromLink, resolveTagCategoryFromTagName } from "$lib/booru/tag-utils";
+
+export class BlockCommunication extends BaseComponent {
+  #contentSection: HTMLElement | null = null;
+  #tagLinks: HTMLAnchorElement[] = [];
+
+  #tagLinksReplaced: boolean | null = null;
+
+  protected build() {
+    this.#contentSection = this.container.querySelector('.communication__content');
+    this.#tagLinks = this.#findAllTagLinks();
+  }
+
+  protected init() {
+    BlockCommunication.#tagSettings.resolveReplaceLinks().then(this.#onReplaceLinkSettingResolved.bind(this));
+    BlockCommunication.#tagSettings.subscribe(settings => {
+      this.#onReplaceLinkSettingResolved(settings.replaceLinks ?? false);
+    });
+  }
+
+  #onReplaceLinkSettingResolved(haveToReplaceLinks: boolean) {
+    if (!this.#tagLinks.length || this.#tagLinksReplaced === haveToReplaceLinks) {
+      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;
+      }
+
+      if (haveToReplaceLinks) {
+        const maybeDecodedTagName = decodeTagNameFromLink(linkElement.pathname) ?? '';
+        linkElement.dataset.tagCategory = resolveTagCategoryFromTagName(maybeDecodedTagName) ?? '';
+      } else {
+        linkElement.dataset.tagCategory = '';
+      }
+    }
+
+    this.#tagLinksReplaced = haveToReplaceLinks;
+  }
+
+  #findAllTagLinks(): HTMLAnchorElement[] {
+    return Array
+      .from(this.#contentSection?.querySelectorAll('a') || [])
+      .filter(link => link.pathname.startsWith('/tags/'))
+  }
+
+  static #tagSettings = new TagSettings();
+
+  static findAndInitializeAll() {
+    for (const container of document.querySelectorAll<HTMLElement>('.block.communication')) {
+      if (getComponent(container)) {
+        continue;
+      }
+
+      new BlockCommunication(container).initialize();
+    }
+  }
+}

src/content/components/FullscreenViewer.ts

@@ -1,7 +1,7 @@
-import { BaseComponent } from "$lib/components/base/BaseComponent";
+import { BaseComponent } from "$content/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 { 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');

src/content/components/ImageShowFullscreenButton.ts

@@ -1,8 +1,8 @@
-import { BaseComponent } from "$lib/components/base/BaseComponent";
-import { getComponent } from "$lib/components/base/component-utils";
+import { BaseComponent } from "$content/components/base/BaseComponent";
+import { getComponent } from "$content/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 { FullscreenViewer } from "$content/components/FullscreenViewer";
+import type { MediaBoxTools } from "$content/components/MediaBoxTools";
 
 export class ImageShowFullscreenButton extends BaseComponent {
   #mediaBoxTools: MediaBoxTools | null = null;

src/content/components/MaintenancePopup.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 { BaseComponent } from "$content/components/base/BaseComponent";
+import { getComponent } from "$content/components/base/component-utils";
 import ScrapedAPI from "$lib/booru/scraped/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/MediaBoxTools";
+import { resolveTagCategoryFromTagName } from "$lib/booru/tag-utils";
 
 class BlackListedTagsEncounteredError extends Error {
   constructor(tagName: string) {
@@ -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);
+          MaintenancePopup.#markTagElementWithCategory(tagElement, 'error');
           this.#suggestedInvalidTags.set(tagName, tagElement);
+        } else {
+          MaintenancePopup.#markTagElementWithCategory(
+            tagElement,
+            resolveTagCategoryFromTagName(tagName) ?? '',
+          );
         }
       });
   }
@@ -287,7 +293,7 @@ export class MaintenancePopup extends BaseComponent {
         }
 
         const tagElement = MaintenancePopup.#buildTagElement(tagName);
-        MaintenancePopup.#markTagAsInvalid(tagElement);
+        MaintenancePopup.#markTagElementWithCategory(tagElement, 'error');
         tagElement.classList.add('is-present');
 
         this.#suggestedInvalidTags.set(tagName, tagElement);
@@ -315,12 +321,13 @@ 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);
   }
 
   /**

src/content/components/MaintenanceStatusIcon.ts

@@ -1,8 +1,8 @@
-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/MediaBoxTools";
 
 export class MaintenanceStatusIcon extends BaseComponent {
   #mediaBoxTools: MediaBoxTools | null = null;

src/content/components/MediaBoxTools.ts

@@ -1,9 +1,9 @@
-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 { BaseComponent } from "$content/components/base/BaseComponent";
+import { getComponent } from "$content/components/base/component-utils";
+import { MaintenancePopup } from "$content/components/MaintenancePopup";
+import { on } from "$content/components/events/comms";
+import { EVENT_ACTIVE_PROFILE_CHANGED } from "$content/components/events/maintenance-popup-events";
+import type { MediaBoxWrapper } from "$content/components/MediaBoxWrapper";
 import type MaintenanceProfile from "$entities/MaintenanceProfile";
 
 export class MediaBoxTools extends BaseComponent {

src/content/components/MediaBoxWrapper.ts

@@ -1,8 +1,8 @@
-import { BaseComponent } from "$lib/components/base/BaseComponent";
-import { getComponent } from "$lib/components/base/component-utils";
+import { BaseComponent } from "$content/components/base/BaseComponent";
+import { getComponent } from "$content/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";
+import { on } from "$content/components/events/comms";
+import { EVENT_TAGS_UPDATED } from "$content/components/events/maintenance-popup-events";
 
 export class MediaBoxWrapper extends BaseComponent {
   #thumbnailContainer: HTMLElement | null = null;

src/content/components/TagDropdownWrapper.ts

@@ -1,11 +1,11 @@
-import { BaseComponent } from "$lib/components/base/BaseComponent";
+import { BaseComponent } from "$content/components/base/BaseComponent";
 import MaintenanceProfile from "$entities/MaintenanceProfile";
 import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings";
-import { getComponent } from "$lib/components/base/component-utils";
+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();

src/content/components/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/TagsListBlock.ts

@@ -1,10 +1,10 @@
-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 type { TagDropdownWrapper } from "$content/components/TagDropdownWrapper";
+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 TagSettings from "$lib/extension/settings/TagSettings";
 
 export class TagsListBlock extends BaseComponent {

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/listing/ImageListContainer.ts

@@ -1,5 +1,5 @@
-import { BaseComponent } from "$lib/components/base/BaseComponent";
-import { ImageListInfo } from "$lib/components/listing/ImageListInfo";
+import { BaseComponent } from "$content/components/base/BaseComponent";
+import { ImageListInfo } from "$content/components/listing/ImageListInfo";
 
 export class ImageListContainer extends BaseComponent {
   #info: ImageListInfo | null = null;

src/content/components/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/listing.ts

@@ -1,9 +1,9 @@
-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 { createMaintenancePopup } from "$content/components/MaintenancePopup";
+import { createMediaBoxTools } from "$content/components/MediaBoxTools";
+import { calculateMediaBoxesPositions, initializeMediaBox } from "$content/components/MediaBoxWrapper";
+import { createMaintenanceStatusIcon } from "$content/components/MaintenanceStatusIcon";
+import { createImageShowFullscreenButton } from "$content/components/ImageShowFullscreenButton";
+import { initializeImageListContainer } from "$content/components/listing/ImageListContainer";
 
 const mediaBoxes = document.querySelectorAll<HTMLElement>('.media-box');
 const imageListContainer = document.querySelector<HTMLElement>('#imagelist-container');

src/content/posts.ts

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

src/content/tags-editor.ts

@@ -1,5 +1,5 @@
-import { TagsForm } from "$lib/components/TagsForm";
-import { initializeAllTagsLists, watchForUpdatedTagLists } from "$lib/components/TagsListBlock";
+import { TagsForm } from "$content/components/TagsForm";
+import { initializeAllTagsLists, watchForUpdatedTagLists } from "$content/components/TagsListBlock";
 
 initializeAllTagsLists();
 watchForUpdatedTagLists();

src/content/tags.ts

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

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,3 +1,5 @@
+import { namespaceCategories } from "$config/tags";
+
 /**
  * Build the map containing both real tags and their aliases.
  *
@@ -31,3 +33,52 @@ export function buildTagsAndAliasesMap(realAndAliasedTags: string[], realTags: s
 
   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-', '+'],
+]);
+
+/**
+ * Decode the tag name from its link path.
+ *
+ * @param tagLink Full or partial link to the tag.
+ *
+ * @return Tag name or NULL if function is failed to recognize the link as tag-related link.
+ */
+export function decodeTagNameFromLink(tagLink: string): string | null {
+  tagLinkRegExp.lastIndex = 0;
+
+  const result = tagLinkRegExp.exec(tagLink);
+  const encodedTagName = result?.groups?.encodedTagName;
+
+  if (!encodedTagName) {
+    return null;
+  }
+
+  return decodeURIComponent(encodedTagName)
+    .replaceAll(/-[a-z]+-/gi, match => slugEncodedCharacters.get(match) ?? match)
+    .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/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/CustomCategoriesResolver.ts

@@ -1,8 +1,8 @@
-import type { TagDropdownWrapper } from "$lib/components/TagDropdownWrapper";
+import type { TagDropdownWrapper } from "$content/components/TagDropdownWrapper";
 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>();
@@ -90,6 +90,7 @@ export default class CustomCategoriesResolver {
     this.#regExpGroupMatches.clear();
 
     if (!tagGroups.length) {
+      this.#queueUpdatingTags();
       return;
     }
 

src/lib/extension/settings/TagSettings.ts

@@ -2,6 +2,7 @@ import CacheableSettings from "$lib/extension/base/CacheableSettings";
 
 interface TagSettingsFields {
   groupSeparation: boolean;
+  replaceLinks: boolean;
 }
 
 export default class TagSettings extends CacheableSettings<TagSettingsFields> {
@@ -13,7 +14,15 @@ export default class TagSettings extends CacheableSettings<TagSettingsFields> {
     return this._resolveSetting("groupSeparation", true);
   }
 
+  async resolveReplaceLinks() {
+    return this._resolveSetting("replaceLinks", false);
+  }
+
   async setGroupSeparation(value: boolean) {
     return this._writeSetting("groupSeparation", Boolean(value));
   }
+
+  async setReplaceLinks(value: boolean) {
+    return this._writeSetting("replaceLinks", Boolean(value));
+  }
 }

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

@@ -4,6 +4,9 @@
   import { activeProfileStore, maintenanceProfiles } from "$stores/entities/maintenance-profiles";
   import MenuCheckboxItem from "$components/ui/menu/MenuCheckboxItem.svelte";
   import MaintenanceProfile from "$entities/MaintenanceProfile";
+  import { popupTitle } from "$stores/popup";
+
+  $popupTitle = null;
 
   let activeProfile = $derived<MaintenanceProfile | null>(
     $maintenanceProfiles.find(profile => profile.id === $activeProfileStore) || null

src/routes/about/+page.svelte

@@ -1,12 +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>
@@ -14,7 +22,7 @@
   <hr>
 </Menu>
 <h1>
-  {__CURRENT_SITE_NAME__} Tagging Assistant
+  {PLUGIN_NAME}
 </h1>
 <p>
   This is a small tool to make tagging on {__CURRENT_SITE_NAME__} just a little bit more convenient. Group tags with

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/+page.svelte

@@ -4,6 +4,9 @@
   import MenuRadioItem from "$components/ui/menu/MenuRadioItem.svelte";
   import { activeProfileStore, maintenanceProfiles } from "$stores/entities/maintenance-profiles";
   import MaintenanceProfile from "$entities/MaintenanceProfile";
+  import { popupTitle } from "$stores/popup";
+
+  $popupTitle = 'Tagging Profiles';
 
   let profiles = $derived<MaintenanceProfile[]>(
     $maintenanceProfiles.sort((a, b) => a.settings.name.localeCompare(b.settings.name))

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

@@ -1,5 +1,4 @@
 <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";
@@ -8,7 +7,7 @@
   import ProfileView from "$components/features/ProfileView.svelte";
   import MenuCheckboxItem from "$components/ui/menu/MenuCheckboxItem.svelte";
   import MaintenanceProfile from "$entities/MaintenanceProfile";
-  import { onMount } from "svelte";
+  import { popupTitle } from "$stores/popup";
 
   let profileId = $derived(page.params.id);
   let profile = $derived<MaintenanceProfile|null>(
@@ -24,6 +23,8 @@
     if (!profile) {
       console.warn(`Profile ${profileId} not found.`);
       goto('/features/maintenance');
+    } else {
+      $popupTitle = `Tagging Profile: ${profile.settings.name}`;
     }
   });
 

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

@@ -5,6 +5,7 @@
   import { page } from "$app/state";
   import { maintenanceProfiles } from "$stores/entities/maintenance-profiles";
   import MaintenanceProfile from "$entities/MaintenanceProfile";
+  import { popupTitle } from "$stores/popup";
 
   const profileId = $derived(page.params.id);
   const targetProfile = $derived<MaintenanceProfile | null>(
@@ -14,6 +15,8 @@
   $effect(() => {
     if (!targetProfile) {
       goto('/features/maintenance');
+    } else {
+      $popupTitle = `Deleting Tagging Profile: ${targetProfile.settings.name}`
     }
   });
 

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

@@ -9,6 +9,7 @@
   import { goto } from "$app/navigation";
   import { maintenanceProfiles } from "$stores/entities/maintenance-profiles";
   import MaintenanceProfile from "$entities/MaintenanceProfile";
+  import { popupTitle } from "$stores/popup";
 
 
   let profileId = $derived(page.params.id);
@@ -26,6 +27,7 @@
 
   $effect(() => {
     if (profileId === 'new') {
+      $popupTitle = 'Create Tagging Profile';
       return;
     }
 
@@ -34,6 +36,8 @@
       return;
     }
 
+    $popupTitle = `Edit Tagging Profile: ${targetProfile.settings.name}`;
+
     profileName = targetProfile.settings.name;
     tagsList = [...targetProfile.settings.tags].sort((a, b) => a.localeCompare(b));
   });

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

@@ -8,6 +8,7 @@
   import FormControl from "$components/ui/forms/FormControl.svelte";
   import EntitiesTransporter from "$lib/extension/EntitiesTransporter";
   import MaintenanceProfile from "$entities/MaintenanceProfile";
+  import { popupTitle } from "$stores/popup";
 
   let isCompressedProfileShown = $state(true);
 
@@ -19,6 +20,8 @@
   $effect(() => {
     if (!profile) {
       goto('/features/maintenance/');
+    } else {
+      $popupTitle = `Export Tagging Profile: ${profile.settings.name}`;
     }
   });
 

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

@@ -8,6 +8,8 @@
   import { maintenanceProfiles } from "$stores/entities/maintenance-profiles";
   import { goto } from "$app/navigation";
   import EntitiesTransporter from "$lib/extension/EntitiesTransporter";
+  import { popupTitle } from "$stores/popup";
+  import Notice from "$components/ui/Notice.svelte";
 
   const profilesTransporter = new EntitiesTransporter(MaintenanceProfile);
 
@@ -17,6 +19,11 @@
   let candidateProfile = $state<MaintenanceProfile | null>(null);
   let existingProfile = $state<MaintenanceProfile | null>(null);
 
+  $effect(() => {
+    $popupTitle = candidateProfile
+      ? 'Confirm Imported Tagging Profile'
+      : 'Import Tagging Profile';
+  })
   function tryImportingProfile() {
     candidateProfile = null;
     existingProfile = null;
@@ -74,7 +81,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 +98,10 @@
   </Menu>
 {:else}
   {#if existingProfile}
-    <p class="warning">
+    <Notice level="warning">
       This profile will replace the existing "{existingProfile.settings.name}" profile, since it have the same ID.
-    </p>
+    </Notice>
+    <br>
   {/if}
   <ProfileView profile={candidateProfile}></ProfileView>
   <Menu>
@@ -107,24 +115,3 @@
     <MenuItem onclick={() => candidateProfile = null}>Cancel</MenuItem>
   </Menu>
 {/if}
-
-<style lang="scss">
-  @use '$styles/colors';
-
-  .error, .warning {
-    padding: 5px 24px;
-    margin: {
-      left: -24px;
-      right: -24px;
-    }
-  }
-
-  .error {
-    background: colors.$error-background;
-  }
-
-  .warning {
-    background: colors.$warning-background;
-    margin-bottom: .5em;
-  }
-</style>

src/routes/preferences/+page.svelte

@@ -1,6 +1,9 @@
 <script>
   import Menu from "$components/ui/menu/Menu.svelte";
   import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import { popupTitle } from "$stores/popup";
+
+  $popupTitle = 'Preferences';
 </script>
 
 <Menu>

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

@@ -1,6 +1,9 @@
 <script>
   import Menu from "$components/ui/menu/Menu.svelte";
   import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import { popupTitle } from "$stores/popup";
+
+  $popupTitle = 'Debugging Tools';
 </script>
 
 <Menu>

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

@@ -2,6 +2,9 @@
   import MenuItem from "$components/ui/menu/MenuItem.svelte";
   import Menu from "$components/ui/menu/Menu.svelte";
   import { storagesCollection } from "$stores/debug";
+  import { popupTitle } from "$stores/popup";
+
+  $popupTitle = 'Storage Inspector';
 </script>
 
 <Menu>

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

@@ -2,6 +2,7 @@
   import StorageViewer from "$components/debugging/StorageViewer.svelte";
   import { page } from "$app/state";
   import { goto } from "$app/navigation";
+  import { popupTitle } from "$stores/popup";
 
   let pathArray = $derived.by<string[]>(() => {
     const pathString = page.params.path;
@@ -30,6 +31,10 @@
     if (!storageName) {
       goto("/preferences/debug/storage");
     }
+
+    $popupTitle = storageName
+      ? 'Inspecting: ' + storageName
+      : 'Storage Inspector';
   });
 </script>
 

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

@@ -5,6 +5,9 @@
   import FormControl from "$components/ui/forms/FormControl.svelte";
   import CheckboxField from "$components/ui/forms/CheckboxField.svelte";
   import { fullScreenViewerEnabled } from "$stores/preferences/misc";
+  import { popupTitle } from "$stores/popup";
+
+  $popupTitle = 'Misc Preferences';
 </script>
 
 <Menu>

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

@@ -5,7 +5,10 @@
   import Menu from "$components/ui/menu/Menu.svelte";
   import MenuItem from "$components/ui/menu/MenuItem.svelte";
   import { stripBlacklistedTagsEnabled } from "$stores/preferences/maintenance";
-  import { shouldSeparateTagGroups } from "$stores/preferences/tag";
+  import { shouldReplaceLinksOnForumPosts, shouldSeparateTagGroups } from "$stores/preferences/tag";
+  import { popupTitle } from "$stores/popup";
+
+  $popupTitle = 'Tagging Preferences';
 </script>
 
 <Menu>
@@ -23,4 +26,9 @@
       Enable separation of custom tag groups on the image pages
     </CheckboxField>
   </FormControl>
+  <FormControl>
+    <CheckboxField bind:checked={$shouldReplaceLinksOnForumPosts}>
+      Find and replace links to the tags in the forum posts
+    </CheckboxField>
+  </FormControl>
 </FormContainer>

src/routes/transporting/+page.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import Menu from "$components/ui/menu/Menu.svelte";
   import MenuItem from "$components/ui/menu/MenuItem.svelte";
+  import { popupTitle } from "$stores/popup";
+
+  $popupTitle = 'Import/Export';
 </script>
 
 <Menu>

src/routes/transporting/export/+page.svelte

@@ -8,6 +8,7 @@
   import type StorageEntity from "$lib/extension/base/StorageEntity";
   import FormControl from "$components/ui/forms/FormControl.svelte";
   import FormContainer from "$components/ui/forms/FormContainer.svelte";
+  import { popupTitle } from "$stores/popup";
 
   const bulkTransporter = new BulkEntitiesTransporter();
 
@@ -46,6 +47,12 @@
     }
   });
 
+  $effect(() => {
+    $popupTitle = displayExportedString
+      ? 'Exported String'
+      : 'Select Entities to Export';
+  });
+
   function refreshAreAllEntitiesChecked() {
     requestAnimationFrame(() => {
       exportAllProfiles = $maintenanceProfiles.every(profile => exportedEntities.profiles[profile.id]);

src/routes/transporting/import/+page.svelte

@@ -14,6 +14,8 @@
   import GroupView from "$components/features/GroupView.svelte";
   import { goto } from "$app/navigation";
   import type { SameSiteStatus } from "$lib/extension/EntitiesTransporter";
+  import { popupTitle } from "$stores/popup";
+  import Notice from "$components/ui/Notice.svelte";
 
   let importedString = $state('');
   let errorMessage = $state('');
@@ -24,6 +26,8 @@
   let saveAllProfiles = $state(false);
   let saveAllGroups = $state(false);
 
+  let isSaving = $state(false);
+
   let selectedEntities: Record<keyof App.EntityNamesMap, Record<string, boolean>> = $state({
     profiles: {},
     groups: {},
@@ -49,6 +53,16 @@
     Boolean(importedProfiles.length || importedGroups.length)
   );
 
+  $effect(() => {
+    $popupTitle = hasImportedEntities
+      ? (
+        previewedEntity
+          ? 'Preview of Imported Entity'
+          : 'Select & Preview Imported Entities'
+      )
+      : 'Import';
+  });
+
   const transporter = new BulkEntitiesTransporter();
 
   let lastImportStatus = $state<SameSiteStatus>(null);
@@ -134,31 +148,42 @@
     }
   }
 
-  function saveSelectedEntities() {
-    Promise.allSettled([
-      Promise.allSettled(
-        importedProfiles
-          .filter(profile => selectedEntities.profiles[profile.id])
-          .map(profile => profile.save())
-      ),
-      Promise.allSettled(
-        importedGroups
-          .filter(group => selectedEntities.groups[group.id])
-          .map(group => group.save())
-      ),
-    ]).then(() => {
-      goto("/transporting");
-    });
+  async function saveSelectedEntities() {
+    if (isSaving) {
+      return;
+    }
+
+    isSaving = true;
+
+    for (const profile of importedProfiles) {
+      if (!selectedEntities.profiles[profile.id]) {
+        continue;
+      }
+
+      await profile.save();
+    }
+
+    for (const group of importedGroups) {
+      if (!selectedEntities.groups[group.id]) {
+        continue;
+      }
+
+      await group.save();
+    }
+
+    await goto("/transporting");
   }
 </script>
 
-{#if !hasImportedEntities}
+{#if isSaving}
+  <p>Saving imported entities...</p>
+{:else if !hasImportedEntities}
   <Menu>
     <MenuItem href="/transporting" icon="arrow-left">Back</MenuItem>
     <hr>
   </Menu>
   {#if errorMessage}
-    <p class="error">{errorMessage}</p>
+    <Notice level="error">{errorMessage}</Notice>
     <Menu>
       <hr>
     </Menu>
@@ -190,18 +215,18 @@
     {/if}
   </Menu>
   {#if lastImportStatus === "different"}
-    <p class="warning">
+    <Notice level="warning">
       <b>Warning!</b>
       Looks like these entities were exported for the different extension! There are many differences between tagging
       systems of Furobooru and Derpibooru, so make sure to check if these settings are correct before using them!
-    </p>
+    </Notice>
   {/if}
   {#if lastImportStatus === 'unknown'}
-    <p class="warning">
+    <Notice level="warning">
       <b>Warning!</b>
       We couldn't verify if these settings are meant for this site or not. There are many differences between tagging
       systems of Furbooru and Derpibooru, so make sure to check if these settings are correct before using them.
-    </p>
+    </Notice>
   {/if}
   <Menu>
     {#if importedProfiles.length}
@@ -253,23 +278,3 @@
     </MenuItem>
   </Menu>
 {/if}
-
-<style lang="scss">
-  @use '$styles/colors';
-
-  .error, .warning {
-    padding: 5px 24px;
-    margin: {
-      left: -24px;
-      right: -24px;
-    }
-  }
-
-  .warning {
-    background: colors.$warning-background;
-  }
-
-  .error {
-    background: colors.$error-background;
-  }
-</style>

src/stores/popup.ts

@@ -0,0 +1,15 @@
+import { derived, writable } from "svelte/store";
+import { PLUGIN_NAME } from "$lib/constants";
+
+/**
+ * Store containing the name of the subpage. This name will be added to the title alongside the name of the plugin.
+ */
+export const popupTitle = writable<string | null>(null);
+
+/**
+ * Name of the current route with the name of the plugin appended to it.
+ */
+export const headTitle = derived(
+  popupTitle,
+  $popupTitle => ($popupTitle ? `${$popupTitle} | ` : '') + PLUGIN_NAME
+);

src/stores/preferences/tag.ts

@@ -4,15 +4,24 @@ import TagSettings from "$lib/extension/settings/TagSettings";
 const tagSettings = new TagSettings();
 
 export const shouldSeparateTagGroups = writable(false);
+export const shouldReplaceLinksOnForumPosts = writable(false);
 
-tagSettings.resolveGroupSeparation()
-  .then(value => shouldSeparateTagGroups.set(value))
+Promise
+  .allSettled([
+    tagSettings.resolveGroupSeparation().then(value => shouldSeparateTagGroups.set(value)),
+    tagSettings.resolveReplaceLinks().then(value => shouldReplaceLinksOnForumPosts.set(value)),
+  ])
   .then(() => {
     shouldSeparateTagGroups.subscribe(value => {
       void tagSettings.setGroupSeparation(value);
     });
 
+    shouldReplaceLinksOnForumPosts.subscribe(value => {
+      void tagSettings.setReplaceLinks(value);
+    });
+
     tagSettings.subscribe(settings => {
       shouldSeparateTagGroups.set(Boolean(settings.groupSeparation));
+      shouldReplaceLinksOnForumPosts.set(Boolean(settings.replaceLinks));
     });
-  })
+  });

src/styles/colors.scss

@@ -95,3 +95,31 @@ $warning-border: #95562c;
   $input-background: #282e39;
   $input-border: #575e6b;
 }
+
+@if environment.$current-site == 'tantabus' {
+  $background: #221117;
+
+  $text: #e0e0e0;
+  $text-gray: #bb90a6;
+
+  $link: #ee157a;
+  $link-hover: #b099dd;
+
+  $header: #811242;
+  $header-toolbar: #501e36;
+  $header-hover-background: #5d0d30;
+  $header-mobile-link-hover: #995470;
+
+  $footer: #2f1d26;
+  $footer-text: $text-gray;
+
+  $block-header: $header-toolbar;
+  $block-border: $header-toolbar;
+  $block-background: #2f1d26;
+  $block-background-alternate: #26171e;
+
+  $media-box-border: #573142;
+
+  $input-background: #392833;
+  $input-border: #6b5764;
+}

src/styles/content/posts.scss

@@ -0,0 +1,9 @@
+@use '$styles/booru-vars';
+
+.block.communication {
+  .tag {
+    &:hover {
+      color: booru-vars.$resolved-tag-color;
+    }
+  }
+}

src/styles/injectable/tag.scss

@@ -9,7 +9,7 @@
   padding: 0 4px;
   display: flex;
 
-  @if environment.$current-site == 'derpibooru' {
+  @if environment.$current-site == 'derpibooru' or environment.$current-site == 'tantabus' {
     border: 1px solid colors.$tag-border;
     line-height: 24px;
   }

svelte.config.js

@@ -15,6 +15,7 @@ const config = {
     },
     alias: {
       "$config": "./src/config",
+      "$content": "./src/content",
       "$components": "./src/components",
       "$styles": "./src/styles",
       "$stores": "./src/stores",

tests/content/components/base/BaseComponent.spec.ts

@@ -1,5 +1,5 @@
-import { BaseComponent } from "$lib/components/base/BaseComponent";
-import { getComponent } from "$lib/components/base/component-utils";
+import { BaseComponent } from "$content/components/base/BaseComponent";
+import { getComponent } from "$content/components/base/component-utils";
 import { randomString } from "$tests/utils";
 
 describe('BaseComponent', () => {

vite.config.ts

@@ -20,6 +20,14 @@ export default defineConfig(() => {
           __CURRENT_SITE_NAME__: JSON.stringify('Derpibooru'),
         }
       }),
+      SwapDefinedVariablesPlugin({
+        envVariable: 'SITE',
+        expectedValue: 'tantabus',
+        define: {
+          __CURRENT_SITE__: JSON.stringify('tantabus'),
+          __CURRENT_SITE_NAME__: JSON.stringify('Tantabus'),
+        }
+      }),
     ],
     test: {
       globals: true,