From dcbc602d88f0f9251edc0369ec6ec6904568ce07 Mon Sep 17 00:00:00 2001
From: iRedTea <red__tea@outlook.com>
Date: Sun, 18 Oct 2026 11:16:08 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20=D0=9D=D0=B0=D1=81=D1=82=D1=80=D0=BE?=
 =?UTF-8?q?=D0=B9=D0=BA=D0=B8=20=E2=80=BA=20=D0=98=D0=98-=D0=B0=D1=81?=
 =?UTF-8?q?=D1=81=D0=B8=D1=81=D1=82=D0=B5=D0=BD=D1=82=20-=20each=20model?=
 =?UTF-8?q?=20and=20the=20web=20search=20folded=20to=20a=20line=20(name,?=
 =?UTF-8?q?=20kind=20and=20model),=20opened=20when=20wanted;=20a=20new=20m?=
 =?UTF-8?q?odel=20opens,=20its=20line=20follows=20its=20fields?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 internal/server/web/static/app.css          | 11 +++++++++--
 internal/server/web/static/pages.js         | 13 +++++++++++++
 internal/server/web/templates/settings.html | 15 +++++++++------
 3 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/internal/server/web/static/app.css b/internal/server/web/static/app.css
index df77371..d8eae77 100644
--- a/internal/server/web/static/app.css
+++ b/internal/server/web/static/app.css
@@ -1126,8 +1126,15 @@ body.no-motion *, body.no-motion *::before, body.no-motion *::after, body.no-mot
 .ai-form .ai-sub { margin:10px 0 0; font-size:15px; }
 /* Настройки: the models, a card each. */
 .ai-models { display:grid; gap:10px; }
-.ai-model { display:grid; gap:10px; min-width:0; margin:0; padding:12px; border:1px solid var(--border); border-radius:10px; }
-.ai-model-head { display:flex; align-items:flex-end; gap:8px; margin:12px 0 4px; }
+.ai-model, .ai-search { min-width:0; margin:0; border:1px solid var(--border); border-radius:10px; }
+/* Folded to a line: its name, and its kind and model quieter. */
+.ai-model > summary.ai-model-sum, .ai-search > summary.ai-model-sum { min-width:0; padding:11px 12px; border-radius:10px; }
+.ai-model > summary.ai-model-sum:hover, .ai-search > summary.ai-model-sum:hover { background:#151a21; }
+.ai-model-title { flex:none; color:var(--text); font-size:14px; font-weight:550; }
+.ai-model-sub { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:12.5px; }
+.ai-model-sub:not(:empty)::before { content:'· '; }
+.ai-model-body { display:grid; gap:10px; min-width:0; padding:0 12px 12px; }
+.ai-model-head { display:flex; align-items:flex-end; gap:8px; margin:2px 0 4px; }
 .ai-model-head .ai-model-name { flex:1; min-width:0; margin:0; }
 .ai-model-head .ai-model-short { flex:none; width:96px; margin:0; }
 .ai-model-del { flex:none; height:38px; }
diff --git a/internal/server/web/static/pages.js b/internal/server/web/static/pages.js
index a2d45ec..65584a3 100644
--- a/internal/server/web/static/pages.js
+++ b/internal/server/web/static/pages.js
@@ -36,6 +36,19 @@
           const del = ev.target.closest('.ai-model-del');
           if (del && list.children.length > 1) del.closest('.ai-model').remove();
         });
+        // A folded card's line follows its fields: the name, the kind and model.
+        list.addEventListener('input', ev => {
+          const card = ev.target.closest('.ai-model');
+          if (!card) return;
+          const v = n => card.querySelector('[name=' + n + ']').value.trim();
+          card.querySelector('.ai-model-title').textContent = v('m_name') || 'Модель';
+          card.querySelector('.ai-model-sub').textContent = v('m_type') + (v('m_model') ? ' · ' + v('m_model') : '');
+        });
+        // A field to fix in a folded card: the card opens to show it.
+        list.closest('form').addEventListener('invalid', ev => {
+          const d = ev.target.closest('details');
+          if (d) d.open = true;
+        }, true);
       }
     }
   });
diff --git a/internal/server/web/templates/settings.html b/internal/server/web/templates/settings.html
index 7d25187..20c400c 100644
--- a/internal/server/web/templates/settings.html
+++ b/internal/server/web/templates/settings.html
@@ -154,7 +154,8 @@
       <input type="hidden" name="csrf" value="{{.CSRF}}">
       <p class="muted" style="margin:0">Моделей может быть несколько - в чате появится выбор; первая - по умолчанию.</p>
       <div class="ai-models">
