feat: categories — pages, nav, home block, admin editor select

app/category/[slug]/page.js

@@ -0,0 +1,88 @@
+import { notFound } from 'next/navigation';
+import Link from 'next/link';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import ArticleCard from '@/components/ArticleCard';
+import { listCategories, getCategoryArticles } from '@/lib/engine';
+
+export const dynamic = 'force-dynamic';
+
+const COLOR_MAP = {
+  emerald: { bg: 'bg-emerald-50 dark:bg-emerald-950', text: 'text-emerald-700 dark:text-emerald-300', border: 'border-emerald-200 dark:border-emerald-800' },
+  red:     { bg: 'bg-red-50 dark:bg-red-950',         text: 'text-red-700 dark:text-red-300',         border: 'border-red-200 dark:border-red-800' },
+  amber:   { bg: 'bg-amber-50 dark:bg-amber-950',     text: 'text-amber-700 dark:text-amber-300',     border: 'border-amber-200 dark:border-amber-800' },
+  blue:    { bg: 'bg-blue-50 dark:bg-blue-950',       text: 'text-blue-700 dark:text-blue-300',       border: 'border-blue-200 dark:border-blue-800' },
+};
+
+export async function generateMetadata({ params }) {
+  const { slug } = await params;
+  const cats = await listCategories();
+  const cat = cats.find(c => c.slug === slug);
+  if (!cat) return { title: 'Категория не найдена' };
+  return {
+    title: `${cat.name} — ZeroPost`,
+    description: cat.description,
+    alternates: { canonical: `https://zeropost.ru/category/${slug}` },
+  };
+}
+
+export default async function CategoryPage({ params }) {
+  const { slug } = await params;
+  const [cats, articles] = await Promise.all([
+    listCategories(),
+    getCategoryArticles(slug, { limit: 30 }),
+  ]);
+  const cat = cats.find(c => c.slug === slug);
+  if (!cat) notFound();
+
+  const colors = COLOR_MAP[cat.color] || COLOR_MAP.emerald;
+
+  return (
+    <>
+      <Header />
+      <div className="container-wide pt-8 pb-16">
+
+        {/* Шапка категории */}
+        <div className={`rounded-2xl border ${colors.border} ${colors.bg} px-6 py-8 mb-10`}>
+          <div className="flex items-center gap-3 mb-3">
+            <span className="text-3xl">{cat.icon}</span>
+            <h1 className={`text-2xl sm:text-3xl font-bold ${colors.text}`}>{cat.name}</h1>
+          </div>
+          <p className="text-neutral-600 dark:text-neutral-400 max-w-xl">{cat.description}</p>
+          <div className="mt-4 text-sm text-neutral-400">{articles.length} {articles.length === 1 ? 'статья' : articles.length < 5 ? 'статьи' : 'статей'}</div>
+        </div>
+
+        {/* Навигация по категориям */}
+        <div className="flex flex-wrap gap-2 mb-8">
+          {cats.map(c => (
+            <Link
+              key={c.slug}
+              href={`/category/${c.slug}`}
+              className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium border transition-colors ${
+                c.slug === slug
+                  ? `${(COLOR_MAP[c.color]||COLOR_MAP.emerald).bg} ${(COLOR_MAP[c.color]||COLOR_MAP.emerald).text} ${(COLOR_MAP[c.color]||COLOR_MAP.emerald).border}`
+                  : 'bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-700 text-neutral-600 dark:text-neutral-400 hover:border-neutral-300'
+              }`}
+            >
+              <span>{c.icon}</span> {c.name}
+            </Link>
+          ))}
+        </div>
+
+        {/* Статьи */}
+        {articles.length > 0 ? (
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
+            {articles.map(a => <ArticleCard key={a.id} article={a} />)}
+          </div>
+        ) : (
+          <div className="text-center py-20">
+            <div className="text-4xl mb-4">{cat.icon}</div>
+            <h2 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-2">Статей пока нет</h2>
+            <p className="text-sm text-neutral-500">Скоро здесь появятся материалы по теме «{cat.name}»</p>
+          </div>
+        )}
+      </div>
+      <Footer />
+    </>
+  );
+}

app/page.js

@@ -8,21 +8,22 @@ import NowBlock from '@/components/NowBlock';
 import NotesBlock from '@/components/NotesBlock';
 import SeriesGrid from '@/components/SeriesGrid';
 import Reveal from '@/components/Reveal';
-import { listArticles, listTags, getStats, getLive, listNotes, listSeries } from '@/lib/engine';
+import { listArticles, listTags, getStats, getLive, listNotes, listSeries, listCategories } from '@/lib/engine';
 import { Sparkles, ArrowRight } from 'lucide-react';
 
 export const dynamic = 'force-dynamic';
 
 export default async function HomePage() {
-  let articles = [], tags = [], stats = null, live = null, notes = [], series = [];
+  let articles = [], tags = [], stats = null, live = null, notes = [], series = [], categories = [];
   try {
-    [articles, tags, stats, live, notes, series] = await Promise.all([
+    [articles, tags, stats, live, notes, series, categories] = await Promise.all([
       listArticles({ limit: 13 }),
       listTags(),
       getStats(),
       getLive(),
       listNotes({ limit: 6 }),
       listSeries(),
+      listCategories(),
     ]);
   } catch (err) {
     console.error('Home load failed:', err.message);
@@ -81,6 +82,32 @@ export default async function HomePage() {
         </div>
       </Reveal>
 
+      {/* Категории */}
+      {categories.length > 0 && (
+        <section className="container-wide py-10">
+          <h2 className="text-xs font-semibold uppercase tracking-widest mute mb-5">Темы</h2>
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+            {categories.map(cat => {
+              const colorMap = {
+                emerald: 'bg-emerald-50 dark:bg-emerald-950 border-emerald-200 dark:border-emerald-800 text-emerald-700 dark:text-emerald-300 hover:border-emerald-400 dark:hover:border-emerald-600',
+                red:     'bg-red-50 dark:bg-red-950 border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 hover:border-red-400',
+                amber:   'bg-amber-50 dark:bg-amber-950 border-amber-200 dark:border-amber-800 text-amber-700 dark:text-amber-300 hover:border-amber-400',
+                blue:    'bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300 hover:border-blue-400',
+              };
+              const cls = colorMap[cat.color] || colorMap.emerald;
+              return (
+                <Link key={cat.slug} href={`/category/${cat.slug}`}
+                  className={`flex flex-col gap-2 p-4 rounded-xl border transition-all ${cls}`}>
+                  <span className="text-2xl">{cat.icon}</span>
+                  <span className="font-semibold text-sm">{cat.name}</span>
+                  <span className="text-xs opacity-70 line-clamp-2">{cat.description}</span>
+                </Link>
+              );
+            })}
+          </div>
+        </section>
+      )}
+
       {/* Featured */}
       {featured && (
         <Reveal>

components/Header.js

@@ -56,6 +56,9 @@ export default function Header() {
           {/* Desktop nav */}
           <nav className="hidden sm:flex items-center gap-1 text-sm">
             <Link href="/" className="btn btn-ghost text-sm py-1.5">Статьи</Link>
+            <Link href="/category/cybersec" className="btn btn-ghost text-sm py-1.5">🔒 Безопасность</Link>
+            <Link href="/category/automation" className="btn btn-ghost text-sm py-1.5">⚡ Автоматизация</Link>
+            <Link href="/category/ai-dev" className="btn btn-ghost text-sm py-1.5">💻 Dev + AI</Link>
             <Link href="/archive" className="btn btn-ghost text-sm py-1.5">Архив</Link>
             <Link href="/notes" className="btn btn-ghost text-sm py-1.5">Заметки</Link>
             <Link href="/about" className="btn btn-ghost text-sm py-1.5">О проекте</Link>

components/admin/ArticleEditor.js

@@ -13,6 +13,7 @@ export default function ArticleEditor({ article }) {
   const [content, setContent] = useState(article?.content || '');
   const [tags, setTags] = useState((article?.tags || []).join(', '));
   const [status, setStatus] = useState(article?.status || 'draft');
+  const [category, setCategory] = useState(article?.category || 'ai-tools');
   const [seoTitle, setSeoTitle] = useState(article?.seo_title || '');
   const [seoDescr, setSeoDescr] = useState(article?.seo_descr || '');
   const [coverUrl, setCoverUrl] = useState(article?.cover_url || '');
@@ -40,6 +41,7 @@ export default function ArticleEditor({ article }) {
         content: content.trim(),
         tags: tags.split(',').map(t => t.trim()).filter(Boolean),
         status,
+        category,
         seo_title: seoTitle.trim() || null,
         seo_descr: seoDescr.trim() || null,
         cover_url: coverUrl.trim() || null,
@@ -268,6 +270,19 @@ export default function ArticleEditor({ article }) {
               <option value="draft">Черновик</option>
               <option value="published">Опубликована</option>
             </select>
+            <div>
+              <label className="block text-xs font-medium text-neutral-500 mb-1">Категория</label>
+              <select
+                value={category}
+                onChange={e => setCategory(e.target.value)}
+                className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-stone-50 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500"
+              >
+                <option value="ai-tools">🤖 ИИ-инструменты</option>
+                <option value="cybersec">🔒 Кибербезопасность</option>
+                <option value="automation">⚡ Автоматизация</option>
+                <option value="ai-dev">💻 Разработка с ИИ</option>
+              </select>
+            </div>
             <div>
               <label className="block text-xs font-medium text-neutral-500 mb-1">Теги (через запятую)</label>
               <input

lib/engine.js

@@ -19,9 +19,20 @@ async function call(path, options = {}) {
   return res.json();
 }
 
-export async function listArticles({ limit = 20, offset = 0, tag } = {}) {
+export async function listCategories() {
+  try { return await call('/api/categories', { next: { revalidate: 3600 } }); }
+  catch { return []; }
+}
+
+export async function getCategoryArticles(slug, { limit = 20, offset = 0 } = {}) {
+  try { return await call(`/api/categories/${slug}/articles?limit=${limit}&offset=${offset}`); }
+  catch { return []; }
+}
+
+export async function listArticles({ limit = 20, offset = 0, tag, category } = {}) {
   const params = new URLSearchParams({ limit, offset });
   if (tag) params.set('tag', tag);
+  if (category) params.set('category', category);
   return call(`/api/articles?${params}`, { next: { revalidate: 60 } });
 }