Added event for resolved categories, coloring from the tag wrapper

src/lib/components/TagDropdownWrapper.ts

@@ -5,6 +5,8 @@ import { getComponent } from "$lib/components/base/component-utils";
 import CustomCategoriesResolver from "$lib/extension/CustomCategoriesResolver";
 import { on } from "$lib/components/events/comms";
 import { eventFormEditorUpdated } from "$lib/components/events/tags-form-events";
+import { eventTagCustomGroupResolved } from "$lib/components/events/tag-dropdown-events";
+import type TagGroup from "$entities/TagGroup";
 
 const categoriesResolver = new CustomCategoriesResolver();
 
@@ -51,6 +53,23 @@ export class TagDropdownWrapper extends BaseComponent {
         this.#updateButtons();
       }
     });
+
+    on(this, eventTagCustomGroupResolved, this.#onTagGroupResolved.bind(this));
+  }
+
+  #onTagGroupResolved(resolvedGroupEvent: CustomEvent<TagGroup | null>) {
+    if (this.originalCategory) {
+      return;
+    }
+
+    const maybeTagGroup = resolvedGroupEvent.detail;
+
+    if (!maybeTagGroup) {
+      this.tagCategory = this.originalCategory;
+      return;
+    }
+
+    this.tagCategory = maybeTagGroup.settings.category;
   }
 
   get tagName() {
@@ -188,7 +207,7 @@ export class TagDropdownWrapper extends BaseComponent {
    * @param onActiveProfileChange Callback to call when profile was
    * changed.
    */
-  static #watchActiveProfile(onActiveProfileChange: (profile: MaintenanceProfile|null) => void) {
+  static #watchActiveProfile(onActiveProfileChange: (profile: MaintenanceProfile | null) => void) {
     let lastActiveProfile: string | null = null;
 
     this.#maintenanceSettings.subscribe((settings) => {

src/lib/components/events/comms.ts

@@ -3,12 +3,14 @@ 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";
 
 type EventsMapping =
   MaintenancePopupEventsMap
   & FullscreenViewerEventsMap
   & BooruEventsMap
-  & TagsFormEventsMap;
+  & TagsFormEventsMap
+  & TagDropdownEvents;
 
 type EventCallback<EventDetails> = (event: CustomEvent<EventDetails>) => void;
 export type UnsubscribeFunction = () => void;

src/lib/components/events/tag-dropdown-events.ts

@@ -0,0 +1,7 @@
+import type TagGroup from "$entities/TagGroup";
+
+export const eventTagCustomGroupResolved = 'tag-group-resolved';
+
+export interface TagDropdownEvents {
+    [eventTagCustomGroupResolved]: TagGroup | null;
+}

src/lib/extension/CustomCategoriesResolver.ts

@@ -1,6 +1,8 @@
 import type { TagDropdownWrapper } from "$lib/components/TagDropdownWrapper";
 import TagGroup from "$entities/TagGroup";
 import { escapeRegExp } from "$lib/utils";
+import { emit } from "$lib/components/events/comms";
+import { eventTagCustomGroupResolved } from "$lib/components/events/tag-dropdown-events";
 
 export default class CustomCategoriesResolver {
   #exactGroupMatches = new Map<string, TagGroup>();
@@ -36,7 +38,6 @@ export default class CustomCategoriesResolver {
 
   #updateUnprocessedTags() {
     this.#tagDropdowns
-      .filter(CustomCategoriesResolver.#skipTagsWithOriginalCategory)
       .filter(this.#applyCustomCategoryForExactMatches.bind(this))
       .filter(this.#matchCustomCategoryByRegExp.bind(this))
       .forEach(CustomCategoriesResolver.#resetToOriginalCategory);
@@ -55,7 +56,12 @@ export default class CustomCategoriesResolver {
       return true;
     }
 
-    tagDropdown.tagCategory = this.#exactGroupMatches.get(tagName)!.settings.category;
+    emit(
+      tagDropdown,
+      eventTagCustomGroupResolved,
+      this.#exactGroupMatches.get(tagName)!
+    );
+
     return false;
   }
 
@@ -67,7 +73,12 @@ export default class CustomCategoriesResolver {
         continue;
       }
 
-      tagDropdown.tagCategory = this.#regExpGroupMatches.get(targetRegularExpression)!.settings.category;
+      emit(
+        tagDropdown,
+        eventTagCustomGroupResolved,
+        this.#regExpGroupMatches.get(targetRegularExpression)!
+      );
+
       return false;
     }
 
@@ -105,12 +116,12 @@ export default class CustomCategoriesResolver {
     this.#queueUpdatingTags();
   }
 
-  static #skipTagsWithOriginalCategory(tagDropdown: TagDropdownWrapper): boolean {
-    return !tagDropdown.originalCategory;
-  }
-
   static #resetToOriginalCategory(tagDropdown: TagDropdownWrapper): void {
-    tagDropdown.tagCategory = tagDropdown.originalCategory;
+    emit(
+      tagDropdown,
+      eventTagCustomGroupResolved,
+      null,
+    );
   }
 
   static #unprocessedTagsTimeout = 0;