From 2a97a8e5d91f1a30ed748d6b3813c258b154b607 Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Sat, 9 Dec 2023 17:37:00 +0100
Subject: [PATCH] Show placeholder when paired device is removed to prevent
 removing multiple devices

---
 public/lang/en.json               |  1 +
 public/scripts/ui.js              | 15 ++++++++-------
 public/styles/deferred-styles.css | 17 +++++++----------
 3 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/public/lang/en.json b/public/lang/en.json
index f7bc40f..9cc798c 100644
--- a/public/lang/en.json
+++ b/public/lang/en.json
@@ -60,6 +60,7 @@
         "cancel": "Cancel",
         "edit-paired-devices-title": "Edit Paired Devices",
         "unpair": "Unpair",
+        "paired-device-removed": "Paired device removed.",
         "paired-devices-wrapper_data-empty": "No paired devices.",
         "auto-accept-instructions-1": "Activate",
         "auto-accept": "auto-accept",
diff --git a/public/scripts/ui.js b/public/scripts/ui.js
index f6be387..5fb681d 100644
--- a/public/scripts/ui.js
+++ b/public/scripts/ui.js
@@ -1545,6 +1545,7 @@ class EditPairedDevicesDialog extends Dialog {
     }
 
     async _initDOM() {
+        const pairedDeviceRemovedString = Localization.getTranslation("dialogs.paired-device-removed");
         const unpairString = Localization.getTranslation("dialogs.unpair").toUpperCase();
         const autoAcceptString = Localization.getTranslation("dialogs.auto-accept").toLowerCase();
         const roomSecretsEntries = await PersistentStorage.getAllRoomSecretEntries();
@@ -1553,6 +1554,7 @@ class EditPairedDevicesDialog extends Dialog {
             .forEach(roomSecretsEntry => {
                 let $pairedDevice = document.createElement('div');
                 $pairedDevice.classList.add("paired-device");
+                $pairedDevice.setAttribute('placeholder', pairedDeviceRemovedString);
 
                 $pairedDevice.innerHTML = `
                     <div class="display-name">
@@ -1565,17 +1567,17 @@ class EditPairedDevicesDialog extends Dialog {
                             ${roomSecretsEntry.device_name}
                         </span>
                     </div>
-                    <div class="button-wrapper">
-                        <div class="row center">
-                            <span class="p1">
+                    <div class="button-wrapper row fw center wrap">
+                        <div class="center grow">
+                            <span class="center wrap">
                                 ${autoAcceptString}
                             </span>
-                            <label class="auto-accept pointer switch">
+                            <label class="auto-accept switch pointer m1">
                                 <input type="checkbox" ${roomSecretsEntry.auto_accept ? "checked" : ""}>
                                 <div class="slider round"></div>
                             </label>
                         </div>
-                        <button class="btn" type="button">${unpairString}</button>
+                        <button class="btn grow" type="button">${unpairString}</button>
                     </div>`
 
                 $pairedDevice
@@ -1599,11 +1601,10 @@ class EditPairedDevicesDialog extends Dialog {
                             .then(roomSecret => {
                                 Events.fire('room-secrets-deleted', [roomSecret]);
                                 Events.fire('evaluate-number-room-secrets');
-                                e.target.parentNode.parentNode.remove();
+                                $pairedDevice.innerText = "";
                             });
                     })
 
-                this.$pairedDevicesWrapper.html = "";
                 this.$pairedDevicesWrapper.appendChild($pairedDevice)
             })
     }
diff --git a/public/styles/deferred-styles.css b/public/styles/deferred-styles.css
index 84e2180..becc55a 100644
--- a/public/styles/deferred-styles.css
+++ b/public/styles/deferred-styles.css
@@ -505,6 +505,10 @@ x-dialog hr {
     align-items: center;
 }
 
+.paired-device:empty {
+    padding: 47px;
+}
+
 .paired-device:not(:last-child) {
     border-bottom: solid 4px var(--paired-device-color);
 }
@@ -521,17 +525,10 @@ x-dialog hr {
     opacity: 1;
 }
 
-.paired-device > .button-wrapper {
-    display: flex;
-    height: 36px;
-    width: 100%;
-}
-
 .paired-device > .button-wrapper > * {
-    width: 50%;
-    padding-left: 6px;
-    padding-right: 6px;
-    height: 36px;
+    min-height: 38px;
+    padding-left: 5px;
+    padding-right: 5px;
 }
 
 .paired-device > .button-wrapper > :not(:last-child) {