feat(shop): добавление/редактирование товара в модальном окне

Инлайн-панель формы внизу страницы заменена на модалку через LS.modal:
- shopAdminCreateItem/EditItem открывают окно openItemModal (create/edit)
- валидация: обязательное название + проверка JSON в поле «Данные»
- блокировка кнопки на время сохранения, ошибки через m.setError
- удалены инлайн-форма из admin.html и неактуальные
  shopAdminSaveItem/shopAdminCancelForm/showShopForm + стейт

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/admin.html

@@ -1337,56 +1337,6 @@
           <tbody id="shop-items-body"><tr><td colspan="7"><div class="spinner"></div></td></tr></tbody>
         </table>
       </div>
-
-      <div class="adm-panel" id="shop-item-form" style="display:none">
-        <div class="adm-panel-title" id="shop-form-title">Добавить товар</div>
-        <div class="adm-form-row">
-          <div class="adm-form-group" style="flex:1">
-            <label>Название</label>
-            <input type="text" id="shop-f-name" placeholder="Название товара" />
-          </div>
-          <div class="adm-form-group" style="flex:1">
-            <label>Тип</label>
-            <select id="shop-f-type">
-              <option value="frame">Рамка</option>
-              <option value="title">Титул</option>
-              <option value="background">Фон</option>
-              <option value="effect">Эффект</option>
-            </select>
-          </div>
-          <div class="adm-form-group" style="width:100px">
-            <label>Цена</label>
-            <input type="number" id="shop-f-price" min="0" value="100" />
-          </div>
-        </div>
-        <div class="adm-form-row">
-          <div class="adm-form-group" style="flex:1">
-            <label>Описание</label>
-            <textarea id="shop-f-desc" rows="2" placeholder="Описание товара"></textarea>
-          </div>
-        </div>
-        <div class="adm-form-row">
-          <div class="adm-form-group" style="flex:1">
-            <label>Иконка (emoji/код)</label>
-            <input type="text" id="shop-f-icon" placeholder="SVG-код или эмодзи" />
-          </div>
-          <div class="adm-form-group" style="flex:1">
-            <label>Данные (JSON)</label>
-            <input type="text" id="shop-f-data" placeholder='{"key":"value"}' />
-          </div>
-          <div class="adm-form-group">
-            <label>Активен</label>
-            <label class="adm-toggle">
-              <input type="checkbox" id="shop-f-active" checked />
-              <span class="track"></span><span class="thumb"></span>
-            </label>
-          </div>
-        </div>
-        <div style="display:flex;gap:10px">
-          <button class="adm-btn adm-btn-primary" onclick="shopAdminSaveItem()">Сохранить</button>
-          <button class="adm-btn" style="background:var(--border-h);color:var(--text-3)" onclick="shopAdminCancelForm()">Отмена</button>
-        </div>
-      </div>
     </div>
 
     <!-- ── Геймификация ── -->

frontend/js/admin/sections/shop.js

@@ -4,8 +4,6 @@
   'use strict';
   let inited = false;
   let _shopItems = [];
