impr: validate tag name on tag creation and rename (@fehmer) (monkeytypegame#6264)

Author: fehmer

frontend/src/html/popups.html

@@ -946,14 +946,6 @@
     <div class="quotes"></div>
   </div>
 </dialog>
-<dialog id="editTagModal" class="modalWrapper hidden">
-  <form class="modal">
-    <div class="title"></div>
-    <input type="text" title="tag" />
-    <div class="text"></div>
-    <button type="submit"></button>
-  </form>
-</dialog>
 <dialog id="streakHourOffsetModal" class="modalWrapper hidden">
   <div class="modal">
     <div class="title">Set streak hour offset</div>

frontend/src/styles/popups.scss

@@ -1555,12 +1555,6 @@ body.darkMode {
   }
 }
 
-#editTagModal {
-  .modal {
-    max-width: 450px;
-  }
-}
-
 #streakHourOffsetModal {
   .modal {
     max-width: 500px;

frontend/src/ts/commandline/lists/tags.ts

@@ -30,64 +30,28 @@ const commands: Command[] = [
 function update(): void {
   const snapshot = DB.getSnapshot();
   subgroup.list = [];
+
   if (
-    snapshot === undefined ||
-    snapshot.tags === undefined ||
-    snapshot.tags.length === 0
+    snapshot !== undefined &&
+    snapshot.tags !== undefined &&
+    snapshot.tags.length > 0
   ) {
     subgroup.list.push({
-      id: "createTag",
-      display: "Create tag",
-      icon: "fa-plus",
-      shouldFocusTestUI: false,
-      exec: ({ commandlineModal }): void => {
-        EditTagsPopup.show("add", undefined, undefined, commandlineModal);
-      },
-    });
-    return;
-  }
-  subgroup.list.push({
-    id: "clearTags",
-    display: `Clear tags`,
-    icon: "fa-times",
-    sticky: true,
-    exec: async (): Promise<void> => {
-      const snapshot = DB.getSnapshot();
-      if (!snapshot) return;
-
-      snapshot.tags = snapshot.tags?.map((tag) => {
-        tag.active = false;
-
-        return tag;
-      });
-
-      DB.setSnapshot(snapshot);
-      if (
-        Config.paceCaret === "average" ||
-        Config.paceCaret === "tagPb" ||
-        Config.paceCaret === "daily"
-      ) {
-        await PaceCaret.init();
-      }
-      void ModesNotice.update();
-      TagController.saveActiveToLocalStorage();
-    },
-  });
-
-  for (const tag of snapshot.tags) {
-    subgroup.list.push({
-      id: "toggleTag" + tag._id,
-      display: tag.display,
+      id: "clearTags",
+      display: `Clear tags`,
+      icon: "fa-times",
       sticky: true,
-      active: () => {
-        return (
-          DB.getSnapshot()?.tags?.find((t) => t._id === tag._id)?.active ??
-          false
-        );
-      },
       exec: async (): Promise<void> => {
-        TagController.toggle(tag._id);
+        const snapshot = DB.getSnapshot();
+        if (!snapshot) return;
+
+        snapshot.tags = snapshot.tags?.map((tag) => {
+          tag.active = false;
 
+          return tag;
+        });
+
+        DB.setSnapshot(snapshot);
         if (
           Config.paceCaret === "average" ||
           Config.paceCaret === "tagPb" ||
@@ -96,8 +60,35 @@ function update(): void {
           await PaceCaret.init();
         }
         void ModesNotice.update();
+        TagController.saveActiveToLocalStorage();
       },
     });
+
+    for (const tag of snapshot.tags) {
+      subgroup.list.push({
+        id: "toggleTag" + tag._id,
+        display: tag.display,
+        sticky: true,
+        active: () => {
+          return (
+            DB.getSnapshot()?.tags?.find((t) => t._id === tag._id)?.active ??
+            false
+          );
+        },
+        exec: async (): Promise<void> => {
+          TagController.toggle(tag._id);
+
+          if (
+            Config.paceCaret === "average" ||
+            Config.paceCaret === "tagPb" ||
+            Config.paceCaret === "daily"
+          ) {
+            await PaceCaret.init();
+          }
+          void ModesNotice.update();
+        },
+      });
+    }
   }
   subgroup.list.push({
     id: "createTag",