From 2da649d1ae930c1a671c62d080a7304d8b4d39e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BD=D0=B4=D1=80=D0=B5=D0=B9=20=D0=91=D0=BE=D0=B1?=
 =?UTF-8?q?=D1=8B=D1=80=D0=B5=D0=B2?= <andrejbobyrev@MacBook-Pro.local>
Date: Fri, 22 May 2026 02:38:09 +0300
Subject: [PATCH] fix(keenetic): open KeenDNS edit instead of detail modal

Card-level onclick fired even when KeenDNS was clicked. Use delegated
handlers so the edit form toggles reliably and card clicks skip buttons.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 server/static/css/style.css     | 30 ++++++++++++++--
 server/static/js/app.js         | 62 ++++++++++++++++++++++++++-------
 server/templates/dashboard.html |  2 +-
 3 files changed, 78 insertions(+), 16 deletions(-)

diff --git a/server/static/css/style.css b/server/static/css/style.css
index d47f2f2..2074638 100644
--- a/server/static/css/style.css
+++ b/server/static/css/style.css
@@ -435,12 +435,36 @@ main {
 
 .keenetic-url-edit {
     margin-top: 10px;
-    padding-top: 10px;
-    border-top: 1px solid var(--border);
+    padding: 12px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: color-mix(in srgb, var(--accent) 8%, var(--card-bg));
+}
+
+.keenetic-url-edit.is-open {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
+}
+
+.keenetic-url-edit-title {
+    font-size: 13px;
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: var(--accent);
 }
 
 .keenetic-url-edit .form-group input {
-    font-size: 12px;
+    font-size: 13px;
+    width: 100%;
+}
+
+.server-card-actions .keenetic-url-btn.active {
+    border-color: var(--accent);
+    color: var(--accent);
+}
+
+.keenetic-card-open {
+    cursor: pointer;
 }
 
 .server-card-actions {
diff --git a/server/static/js/app.js b/server/static/js/app.js
index 510886a..93d2be3 100644
--- a/server/static/js/app.js
+++ b/server/static/js/app.js
@@ -40,6 +40,28 @@ document.addEventListener('click', function(e) {
         e.stopPropagation();
         e.preventDefault();
         toggleMuteDevice(bell);
+        return;
+    }
+
+    const keenDnsBtn = e.target.closest('.keenetic-url-btn');
+    if (keenDnsBtn) {
+        e.stopPropagation();
+        e.preventDefault();
+        toggleKeeneticUrlEdit(keenDnsBtn.dataset.name);
+        return;
+    }
+
+    const keenSaveBtn = e.target.closest('.keenetic-url-save');
+    if (keenSaveBtn) {
+        e.stopPropagation();
+        e.preventDefault();
+        saveKeeneticUrl(keenSaveBtn.dataset.name);
+        return;
+    }
+
+    const keenCard = e.target.closest('.server-card[data-keen]');
+    if (keenCard && !e.target.closest('.mute-bell, .server-card-actions, .keenetic-url-edit, .keenetic-links, a, button, input, label')) {
+        showKeeneticDetail(keenCard.dataset.keen);
     }
 });
 
@@ -1230,11 +1252,11 @@ function renderKeenetic() {
         const urlValue = escHtml(keeneticWebUrl(dev));
 
         return `
-            <div class="server-card ${isOnline ? 'online' : 'offline'}" data-keen="${dev.name}" onclick="showKeeneticDetail('${dev.name}')">
+            <div class="server-card ${isOnline ? 'online' : 'offline'}" data-keen="${escHtml(dev.name)}">
                 ${bellHtml('keenetic', dev.name)}
-                <div class="server-card-header">
+                <div class="server-card-header keenetic-card-open">
                     <div>
-                        <div class="name">📡 ${dev.name}</div>
+                        <div class="name">📡 ${escHtml(dev.name)}</div>
                         <div class="host">${hostParts.join(' • ')}</div>
                     </div>
                     <span class="status-badge ${isOnline ? 'online' : 'offline'}">
@@ -1262,18 +1284,19 @@ function renderKeenetic() {
                     ${uptime ? ' • ⏱ ' + uptime : ''}
                 </div>
                 ` : `<div style="padding:20px 0;text-align:center;opacity:0.5">${error ? '⚠️ ' + error : 'Нет данных — нажмите 🔄'}</div>`}
-                <div id="${urlEditId}" class="keenetic-url-edit" style="display:none" onclick="event.stopPropagation()">
+                <div id="${urlEditId}" class="keenetic-url-edit" style="display:none">
+                    <div class="keenetic-url-edit-title">✏️ Адрес KeenDNS</div>
                     <div class="form-group" style="margin-bottom:8px">
-                        <label>Адрес KeenDNS</label>
+                        <label for="${urlEditId}-input">Адрес KeenDNS</label>
                         <input type="text" id="${urlEditId}-input" value="${urlValue}" placeholder="https://example.keenetic.pro:8443">
                     </div>
-                    <button class="btn-primary" style="width:100%" onclick="saveKeeneticUrl(${JSON.stringify(dev.name)})">Сохранить</button>
+                    <button type="button" class="btn-primary keenetic-url-save" style="width:100%" data-name="${escHtml(dev.name)}">Сохранить</button>
                 </div>
                 <div class="server-card-actions">
-                    <button onclick="event.stopPropagation();toggleKeeneticUrlEdit(${JSON.stringify(dev.name)})">✏️ KeenDNS</button>
-                    <button onclick="event.stopPropagation();refreshKeenetic('${dev.name}')">🔄 Обновить</button>
-                    <button onclick="event.stopPropagation();rebootKeenetic('${dev.name}')">🔁 Reboot</button>
-                    <button class="danger" onclick="event.stopPropagation();deleteKeenetic('${dev.name}')">🗑</button>
+                    <button type="button" class="keenetic-url-btn" data-name="${escHtml(dev.name)}">✏️ KeenDNS</button>
+                    <button type="button" onclick="event.stopPropagation();refreshKeenetic(${JSON.stringify(dev.name)})">🔄 Обновить</button>
+                    <button type="button" onclick="event.stopPropagation();rebootKeenetic(${JSON.stringify(dev.name)})">🔁 Reboot</button>
+                    <button type="button" class="danger" onclick="event.stopPropagation();deleteKeenetic(${JSON.stringify(dev.name)})">🗑</button>
                 </div>
             </div>`;
     }).join('');
@@ -1555,11 +1578,26 @@ function keeneticUrlEditId(name) {
 function toggleKeeneticUrlEdit(name) {
     const block = document.getElementById(keeneticUrlEditId(name));
     if (!block) return;
-    const show = block.style.display === 'none';
+    const show = block.style.display === 'none' || !block.classList.contains('is-open');
     block.style.display = show ? 'block' : 'none';
+    block.classList.toggle('is-open', show);
+    const card = document.querySelector(`.server-card[data-keen="${CSS.escape(name)}"]`);
+    if (card) {
+        card.querySelectorAll('.keenetic-url-edit.is-open').forEach(el => {
+            if (el !== block) {
+                el.style.display = 'none';
+                el.classList.remove('is-open');
+            }
+        });
+        card.querySelector('.keenetic-url-btn')?.classList.toggle('active', show);
+    }
     if (show) {
         const input = document.getElementById(keeneticUrlEditId(name) + '-input');
-        if (input) input.focus();
+        if (input) {
+            input.focus();
+            input.select();
+        }
+        block.scrollIntoView({block: 'nearest', behavior: 'smooth'});
     }
 }
 
diff --git a/server/templates/dashboard.html b/server/templates/dashboard.html
index 887062d..3529ae7 100644
--- a/server/templates/dashboard.html
+++ b/server/templates/dashboard.html
@@ -601,6 +601,6 @@ loftliliana	https://loftliliana.netcraze.pro	1020687391" style="width:100%;font-
 
     <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js"></script>
-    <script src="/static/js/app.js?v=20260521b"></script>
+    <script src="/static/js/app.js?v=20260522a"></script>
 </body>
 </html>