Added presets and tag editor handling to the image upload page

src/content/components/philomena/TagsForm.ts

@@ -24,7 +24,7 @@ export class TagsForm extends BaseComponent {
     this.#togglePresetsButton.textContent = 'Presets';
 
     this.container
-      .querySelector('.fancy-tag-edit ~ button:last-of-type')
+      .querySelector(':is(.fancy-tag-edit, .fancy-tag-upload) ~ button:last-of-type')
       ?.after(this.#togglePresetsButton, this.#presetsList.container);
 
     this.#plainEditorTextarea = this.container.querySelector('textarea.tagsinput');
@@ -243,4 +243,14 @@ export class TagsForm extends BaseComponent {
       (tagEditor as TagsForm).refreshTagColors();
     });
   }
+
+  static initializeUploadEditor() {
+    const uploadEditorContainer = document.querySelector<HTMLElement>('.field:has(.fancy-tag-upload)');
+
+    if (!uploadEditorContainer) {
+      return;
+    }
+
+    new TagsForm(uploadEditorContainer).initialize();
+  }
 }

src/content/upload.ts

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

src/styles/content/tag-presets.scss

@@ -0,0 +1,16 @@
+@use '$styles/booru-vars';
+
+.block.tag-presets {
+  .tag {
+    cursor: pointer;
+
+    &.is-missing {
+      opacity: 0.5;
+    }
+
+    &:hover {
+      color: booru-vars.$resolved-tag-background;
+      background: booru-vars.$resolved-tag-color;
+    }
+  }
+}

src/styles/content/tags-editor.scss

@@ -11,18 +11,3 @@ h2.tag-category-headline {
     bottom: calc(#{$base-margin-bottom} - #{booru-vars.$padding-small});
   }
 }
-
-.block.tag-presets {
-  .tag {
-    cursor: pointer;
-
-    &.is-missing {
-      opacity: 0.5;
-    }
-
-    &:hover {
-      color: booru-vars.$resolved-tag-background;
-      background: booru-vars.$resolved-tag-color;
-    }
-  }
-}