-  let _shopEditId = null;
-  let _shopSaving = false;
 
   async function load() {
     try {
@@ -67,73 +65,120 @@
     if (window.lucide) lucide.createIcons();
   }
 
-  function showShopForm() {
+  const TYPE_OPTIONS = [
-    const form = document.getElementById('shop-item-form');
+    { v: 'frame',      l: 'Рамка'  },
-    form.style.display = '';
+    { v: 'title',      l: 'Титул'  },
-    form.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    { v: 'background', l: 'Фон'    },
-    document.getElementById('shop-f-name').focus();
+    { v: 'effect',     l: 'Эффект' },
-  }
+  ];
 
-  function shopAdminCreateItem() {
+  /* Open the add/edit item modal. item = null → create, object → edit. */
-    _shopEditId = null;
+  function openItemModal(item) {
-    document.getElementById('shop-form-title').textContent = 'Добавить товар';
+    const isEdit = !!item;
-    document.getElementById('shop-f-name').value = '';
+    const dataStr = item && item.data
-    document.getElementById('shop-f-type').value = 'frame';
+      ? (typeof item.data === 'string' ? item.data : JSON.stringify(item.data))
-    document.getElementById('shop-f-price').value = '100';
+      : '';
-    document.getElementById('shop-f-desc').value = '';
-    document.getElementById('shop-f-icon').value = '';
-    document.getElementById('shop-f-data').value = '';
-    document.getElementById('shop-f-active').checked = true;
-    showShopForm();
-  }
 
-  function shopAdminEditItem(id) {
+    const body = document.createElement('div');
-    const it = _shopItems.find(i => i.id === id);
+    body.innerHTML = `
-    if (!it) return;
+      <div class="adm-form-row">
-    _shopEditId = id;
+        <div class="adm-form-group" style="flex:1;min-width:160px">
-    document.getElementById('shop-form-title').textContent = 'Редактировать товар #' + id;
+          <label>Название</label>
-    document.getElementById('shop-f-name').value = it.name || '';
+          <input type="text" id="shop-f-name" placeholder="Название товара" />
-    document.getElementById('shop-f-type').value = it.type || 'frame';
+        </div>
-    document.getElementById('shop-f-price').value = it.price ?? 100;
+        <div class="adm-form-group" style="flex:1;min-width:120px">
-    document.getElementById('shop-f-desc').value = it.description || '';
+          <label>Тип</label>
-    document.getElementById('shop-f-icon').value = it.icon || '';
+          <select id="shop-f-type">
-    document.getElementById('shop-f-data').value = it.data ? (typeof it.data === 'string' ? it.data : JSON.stringify(it.data)) : '';
+            ${TYPE_OPTIONS.map(o => `<option value="${o.v}">${o.l}</option>`).join('')}
-    document.getElementById('shop-f-active').checked = !!it.is_active;
+          </select>
-    showShopForm();
+        </div>
-  }
+        <div class="adm-form-group" style="width:96px">
+          <label>Цена</label>
+          <input type="number" id="shop-f-price" min="0" value="100" />
+        </div>
+      </div>
+      <div class="adm-form-row">
+        <div class="adm-form-group" style="flex:1">
+          <label>Описание</label>
+          <textarea id="shop-f-desc" rows="2" placeholder="Описание товара"></textarea>
+        </div>
+      </div>
+      <div class="adm-form-row" style="margin-bottom:0">
+        <div class="adm-form-group" style="flex:1;min-width:140px">
+          <label>Иконка (emoji/код)</label>
+          <input type="text" id="shop-f-icon" placeholder="SVG-код или эмодзи" />
+        </div>
+        <div class="adm-form-group" style="flex:1;min-width:140px">
+          <label>Данные (JSON)</label>
+          <input type="text" id="shop-f-data" placeholder='{"key":"value"}' />
+        </div>
+        <div class="adm-form-group">
+          <label>Активен</label>
+          <label class="adm-toggle">
+            <input type="checkbox" id="shop-f-active" checked />
+            <span class="track"></span><span class="thumb"></span>
+          </label>
+        </div>
+      </div>`;
 
-  function shopAdminCancelForm() {
+    const $ = sel => body.querySelector(sel);
-    document.getElementById('shop-item-form').style.display = 'none';
+    $('#shop-f-name').value     = item?.name || '';
-    _shopEditId = null;
+    $('#shop-f-type').value     = item?.type || 'frame';
-  }
+    $('#shop-f-price').value    = item?.price ?? 100;
+    $('#shop-f-desc').value     = item?.description || '';
+    $('#shop-f-icon').value     = item?.icon || '';
+    $('#shop-f-data').value     = dataStr;
+    $('#shop-f-active').checked  = item ? !!item.is_active : true;
 
-  async function shopAdminSaveItem() {
+    let saving = false;
-    if (_shopSaving) return;
+    const m = LS.modal({
-    _shopSaving = true;
+      title: isEdit ? ('Редактировать товар #' + item.id) : 'Добавить товар',
-    const data = {
+      content: body,
-      name: document.getElementById('shop-f-name').value.trim(),
+      size: 'md',
-      type: document.getElementById('shop-f-type').value,
+      actions: [
-      price: parseInt(document.getElementById('shop-f-price').value) || 0,
+        { label: 'Отмена', onClick: () => m.close() },
-      description: document.getElementById('shop-f-desc').value.trim(),
+        { label: 'Сохранить', primary: true, id: 'shop-save-btn', onClick: async () => {
-      icon: document.getElementById('shop-f-icon').value.trim(),
+          if (saving) return;
-      data: document.getElementById('shop-f-data').value.trim() || null,
+          const payload = {
-      is_active: document.getElementById('shop-f-active').checked ? 1 : 0
+            name: $('#shop-f-name').value.trim(),
+            type: $('#shop-f-type').value,
+            price: parseInt($('#shop-f-price').value, 10) || 0,
+            description: $('#shop-f-desc').value.trim(),
+            icon: $('#shop-f-icon').value.trim(),
+            data: $('#shop-f-data').value.trim() || null,
+            is_active: $('#shop-f-active').checked ? 1 : 0,
           };
-    if (!data.name) { LS.toast('Введите название', 'error'); _shopSaving = false; return; }
+          if (!payload.name) { m.setError('Введите название'); return; }
-    try {
+          if (payload.data) {
-      if (_shopEditId) {
+            try { JSON.parse(payload.data); }
-        await LS.adminShopUpdateItem(_shopEditId, data);
+            catch { m.setError('Поле «Данные» — некорректный JSON'); return; }
-        LS.toast('Товар обновлён', 'success');
-      } else {
-        await LS.adminShopCreateItem(data);
-        LS.toast('Товар создан', 'success');
           }
-      shopAdminCancelForm();
+          saving = true;
+          const btn = document.getElementById('shop-save-btn');
+          if (btn) { btn.disabled = true; btn.textContent = 'Сохранение…'; }
+          try {
+            if (isEdit) { await LS.adminShopUpdateItem(item.id, payload); LS.toast('Товар обновлён', 'success'); }
+            else        { await LS.adminShopCreateItem(payload);          LS.toast('Товар создан', 'success'); }
+            m.close();
             inited = false;
             await load();
             inited = true;
-    } catch(e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+          } catch(e) {
-    finally { _shopSaving = false; }
+            m.setError('Ошибка: ' + e.message);
+            saving = false;
+            if (btn) { btn.disabled = false; btn.textContent = 'Сохранить'; }
+          }
+        } },
+      ],
+    });
+    setTimeout(() => $('#shop-f-name')?.focus(), 80);
+  }
+
+  function shopAdminCreateItem() { openItemModal(null); }
+
+  function shopAdminEditItem(id) {
+    const it = _shopItems.find(i => i.id === id);
+    if (it) openItemModal(it);
   }
 
   async function shopAdminDeleteItem(id) {
@@ -157,8 +202,6 @@
   // Expose onclick handlers
   window.shopAdminCreateItem = shopAdminCreateItem;
   window.shopAdminEditItem = shopAdminEditItem;
-  window.shopAdminCancelForm = shopAdminCancelForm;
-  window.shopAdminSaveItem = shopAdminSaveItem;
   window.shopAdminDeleteItem = shopAdminDeleteItem;
   window.shopAdminToggleActive = shopAdminToggleActive;