From 66f7fdc1a82312a816cbc556094a65fb9be12783 Mon Sep 17 00:00:00 2001
From: dev <dev@local>
Date: Thu, 17 Sep 2026 12:00:19 +0300
Subject: [PATCH] refactor(settings): AI profile add/edit moved into a modal
 dialog (overlay click + Esc to close)

---
 public/js/settings.js | 14 ++++++++---
 public/settings.html  | 57 ++++++++++++++++++++++---------------------
 2 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/public/js/settings.js b/public/js/settings.js
index 86417cd..d18afe9 100644
--- a/public/js/settings.js
+++ b/public/js/settings.js
@@ -180,7 +180,8 @@ let aiProfileEditingId = null;
 
 function openAiProfileForm(profile) {
   aiProfileEditingId = profile ? profile.id : null;
-  document.getElementById('aiProfileForm').style.display = 'block';
+  document.getElementById('aiProfileModalTitle').textContent = profile ? 'Изменить профиль ИИ' : 'Добавить профиль ИИ';
+  document.getElementById('aiProfileModal').classList.add('open');
   document.getElementById('aiProfileName').value = profile ? profile.name : '';
   document.getElementById('aiProfileModel').value = profile ? profile.model : '';
   document.getElementById('aiProfileBaseUrl').value = profile ? profile.base_url : '';
@@ -191,7 +192,7 @@ function openAiProfileForm(profile) {
 
 function closeAiProfileForm() {
   aiProfileEditingId = null;
-  document.getElementById('aiProfileForm').style.display = 'none';
+  document.getElementById('aiProfileModal').classList.remove('open');
 }
 
 function aiProfileFormData() {
@@ -218,18 +219,21 @@ async function loadAiQueue() {
 
 async function saveAiProfile() {
   const body = aiProfileFormData();
+  const st = document.getElementById('aiProfileTestStatus');
+  st.innerHTML = '<span class="spinner dark"></span> Сохранение...';
   const res = await fetch(aiProfileEditingId ? `${API}/api/ai/profiles/${aiProfileEditingId}` : `${API}/api/ai/profiles`, {
     method: aiProfileEditingId ? 'PUT' : 'POST',
     headers: hdrJson(),
     body: JSON.stringify(body),
   });
   if (res.ok) {
+    st.textContent = '';
     showToast(aiProfileEditingId ? 'Профиль обновлён' : 'Профиль добавлен');
     closeAiProfileForm();
     loadAiProfiles();
   } else {
     const err = await res.json().catch(() => ({}));
-    alert(err.error || 'Ошибка сохранения');
+    st.innerHTML = `<span style="color:#ef4444;font-weight:600">${esc(err.error || 'Ошибка сохранения')}</span>`;
   }
 }
 
@@ -271,6 +275,10 @@ document.getElementById('aiProfileAddBtn').addEventListener('click', () => openA
 document.getElementById('aiProfileSaveBtn').addEventListener('click', saveAiProfile);
 document.getElementById('aiProfileTestBtn').addEventListener('click', testAiProfile);
 document.getElementById('aiProfileCancelBtn').addEventListener('click', closeAiProfileForm);
+document.getElementById('aiProfileModal').addEventListener('click', e => { if (e.target === e.currentTarget) closeAiProfileForm(); });
+document.addEventListener('keydown', e => {
+  if (e.key === 'Escape' && document.getElementById('aiProfileModal').classList.contains('open')) closeAiProfileForm();
+});
 document.getElementById('aiActiveProfile').addEventListener('change', e => activateAiProfile(e.target.value));
 document.getElementById('aiProfilesList').addEventListener('click', e => {
   const del = e.target.closest('[data-del-profile]');
diff --git a/public/settings.html b/public/settings.html
index 306370c..de8e8eb 100644
--- a/public/settings.html
+++ b/public/settings.html
@@ -147,34 +147,6 @@
           <button class="btn-primary ghost" id="aiProfileAddBtn" type="button"><i data-lucide="plus"></i> Добавить профиль</button>
         </div>
         <div id="aiProfilesList" class="ai-profiles-list"></div>
-        <div id="aiProfileForm" style="display:none;margin-top:14px;border:1px solid var(--border);border-radius:var(--radius);padding:16px">
-          <div class="settings-row">
-            <div class="settings-field">
-              <label for="aiProfileName">Название профиля</label>
-              <input type="text" id="aiProfileName" class="settings-input" placeholder="Например: OpenRouter GPT-4o-mini">
-            </div>
-            <div class="settings-field">
-              <label for="aiProfileModel">Модель</label>
-              <input type="text" id="aiProfileModel" class="settings-input" placeholder="openai/gpt-4o-mini">
-            </div>
-          </div>
-          <div class="settings-row">
-            <div class="settings-field" style="flex:1">
-              <label for="aiProfileBaseUrl">Base URL (OpenAI-совместимый API)</label>
-              <input type="text" id="aiProfileBaseUrl" class="settings-input" placeholder="https://openrouter.ai/api/v1">
-            </div>
-            <div class="settings-field">
-              <label for="aiProfileApiKey">API-ключ (если требуется)</label>
-              <input type="password" id="aiProfileApiKey" class="settings-input" placeholder="sk-...">
-            </div>
-          </div>
-          <div style="display:flex;gap:10px;margin-top:12px;flex-wrap:wrap">
-            <button class="btn-primary" id="aiProfileSaveBtn" type="button">Сохранить профиль</button>
-            <button class="btn-primary ghost" id="aiProfileTestBtn" type="button"><i data-lucide="plug-zap"></i> Проверить</button>
-            <button class="btn-primary ghost" id="aiProfileCancelBtn" type="button">Отмена</button>
-            <span id="aiProfileTestStatus" style="font-size:.85rem;align-self:center"></span>
-          </div>
-        </div>
       </div>
 
       <div class="settings-card">
@@ -208,6 +180,35 @@
   <span class="hint" id="saveHint" style="display:inline-flex;align-items:center;gap:6px"><i data-lucide="triangle-alert"></i> Есть несохранённые изменения</span>
   <button class="btn-primary" id="saveBtn" type="button">Сохранить изменения</button>
 </div>
+
+<div class="modal-overlay" id="aiProfileModal">
+  <div class="edit-modal" style="max-width:560px">
+    <h3 id="aiProfileModalTitle">Добавить профиль ИИ</h3>
+    <div class="settings-field">
+      <label for="aiProfileName">Название профиля <span style="color:#ef4444">*</span></label>
+      <input type="text" id="aiProfileName" class="settings-input" placeholder="Например: OpenRouter GPT-4o-mini">
+    </div>
+    <div class="settings-field">
+      <label for="aiProfileModel">Модель <span style="color:#ef4444">*</span></label>
+      <input type="text" id="aiProfileModel" class="settings-input" placeholder="openai/gpt-4o-mini">
+    </div>
+    <div class="settings-field">
+      <label for="aiProfileBaseUrl">Base URL (OpenAI-совместимый API) <span style="color:#ef4444">*</span></label>
+      <input type="text" id="aiProfileBaseUrl" class="settings-input" placeholder="https://openrouter.ai/api/v1">
+    </div>
+    <div class="settings-field">
+      <label for="aiProfileApiKey">API-ключ (если требуется)</label>
+      <input type="password" id="aiProfileApiKey" class="settings-input" placeholder="sk-...">
+    </div>
+    <span id="aiProfileTestStatus" style="font-size:.85rem;min-height:1.2em"></span>
+    <div class="actions" style="flex-wrap:wrap">
+      <button class="btn-primary" id="aiProfileSaveBtn" type="button">Сохранить</button>
+      <button class="btn-primary ghost" id="aiProfileTestBtn" type="button"><i data-lucide="plug-zap"></i> Проверить</button>
+      <button class="btn-primary ghost" id="aiProfileCancelBtn" type="button">Отмена</button>
+    </div>
+  </div>
+</div>
+
 <div class="toast" id="toast"></div>
 <script src="vendor/lucide.min.js"></script>
 <script src="admin.js"></script>