Name edit: save on Enter, cancel on Escape/blur — drop Save/Cancel buttons

custom_components/zlock_slots/frontend/zlock-slots-card.js

@@ -120,9 +120,7 @@ class ZLockSlotsCard extends HTMLElement {
                           ${s.name ?? '<em style="opacity:.4">unnamed</em>'}
                         </span>
                         <span class="inline-edit" id="name-edit-${s.slot_num}" style="display:none">
-                          <input id="name-input-${s.slot_num}" type="text" value="${s.name ?? ''}" placeholder="Enter name" />
-                          <button class="action" data-action="save-name" data-slot="${s.slot_num}">Save</button>
-                          <button class="icon-btn" data-action="cancel-name" data-slot="${s.slot_num}">✕</button>
+                          <input id="name-input-${s.slot_num}" type="text" value="${s.name ?? ''}" placeholder="Enter name — Enter to save, Esc to cancel" data-slot="${s.slot_num}" />
                         </span>
                       </td>
                       <td>
@@ -187,19 +185,37 @@ class ZLockSlotsCard extends HTMLElement {
         } else if (action === "edit-name") {
           root.getElementById(`name-display-${slot}`).style.display = "none";
           root.getElementById(`name-edit-${slot}`).style.display = "flex";
-          root.getElementById(`name-input-${slot}`).focus();
+          const input = root.getElementById(`name-input-${slot}`);
+          input.focus();
+          input.select();
+        }
+      });
+    });
 
-        } else if (action === "cancel-name") {
-          root.getElementById(`name-display-${slot}`).style.display = "";
-          root.getElementById(`name-edit-${slot}`).style.display = "none";
+    const closeName = (slot, save) => {
+      root.getElementById(`name-display-${slot}`).style.display = "";
+      root.getElementById(`name-edit-${slot}`).style.display = "none";
+      return save;
+    };
 
-        } else if (action === "save-name") {
-          const name = root.getElementById(`name-input-${slot}`).value.trim();
+    root.querySelectorAll("input[data-slot]").forEach(input => {
+      const slot = parseInt(input.dataset.slot, 10);
+
+      input.addEventListener("keydown", async (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          input.removeEventListener("blur", input._blurHandler);
+          const name = input.value.trim();
+          closeName(slot, true);
           await this._callService("set_name", { lock_entity_id: lock, slot, name });
-          root.getElementById(`name-display-${slot}`).style.display = "";
-          root.getElementById(`name-edit-${slot}`).style.display = "none";
+        } else if (e.key === "Escape") {
+          input.removeEventListener("blur", input._blurHandler);
+          closeName(slot, false);
         }
       });
+
+      input._blurHandler = () => closeName(slot, false);
+      input.addEventListener("blur", input._blurHandler);
     });
 
     root.getElementById("add-btn")?.addEventListener("click", async () => {