-{{range .AIModels}}      <fieldset class="ai-model">
+{{range .AIModels}}      <details class="ai-model"><summary class="ai-model-sum"><span class="ai-model-title">{{if .Name}}{{.Name}}{{else}}Модель{{end}}</span><span class="ai-model-sub">{{.Type}}{{if .Model}} · {{.Model}}{{end}}</span></summary>
+      <div class="ai-model-body">
         <input type="hidden" name="m_id" value="{{.ID}}">
         <div class="ai-model-head"><label class="ai-model-name">Название в чате<input type="text" name="m_name" value="{{.Name}}" placeholder="например, Claude"></label>
           <label class="ai-model-short">Коротко<input type="text" name="m_short" value="{{.Short}}" maxlength="12" placeholder="до 12" title="Название на кнопке модели в чате, до 12 символов"></label>
@@ -168,10 +169,11 @@
         <label>Модель<input type="text" name="m_model" value="{{.Model}}" placeholder="для OpenAI и Anthropic"></label>
         <label>Ключ<span class="keybox"><input type="password" name="m_key" value="{{.Key}}" placeholder="не задан" autocomplete="off" spellcheck="false">
           <button type="button" class="btn ghost small icon sq" title="Показать" aria-label="Показать ключ" onclick="var i=this.previousElementSibling;i.type=i.type==='password'?'text':'password'"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg></button></span></label>
-      </fieldset>
+      </div></details>
 {{end}}      </div>
       <template class="ai-model-new">
-      <fieldset class="ai-model">
+      <details class="ai-model" open><summary class="ai-model-sum"><span class="ai-model-title">Новая модель</span><span class="ai-model-sub"></span></summary>
+      <div class="ai-model-body">
         <input type="hidden" name="m_id" value="">
         <div class="ai-model-head"><label class="ai-model-name">Название в чате<input type="text" name="m_name" value="" placeholder="например, Claude"></label>
           <label class="ai-model-short">Коротко<input type="text" name="m_short" value="" maxlength="12" placeholder="до 12" title="Название на кнопке модели в чате, до 12 символов"></label>
@@ -185,11 +187,11 @@
         <label>Модель<input type="text" name="m_model" value="" placeholder="для OpenAI и Anthropic"></label>
         <label>Ключ<span class="keybox"><input type="password" name="m_key" value="" placeholder="не задан" autocomplete="off" spellcheck="false">
           <button type="button" class="btn ghost small icon sq" title="Показать" aria-label="Показать ключ" onclick="var i=this.previousElementSibling;i.type=i.type==='password'?'text':'password'"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg></button></span></label>
-      </fieldset>
+      </div></details>
       </template>
       <div><button type="button" class="btn ghost small ai-model-add">+ Добавить модель</button></div>
-      <h3 class="ai-sub">Поиск в интернете</h3>
-      <p class="muted" style="margin:0">Запасной - DuckDuckGo.</p>
+      <details class="ai-search"><summary class="ai-model-sum"><span class="ai-model-title">Поиск в интернете</span><span class="ai-model-sub">Запасной - DuckDuckGo</span></summary>
+      <div class="ai-model-body">
       <label>Поисковик<select name="ai_search" onchange="this.form.dataset.search = this.value">
         <option value=""{{if eq .Search.Engine ""}} selected{{end}}>DuckDuckGo - бесплатно, без настройки</option>
         <option value="searxng"{{if eq .Search.Engine "searxng"}} selected{{end}}>SearXNG - свой сервер</option>
@@ -199,6 +201,7 @@
       <label class="s-url">Адрес SearXNG<input type="url" name="ai_search_url" value="{{.Search.URL}}" placeholder="http://127.0.0.1:8888 (в settings.yml: search.formats - json)"></label>
       <label class="s-key">Ключ поисковика<span class="keybox"><input type="password" name="ai_search_key" value="{{.Search.Key}}" placeholder="не задан" autocomplete="off" spellcheck="false">
         <button type="button" class="btn ghost small icon sq" title="Показать" aria-label="Показать ключ" onclick="var i=this.previousElementSibling;i.type=i.type==='password'?'text':'password'"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg></button></span></label>
+      </div></details>
       <div><button type="submit">Сохранить</button></div>
     </form>
   </div>