Added Tag Presets, popup editor for them, implemented presets image edit

src/lib/dom-utils.ts

@@ -0,0 +1,11 @@
+/**
+ * Reusable function to create icons from FontAwesome. Usable only for website, since extension doesn't host its own
+ * copy of FA styles. Extension should use imports of SVGs inside CSS instead.
+ * @param iconSlug Slug of the icon to be added.
+ * @return Element with classes for FontAwesome icon added.
+ */
+export function createFontAwesomeIcon(iconSlug: string): HTMLElement {
+  const iconElement = document.createElement('i');
+  iconElement.classList.add('fa-solid', `fa-${iconSlug}`);
+  return iconElement;
+}

src/lib/extension/BulkEntitiesTransporter.ts

@@ -4,6 +4,7 @@ import type { ImportableElementsList, ImportableEntityObject } from "$lib/extens
 import EntitiesTransporter, { type SameSiteStatus } from "$lib/extension/EntitiesTransporter";
 import TaggingProfile from "$entities/TaggingProfile";
 import TagGroup from "$entities/TagGroup";
+import TagEditorPreset from "$entities/TagEditorPreset";
 
 type TransportersMapping = {
   [EntityName in keyof App.EntityNamesMap]: EntitiesTransporter<App.EntityNamesMap[EntityName]>;
@@ -77,6 +78,8 @@ export default class BulkEntitiesTransporter {
               return BulkEntitiesTransporter.#transporters.profiles.exportToObject(entity);
             case entity instanceof TagGroup:
               return BulkEntitiesTransporter.#transporters.groups.exportToObject(entity);
+            case entity instanceof TagEditorPreset:
+              return BulkEntitiesTransporter.#transporters.presets.exportToObject(entity);
           }
 
           return null;
@@ -101,6 +104,7 @@ export default class BulkEntitiesTransporter {
   static #transporters: TransportersMapping = {
     profiles: new EntitiesTransporter(TaggingProfile),
     groups: new EntitiesTransporter(TagGroup),
+    presets: new EntitiesTransporter(TagEditorPreset),
   }
 
   /**

src/lib/extension/entities/TagEditorPreset.ts

@@ -0,0 +1,17 @@
+import StorageEntity from "$lib/extension/base/StorageEntity";
+
+interface TagEditorPresetSettings {
+  name: string;
+  tags: string[];
+}
+
+export default class TagEditorPreset extends StorageEntity<TagEditorPresetSettings> {
+  constructor(id: string, settings: Partial<TagEditorPresetSettings>) {
+    super(id, {
+      name: settings.name || '',
+      tags: settings.tags || [],
+    });
+  }
+
+  public static readonly _entityName = 'presets';
+}

src/lib/extension/transporting/exporters.ts

@@ -33,6 +33,16 @@ const entitiesExporters: ExportersMap = {
       category: entity.settings.category,
       separate: entity.settings.separate,
     }
+  },
+  presets: entity => {
+    return {
+      $type: "presets",
+      $site: __CURRENT_SITE__,
+      v: 1,
+      id: entity.id,
+      name: entity.settings.name,
+      tags: entity.settings.tags,
+    }
   }
 };
 

src/lib/extension/transporting/validators.ts

@@ -64,6 +64,19 @@ const entitiesValidators: EntitiesValidationMap = {
       throw new Error('Invalid group format detected!');
     }
   },
+  presets: importedObject => {
+    if (!importedObject.v || importedObject.v > 1) {
+      throw new Error('Unsupported preset version!');
+    }
+
+    if (
+      !validateRequiredString(importedObject?.id)
+      || !validateRequiredString(importedObject?.name)
+      || !validateOptionalArray(importedObject?.tags)
+    ) {
+      throw new Error('Invalid preset format detected!');
+    }
+  }
 };
 
 /**

src/lib/utils.ts

@@ -1,3 +1,6 @@
+import type StorageEntity from "$lib/extension/base/StorageEntity";
+import type TagGroup from "$entities/TagGroup";
+
 /**
  * Traverse and find the object using the key path.
  * @param targetObject Target object to traverse into.
@@ -39,3 +42,14 @@ export function escapeRegExp(value: string): string {
   unsafeRegExpCharacters.lastIndex = 0;
   return value.replace(unsafeRegExpCharacters, "\\$&");
 }
+
+type OnlyStringFields<Fields extends Record<string, any>> = {
+  [FieldKey in keyof Fields as Fields[FieldKey] extends string ? FieldKey : never]: string;
+};
+
+export function sortEntitiesByField<Fields extends Object>(entities: StorageEntity<Fields>[], fieldName: keyof OnlyStringFields<Fields>) {
+  return entities.toSorted(
+    (a, b) => (a.settings[fieldName] as string)
+      .localeCompare(b.settings[fieldName] as string)
+  );
+}