feat(categories): CRUD панель тем внутри карточки категории

CategoryTopicsPanel (новый компонент):
  - GET/POST/PATCH/DELETE topics через /admin/api/blog-topics/* proxy
  - inline-добавление темы (text + priority p1-p10)
  - toggle is_used (вернуть в банк / пометить использованной)
  - редактирование через hover edit-кнопку, Enter сохраняет, Esc отменяет
  - AI-генерация N тем кнопкой 'Сгенерировать через AI' (5-50 шт)
  - tabs 'свободные / все' с счётчиками

Categories page:
  - кнопка 'Темы' раскрывает категорию на всю ширину сетки
  - клик по '{N} тем' счётчику тоже раскрывает
  - onTopicsChange прокидывает refresh списка категорий (counts обновляются)

Proxy: /admin/api/blog-topics/[...path] — catch-all к engine, передаёт
x-user-id=1 для совместимости с dev2 (где есть users.is_admin).

app/admin/(protected)/categories/page.js

@@ -2,8 +2,9 @@
 import { useState, useEffect, useCallback } from 'react';
 import {
   Loader2, Plus, Save, X, Edit3, Archive, ArchiveRestore, Trash2,
-  RefreshCw, FolderPlus, FileText, ListChecks, Eye, EyeOff,
+  RefreshCw, FolderPlus, FileText, ListChecks, Eye, EyeOff, ChevronDown, ChevronRight,
 } from 'lucide-react';
+import CategoryTopicsPanel from '@/components/admin/CategoryTopicsPanel';
 
 const COLORS = [
   { key: 'emerald', cls: 'bg-emerald-100 border-emerald-300 text-emerald-700 dark:bg-emerald-950 dark:border-emerald-800 dark:text-emerald-300' },
@@ -30,6 +31,7 @@ export default function CategoriesPage() {
   const [form, setForm]     = useState(EMPTY);
   const [saving, setSaving] = useState(false);
   const [showArchived, setShowArchived] = useState(false);
+  const [expandedId, setExpandedId]     = useState(null); // id раскрытой категории — её темы видны
   const [toast, setToast]   = useState(null);
   const [err, setErr]       = useState('');
 
@@ -223,9 +225,12 @@ export default function CategoriesPage() {
         {visible.map(c => (
           <CategoryCard
             key={c.id} cat={c}
+            expanded={expandedId === c.id}
+            onToggleExpand={() => setExpandedId(expandedId === c.id ? null : c.id)}
             onEdit={() => startEdit(c)}
             onToggle={() => toggleActive(c)}
             onHardDelete={() => hardDelete(c)}
+            onTopicsChange={load}
           />
         ))}
       </div>
@@ -245,10 +250,10 @@ function Field({ label, hint, full = '', children }) {
   );
 }
 
-function CategoryCard({ cat, onEdit, onToggle, onHardDelete }) {
+function CategoryCard({ cat, expanded, onToggleExpand, onEdit, onToggle, onHardDelete, onTopicsChange }) {
   const archived = cat.is_active === false;
   return (
-    <div className={`rounded-xl border-2 p-5 transition-all ${colorCls(cat.color)} ${archived ? 'opacity-50' : ''}`}>
+    <div className={`rounded-xl border-2 p-5 transition-all ${colorCls(cat.color)} ${archived ? 'opacity-50' : ''} ${expanded ? 'lg:col-span-3 sm:col-span-2' : ''}`}>
       <div className="flex items-start gap-3 mb-3">
         <div className="text-3xl shrink-0">{cat.icon || '📝'}</div>
         <div className="flex-1 min-w-0">
@@ -268,9 +273,12 @@ function CategoryCard({ cat, onEdit, onToggle, onHardDelete }) {
 
       <div className="flex flex-wrap gap-3 text-xs opacity-70 mb-3">
         <span className="inline-flex items-center gap-1"><FileText className="w-3 h-3" /> {cat.article_count} статей</span>
-        <span className="inline-flex items-center gap-1"><ListChecks className="w-3 h-3" /> {cat.topic_count} тем
+        <button onClick={onToggleExpand}
+          className="inline-flex items-center gap-1 hover:opacity-100 hover:underline transition-opacity">
+          {expanded ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
+          <ListChecks className="w-3 h-3" /> {cat.topic_count} тем
           {cat.topic_unused_count > 0 && <span className="opacity-60">({cat.topic_unused_count} свободных)</span>}
-        </span>
+        </button>
         {cat.autogen_enabled && cat.run_hour != null && (
           <span>авто: {String(cat.run_hour).padStart(2,'0')}:{String(cat.run_minute || 0).padStart(2,'0')}</span>
         )}
@@ -288,7 +296,14 @@ function CategoryCard({ cat, onEdit, onToggle, onHardDelete }) {
             <Trash2 className="w-3 h-3" /> Удалить
           </button>
         )}
+        <div className="flex-1" />
+        <button onClick={onToggleExpand} className="flex items-center gap-1 px-2.5 py-1.5 rounded hover:bg-white/40 dark:hover:bg-black/20 transition-colors opacity-70">
+          {expanded ? 'Свернуть' : 'Темы'}
+        </button>
       </div>
+
+      {/* Раскрывающаяся панель тем */}
+      {expanded && <CategoryTopicsPanel category={cat} onChange={onTopicsChange} />}
     </div>
   );
 }

