From 9b262393fa3c769d053ce6e51f1a1e9cb19b237a Mon Sep 17 00:00:00 2001 From: KoloMl Date: Sun, 29 Mar 2026 03:48:12 +0400 Subject: [PATCH 1/4] Fixed event & underlying type not updated --- .../components/events/maintenance-popup-events.ts | 6 +++--- .../extension/profiles/TaggingProfilePopup.ts | 10 +++++----- .../extension/profiles/TaggingProfileStatusIcon.ts | 9 ++++++--- 3 files changed, 14 insertions(+), 11 deletions(-) diff --git a/src/content/components/events/maintenance-popup-events.ts b/src/content/components/events/maintenance-popup-events.ts index 95c780f..89bc9c4 100644 --- a/src/content/components/events/maintenance-popup-events.ts +++ b/src/content/components/events/maintenance-popup-events.ts @@ -1,13 +1,13 @@ import type TaggingProfile from "$entities/TaggingProfile"; export const EVENT_ACTIVE_PROFILE_CHANGED = 'active-profile-changed'; -export const EVENT_MAINTENANCE_STATE_CHANGED = 'maintenance-state-change'; +export const EVENT_PROFILE_POPUP_STATE_CHANGED = 'maintenance-state-change'; export const EVENT_TAGS_UPDATED = 'tags-updated'; -type MaintenanceState = 'processing' | 'failed' | 'complete' | 'waiting'; +export type ProfilePopupState = 'ready' | 'processing' | 'failed' | 'complete' | 'waiting'; export interface MaintenancePopupEventsMap { [EVENT_ACTIVE_PROFILE_CHANGED]: TaggingProfile | null; - [EVENT_MAINTENANCE_STATE_CHANGED]: MaintenanceState; + [EVENT_PROFILE_POPUP_STATE_CHANGED]: ProfilePopupState; [EVENT_TAGS_UPDATED]: Map | null; } diff --git a/src/content/components/extension/profiles/TaggingProfilePopup.ts b/src/content/components/extension/profiles/TaggingProfilePopup.ts index a63b9b4..14074fc 100644 --- a/src/content/components/extension/profiles/TaggingProfilePopup.ts +++ b/src/content/components/extension/profiles/TaggingProfilePopup.ts @@ -7,7 +7,7 @@ import { tagsBlacklist } from "$config/tags"; import { emitterAt } from "$content/components/events/comms"; import { EVENT_ACTIVE_PROFILE_CHANGED, - EVENT_MAINTENANCE_STATE_CHANGED, + EVENT_PROFILE_POPUP_STATE_CHANGED, EVENT_TAGS_UPDATED } from "$content/components/events/maintenance-popup-events"; import type { MediaBoxTools } from "$content/components/extension/MediaBoxTools"; @@ -183,7 +183,7 @@ export class TaggingProfilePopup extends BaseComponent { } this.#isPlanningToSubmit = true; - this.#emitter.emit(EVENT_MAINTENANCE_STATE_CHANGED, 'waiting'); + this.#emitter.emit(EVENT_PROFILE_POPUP_STATE_CHANGED, 'waiting'); } } @@ -210,7 +210,7 @@ export class TaggingProfilePopup extends BaseComponent { this.#isPlanningToSubmit = false; this.#isSubmitting = true; - this.#emitter.emit(EVENT_MAINTENANCE_STATE_CHANGED, 'processing'); + this.#emitter.emit(EVENT_PROFILE_POPUP_STATE_CHANGED, 'processing'); let maybeTagsAndAliasesAfterUpdate; @@ -252,7 +252,7 @@ export class TaggingProfilePopup extends BaseComponent { TaggingProfilePopup.#notifyAboutPendingSubmission(false); - this.#emitter.emit(EVENT_MAINTENANCE_STATE_CHANGED, 'failed'); + this.#emitter.emit(EVENT_PROFILE_POPUP_STATE_CHANGED, 'failed'); this.#isSubmitting = false; return; @@ -262,7 +262,7 @@ export class TaggingProfilePopup extends BaseComponent { this.#emitter.emit(EVENT_TAGS_UPDATED, maybeTagsAndAliasesAfterUpdate); } - this.#emitter.emit(EVENT_MAINTENANCE_STATE_CHANGED, 'complete'); + this.#emitter.emit(EVENT_PROFILE_POPUP_STATE_CHANGED, 'complete'); this.#tagsToAdd.clear(); this.#tagsToRemove.clear(); diff --git a/src/content/components/extension/profiles/TaggingProfileStatusIcon.ts b/src/content/components/extension/profiles/TaggingProfileStatusIcon.ts index 6e5ab8b..b1b1246 100644 --- a/src/content/components/extension/profiles/TaggingProfileStatusIcon.ts +++ b/src/content/components/extension/profiles/TaggingProfileStatusIcon.ts @@ -1,7 +1,10 @@ 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 { + EVENT_PROFILE_POPUP_STATE_CHANGED, + type ProfilePopupState +} from "$content/components/events/maintenance-popup-events"; import type { MediaBoxTools } from "$content/components/extension/MediaBoxTools"; export class TaggingProfileStatusIcon extends BaseComponent { @@ -22,10 +25,10 @@ export class TaggingProfileStatusIcon extends BaseComponent { throw new Error('Status icon element initialized outside of the media box!'); } - on(this.#mediaBoxTools, EVENT_MAINTENANCE_STATE_CHANGED, this.#onMaintenanceStateChanged.bind(this)); + on(this.#mediaBoxTools, EVENT_PROFILE_POPUP_STATE_CHANGED, this.#onMaintenanceStateChanged.bind(this)); } - #onMaintenanceStateChanged(stateChangeEvent: CustomEvent) { + #onMaintenanceStateChanged(stateChangeEvent: CustomEvent) { // TODO Replace those with FontAwesome icons later. Those icons can probably be sourced from the website itself. switch (stateChangeEvent.detail) { case "ready": From c36929b8240cc562954bc4ea1a542fc658c2c9e8 Mon Sep 17 00:00:00 2001 From: KoloMl Date: Sun, 29 Mar 2026 03:49:22 +0400 Subject: [PATCH 2/4] Renaming the file with events as well --- src/content/components/events/comms.ts | 2 +- ...ntenance-popup-events.ts => tagging-profile-popup-events.ts} | 0 src/content/components/extension/MediaBoxTools.ts | 2 +- .../components/extension/profiles/TaggingProfilePopup.ts | 2 +- .../components/extension/profiles/TaggingProfileStatusIcon.ts | 2 +- src/content/components/philomena/MediaBox.ts | 2 +- 6 files changed, 5 insertions(+), 5 deletions(-) rename src/content/components/events/{maintenance-popup-events.ts => tagging-profile-popup-events.ts} (100%) diff --git a/src/content/components/events/comms.ts b/src/content/components/events/comms.ts index 7127a25..965087a 100644 --- a/src/content/components/events/comms.ts +++ b/src/content/components/events/comms.ts @@ -1,4 +1,4 @@ -import type { MaintenancePopupEventsMap } from "$content/components/events/maintenance-popup-events"; +import type { MaintenancePopupEventsMap } from "$content/components/events/tagging-profile-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"; diff --git a/src/content/components/events/maintenance-popup-events.ts b/src/content/components/events/tagging-profile-popup-events.ts similarity index 100% rename from src/content/components/events/maintenance-popup-events.ts rename to src/content/components/events/tagging-profile-popup-events.ts diff --git a/src/content/components/extension/MediaBoxTools.ts b/src/content/components/extension/MediaBoxTools.ts index 0c05ee5..832512b 100644 --- a/src/content/components/extension/MediaBoxTools.ts +++ b/src/content/components/extension/MediaBoxTools.ts @@ -2,7 +2,7 @@ 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 { EVENT_ACTIVE_PROFILE_CHANGED } from "$content/components/events/tagging-profile-popup-events"; import type { MediaBox } from "$content/components/philomena/MediaBox"; import type TaggingProfile from "$entities/TaggingProfile"; diff --git a/src/content/components/extension/profiles/TaggingProfilePopup.ts b/src/content/components/extension/profiles/TaggingProfilePopup.ts index 14074fc..6aa2cc3 100644 --- a/src/content/components/extension/profiles/TaggingProfilePopup.ts +++ b/src/content/components/extension/profiles/TaggingProfilePopup.ts @@ -9,7 +9,7 @@ import { EVENT_ACTIVE_PROFILE_CHANGED, EVENT_PROFILE_POPUP_STATE_CHANGED, EVENT_TAGS_UPDATED -} from "$content/components/events/maintenance-popup-events"; +} from "$content/components/events/tagging-profile-popup-events"; import type { MediaBoxTools } from "$content/components/extension/MediaBoxTools"; import { resolveTagCategoryFromTagName } from "$lib/philomena/tag-utils"; diff --git a/src/content/components/extension/profiles/TaggingProfileStatusIcon.ts b/src/content/components/extension/profiles/TaggingProfileStatusIcon.ts index b1b1246..2958104 100644 --- a/src/content/components/extension/profiles/TaggingProfileStatusIcon.ts +++ b/src/content/components/extension/profiles/TaggingProfileStatusIcon.ts @@ -4,7 +4,7 @@ import { on } from "$content/components/events/comms"; import { EVENT_PROFILE_POPUP_STATE_CHANGED, type ProfilePopupState -} from "$content/components/events/maintenance-popup-events"; +} from "$content/components/events/tagging-profile-popup-events"; import type { MediaBoxTools } from "$content/components/extension/MediaBoxTools"; export class TaggingProfileStatusIcon extends BaseComponent { diff --git a/src/content/components/philomena/MediaBox.ts b/src/content/components/philomena/MediaBox.ts index 2403b69..c7b1cc6 100644 --- a/src/content/components/philomena/MediaBox.ts +++ b/src/content/components/philomena/MediaBox.ts @@ -2,7 +2,7 @@ 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"; +import { EVENT_TAGS_UPDATED } from "$content/components/events/tagging-profile-popup-events"; export class MediaBox extends BaseComponent { #thumbnailContainer: HTMLElement | null = null; From daceb9ad59461ff7d4cc905da8190d003e6ac281 Mon Sep 17 00:00:00 2001 From: KoloMl Date: Sun, 29 Mar 2026 03:57:06 +0400 Subject: [PATCH 3/4] Cancel the planned submission when pending changes canceled --- .../extension/profiles/TaggingProfilePopup.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/content/components/extension/profiles/TaggingProfilePopup.ts b/src/content/components/extension/profiles/TaggingProfilePopup.ts index 6aa2cc3..d551336 100644 --- a/src/content/components/extension/profiles/TaggingProfilePopup.ts +++ b/src/content/components/extension/profiles/TaggingProfilePopup.ts @@ -185,6 +185,19 @@ export class TaggingProfilePopup extends BaseComponent { this.#isPlanningToSubmit = true; this.#emitter.emit(EVENT_PROFILE_POPUP_STATE_CHANGED, 'waiting'); } + + // Whenever user undoes the change they wanted to do in the popup, it's better to not send the submission and just + // do nothing. + if (!this.#tagsToAdd.size && !this.#tagsToRemove.size && this.#isPlanningToSubmit) { + this.#isPlanningToSubmit = false; + this.#emitter.emit(EVENT_PROFILE_POPUP_STATE_CHANGED, 'ready'); + TaggingProfilePopup.#notifyAboutPendingSubmission(false); + + // Probably shouldn't ever happen, but make sure we cancel any delayed submission. + if (this.#tagsSubmissionTimer) { + clearTimeout(this.#tagsSubmissionTimer); + } + } } #onMouseEnteredArea() { From e8b0afc81f62d61036f15a8368bce00181481000 Mon Sep 17 00:00:00 2001 From: KoloMl Date: Sun, 29 Mar 2026 04:17:12 +0400 Subject: [PATCH 4/4] And even more renaming of popup across multiple files --- src/content/components/events/comms.ts | 4 ++-- .../components/events/tagging-profile-popup-events.ts | 2 +- src/content/components/extension/MediaBoxTools.ts | 10 +++------- .../extension/profiles/TaggingProfilePopup.ts | 4 ++-- .../extension/profiles/TaggingProfileStatusIcon.ts | 4 ++-- 5 files changed, 10 insertions(+), 14 deletions(-) diff --git a/src/content/components/events/comms.ts b/src/content/components/events/comms.ts index 965087a..e5ba62a 100644 --- a/src/content/components/events/comms.ts +++ b/src/content/components/events/comms.ts @@ -1,4 +1,4 @@ -import type { MaintenancePopupEventsMap } from "$content/components/events/tagging-profile-popup-events"; +import type { TaggingProfilePopupEventsMap } from "$content/components/events/tagging-profile-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"; @@ -7,7 +7,7 @@ import type { TagDropdownEvents } from "$content/components/events/tag-dropdown- import type { PresetBlockEventsMap } from "$content/components/events/preset-block-events"; type EventsMapping = - MaintenancePopupEventsMap + TaggingProfilePopupEventsMap & FullscreenViewerEventsMap & BooruEventsMap & TagsFormEventsMap diff --git a/src/content/components/events/tagging-profile-popup-events.ts b/src/content/components/events/tagging-profile-popup-events.ts index 89bc9c4..668c850 100644 --- a/src/content/components/events/tagging-profile-popup-events.ts +++ b/src/content/components/events/tagging-profile-popup-events.ts @@ -6,7 +6,7 @@ export const EVENT_TAGS_UPDATED = 'tags-updated'; export type ProfilePopupState = 'ready' | 'processing' | 'failed' | 'complete' | 'waiting'; -export interface MaintenancePopupEventsMap { +export interface TaggingProfilePopupEventsMap { [EVENT_ACTIVE_PROFILE_CHANGED]: TaggingProfile | null; [EVENT_PROFILE_POPUP_STATE_CHANGED]: ProfilePopupState; [EVENT_TAGS_UPDATED]: Map | null; diff --git a/src/content/components/extension/MediaBoxTools.ts b/src/content/components/extension/MediaBoxTools.ts index 832512b..1de65b7 100644 --- a/src/content/components/extension/MediaBoxTools.ts +++ b/src/content/components/extension/MediaBoxTools.ts @@ -8,7 +8,7 @@ import type TaggingProfile from "$entities/TaggingProfile"; export class MediaBoxTools extends BaseComponent { #mediaBox: MediaBox | null = null; - #maintenancePopup: TaggingProfilePopup | null = null; + #popup: TaggingProfilePopup | null = null; init() { const mediaBoxElement = this.container.closest('.media-box'); @@ -34,8 +34,8 @@ export class MediaBoxTools extends BaseComponent { component.initialize(); } - if (!this.#maintenancePopup && component instanceof TaggingProfilePopup) { - this.#maintenancePopup = component; + if (!this.#popup && component instanceof TaggingProfilePopup) { + this.#popup = component; } } @@ -46,10 +46,6 @@ export class MediaBoxTools extends BaseComponent { this.container.classList.toggle('has-active-profile', profileChangedEvent.detail !== null); } - get maintenancePopup(): TaggingProfilePopup | null { - return this.#maintenancePopup; - } - get mediaBox(): MediaBox | null { return this.#mediaBox; } diff --git a/src/content/components/extension/profiles/TaggingProfilePopup.ts b/src/content/components/extension/profiles/TaggingProfilePopup.ts index d551336..0b912cd 100644 --- a/src/content/components/extension/profiles/TaggingProfilePopup.ts +++ b/src/content/components/extension/profiles/TaggingProfilePopup.ts @@ -373,7 +373,7 @@ export class TaggingProfilePopup extends BaseComponent { } }); - const unsubscribeFromMaintenanceSettings = this.#preferences.subscribe(settings => { + const unsubscribeFromPreferences = this.#preferences.subscribe(settings => { if (settings.activeProfile === lastActiveProfileId) { return; } @@ -395,7 +395,7 @@ export class TaggingProfilePopup extends BaseComponent { return () => { unsubscribeFromProfilesChanges(); - unsubscribeFromMaintenanceSettings(); + unsubscribeFromPreferences(); } } diff --git a/src/content/components/extension/profiles/TaggingProfileStatusIcon.ts b/src/content/components/extension/profiles/TaggingProfileStatusIcon.ts index 2958104..dc77501 100644 --- a/src/content/components/extension/profiles/TaggingProfileStatusIcon.ts +++ b/src/content/components/extension/profiles/TaggingProfileStatusIcon.ts @@ -25,10 +25,10 @@ export class TaggingProfileStatusIcon extends BaseComponent { throw new Error('Status icon element initialized outside of the media box!'); } - on(this.#mediaBoxTools, EVENT_PROFILE_POPUP_STATE_CHANGED, this.#onMaintenanceStateChanged.bind(this)); + on(this.#mediaBoxTools, EVENT_PROFILE_POPUP_STATE_CHANGED, this.#onPopupStateChanged.bind(this)); } - #onMaintenanceStateChanged(stateChangeEvent: CustomEvent) { + #onPopupStateChanged(stateChangeEvent: CustomEvent) { // TODO Replace those with FontAwesome icons later. Those icons can probably be sourced from the website itself. switch (stateChangeEvent.detail) { case "ready":