From c27985614ebd507c20e80865c2382e8da7039928 Mon Sep 17 00:00:00 2001
From: Alexey Pavlov <admin@zeroday.su>
Date: Sun, 31 May 2026 10:05:28 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20=D0=B1=D0=BB=D0=BE=D0=BA=20=C2=AB=D0=A1?=
 =?UTF-8?q?=D0=B5=D0=B9=D1=87=D0=B0=D1=81=C2=BB=20+=20=C2=AB=D0=97=D0=B0?=
 =?UTF-8?q?=D0=BC=D0=B5=D1=82=D0=BA=D0=B8=20=D1=80=D0=B5=D0=B4=D0=B0=D0=BA?=
 =?UTF-8?q?=D1=82=D0=BE=D1=80=D0=B0=C2=BB=20+=20ArticleMeta?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- NowBlock: live indicator (последняя статья / идёт генерация) + bar-чарт за 7 дней
- NotesBlock: карточки заметок редактора с pin
- /notes: отдельная страница со всеми заметками
- ArticleMeta: раскрывающийся блок «Как сделана эта статья» на странице статьи
- В шапку добавлена ссылка «Заметки» (desktop и mobile)
---
 app/blog/[slug]/page.js   |   5 +-
 app/notes/page.js         |  35 +++++++++++
 app/page.js               |  28 +++++++--
 components/ArticleMeta.js |  50 ++++++++++++++++
 components/Header.js      |   6 ++
 components/NotesBlock.js  |  53 +++++++++++++++++
 components/NowBlock.js    | 121 ++++++++++++++++++++++++++++++++++++++
 lib/engine.js             |  10 ++++
 8 files changed, 300 insertions(+), 8 deletions(-)
 create mode 100644 app/notes/page.js
 create mode 100644 components/ArticleMeta.js
 create mode 100644 components/NotesBlock.js
 create mode 100644 components/NowBlock.js

diff --git a/app/blog/[slug]/page.js b/app/blog/[slug]/page.js
index b4fa6eb..87358e0 100644
--- a/app/blog/[slug]/page.js
+++ b/app/blog/[slug]/page.js
@@ -5,6 +5,7 @@ import Footer from '@/components/Footer';
 import ReadingProgress from '@/components/ReadingProgress';
 import ScrollToTop from '@/components/ScrollToTop';
 import ShareButton from '@/components/ShareButton';
+import ArticleMeta from '@/components/ArticleMeta';
 import ArticleCard from '@/components/ArticleCard';
 import { getArticle, listArticles } from '@/lib/engine';
 import { renderMarkdown, formatDate } from '@/lib/markdown';
