Merge remote-tracking branch 'origin/release/0.4.4' into feature/name-events-as-constants

# Conflicts:
#	src/lib/components/TagsListBlock.ts

src/lib/components/MediaBoxWrapper.ts

@@ -90,5 +90,10 @@ export function calculateMediaBoxesPositions(mediaBoxesList: NodeListOf<HTMLElem
       lastMediaBox = mediaBoxElement;
       lastMediaBoxPosition = yPosition;
     }
+
+    // Last-ever media box is checked separately
+    if (lastMediaBox && !lastMediaBox.nextElementSibling) {
+      lastMediaBox.classList.add('media-box--last');
+    }
   })
 }

src/lib/components/TagsListBlock.ts

@@ -8,7 +8,12 @@ import { EVENT_TAG_GROUP_RESOLVED } from "$lib/components/events/tag-dropdown-ev
 import TagSettings from "$lib/extension/settings/TagSettings";
 
 export class TagsListBlock extends BaseComponent {
+  #tagsListButtonsContainer: HTMLElement | null = null;
   #tagsListContainer: HTMLElement | null = null;
+
+  #toggleGroupingButton = document.createElement('a');
+  #toggleGroupingButtonIcon = document.createElement('i');
+
   #tagSettings = new TagSettings();
 
   #shouldDisplaySeparation = false;
@@ -21,7 +26,21 @@ export class TagsListBlock extends BaseComponent {
   #isReorderingPlanned = false;
 
   protected build() {
+    this.#tagsListButtonsContainer = this.container.querySelector('.block.tagsauce .block__header__buttons');
     this.#tagsListContainer = this.container.querySelector('.tag-list');
+
+    this.#toggleGroupingButton.innerText = ' Grouping';
+    this.#toggleGroupingButton.href = 'javascript:void(0)';
+    this.#toggleGroupingButton.classList.add('button', 'button--link', 'button--inline');
+    this.#toggleGroupingButton.title = 'Toggle the global groups separation option. This will only toggle global ' +
+      'setting without changing the separation of specific groups.';
+
+    this.#toggleGroupingButtonIcon.classList.add('fas', TagsListBlock.#iconGroupingDisabled);
+    this.#toggleGroupingButton.prepend(this.#toggleGroupingButtonIcon);
+
+    if (this.#tagsListButtonsContainer) {
+      this.#tagsListButtonsContainer.append(this.#toggleGroupingButton);
+    }
   }
 
   init() {
@@ -35,6 +54,8 @@ export class TagsListBlock extends BaseComponent {
       EVENT_TAG_GROUP_RESOLVED,
       this.#onTagDropdownCustomGroupResolved.bind(this)
     );
+
+    this.#toggleGroupingButton.addEventListener('click', this.#onToggleGroupingClicked.bind(this));
   }
 
   #onTagSeparationChange(isSeparationEnabled: boolean) {
@@ -44,6 +65,12 @@ export class TagsListBlock extends BaseComponent {
 
     this.#shouldDisplaySeparation = isSeparationEnabled;
     this.#reorderSeparatedGroups();
+    this.#updateToggleSeparationButton();
+  }
+
+  #updateToggleSeparationButton() {
+    this.#toggleGroupingButtonIcon.classList.toggle(TagsListBlock.#iconGroupingEnabled, this.#shouldDisplaySeparation);
+    this.#toggleGroupingButtonIcon.classList.toggle(TagsListBlock.#iconGroupingDisabled, !this.#shouldDisplaySeparation);
   }
 
   #onTagDropdownCustomGroupResolved(resolvedCustomGroupEvent: CustomEvent<TagGroup | null>) {
@@ -74,6 +101,11 @@ export class TagsListBlock extends BaseComponent {
     }
   }
 
+  #onToggleGroupingClicked(event: Event) {
+    event.preventDefault();
+    void this.#tagSettings.setGroupSeparation(!this.#shouldDisplaySeparation);
+  }
+
   #handleTagGroupChanges(tagGroup: TagGroup) {
     const groupId = tagGroup.id;
     const processedGroup = this.#separatedGroups.get(groupId);
@@ -181,6 +213,9 @@ export class TagsListBlock extends BaseComponent {
   static #orderCssVariableForGroup(groupId: string): string {
     return `--ta-order-${groupId}`;
   }
+
+  static #iconGroupingDisabled = 'fa-folder';
+  static #iconGroupingEnabled = 'fa-folder-tree';
 }
 
 export function initializeAllTagsLists() {
@@ -196,6 +231,13 @@ export function initializeAllTagsLists() {
 
 export function watchForUpdatedTagLists() {
   on(document, EVENT_FORM_EDITOR_UPDATED, event => {
-    event.detail.closest('#image_tags_and_source')
+    const tagsListElement = event.detail.closest<HTMLElement>('#image_tags_and_source');
+
+    if (!tagsListElement || getComponent(tagsListElement)) {
+      return;
+    }
+
+    new TagsListBlock(tagsListElement)
+      .initialize();
   });
 }