app/admin/api/blog-topics/[...path]/route.js

@@ -0,0 +1,43 @@
+/**
+ * Catch-all proxy для /admin/api/blog-topics/* → engine /api/admin/blog-topics/*
+ */
+import { NextResponse } from 'next/server';
+import { checkAdminAuth } from '@/lib/adminAuth';
+
+const E = process.env.ENGINE_URL || 'http://127.0.0.1:3030';
+const S = process.env.ENGINE_SECRET || 'zeropost_internal_2026';
+
+async function proxy(req, { params }) {
+  if (!(await checkAdminAuth())) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+  const resolved = await params;
+  const tail = (resolved?.path || []).join('/');
+  const qs = req.url.split('?')[1];
+  const url = `${E}/api/admin/blog-topics${tail ? '/' + tail : ''}${qs ? '?' + qs : ''}`;
+
+  const headers = {
+    'x-internal-secret': S,
+    'x-user-id': '1', // на случай если у engine есть users.is_admin (dev), на проде игнорится
+  };
+  let body;
+  if (req.method !== 'GET' && req.method !== 'HEAD') {
+    headers['Content-Type'] = 'application/json';
+    body = (await req.text()) || undefined;
+  }
+
+  try {
+    const res = await fetch(url, { method: req.method, headers, body, cache: 'no-store' });
+    const data = await res.json().catch(() => ({ error: 'invalid engine response' }));
+    return NextResponse.json(data, { status: res.status });
+  } catch (err) {
+    console.error('[blog-topics proxy] fetch error:', err.message);
+    return NextResponse.json({ error: err.message }, { status: 502 });
+  }
+}
+
+export const GET    = proxy;
+export const POST   = proxy;
+export const PATCH  = proxy;
+export const PUT    = proxy;
+export const DELETE = proxy;

components/admin/CategoryTopicsPanel.js

