impr(settings): optimised tags section for keyboard navigation

frontend/src/styles/popups.scss

@@ -1573,6 +1573,11 @@
   }
 }
 
+#tagsEdit form {
+  display: grid;
+  gap: 1rem;
+}
+
 #editProfilePopup {
   width: 100%;
   max-width: 600px;

frontend/src/ts/pages/settings.ts

@@ -792,21 +792,23 @@ function refreshTagsSettingsSection(): void {
       // }
       tagsEl.append(`
 
-      <div class="buttons tag" id="${tag._id}">
-        <div class="button tagButton ${tag.active ? "active" : ""}" active="${
+      <div class="buttons tag" data-id="${tag._id}" data-name="${
+        tag.name
+      }" data-display="${tag.display}">
+        <button class="tagButton ${tag.active ? "active" : ""}" active="${
         tag.active
       }">
-          <div class="title">${tag.display}</div>
-        </div>
-        <div class="clearPbButton button">
+          ${tag.display}
+        </button>
+        <button class="clearPbButton">
           <i class="fas fa-crown fa-fw"></i>
-        </div>
-        <div class="editButton button">
+        </button>
+        <button class="editButton">
           <i class="fas fa-pen fa-fw"></i>
-        </div>
-        <div class="removeButton button">
+        </button>
+        <button class="removeButton">
           <i class="fas fa-trash fa-fw"></i>
-        </div>
+        </button>
       </div>
 
       `);

frontend/src/ts/popups/edit-tags-popup.ts

@@ -22,27 +22,27 @@ export function show(action: string, id?: string, name?: string): void {
   if (action === "add") {
     $("#tagsWrapper #tagsEdit").attr("action", "add");
     $("#tagsWrapper #tagsEdit .title").html("Add new tag");
-    $("#tagsWrapper #tagsEdit .button").html(`add`);
+    $("#tagsWrapper #tagsEdit button").html(`add`);
     $("#tagsWrapper #tagsEdit input").val("");
     $("#tagsWrapper #tagsEdit input").removeClass("hidden");
   } else if (action === "edit" && id && name) {
     $("#tagsWrapper #tagsEdit").attr("action", "edit");
     $("#tagsWrapper #tagsEdit").attr("tagid", id);
     $("#tagsWrapper #tagsEdit .title").html("Edit tag name");
-    $("#tagsWrapper #tagsEdit .button").html(`save`);
+    $("#tagsWrapper #tagsEdit button").html(`save`);
     $("#tagsWrapper #tagsEdit input").val(name);
     $("#tagsWrapper #tagsEdit input").removeClass("hidden");
   } else if (action === "remove" && id && name) {
     $("#tagsWrapper #tagsEdit").attr("action", "remove");
     $("#tagsWrapper #tagsEdit").attr("tagid", id);
     $("#tagsWrapper #tagsEdit .title").html("Delete tag " + name);
-    $("#tagsWrapper #tagsEdit .button").html(`delete`);
+    $("#tagsWrapper #tagsEdit button").html(`delete`);
     $("#tagsWrapper #tagsEdit input").addClass("hidden");
   } else if (action === "clearPb" && id && name) {
     $("#tagsWrapper #tagsEdit").attr("action", "clearPb");
     $("#tagsWrapper #tagsEdit").attr("tagid", id);
     $("#tagsWrapper #tagsEdit .title").html("Clear PB for tag " + name);
-    $("#tagsWrapper #tagsEdit .button").html(`clear`);
+    $("#tagsWrapper #tagsEdit button").html(`clear`);
     $("#tagsWrapper #tagsEdit input").addClass("hidden");
   }
 
@@ -52,8 +52,12 @@ export function show(action: string, id?: string, name?: string): void {
       .css("opacity", 0)
       .removeClass("hidden")
       .animate({ opacity: 1 }, 125, () => {
-        console.log("focusing");
-        $("#tagsWrapper #tagsEdit input").trigger("focus");
+        const input = $("#tagsWrapper #tagsEdit input");
+        if (!input.hasClass("hidden")) {
+          $("#tagsWrapper #tagsEdit input").trigger("focus");
+        } else {
+          $("#tagsWrapper").trigger("focus");
+        }
       });
   }
 }
@@ -170,16 +174,11 @@ $("#tagsWrapper").on("click", (e) => {
   }
 });
 