@@ -108,9 +109,7 @@ export default async function ArticlePage({ params }) {
           dangerouslySetInnerHTML={{ __html: html }}
         />
 
-        <div className="mt-12 pt-6 border-t-soft text-center">
-          <p className="mute text-sm">Статья сгенерирована ИИ под редакторским присмотром.</p>
-        </div>
+        <ArticleMeta article={article} />
       </article>
 
       {related.length > 0 && (
diff --git a/app/notes/page.js b/app/notes/page.js
new file mode 100644
index 0000000..8d4970a
--- /dev/null
+++ b/app/notes/page.js
@@ -0,0 +1,35 @@
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import NotesBlock from '@/components/NotesBlock';
+import { listNotes } from '@/lib/engine';
+import { MessageCircle } from 'lucide-react';
+
+export const dynamic = 'force-dynamic';
+export const metadata = { title: 'Заметки редактора' };
+
+export default async function NotesPage() {
+  const notes = await listNotes({ limit: 100 });
+  return (
+    <>
+      <Header />
+      <main className="pt-10 pb-16">
+        <div className="container-wide mb-8">
+          <div
+            className="inline-flex items-center gap-2 text-xs accent px-3 py-1.5 rounded-full mb-4"
+            style={{ background: 'rgb(var(--accent) / 0.1)', border: '1px solid rgb(var(--accent) / 0.2)' }}
+          >
+            <MessageCircle className="w-3.5 h-3.5" /> За кулисами
+          </div>
+          <h1 className="text-3xl sm:text-5xl font-bold ink mb-3 leading-tight">
+            Заметки редактора
+          </h1>
+          <p className="mute text-base sm:text-lg max-w-2xl">
+            Короткие мысли, наблюдения, технические заметки и комментарии человека, который следит за блогом. Не статьи — просто записи на полях.
+          </p>
+        </div>
+        <NotesBlock notes={notes} />
+      </main>
+      <Footer />
+    </>
+  );
+}
diff --git a/app/page.js b/app/page.js
index e2a5590..600a796 100644
--- a/app/page.js
+++ b/app/page.js
@@ -4,21 +4,23 @@ import Footer from '@/components/Footer';
 import ArticleCard from '@/components/ArticleCard';
 import HeroImage from '@/components/HeroImage';
 import Stats from '@/components/Stats';
+import NowBlock from '@/components/NowBlock';
+import NotesBlock from '@/components/NotesBlock';
 import Reveal from '@/components/Reveal';
-import { listArticles, listTags, getStats } from '@/lib/engine';
+import { listArticles, listTags, getStats, getLive, listNotes } from '@/lib/engine';
 import { Sparkles, ArrowRight } from 'lucide-react';
 
 export const dynamic = 'force-dynamic';
 
 export default async function HomePage() {
-  let articles = [];
-  let tags = [];
-  let stats = null;
+  let articles = [], tags = [], stats = null, live = null, notes = [];
   try {
-    [articles, tags, stats] = await Promise.all([
+    [articles, tags, stats, live, notes] = await Promise.all([
       listArticles({ limit: 13 }),
       listTags(),
       getStats(),
+      getLive(),
+      listNotes({ limit: 6 }),
     ]);
   } catch (err) {
     console.error('Home load failed:', err.message);
@@ -63,6 +65,13 @@ export default async function HomePage() {
         </div>
       </section>
 
+      {/* Сейчас — live indicator */}
+      <Reveal>
+        <div className="reveal">
+          <NowBlock live={live} />
+        </div>
+      </Reveal>
+
       {/* Stats */}
       <Reveal>
         <div className="reveal">
@@ -99,6 +108,15 @@ export default async function HomePage() {
         </section>
       )}
 
+      {/* Заметки редактора */}
+      {notes.length > 0 && (
+        <Reveal>
+          <div className="reveal">
+            <NotesBlock notes={notes} compact />
+          </div>
+        </Reveal>
+      )}
+
       {/* Tags */}
       {tags.length > 0 && (
         <Reveal>
diff --git a/components/ArticleMeta.js b/components/ArticleMeta.js
new file mode 100644
index 0000000..32231b4
--- /dev/null
+++ b/components/ArticleMeta.js
@@ -0,0 +1,50 @@
+'use client';
+import { useState } from 'react';
+import { Cpu, Zap, Clock, ChevronDown } from 'lucide-react';
+
+export default function ArticleMeta({ article }) {
+  const [open, setOpen] = useState(false);
+  const tokensIn = article.tokens_in || 0;
+  const tokensOut = article.tokens_out || 0;
+  const total = tokensIn + tokensOut;
+  if (!total) return null;
+
+  return (
+    <div className="mt-12 article-card p-5 sm:p-6">
+      <button
+        onClick={() => setOpen(o => !o)}
+        className="w-full flex items-center justify-between gap-3 text-left"
+      >
+        <div className="flex items-center gap-2">
+          <Cpu className="w-4 h-4 accent" />
+          <span className="font-medium ink">Как сделана эта статья</span>
+        </div>
+        <ChevronDown className={`w-4 h-4 mute transition-transform ${open ? 'rotate-180' : ''}`} />
+      </button>
+
+      {open && (
+        <div className="mt-4 pt-4 border-t-soft grid sm:grid-cols-3 gap-4 text-sm">
+          <div>
+            <div className="text-xs mute uppercase tracking-wider mb-1">Модель</div>
+            <div className="ink font-medium">Claude Sonnet 4.6</div>
+            <div className="text-xs mute mt-1">через aiprimetech.io</div>
+          </div>
+          <div>
+            <div className="text-xs mute uppercase tracking-wider mb-1">Токены</div>
+            <div className="ink font-medium tabular-nums">
+              {tokensIn.toLocaleString('ru-RU')} <span className="mute text-xs font-normal">in</span>
+              {' / '}
+              {tokensOut.toLocaleString('ru-RU')} <span className="mute text-xs font-normal">out</span>
+            </div>
+            <div className="text-xs mute mt-1">≈ {total.toLocaleString('ru-RU')} всего</div>
+          </div>
+          <div>
+            <div className="text-xs mute uppercase tracking-wider mb-1">Процесс</div>
+            <div className="ink font-medium">2 этапа</div>
+            <div className="text-xs mute mt-1">генерация → self-critique</div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/Header.js b/components/Header.js
index 82113c9..c30d674 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -56,6 +56,7 @@ 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="/notes" className="btn btn-ghost text-sm py-1.5">Заметки</Link>
             <Link href="/about" className="btn btn-ghost text-sm py-1.5">О проекте</Link>
             <div className="ml-1 flex items-center gap-1">
               <SearchBox />
@@ -90,6 +91,11 @@ export default function Header() {
             onClick={() => setOpen(false)}
             className="text-2xl font-semibold ink py-3 border-b-soft"
           >Статьи</Link>
+          <Link
+            href="/notes"
+            onClick={() => setOpen(false)}
+            className="text-2xl font-semibold ink py-3 border-b-soft"
+          >Заметки</Link>
           <Link
             href="/about"
             onClick={() => setOpen(false)}
diff --git a/components/NotesBlock.js b/components/NotesBlock.js
new file mode 100644
index 0000000..9752362
--- /dev/null
+++ b/components/NotesBlock.js
@@ -0,0 +1,53 @@
+import Link from 'next/link';
+import { Pin, ArrowRight, MessageCircle } from 'lucide-react';
+import { formatDate } from '@/lib/markdown';
+
+function NoteCard({ note }) {
+  return (
+    <article className="article-card p-5 sm:p-6 h-full flex flex-col">
+      {note.is_pinned && (
+        <div className="flex items-center gap-1.5 text-xs accent mb-2">
+          <Pin className="w-3 h-3" /> закреплено
+        </div>
+      )}
+      {note.title && (
+        <h3 className="text-base sm:text-lg font-semibold ink mb-2 leading-snug">
+          {note.title}
+        </h3>
+      )}
+      <p className="mute text-sm leading-relaxed mb-4 flex-1 whitespace-pre-line line-clamp-6">
+        {note.content}
+      </p>
+      <div className="flex items-center justify-between text-xs mute pt-3 border-t-soft">
+        <span>{note.author}</span>
+        <span>{formatDate(note.created_at)}</span>
+      </div>
+    </article>
+  );
+}
+
+export default function NotesBlock({ notes, compact = false }) {
+  if (!notes || notes.length === 0) return null;
+  const items = compact ? notes.slice(0, 3) : notes;
+
+  return (
+    <section className="container-wide pb-12">
+      <div className="flex items-center justify-between mb-4 sm:mb-5">
+        <div className="flex items-center gap-2">
+          <MessageCircle className="w-4 h-4 mute" />
+          <h2 className="text-xs sm:text-sm font-medium uppercase tracking-widest mute">
+            Заметки редактора
+          </h2>
+        </div>
+        {compact && notes.length > 3 && (
+          <Link href="/notes" className="text-xs mute hover:ink transition-colors inline-flex items-center gap-1">
+            Все <ArrowRight className="w-3 h-3" />
+          </Link>
+        )}
+      </div>
+      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5">
+        {items.map(n => <NoteCard key={n.id} note={n} />)}
+      </div>
+    </section>
+  );
+}
diff --git a/components/NowBlock.js b/components/NowBlock.js
new file mode 100644
index 0000000..7a5d46a
--- /dev/null
+++ b/components/NowBlock.js
@@ -0,0 +1,121 @@
+import Link from 'next/link';
+import { Activity, Cpu, Calendar, Sparkles, Zap } from 'lucide-react';
+import { formatDate } from '@/lib/markdown';
+
+// Сколько прошло времени с даты
+function timeAgo(iso) {
+  if (!iso) return null;
+  const seconds = Math.max(0, Math.floor((Date.now() - new Date(iso).getTime()) / 1000));
+  const mins = Math.floor(seconds / 60);
+  const hours = Math.floor(mins / 60);
+  const days = Math.floor(hours / 24);
+  if (days > 0) return `${days} дн назад`;
+  if (hours > 0) return `${hours} ч назад`;
+  if (mins > 0) return `${mins} мин назад`;
+  return 'только что';
+}
+
+export default function NowBlock({ live }) {
+  if (!live) return null;
+  const { latest, processing, week } = live;
+  const maxCnt = Math.max(1, ...week.map(d => d.cnt));
+
+  return (
+    <section className="container-wide pb-12">
+      <div className="flex items-center gap-2 mb-4 sm:mb-5">
+        <span className="relative flex h-2.5 w-2.5">
+          <span
+            className="absolute inline-flex h-full w-full rounded-full opacity-75 animate-ping"
+            style={{ background: 'rgb(var(--accent))' }}
+          />
+          <span
+            className="relative inline-flex rounded-full h-2.5 w-2.5"
+            style={{ background: 'rgb(var(--accent))' }}
+          />
+        </span>
+        <h2 className="text-xs sm:text-sm font-medium uppercase tracking-widest mute">Сейчас</h2>
+      </div>
+
+      <div className="grid lg:grid-cols-3 gap-4">
+        {/* Главная карточка — последняя статья / процесс */}
+        <div className="article-card lg:col-span-2 p-5 sm:p-6">
+          {processing ? (
+            <>
+              <div className="flex items-center gap-2 text-sm accent mb-2">
+                <Sparkles className="w-4 h-4 animate-pulse" />
+                <span className="font-medium">ИИ пишет статью</span>
+              </div>
+              <div className="text-lg sm:text-xl ink font-semibold leading-snug mb-2 line-clamp-2">
+                «{processing.topic}»
+              </div>
+              <div className="text-xs mute">
+                Началось {timeAgo(processing.created_at)} · подожди немного, скоро появится
+              </div>
+            </>
+          ) : latest ? (
+            <Link href={`/blog/${latest.slug}`} className="block group">
+              <div className="flex items-center gap-2 text-xs mute mb-2">
+                <Activity className="w-3.5 h-3.5" />
+                <span>Последний материал — {timeAgo(latest.published_at)}</span>
+              </div>
+              <div className="text-lg sm:text-xl ink font-semibold leading-snug mb-3 group-hover:accent transition-colors line-clamp-2">
+                {latest.title}
+              </div>
+              <div className="flex flex-wrap items-center gap-3 text-xs mute">
+                <span className="inline-flex items-center gap-1">
+                  <Cpu className="w-3 h-3" /> claude-sonnet-4-6
+                </span>
+                {latest.tokens_out && (
+                  <span className="inline-flex items-center gap-1">
+                    <Zap className="w-3 h-3" /> {latest.tokens_out.toLocaleString('ru-RU')} токенов
+                  </span>
+                )}
+              </div>
+            </Link>
+          ) : (
+            <div className="mute text-sm">Скоро здесь что-нибудь появится…</div>
+          )}
+        </div>
+
+        {/* Bar-чарт за 7 дней */}
+        <div className="article-card p-5 sm:p-6">
+          <div className="flex items-center gap-2 text-xs mute mb-3">
+            <Calendar className="w-3.5 h-3.5" />
+            <span className="uppercase tracking-wider">Активность за неделю</span>
+          </div>
+          <div className="flex items-end gap-1.5 h-20 mb-2">
+            {week.map((d, i) => {
+              const h = d.cnt > 0 ? Math.max(10, (d.cnt / maxCnt) * 100) : 4;
+              const isToday = i === week.length - 1;
+              return (
+                <div key={d.day} className="flex-1 flex flex-col items-center gap-1 group">
+                  <div
+                    className="w-full rounded-md transition-all"
+                    style={{
+                      height: `${h}%`,
+                      background: d.cnt > 0
+                        ? (isToday ? 'rgb(var(--accent))' : 'rgb(var(--accent) / 0.45)')
+                        : 'rgb(var(--surface-2))',
+                    }}
+                    title={`${d.day}: ${d.cnt} ${d.cnt === 1 ? 'статья' : 'статей'}`}
+                  />
+                </div>
+              );
+            })}
+          </div>
+          <div className="flex justify-between text-[10px] mute">
+            {week.map((d, i) => {
+              const date = new Date(d.day);
+              const dow = ['вс','пн','вт','ср','чт','пт','сб'][date.getDay()];
+              return (
+                <span key={d.day} className={i === week.length - 1 ? 'accent font-medium' : ''}>
+                  {dow}
+                </span>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/lib/engine.js b/lib/engine.js
index a05c868..f63c2ba 100644
--- a/lib/engine.js
+++ b/lib/engine.js
@@ -37,6 +37,16 @@ export async function listTags() {
   return call('/api/articles/tags', { next: { revalidate: 300 } });
 }
 
+export async function getLive() {
+  try { return await call('/api/stats/live', { cache: 'no-store' }); }
+  catch { return null; }
+}
+
+export async function listNotes({ limit = 20 } = {}) {
+  try { return await call(`/api/notes?limit=${limit}`, { cache: 'no-store' }); }
+  catch { return []; }
+}
+
 export async function getStats() {
   try {
     return await call('/api/stats', { cache: 'no-store' });