Improve device list view

admin_ui/index.html

@@ -166,6 +166,22 @@
       }
     });
 
+    // Plain-link confirmation prompt. HTMX has hx-confirm for its own
+    // requests; this is the equivalent for raw `<a href>` anchors that
+    // can't go through HTMX (e.g. "Connect (web client)", which opens
+    // a new tab and triggers a popup on the controlled machine — easy
+    // to fire by accident from the row action menu). Use:
+    //
+    //   <a href="..." data-confirm="..." onclick="return confirmFromDataAttr(this)">
+    //
+    // The message lives in the data-attribute (only HTML-escaped, no
+    // JS-string escaping) which keeps the server-side renderer simple.
+    function confirmFromDataAttr(el) {
+      const msg = el && el.dataset ? el.dataset.confirm : '';
+      return !msg || window.confirm(msg);
+    }
+    window.confirmFromDataAttr = confirmFromDataAttr;
+
     // Close any open per-row action popover when a click happens outside it.
     // The action dropdowns are <details class="... relative"> with an
     // absolutely-positioned panel; the deploy page uses <details> too but

src/api/admin/i18n.rs

@@ -871,6 +871,13 @@ pub fn t(lang: Lang, key: &str) -> &'static str {
             "Deconectați toate sesiunile active de pe {0}?",
             "¿Desconectar todas las sesiones activas en {0}?",
         ),
+        "devices.confirm_connect" => (
+            "Open a remote-support session to {0}? The user on that device will see an approval prompt.",
+            "Remote-Support-Sitzung zu {0} öffnen? Der Benutzer auf diesem Gerät erhält eine Bestätigungsaufforderung.",
+            "Ouvrir une session d'assistance à distance vers {0} ? L'utilisateur sur cet appareil verra une invite d'approbation.",
+            "Deschideți o sesiune de asistență la distanță către {0}? Utilizatorul de pe acel dispozitiv va vedea o solicitare de aprobare.",
+            "¿Abrir una sesión de asistencia remota a {0}? El usuario de ese dispositivo verá una solicitud de aprobación.",
+        ),
         "devices.delete_device" => (
             "Delete device",
             "Gerät löschen",

src/api/admin/pages/devices.rs

@@ -1069,7 +1069,9 @@ fn render_device_row(
       <summary class="cursor-pointer list-none text-xs text-slate-400 hover:text-slate-200 select-none">···</summary>
       <div class="absolute right-2 mt-1 z-10 w-56 bg-slate-900 border border-slate-700 rounded shadow-lg p-2 space-y-1 text-left">
         <a class="block w-full text-left px-2 py-1 text-xs text-sky-300 hover:bg-sky-900/40 rounded"
-          href="/admin/connect/{id}" target="_blank" rel="noopener">
+          href="/admin/connect/{id}" target="_blank" rel="noopener"
+          data-confirm="{confirm_connect}"
+          onclick="return confirmFromDataAttr(this)">
           {connect_web}
         </a>
         <button class="w-full text-left px-2 py-1 text-xs hover:bg-slate-800 rounded"
@@ -1114,6 +1116,7 @@ fn render_device_row(
         q_param = q_param,
         toggle_managed_item = toggle_managed_item,
         connect_web = t(lang, "devices.connect_web"),
+        confirm_connect = html_escape(&tf1(lang, "devices.confirm_connect", &d.id)),
         details = t(lang, "devices.details"),
         run_command = t(lang, "devices.run_command"),
         confirm_disc = html_escape(&tf1(lang, "devices.confirm_disconnect", &d.id)),