From 71fb56524772e247ffba4844f40120ceb8164221 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Sat, 14 Mar 2026 19:15:59 +0400
Subject: [PATCH] Sort list of presets and their tags more consistently

---
 .../extension/presets/EditorPresetsBlock.ts      |  3 ++-
 .../extension/presets/PresetTableRow.ts          | 16 +++++++++-------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/content/components/extension/presets/EditorPresetsBlock.ts b/src/content/components/extension/presets/EditorPresetsBlock.ts
index 86bbe1e..80cba5c 100644
--- a/src/content/components/extension/presets/EditorPresetsBlock.ts
+++ b/src/content/components/extension/presets/EditorPresetsBlock.ts
@@ -2,6 +2,7 @@ import { BaseComponent } from "$content/components/base/BaseComponent";
 import TagEditorPreset from "$entities/TagEditorPreset";
 import PresetTableRow from "$content/components/extension/presets/PresetTableRow";
 import { createFontAwesomeIcon } from "$lib/dom-utils";
+import { sortEntitiesByField } from "$lib/utils";
 
 export default class EditorPresetsBlock extends BaseComponent {
   #presetsTable = document.createElement('table');
@@ -70,7 +71,7 @@ export default class EditorPresetsBlock extends BaseComponent {
       }
     }
 
-    for (const preset of presetsList) {
+    for (const preset of sortEntitiesByField(presetsList, "name")) {
       const block = PresetTableRow.create(preset);
       this.#presetsTable.tBodies[0]?.append(block.container);
       block.initialize();
diff --git a/src/content/components/extension/presets/PresetTableRow.ts b/src/content/components/extension/presets/PresetTableRow.ts
index 0141a46..61bcafd 100644
--- a/src/content/components/extension/presets/PresetTableRow.ts
+++ b/src/content/components/extension/presets/PresetTableRow.ts
@@ -17,14 +17,16 @@ export default class PresetTableRow extends BaseComponent {
   }
 
   protected build() {
-    this.#tagsList = this.#preset.settings.tags.map(tagName => {
-      const tagElement = document.createElement('span');
-      tagElement.classList.add('tag');
-      tagElement.textContent = tagName;
-      tagElement.dataset.tagName = tagName;
+    this.#tagsList = this.#preset.settings.tags
+      .toSorted((a, b) => a.localeCompare(b))
+      .map(tagName => {
+        const tagElement = document.createElement('span');
+        tagElement.classList.add('tag');
+        tagElement.textContent = tagName;
+        tagElement.dataset.tagName = tagName;
 
-      return tagElement;
-    });
+        return tagElement;
+      });
 
     const nameCell = document.createElement('td');
     nameCell.textContent = this.#preset.settings.name;