feat: show confirmation dialog deleting WOL target (#1007)

ui/localization/messages/da.json

@@ -914,6 +914,7 @@
     "wake_on_lan_add_device_save_device": "Gem enhed",
     "wake_on_lan_description": "Send en magisk pakke for at vække en fjern enhed.",
     "wake_on_lan_device_list_add_new_device": "Tilføj ny enhed",
+    "wake_on_lan_device_list_confirm_delete_message": "Er du sikker på, at du vil slette denne enhed? {name}",
     "wake_on_lan_device_list_delete_device": "Slet enhed",
     "wake_on_lan_device_list_wake": "Vågne",
     "wake_on_lan_empty_add_device_to_start": "Tilføj en enhed for at begynde at bruge Wake-on-LAN",

ui/localization/messages/de.json

@@ -914,6 +914,7 @@
     "wake_on_lan_add_device_save_device": "Gerät speichern",
     "wake_on_lan_description": "Senden Sie ein Magic Packet, um ein Remote-Gerät zu wecken.",
     "wake_on_lan_device_list_add_new_device": "Neues Gerät hinzufügen",
+    "wake_on_lan_device_list_confirm_delete_message": "Möchten Sie dieses Gerät wirklich löschen? {name}",
     "wake_on_lan_device_list_delete_device": "Gerät löschen",
     "wake_on_lan_device_list_wake": "Aufwachen",
     "wake_on_lan_empty_add_device_to_start": "Fügen Sie ein Gerät hinzu, um Wake-on-LAN zu verwenden",

ui/localization/messages/en.json

@@ -914,6 +914,7 @@
     "wake_on_lan_add_device_save_device": "Save Device",
     "wake_on_lan_description": "Send a Magic Packet to wake up a remote device.",
     "wake_on_lan_device_list_add_new_device": "Add New Device",
+    "wake_on_lan_device_list_confirm_delete_message": "Are you sure you want to delete this device? {name}",
     "wake_on_lan_device_list_delete_device": "Delete device",
     "wake_on_lan_device_list_wake": "Wake",
     "wake_on_lan_empty_add_device_to_start": "Add a device to start using Wake-on-LAN",

ui/localization/messages/es.json

@@ -914,6 +914,7 @@
     "wake_on_lan_add_device_save_device": "Guardar dispositivo",
     "wake_on_lan_description": "Envíe un paquete mágico para activar un dispositivo remoto.",
     "wake_on_lan_device_list_add_new_device": "Agregar nuevo dispositivo",
+    "wake_on_lan_device_list_confirm_delete_message": "¿Estás seguro de que quieres eliminar este dispositivo? {name}",
     "wake_on_lan_device_list_delete_device": "Eliminar dispositivo",
     "wake_on_lan_device_list_wake": "Despertar",
     "wake_on_lan_empty_add_device_to_start": "Agregue un dispositivo para comenzar a usar Wake-on-LAN",

ui/localization/messages/fr.json

@@ -914,6 +914,7 @@
     "wake_on_lan_add_device_save_device": "Enregistrer l'appareil",
     "wake_on_lan_description": "Envoyez un paquet magique pour réveiller un appareil distant.",
     "wake_on_lan_device_list_add_new_device": "Ajouter un nouvel appareil",
+    "wake_on_lan_device_list_confirm_delete_message": "Êtes-vous sûr de vouloir supprimer cet appareil? {name}",
     "wake_on_lan_device_list_delete_device": "Supprimer l'appareil",
     "wake_on_lan_device_list_wake": "Se réveiller",
     "wake_on_lan_empty_add_device_to_start": "Ajoutez un appareil pour commencer à utiliser Wake-on-LAN",

ui/localization/messages/it.json

@@ -914,6 +914,7 @@
     "wake_on_lan_add_device_save_device": "Salva dispositivo",
     "wake_on_lan_description": "Invia un Magic Packet per riattivare un dispositivo remoto.",
     "wake_on_lan_device_list_add_new_device": "Aggiungi nuovo dispositivo",
+    "wake_on_lan_device_list_confirm_delete_message": "Sei sicuro di voler eliminare questo dispositivo? {name}",
     "wake_on_lan_device_list_delete_device": "Elimina dispositivo",
     "wake_on_lan_device_list_wake": "Veglia",
     "wake_on_lan_empty_add_device_to_start": "Aggiungi un dispositivo per iniziare a utilizzare Wake-on-LAN",

ui/localization/messages/nb.json

@@ -914,6 +914,7 @@
     "wake_on_lan_add_device_save_device": "Lagre enhet",
     "wake_on_lan_description": "Send en magisk pakke for å vekke en ekstern enhet.",
     "wake_on_lan_device_list_add_new_device": "Legg til ny enhet",
+    "wake_on_lan_device_list_confirm_delete_message": "Er du sikker på at du vil slette denne enheten? {name}",
     "wake_on_lan_device_list_delete_device": "Slett enhet",
     "wake_on_lan_device_list_wake": "Våkne",
     "wake_on_lan_empty_add_device_to_start": "Legg til en enhet for å begynne å bruke Wake-on-LAN",

ui/localization/messages/sv.json

@@ -914,6 +914,7 @@
     "wake_on_lan_add_device_save_device": "Spara enhet",
     "wake_on_lan_description": "Skicka ett magiskt paket för att väcka en fjärrenhet.",
     "wake_on_lan_device_list_add_new_device": "Lägg till ny enhet",
+    "wake_on_lan_device_list_confirm_delete_message": "Är du säkert på att du vill ta bort enheten? {name}",
     "wake_on_lan_device_list_delete_device": "Ta bort enhet",
     "wake_on_lan_device_list_wake": "Vakna",
     "wake_on_lan_empty_add_device_to_start": "Lägg till en enhet för att börja använda Wake-on-LAN",

ui/localization/messages/zh.json

@@ -914,6 +914,7 @@
     "wake_on_lan_add_device_save_device": "保存设备",
     "wake_on_lan_description": "发送魔术包来唤醒远程设备。",
     "wake_on_lan_device_list_add_new_device": "添加新设备",
+    "wake_on_lan_device_list_confirm_delete_message": "您确定要删除此设备吗？ {name}",
     "wake_on_lan_device_list_delete_device": "删除设备",
     "wake_on_lan_device_list_wake": "唤醒",
     "wake_on_lan_empty_add_device_to_start": "添加设备以开始使用网络唤醒",

ui/src/components/popovers/WakeOnLan/DeviceList.tsx

@@ -1,4 +1,5 @@
 import { LuPlus, LuSend, LuTrash2 } from "react-icons/lu";
+import { useState } from "react";
 
 import { m } from "@localizations/messages.js";
 import { Button } from "@components/Button";
@@ -27,6 +28,23 @@ export default function DeviceList({
   onCancelWakeOnLanModal,
   setShowAddForm,
 }: DeviceListProps) {
+  const [deleteIndex, setDeleteIndex] = useState<number | null>(null);
+
+  const handleDelete = (index: number) => {
+    setDeleteIndex(index);
+  };
+
+  const confirmDelete = () => {
+    if (deleteIndex !== null) {
+      onDeleteDevice(deleteIndex);
+      setDeleteIndex(null);
+    }
+  };
+
+  const cancelDelete = () => {
+    setDeleteIndex(null);
+  };
+
   return (
     <div className="space-y-4">
       <Card className="animate-fadeIn opacity-0">
@@ -55,7 +73,7 @@ export default function DeviceList({
                   size="XS"
                   theme="danger"
                   LeadingIcon={LuTrash2}
-                  onClick={() => onDeleteDevice(index)}
+                  onClick={() => handleDelete(index)}
                   aria-label={m.wake_on_lan_device_list_delete_device()}
                 />
               </div>
@@ -63,6 +81,22 @@ export default function DeviceList({
           ))}
         </div>
       </Card>
+      {deleteIndex !== null && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+          <Card className="p-6 w-full max-w-xs animate-fadeIn">
+            <h3 className="text-lg font-semibold mb-2 text-slate-900 dark:text-slate-100">
+              {m.wake_on_lan_device_list_delete_device()}
+            </h3>
+            <p className="text-sm mb-4 text-slate-700 dark:text-slate-300">
+                {m.wake_on_lan_device_list_confirm_delete_message({ name: storedDevices[deleteIndex]?.name || "" })}
+            </p>
+            <div className="flex justify-end space-x-2">
+              <Button size="SM" theme="blank" text={m.cancel()} onClick={cancelDelete} />
+              <Button size="SM" theme="danger" text={m.delete()} onClick={confirmDelete} />
+            </div>
+          </Card>
+        </div>
+      )}
       <div
         className="flex animate-fadeIn opacity-0 items-center justify-end space-x-2"
         style={{