-$("#tagsWrapper #tagsEdit .button").on("click", () => {
+$("#tagsWrapper #tagsEdit form").on("submit", (e) => {
+  e.preventDefault();
   apply();
 });
 
-$("#tagsWrapper #tagsEdit input").on("keypress", (e) => {
-  if (e.key === "Enter") {
-    apply();
-  }
-});
-
 $(".pageSettings .section.tags").on("click", ".addTagButton", () => {
   show("add");
 });
@@ -188,11 +187,8 @@ $(".pageSettings .section.tags").on(
   "click",
   ".tagsList .tag .editButton",
   (e) => {
-    const tagid = $(e.currentTarget).parent(".tag").attr("id");
-    const name = $(e.currentTarget)
-      .siblings(".tagButton")
-      .children(".title")
-      .text();
+    const tagid = $(e.currentTarget).parent(".tag").attr("data-id");
+    const name = $(e.currentTarget).parent(".tag").attr("data-display");
     show("edit", tagid, name);
   }
 );
@@ -201,11 +197,8 @@ $(".pageSettings .section.tags").on(
   "click",
   ".tagsList .tag .clearPbButton",
   (e) => {
-    const tagid = $(e.currentTarget).parent(".tag").attr("id");
-    const name = $(e.currentTarget)
-      .siblings(".tagButton")
-      .children(".title")
-      .text();
+    const tagid = $(e.currentTarget).parent(".tag").attr("data-id");
+    const name = $(e.currentTarget).parent(".tag").attr("data-display");
     show("clearPb", tagid, name);
   }
 );
@@ -214,13 +207,17 @@ $(".pageSettings .section.tags").on(
   "click",
   ".tagsList .tag .removeButton",
   (e) => {
-    const tagid = $(e.currentTarget).parent(".tag").attr("id");
-    const name = $(e.currentTarget)
-      .siblings(".tagButton")
-      .children(".title")
-      .text();
+    const tagid = $(e.currentTarget).parent(".tag").attr("data-id");
+    const name = $(e.currentTarget).parent(".tag").attr("data-display");
     show("remove", tagid, name);
   }
 );
 
+$(document).on("keydown", (event) => {
+  if (event.key === "Escape" && isPopupVisible(wrapperId)) {
+    hide();
+    event.preventDefault();
+  }
+});
+
 Skeleton.save(wrapperId);

frontend/static/html/pages/settings.html

@@ -59,7 +59,7 @@
         give you a role.
       </div>
       <div class="buttons">
-        <div class="button getLinkAndGoToOauth">Link with Discord</div>
+        <button class="getLinkAndGoToOauth">link</button>
       </div>
       <div class="info hidden">
         <div>
@@ -67,17 +67,17 @@
           Your accounts are linked!
         </div>
         <div id="discordButtonGroup">
-          <div
+          <button
             id="updateDiscordAvatarButton"
             class="textButton getLinkAndGoToOauth"
           >
             <i class="fas fa-sync-alt" aria-hidden="true"></i>
             Update avatar
-          </div>
-          <div id="unlinkDiscordButton" class="textButton">
+          </button>
+          <button id="unlinkDiscordButton" class="textButton">
             <i class="fas fa-unlink" aria-hidden="true"></i>
             Unlink
-          </div>
+          </button>
         </div>
       </div>
     </div>
@@ -92,19 +92,8 @@
         remain active until you deactivate them, or refresh the page.
       </div>
       <div class="tagsListAndButton">
-        <div class="tagsList">
-          <div class="tag" id="0">
-            <div class="active">
-              <i class="fas fa-check-square"></i>
-            </div>
-            <div class="title">staggered</div>
-            <div class="editButton"><i class="fas fa-pen"></i></div>
-            <div class="removeButton">
-              <i class="fas fa-trash"></i>
-            </div>
-          </div>
-        </div>
-        <div class="button addTagButton fullWidth">add tag</div>
+        <div class="tagsList"></div>
+        <button class="addTagButton fullWidth">add tag</button>
       </div>
     </div>
     <div class="section presets">

frontend/static/html/popups.html

@@ -783,11 +783,13 @@
     <div class="quotes"></div>
   </div>
 </div>
-<div id="tagsWrapper" class="popupWrapper hidden">
+<div id="tagsWrapper" class="popupWrapper hidden" tabindex="-1">
   <div id="tagsEdit" action="" tagid="">
-    <div class="title"></div>
-    <input type="text" title="tag" />
-    <div class="button"><i class="fas fa-plus"></i></div>
+    <form>
+      <div class="title"></div>
+      <input type="text" title="tag" />
+      <button type="submit"></button>
+    </form>
   </div>
 </div>
 <div id="streakHourOffsetPopupWrapper" class="popupWrapper hidden">