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>