Rename of the media box tools component, fixing runtime error

src/content/listing.js

@@ -1,9 +1,9 @@
 import {createMaintenancePopup} from "$lib/components/MaintenancePopup.js";
-import {createMaintenanceTools} from "$lib/components/MaintenanceTools.js";
+import {createMediaBoxTools} from "$lib/components/MediaBoxToolsEvents.js";
 
 document.querySelectorAll('.media-box').forEach(mediaBoxElement => {
   mediaBoxElement.appendChild(
-    createMaintenanceTools(
+    createMediaBoxTools(
       createMaintenancePopup()
     )
   );

src/lib/components/MaintenancePopup.js

@@ -1,11 +1,10 @@
 import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings.js";
 import MaintenanceProfile from "$entities/MaintenanceProfile.js";
-import {maintenanceToolsEvents} from "$lib/components/MaintenanceTools.js";
 import {BaseComponent} from "$lib/components/base/BaseComponent.js";
 
 export class MaintenancePopup extends BaseComponent {
   /** @type {HTMLElement} */
-  #tagsListElement;
+  #tagsListElement = null;
 
   /** @type {HTMLElement[]} */
   #tagsList = [];
@@ -13,7 +12,7 @@ export class MaintenancePopup extends BaseComponent {
   /** @type {MaintenanceProfile|null} */
   #activeProfile = null;
 
-  /** @type {import('MaintenanceTools.js').MaintenanceTools|null} */
+  /** @type {import('$lib/components/MediaBoxToolsEvents.js').MediaBoxTools|null} */
   #parentTools = null;
 
   /**
@@ -35,15 +34,16 @@ export class MaintenancePopup extends BaseComponent {
    * @protected
    */
   init() {
-    this.once(maintenanceToolsEvents.init, this.#onToolsContainerInitialized.bind(this));
+    this.once('tools-init', this.#onToolsContainerInitialized.bind(this));
     MaintenancePopup.#watchActiveProfile(this.#onActiveProfileChanged.bind(this));
   }
 
   /**
-   * @param {import('MaintenanceTools.js').MaintenanceTools} toolsInstance
+   * @param {import('$lib/components/MediaBoxToolsEvents.js').MediaBoxTools} toolsInstance
    */
   #onToolsContainerInitialized(toolsInstance) {
     this.#parentTools = toolsInstance;
+    this.emit('active-profile-changed', this.#activeProfile);
   }
 
   /**
@@ -53,6 +53,7 @@ export class MaintenancePopup extends BaseComponent {
     this.#activeProfile = activeProfile;
     this.container.classList.toggle('is-active', activeProfile !== null);
     this.#refreshTagsList();
+    this.emit('active-profile-changed', activeProfile);
   }
 
   #refreshTagsList() {
@@ -144,7 +145,7 @@ export class MaintenancePopup extends BaseComponent {
 export function createMaintenancePopup() {
   const container = document.createElement('div');
 
-  new MaintenancePopup(container);
+  new MaintenancePopup(container).initialize();
 
   return container;
 }

src/lib/components/MediaBoxToolsEvents.js

@@ -2,11 +2,7 @@ import {BaseComponent} from "$lib/components/base/BaseComponent.js";
 import {getComponent} from "$lib/components/base/ComponentUtils.js";
 import {MaintenancePopup} from "$lib/components/MaintenancePopup.js";
 
-export const maintenanceToolsEvents = {
-  init: 'maintenance-tools-init'
-}
-
-export class MaintenanceTools extends BaseComponent {
+export class MediaBoxTools extends BaseComponent {
   /** @type {MaintenancePopup|null} */
   #maintenancePopup = null;
 
@@ -22,8 +18,17 @@ export class MaintenanceTools extends BaseComponent {
         this.#maintenancePopup = component;
       }
 
-      component.emit(maintenanceToolsEvents.init, this);
+      component.emit('tools-init', this);
     }
+
+    this.on('active-profile-changed', this.#onActiveProfileChanged.bind(this));
+  }
+
+  /**
+   * @param {MaintenanceProfile|null} activeProfile
+   */
+  #onActiveProfileChanged(activeProfile) {
+    this.container.classList.toggle('has-active-profile', activeProfile !== null);
   }
 
   /**
@@ -39,7 +44,7 @@ export class MaintenanceTools extends BaseComponent {
  * @param {HTMLElement} childrenElements List of children elements to append to the component.
  * @return {HTMLElement} The maintenance popup element.
  */
-export function createMaintenanceTools(...childrenElements) {
+export function createMediaBoxTools(...childrenElements) {
   const mediaBoxToolsContainer = document.createElement('div');
   mediaBoxToolsContainer.classList.add('media-box-tools');
 
@@ -47,8 +52,7 @@ export function createMaintenanceTools(...childrenElements) {
     mediaBoxToolsContainer.append(...childrenElements);
   }
 
-  new MaintenanceTools(mediaBoxToolsContainer)
-    .init();
+  new MediaBoxTools(mediaBoxToolsContainer).initialize();
 
   return mediaBoxToolsContainer;
 }

src/lib/components/base/BaseComponent.js

@@ -7,6 +7,8 @@ export class BaseComponent {
   /** @type {HTMLElement} */
   #container;
 
+  #isInitialized = false;
+
   /**
    * @param {HTMLElement} container
    */
@@ -14,6 +16,14 @@ export class BaseComponent {
     this.#container = container;
 
     bindComponent(container, this);
+  }
+
+  initialize() {
+    if (this.#isInitialized) {
+      throw new Error('The component is already initialized.');
+    }
+
+    this.#isInitialized = true;
 
     this.build();
     this.init();
@@ -47,7 +57,15 @@ export class BaseComponent {
    * @param {any} [detail] The event detail. Can be omitted.
    */
   emit(event, detail = undefined) {
-    this.#container.dispatchEvent(new CustomEvent(event, {detail}));
+    this.#container.dispatchEvent(
+      new CustomEvent(
+        event,
+        {
+          detail,
+          bubbles: true
+        }
+      )
+    );
   }
 
   /**