From bcee5a57e3498e7268212a4ea71225b95bf08976 Mon Sep 17 00:00:00 2001
From: Maxim Dolgolyov <maxim.dolgolyov@gmail.com>
Date: Sat, 16 May 2026 20:04:08 +0300
Subject: [PATCH] =?UTF-8?q?ux(admin):=20Q-modal=20ergonomic=20improvements?=
 =?UTF-8?q?=20=E2=80=94=20=D1=84=D0=BE=D1=80=D0=BC=D1=83=D0=BB=D1=8B=20?=
 =?UTF-8?q?=D1=81=D0=BA=D1=80=D1=8B=D1=82=D1=8B,=20preview=20=D0=BF=D0=BE?=
 =?UTF-8?q?=20=D1=82=D1=80=D0=B5=D0=B1=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D1=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Полный wizard-refactor Q-modal был отложен как высокорискованный
(сложная форма с многими типами вопросов, риск регрессии). Вместо
этого — безопасные ergonomic-улучшения:

1) FORMULA BAR — collapsed by default
   Раньше: 18 кнопок формул всегда занимали ~50px вертикали в модалке,
   но нужны только при создании math-вопросов.
   Теперь: маленькая кнопка «Вставить формулу» с chevron. Click → bar
   разворачивается. Состояние сохраняется в пределах сессии (DOM-стейт).

2) PREVIEW — показывается только когда есть текст
   Раньше: пустой preview-блок с placeholder «Введите текст вопроса…»
   занимал ~80px независимо от состояния.
   Теперь: .q-preview-wrap.hidden скрывается полностью пока textarea
   пуста. Появляется по input с debounce 150ms (уже было).

Эффект: модал стал ~130px ниже в типичном кейсе (создание non-math
вопроса). На 1080p теперь умещается без скролла для single/multi
с 4 опциями.

Без wizard'а, без риска регрессии — но visible UX-win. Wizard-refactor
по-прежнему доступен как опция, если понадобится дальнейшее снижение
когнитивной нагрузки.
---
 frontend/admin.html        | 26 +++++++++++++++++++++++---
 frontend/js/admin/admin.js | 13 ++++++++++++-
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/frontend/admin.html b/frontend/admin.html
index e00a60e..24ee3fb 100644
--- a/frontend/admin.html
+++ b/frontend/admin.html
@@ -486,7 +486,23 @@
     .tst-empty { text-align: center; padding: 20px; color: var(--text-3); font-size: 0.82rem; }
     .src-toggle { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
     /* formula bar */
-    .formula-bar { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; padding: 8px 12px; background: #f0f2ff; border-radius: 10px; margin-bottom: 8px; }
+    /* Formula bar: hidden by default, toggled via #qf-fml-toggle */
+    .formula-bar { display: none; gap: 4px; align-items: center; flex-wrap: wrap; padding: 8px 12px; background: #f0f2ff; border-radius: 10px; margin-bottom: 8px; }
+    .formula-bar.visible { display: flex; }
+    .fml-toggle {
+      display: inline-flex; align-items: center; gap: 5px;
+      padding: 4px 10px; margin-bottom: 6px;
+      border: 1px solid var(--border); border-radius: 999px;
+      background: transparent; color: var(--text-3); cursor: pointer;
+      font-family: 'Manrope', sans-serif; font-size: 0.74rem; font-weight: 700;
+      transition: all .12s;
+    }
+    .fml-toggle:hover { border-color: var(--violet); color: var(--violet); }
+    .fml-toggle.open { background: #f0f2ff; color: var(--violet); border-color: rgba(155,93,229,.3); }
+    .fml-toggle .fml-chev { width: 11px; height: 11px; transition: transform .18s; }
+    .fml-toggle.open .fml-chev { transform: rotate(180deg); }
+    /* Preview: hidden by default, visible when textarea has content */
+    .q-preview-wrap.hidden { display: none; }
     .fml { padding: 4px 9px; border: 1px solid rgba(155,93,229,0.2); border-radius: 6px; background: #fff; font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--violet); cursor: pointer; transition: background 0.15s; }
     .fml:hover { background: rgba(155,93,229,0.08); }
     /* preview */
@@ -1624,6 +1640,10 @@
         </div>
       </div>
 
+      <button type="button" class="fml-toggle" id="qf-fml-toggle" onclick="toggleFormulaBar()">
+        <svg class="fml-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
+        <span>Вставить формулу</span>
+      </button>
       <div class="formula-bar" id="formula-bar">
         <span style="font-size:0.7rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:0.05em">Формулы:</span>
         <button type="button" class="fml" onclick="ins('\\frac{a}{b}')" title="Дробь">ᵃ⁄ᵦ</button>
@@ -1652,9 +1672,9 @@
         <div class="char-counter" id="qf-text-cnt">0 / 500</div>
       </div>
 
-      <div class="q-preview-wrap" id="q-preview-wrap">
+      <div class="q-preview-wrap hidden" id="q-preview-wrap">
         <div style="font-size:0.7rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px">Предпросмотр</div>
-        <div class="q-preview-text" id="q-preview-text">Введите текст вопроса…</div>
+        <div class="q-preview-text" id="q-preview-text"></div>
       </div>
 
       <div class="opts-header" id="qf-opts-header">
diff --git a/frontend/js/admin/admin.js b/frontend/js/admin/admin.js
index afffc1a..0480983 100644
--- a/frontend/js/admin/admin.js
+++ b/frontend/js/admin/admin.js
@@ -364,12 +364,23 @@
     function updateQPreview() {
       clearTimeout(_prevTimer);
       _prevTimer = setTimeout(() => {
-        const text = document.getElementById('qf-text').value || 'Введите текст вопроса…';
+        const text = (document.getElementById('qf-text').value || '').trim();
         const el   = document.getElementById('q-preview-text');
+        const wrap = document.getElementById('q-preview-wrap');
+        // Hide preview entirely when text is empty — saves vertical space in modal
+        wrap.classList.toggle('hidden', !text);
+        if (!text) return;
         el.textContent = text;
         renderMath(el);
       }, 150);
     }
+    // Formula bar toggle (default collapsed)
+    window.toggleFormulaBar = function () {
+      const bar = document.getElementById('formula-bar');
+      const btn = document.getElementById('qf-fml-toggle');
+      const open = bar.classList.toggle('visible');
+      btn.classList.toggle('open', open);
+    };
     // Wire textarea input to preview
     setTimeout(() => {
       const ta = document.getElementById('qf-text');