@@ -0,0 +1,236 @@
+'use client';
+import { useState, useEffect, useCallback } from 'react';
+import {
+  Loader2, Plus, Trash2, Edit3, Save, X, Sparkles, RefreshCw,
+  CheckCircle, Circle, ListChecks,
+} from 'lucide-react';
+
+/**
+ * Панель CRUD тем для одной категории.
+ * Рендерится в развёрнутом виде под/в карточке категории.
+ *
+ * Раскрытие лениво подгружает темы и держит их в локальном стейте.
+ */
+export default function CategoryTopicsPanel({ category, onChange }) {
+  const [topics, setTopics]  = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [includeUsed, setIncludeUsed] = useState(false);
+  const [newTopic, setNewTopic] = useState('');
+  const [newPriority, setNewPriority] = useState(5);
+  const [adding, setAdding] = useState(false);
+  const [editId, setEditId] = useState(null);
+  const [editText, setEditText] = useState('');
+  const [editPriority, setEditPriority] = useState(5);
+  const [genCount, setGenCount] = useState(10);
+  const [generating, setGenerating] = useState(false);
+  const [toast, setToast] = useState(null);
+
+  const flash = (msg, type='success') => { setToast({ msg, type }); setTimeout(() => setToast(null), 3500); };
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const r = await fetch(`/admin/api/blog-topics?category=${encodeURIComponent(category.slug)}&includeUsed=${includeUsed}&limit=200`);
+      const d = await r.json();
+      setTopics(d.topics || []);
+    } catch (e) { flash('Ошибка загрузки: ' + e.message, 'error'); }
+    setLoading(false);
+  }, [category.slug, includeUsed]);
+
+  useEffect(() => { load(); }, [load]);
+
+  async function addTopic() {
+    if (!newTopic.trim()) return;
+    setAdding(true);
+    try {
+      const r = await fetch('/admin/api/blog-topics', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ category: category.slug, topic: newTopic.trim(), priority: newPriority }),
+      });
+      const d = await r.json();
+      if (!r.ok || d.error) throw new Error(d.error || 'fail');
+      flash('Тема добавлена');
+      setNewTopic('');
+      await load();
+      onChange?.();
+    } catch (e) { flash(e.message, 'error'); }
+    setAdding(false);
+  }
+
+  async function saveEdit() {
+    if (!editText.trim()) return;
+    try {
+      const r = await fetch(`/admin/api/blog-topics/${editId}`, {
+        method: 'PATCH', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ topic: editText.trim(), priority: editPriority }),
+      });
+      const d = await r.json();
+      if (!r.ok) throw new Error(d.error || 'fail');
+      flash('Сохранено');
+      setEditId(null);
+      await load();
+    } catch (e) { flash(e.message, 'error'); }
+  }
+
+  async function toggleUsed(t) {
+    const r = await fetch(`/admin/api/blog-topics/${t.id}`, {
+      method: 'PATCH', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ is_used: !t.is_used }),
+    });
+    if (r.ok) { flash(t.is_used ? 'Тема вернулась в банк' : 'Помечена использованной'); load(); onChange?.(); }
+  }
+
+  async function del(t) {
+    if (!confirm(`Удалить тему: «${t.topic.slice(0, 60)}»?`)) return;
+    const r = await fetch(`/admin/api/blog-topics/${t.id}`, { method: 'DELETE' });
+    if (r.ok) { flash('Тема удалена'); load(); onChange?.(); }
+  }
+
+  async function generateAI() {
+    if (!confirm(`Сгенерировать ${genCount} новых тем через AI для «${category.name}»? Существующие останутся.`)) return;
+    setGenerating(true);
+    try {
+      const r = await fetch('/admin/api/blog-topics/generate', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ category: category.slug, count: genCount }),
+      });
+      const d = await r.json();
+      if (!r.ok) throw new Error(d.error || 'fail');
+      flash(`AI генерирует ~${genCount} тем, появятся через 10-20 сек`);
+      // Подождём и обновим
+      setTimeout(() => { load(); onChange?.(); }, 12000);
+    } catch (e) { flash(e.message, 'error'); }
+    setGenerating(false);
+  }
+
+  const unusedCount = topics.filter(t => !t.is_used).length;
+  const usedCount   = topics.filter(t => t.is_used).length;
+
+  return (
+    <div className="mt-3 pt-3 border-t border-current/20 relative">
+      {toast && (
+        <div className={`absolute -top-12 right-0 z-10 px-3 py-2 rounded-lg text-xs font-medium shadow ${
+          toast.type === 'error' ? 'bg-red-500 text-white' : 'bg-emerald-500 text-white'
+        }`}>{toast.msg}</div>
+      )}
+
+      {/* HEADER */}
+      <div className="flex items-center justify-between mb-2 text-xs">
+        <div className="flex items-center gap-2 opacity-80">
+          <ListChecks className="w-3.5 h-3.5" />
+          <span className="font-medium">Темы для автогенерации</span>
+        </div>
+        <div className="flex items-center gap-2 opacity-70">
+          <button onClick={() => setIncludeUsed(v => !v)}
+            className="hover:opacity-100 transition-opacity">
+            {includeUsed ? `все: ${topics.length}` : `свободные: ${unusedCount}`}
+            {usedCount > 0 && !includeUsed && <span className="opacity-50"> · +{usedCount} использованных</span>}
+          </button>
+          <button onClick={load}>
+            <RefreshCw className={`w-3 h-3 ${loading ? 'animate-spin' : ''}`} />
+          </button>
+        </div>
+      </div>
+
+      {/* ADD FORM */}
+      <div className="flex gap-1.5 mb-2">
+        <input type="text" value={newTopic}
+          onChange={e => setNewTopic(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && addTopic()}
+          placeholder="Новая тема статьи..."
+          className="flex-1 px-3 py-1.5 rounded-lg border border-current/20 bg-white/70 dark:bg-black/30 text-xs focus:outline-none focus:ring-2 focus:ring-emerald-500" />
+        <select value={newPriority} onChange={e => setNewPriority(parseInt(e.target.value, 10))}
+          className="px-2 py-1.5 rounded-lg border border-current/20 bg-white/70 dark:bg-black/30 text-xs font-mono"
+          title="приоритет (выше = раньше)">
+          {[1,3,5,7,10].map(p => <option key={p} value={p}>p{p}</option>)}
+        </select>
+        <button onClick={addTopic} disabled={adding || !newTopic.trim()}
+          className="px-3 py-1.5 rounded-lg bg-emerald-500 hover:bg-emerald-600 disabled:opacity-50 text-white text-xs font-medium transition-colors">
+          {adding ? <Loader2 className="w-3 h-3 animate-spin" /> : <Plus className="w-3 h-3" />}
+        </button>
+      </div>
+
+      {/* AI GENERATE */}
+      <div className="flex gap-1.5 mb-3">
+        <button onClick={generateAI} disabled={generating}
+          className="flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg border border-current/30 hover:bg-white/40 dark:hover:bg-black/20 text-xs font-medium transition-colors disabled:opacity-50">
+          {generating ? <Loader2 className="w-3 h-3 animate-spin" /> : <Sparkles className="w-3 h-3" />}
+          {generating ? 'Генерация AI…' : `Сгенерировать ${genCount} тем через AI`}
+        </button>
+        <select value={genCount} onChange={e => setGenCount(parseInt(e.target.value, 10))}
+          className="px-2 py-1.5 rounded-lg border border-current/20 bg-white/70 dark:bg-black/30 text-xs font-mono">
+          {[5,10,20,30,50].map(n => <option key={n} value={n}>{n} тем</option>)}
+        </select>
+      </div>
+
+      {/* LIST */}
+      {loading && topics.length === 0 && (
+        <div className="py-4 text-center"><Loader2 className="w-4 h-4 animate-spin mx-auto opacity-50" /></div>
+      )}
+      {!loading && topics.length === 0 && (
+        <div className="py-4 text-center text-xs opacity-60">
+          {includeUsed ? 'Тем пока нет — добавь или сгенерируй' : 'Свободных тем нет — посмотри использованные или добавь новые'}
+        </div>
+      )}
+
+      <div className="space-y-1 max-h-80 overflow-y-auto">
+        {topics.map(t => (
+          <TopicRow key={t.id}
+            t={t}
+            isEditing={editId === t.id}
+            editText={editText} editPriority={editPriority}
+            onEditStart={() => { setEditId(t.id); setEditText(t.topic); setEditPriority(t.priority || 5); }}
+            onEditCancel={() => setEditId(null)}
+            onEditChange={setEditText}
+            onPriorityChange={setEditPriority}
+            onSaveEdit={saveEdit}
+            onToggleUsed={() => toggleUsed(t)}
+            onDelete={() => del(t)} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function TopicRow({ t, isEditing, editText, editPriority, onEditStart, onEditCancel, onEditChange, onPriorityChange, onSaveEdit, onToggleUsed, onDelete }) {
+  if (isEditing) {
+    return (
+      <div className="flex items-center gap-1.5 py-1">
+        <input value={editText} onChange={e => onEditChange(e.target.value)} autoFocus
+          onKeyDown={e => { if (e.key === 'Enter') onSaveEdit(); if (e.key === 'Escape') onEditCancel(); }}
+          className="flex-1 px-2 py-1 rounded border border-current/30 bg-white dark:bg-neutral-900 text-xs focus:outline-none focus:ring-1 focus:ring-emerald-500" />
+        <select value={editPriority} onChange={e => onPriorityChange(parseInt(e.target.value, 10))}
+          className="px-1.5 py-1 rounded border border-current/30 bg-white dark:bg-neutral-900 text-xs font-mono">
+          {[1,3,5,7,10].map(p => <option key={p} value={p}>p{p}</option>)}
+        </select>
+        <button onClick={onSaveEdit} className="p-1 rounded text-emerald-600 hover:bg-emerald-100 dark:hover:bg-emerald-950">
+          <Save className="w-3 h-3" />
+        </button>
+        <button onClick={onEditCancel} className="p-1 rounded opacity-60 hover:opacity-100">
+          <X className="w-3 h-3" />
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`group flex items-center gap-1.5 py-1 text-xs ${t.is_used ? 'opacity-50' : ''}`}>
+      <button onClick={onToggleUsed} className="shrink-0" title={t.is_used ? 'Вернуть в банк' : 'Пометить использованной'}>
+        {t.is_used
+          ? <CheckCircle className="w-3.5 h-3.5 text-emerald-600" />
+          : <Circle className="w-3.5 h-3.5 opacity-40" />}
+      </button>
+      <span className="flex-1 truncate" title={t.topic}>{t.topic}</span>
+      <span className="text-[10px] opacity-50 font-mono shrink-0">
+        p{t.priority || 5}
+        {t.source === 'ai' && ' · ai'}
+      </span>
+      <button onClick={onEditStart} className="opacity-0 group-hover:opacity-100 p-1 rounded hover:bg-white/40 dark:hover:bg-black/20 transition-opacity">
+        <Edit3 className="w-3 h-3" />
+      </button>
+      <button onClick={onDelete} className="opacity-0 group-hover:opacity-100 p-1 rounded text-red-500 hover:bg-red-50 dark:hover:bg-red-950/30 transition-opacity">
+        <Trash2 className="w-3 h-3" />
+      </button>
+    </div>
+  );
+}