refactor: unify catalog page heroes

apps/web/src/components/PageHero.astro

@@ -0,0 +1,8 @@
+---
+const { eyebrow, title, description } = Astro.props as { eyebrow: string; title: string; description?: string };
+---
+<section class="catalog-hero content-grid">
+  <span class="overline">{eyebrow}</span>
+  <h1>{title}</h1>
+  {description && <p>{description}</p>}
+</section>

apps/web/src/components/SectionHeading.astro

@@ -0,0 +1,18 @@
+---
+const { eyebrow, title, description, count, id, editorial = false } = Astro.props as {
+  eyebrow?: string;
+  title: string;
+  description?: string;
+  count?: string;
+  id?: string;
+  editorial?: boolean;
+};
+---
+<div class:list={["section-heading", { "section-heading--editorial": editorial }]}>
+  <div>
+    {eyebrow && <span class="overline">{eyebrow}</span>}
+    <h2 id={id}>{title}</h2>
+    {description && <p>{description}</p>}
+  </div>
+  {count && <span class="result-count">{count}</span>}
+</div>

apps/web/src/components/SignalFeed.astro

@@ -1,5 +1,6 @@
 ---
 import SourceBadge from "./SourceBadge.astro";
+import SectionHeading from "./SectionHeading.astro";
 import { ago, kg, type PublicObservation } from "../lib/api";
 const { signals } = Astro.props as { signals: PublicObservation[] };
 const groups = [...signals.reduce((map, signal) => {
@@ -17,7 +18,7 @@ const groups = [...signals.reduce((map, signal) => {
 }, new Map<string, PublicObservation & { observations: PublicObservation[] }>()).values()];
 ---
 <section class="signal-section content-grid" aria-labelledby="signals-title">
-  <div class="signal-heading"><div><span class="overline">Сырые данные источников</span><h2 id="signals-title">Полевые сигналы</h2><p>Показываем сразу, даже если часть полей отсутствует. Эти карточки не участвуют в расчёте активности до полного подтверждения.</p></div><span class="signal-count">{signals.length} сигналов · {groups.length} сюжетов</span></div>
+  <SectionHeading editorial eyebrow="Сырые данные источников" title="Полевые сигналы" id="signals-title" description="Показываем сразу, даже если часть полей отсутствует. Эти карточки не участвуют в расчёте активности до полного подтверждения." count={`${signals.length} сигналов · ${groups.length} сюжетов`} />
   <div class="signal-grid">{groups.map(signal => {
     const provenance = [...new Map(signal.observations.map(item => [`${item.source_system}|${item.source_url}`, item])).values()];
     return <article class="signal-card" data-quality={signal.quality}>

apps/web/src/pages/fish/[slug].astro

@@ -1,5 +1,6 @@
 ---
 import ActivityCard from "../../components/ActivityCard.astro";
+import PageHero from "../../components/PageHero.astro";
 import Layout from "../../layouts/Layout.astro";
 import { api, plural, type Activity, type DictionaryItem, type PaginatedActivity } from "../../lib/api";
 const { slug } = Astro.params;
@@ -20,6 +21,6 @@ const schema = fish ? { "@context":"https://schema.org", "@type":"CollectionPage
 ---
 <Layout title={fish ? `Где ловить ${fish.name_ru} в RF4 — свежие точки` : "Рыба не найдена — RF4 Spotter"} description={fish ? `Свежие точки ловли ${fish.name_ru} в Russian Fishing 4: водоёмы, координаты, приманки, активность и источники наблюдений.` : "Такого вида рыбы нет в каталоге RF4 Spotter."} noindex={!fish || unavailable} structuredData={schema} errorPage={!fish || unavailable}>
   <a class="back" href="/fish">← Все виды рыб</a>
-  <section class="catalog-hero content-grid"><span class="overline">Свежие данные за 72 часа</span><h1>{fish?.name_ru ?? "Рыба не найдена"}</h1>{fish && <p>{items.length} {plural(items.length,["активная точка","активные точки","активных точек"])} на {waters.length} {plural(waters.length,["водоёме","водоёмах","водоёмах"])}.</p>}</section>
+  <PageHero eyebrow="Свежие данные за 72 часа" title={fish?.name_ru ?? "Рыба не найдена"} description={fish ? `${items.length} ${plural(items.length,["активная точка","активные точки","активных точек"])} на ${waters.length} ${plural(waters.length,["водоёме","водоёмах","водоёмах"])}.` : undefined} />
   {unavailable ? <div class="state content-grid"><h2>Данные временно недоступны</h2></div> : !fish ? <div class="state content-grid"><h2>Такой рыбы нет в справочнике</h2><a href="/fish">Открыть каталог</a></div> : <section class="catalog-results content-grid"><aside><span class="overline">Водоёмы</span>{waters.length ? <nav>{waters.map(([waterSlug,name]) => <a href={`/waterbodies/${waterSlug}/${fish!.slug}`}>{name}</a>)}</nav> : <p>Свежих подтверждённых водоёмов пока нет.</p>}</aside><div>{items.length ? items.map(item => <ActivityCard item={item}/>) : <div class="state"><h2>Свежих точек пока нет</h2><p>Проверьте позже или посмотрите полевые сигналы на главной.</p></div>}</div></section>}
 </Layout>

apps/web/src/pages/fish/index.astro

@@ -1,6 +1,7 @@
 ---
 import Layout from "../../layouts/Layout.astro";
 import FishSilhouette from "../../components/FishSilhouette.astro";
+import PageHero from "../../components/PageHero.astro";
 import { api, type DictionaryItem } from "../../lib/api";
 let fishes: DictionaryItem[] = [], unavailable = false;
 try { fishes = await api<DictionaryItem[]>("/api/v1/fishes?limit=500"); } catch { unavailable = true; }
@@ -11,6 +12,6 @@ if (unavailable) {
 }
 ---
 <Layout title="Все виды рыб Russian Fishing 4 — RF4 Spotter" description="Каталог рыб RF4 со свежими точками, уловами, приманками и прозрачными источниками данных.">
-  <section class="catalog-hero content-grid"><span class="overline">Справочник RF4</span><h1>Рыбы</h1><p>Выберите вид, чтобы увидеть свежие подтверждённые точки и полевые сигналы.</p></section>
+  <PageHero eyebrow="Справочник RF4" title="Рыбы" description="Выберите вид, чтобы увидеть свежие подтверждённые точки и полевые сигналы." />
   {unavailable ? <div class="state content-grid"><h2>Каталог временно недоступен</h2></div> : <nav class="catalog-grid content-grid" aria-label="Виды рыб">{fishes.map(fish => <a href={`/fish/${fish.slug}`}><span>Вид рыбы</span><strong>{fish.name_ru}</strong><i>→</i><FishSilhouette name={fish.name_ru} size={76}/></a>)}</nav>}
 </Layout>

apps/web/src/pages/records.astro

@@ -1,6 +1,7 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import SourceBadge from "../components/SourceBadge.astro";
+import SectionHeading from "../components/SectionHeading.astro";
 import { api, kg, type DictionaryItem, type ImportRun, type OfficialRecord, type PaginatedOfficialRecord } from "../lib/api";
 const params = Astro.url.searchParams;
 const fish = params.get("fish") ?? "";
@@ -21,7 +22,7 @@ const last = runs[0];
 <Layout title="Официальные рекорды Russian Fishing 4 — RF4 Spotter" description="Последние официальные рекорды RF4 по рыбам и водоёмам: вес, приманка, игрок, дата и прямая ссылка на источник." noindex={showNoIndex} errorPage={unavailable}>
   <section class="records-hero"><div><span class="eyebrow">Публичные данные RF4</span><h1>Официальные<br/><em>рекорды</em></h1></div><div class="source-status"><span class:list={["status-dot", last?.status]}></span><strong>{last ? `Импорт: ${last.status}` : "Импорт ещё не запускался"}</strong>{last?.finished_at && <small>{new Date(last.finished_at).toLocaleString("ru-RU")} · {last.rows_seen} строк</small>}</div></section>
   <form class="record-filters" method="get"><label>Рыба<select name="fish"><option value="">Любая рыба</option>{fishes.map(item => <option value={item.slug} selected={fish === item.slug}>{item.name_ru}</option>)}</select></label><label>Водоём<select name="waterbody"><option value="">Все водоёмы</option>{waterbodies.map(item => <option value={item.slug} selected={waterbody === item.slug}>{item.name_ru}</option>)}</select></label><button>Фильтровать</button>{(fish || waterbody) && <a href="/records">Сбросить</a>}</form>
-  <div class="section-heading content-grid"><div><span class="overline">Официальный источник</span><h2>Последние записи</h2></div><span class="result-count">{items.length} из {totalRecords} записей</span></div>
+  <div class="content-grid"><SectionHeading eyebrow="Официальный источник" title="Последние записи" count={`${items.length} из ${totalRecords} записей`} /></div>
   {unavailable && <div class="state content-grid"><h2>Источник временно недоступен</h2></div>}
   {!unavailable && items.length && <div class="record-table"><div class="record-row record-head"><span>Рыба</span><span>Вес</span><span>Водоём</span><span>Приманка</span><span>Игрок</span><span>Дата и источник</span></div>{items.map(record => <article class="record-row"><strong data-label="Рыба">{record.fish}</strong><strong data-label="Вес">{kg(record.weight_g)}</strong><span data-label="Водоём">{record.waterbody}</span><span data-label="Приманка">{record.bait ?? "—"}</span><span data-label="Игрок">{record.player_name ?? "—"}</span><span data-label="Дата и источник" class="record-provenance"><time>{record.record_date ? new Date(record.record_date).toLocaleDateString("ru-RU") : "—"}</time><SourceBadge source={record.source_system} href={record.source_url}/></span></article>)}</div>}
   {!unavailable && items.length && offset + items.length < totalRecords && <a class="load-more" href={`/records?${(() => { const p = new URLSearchParams(params); p.delete("offset"); p.set("offset", String(offset + items.length)); return p.toString(); })()}`}>Показать ещё <span>{offset + items.length} из {totalRecords}</span> ↓</a>}

apps/web/src/pages/status.astro

@@ -2,13 +2,14 @@
 import Layout from "../layouts/Layout.astro";
 import SourceBadge from "../components/SourceBadge.astro";
 import DataLegend from "../components/DataLegend.astro";
+import PageHero from "../components/PageHero.astro";
 import { ago, api, plural, type SourceStatus } from "../lib/api";
 let sources: SourceStatus[] = [], unavailable = false;
 try { sources = await api<SourceStatus[]>("/api/v1/source-status"); } catch { unavailable = true; }
 const labels = { healthy:"Актуален", stale:"Данные устарели", temporarily_limited:"Временная пауза", source_changed:"Источник изменился", waiting:"Ожидает запуска", disabled:"Выключен" };
 ---
 <Layout title="Состояние источников — RF4 Spotter" description="Текущее безопасное состояние источников данных RF4 Spotter.">
-  <section class="catalog-hero content-grid"><span class="overline">Прозрачность данных</span><h1>Статус источников</h1><p>Пауза или изменение страницы не удаляют уже опубликованные данные.</p></section>
+  <PageHero eyebrow="Прозрачность данных" title="Статус источников" description="Пауза или изменение страницы не удаляют уже опубликованные данные." />
   {unavailable ? <div class="state content-grid"><h2>Статус временно недоступен</h2></div> : <section class="source-health-grid content-grid">{sources.map(source => <article data-status={source.status}><div><SourceBadge source={source.source_system}/><span class="health-state"><i></i>{labels[source.status]}</span></div><h2>{source.name}</h2><strong>{source.observations} {plural(source.observations,["наблюдение","наблюдения","наблюдений"])}</strong><p>{source.last_success_at ? `Последнее успешное обновление ${ago(source.last_success_at)}` : "Успешных запусков пока нет"}</p></article>)}</section>}
   <DataLegend />
 </Layout>

apps/web/src/pages/waterbodies/[slug].astro

@@ -1,5 +1,6 @@
 ---
 import ActivityCard from "../../components/ActivityCard.astro";
+import PageHero from "../../components/PageHero.astro";
 import Layout from "../../layouts/Layout.astro";
 import { api, plural, type Activity, type DictionaryItem, type PaginatedActivity } from "../../lib/api";
 const { slug } = Astro.params;
@@ -20,6 +21,6 @@ const schema = water ? { "@context":"https://schema.org", "@type":"CollectionPag
 ---
 <Layout title={water ? `${water.name_ru} в RF4 — рыба и свежие точки` : "Водоём не найден — RF4 Spotter"} description={water ? `${water.name_ru} в Russian Fishing 4: свежие координаты, активные виды рыб, приманки и источники наблюдений.` : "Такого водоёма нет в каталоге RF4 Spotter."} noindex={!water || unavailable} structuredData={schema} errorPage={!water || unavailable}>
   <a class="back" href="/waterbodies">← Все водоёмы</a>
-  <section class="catalog-hero content-grid"><span class="overline">Свежие данные за 72 часа</span><h1>{water?.name_ru ?? "Водоём не найден"}</h1>{water && <p>{items.length} {plural(items.length,["активная точка","активные точки","активных точек"])} для {fishes.length} {plural(fishes.length,["вида рыбы","видов рыб","видов рыб"])}.</p>}</section>
+  <PageHero eyebrow="Свежие данные за 72 часа" title={water?.name_ru ?? "Водоём не найден"} description={water ? `${items.length} ${plural(items.length,["активная точка","активные точки","активных точек"])} для ${fishes.length} ${plural(fishes.length,["вида рыбы","видов рыб","видов рыб"])}.` : undefined} />
   {unavailable ? <div class="state content-grid"><h2>Данные временно недоступны</h2></div> : !water ? <div class="state content-grid"><h2>Такого водоёма нет в справочнике</h2><a href="/waterbodies">Открыть каталог</a></div> : <section class="catalog-results content-grid"><aside><span class="overline">Рыбы</span>{fishes.length ? <nav>{fishes.map(([fishSlug,name]) => <a href={`/waterbodies/${water!.slug}/${fishSlug}`}>{name}</a>)}</nav> : <p>Свежих подтверждённых видов пока нет.</p>}</aside><div>{items.length ? items.map(item => <ActivityCard item={item}/>) : <div class="state"><h2>Свежих точек пока нет</h2><p>Проверьте позже или посмотрите полевые сигналы на главной.</p></div>}</div></section>}
 </Layout>

apps/web/src/pages/waterbodies/[slug]/[fish].astro

@@ -1,5 +1,6 @@
 ---
 import ActivityCard from "../../../components/ActivityCard.astro";
+import PageHero from "../../../components/PageHero.astro";
 import Layout from "../../../layouts/Layout.astro";
 import { api, plural, type Activity, type DictionaryItem, type PaginatedActivity } from "../../../lib/api";
 const { slug, fish: fishSlug } = Astro.params;
@@ -20,6 +21,6 @@ const schema = valid ? { "@type":"CollectionPage", name:`${fish!.name_ru} на $
 ---
 <Layout title={valid ? `${fish!.name_ru} на ${water!.name_ru} в RF4 — точки и приманки` : "Страница не найдена — RF4 Spotter"} description={valid ? `Где ловить ${fish!.name_ru} на ${water!.name_ru} в Russian Fishing 4: свежие координаты, приманки, активность и источники.` : "Такого сочетания рыбы и водоёма нет в каталоге."} noindex={!valid || unavailable} structuredData={schema} errorPage={!valid || unavailable}>
   <a class="back" href={water ? `/waterbodies/${water.slug}` : "/waterbodies"}>← К водоёму</a>
-  <section class="catalog-hero content-grid"><span class="overline">{water?.name_ru ?? "Каталог RF4"}</span><h1>{fish?.name_ru ?? "Данные не найдены"}</h1>{valid && <p>{items.length} {plural(items.length,["свежая точка","свежие точки","свежих точек"])} за последние 72 часа.</p>}</section>
+  <PageHero eyebrow={water?.name_ru ?? "Каталог RF4"} title={fish?.name_ru ?? "Данные не найдены"} description={valid ? `${items.length} ${plural(items.length,["свежая точка","свежие точки","свежих точек"])} за последние 72 часа.` : undefined} />
   {unavailable ? <div class="state content-grid"><h2>Данные временно недоступны</h2></div> : !valid ? <div class="state content-grid"><h2>Такого сочетания нет в справочнике</h2><a href="/">Вернуться на главную</a></div> : <section class="catalog-results catalog-results--single content-grid"><div>{items.length ? items.map(item => <ActivityCard item={item}/>) : <div class="state"><h2>Свежих точек пока нет</h2><p>Данные появятся после новых подтверждённых наблюдений.</p></div>}</div></section>}
 </Layout>

apps/web/src/pages/waterbodies/index.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from "../../layouts/Layout.astro";
+import PageHero from "../../components/PageHero.astro";
 import { api, type DictionaryItem } from "../../lib/api";
 let waters: DictionaryItem[] = [], unavailable = false;
 try { waters = await api<DictionaryItem[]>("/api/v1/waterbodies?limit=500"); } catch { unavailable = true; }
@@ -10,6 +11,6 @@ if (unavailable) {
 }
 ---
 <Layout title="Все водоёмы Russian Fishing 4 — RF4 Spotter" description="Каталог водоёмов RF4 со свежими точками, рыбами, приманками и прозрачными источниками данных.">
-  <section class="catalog-hero content-grid"><span class="overline">Карта водоёмов RF4</span><h1>Водоёмы</h1><p>Откройте водоём, чтобы увидеть активные виды рыб и последние подтверждённые точки.</p></section>
+  <PageHero eyebrow="Карта водоёмов RF4" title="Водоёмы" description="Откройте водоём, чтобы увидеть активные виды рыб и последние подтверждённые точки." />
   {unavailable ? <div class="state content-grid"><h2>Каталог временно недоступен</h2></div> : <nav class="catalog-grid content-grid" aria-label="Водоёмы">{waters.map(water => <a href={`/waterbodies/${water.slug}`}><span>Водоём</span><strong>{water.name_ru}</strong><i>→</i></a>)}</nav>}
 </Layout>

apps/web/src/styles/global.css

@@ -44,3 +44,6 @@ footer{min-height:118px;background:var(--deep);color:#dbe4df;padding:28px max(32
 
 /* Brand grammar: radar belongs to coordinates; incomplete signals use a field-note edge, not decorative ripples. */
 .detail-card:before,.signal-card:after{content:none}.signal-card{border-top:3px solid #c9ad55}
+
+/* Shared editorial signature for data sections. */
+.section-heading{gap:24px}.section-heading>div{min-width:0}.section-heading p{max-width:700px;margin:10px 0 0;color:var(--text-muted);line-height:1.55}.section-heading--editorial{padding-top:68px;border-top:1px solid var(--border);margin-bottom:25px}.section-heading--editorial h2{font-size:46px;line-height:.95}.section-heading--editorial .result-count{align-self:end}@media(max-width:720px){.section-heading--editorial{display:block;padding-top:45px}.section-heading--editorial .result-count{display:inline-block;margin-top:14px}}

docs/ROADMAP.md

@@ -23,7 +23,7 @@
 - [x] **B01 · Иерархия имени.** RF4 Spotter — единое имя продукта в UI, metadata, manifest и документации; «Ни хвоста, ни чешуи» — поддерживающий слоган. Обновлены wordmark в header/footer и подпись выпуска.
 - [x] **B02 · Дизайн-токены.** Добавлены семантические роли поверхностей, текста, границ, фокуса, success/warning/danger и всех источников. На токены переведены паспорта данных, status-карточки, skeleton и focus; контрастные пары зафиксированы в brand system.
 - [x] **B03 · Графическая грамматика.** Мотивы закреплены за функциями: крючок — бренд, поплавок — активность/ожидание, леска — время, радар — координаты, силуэт — сущность рыбы. Убраны ложная рябь неполных сигналов и дублирующие радар круги карточки лидера; неполнота теперь подчёркнута спокойной полевой меткой.
-- [ ] **B04 · Компонентная подпись.** Унифицировать заголовки секций, CTA, карточки, плашки источников, состояния качества и пустые экраны на публичных и admin-страницах.
+- [ ] **B04 · Компонентная подпись.** В работе: общие `SectionHeading` и `PageHero` унифицируют рекорды, сигналы, каталоги и статус; далее унифицировать CTA и системные состояния публичных/admin-страниц.
 - [ ] **B05 · Motion-система.** Оставить только смысловые микроанимации поклёвки/пульса/перехода, задать общие длительности и полностью поддержать reduced motion.
 - [ ] **B06 · Brand QA.** Проверить favicon, maskable icons, manifest, OG 1200×630, светлый/тёмный фон, 16/32 px и mobile/desktop screenshots; записать правила в [brand-system.md](brand-system.md).
 

docs/brand-system.md

@@ -40,6 +40,12 @@
 
 Неполные данные получают тёплую верхнюю полевую метку и текстовый статус. Ошибка не изображается «мёртвым поплавком»: она передаётся системным danger-состоянием и понятным действием пользователя.
 
+## Компонентная подпись
+
+Секции данных используют `SectionHeading`: короткий uppercase eyebrow задаёт контекст, антиквенный заголовок называет сущность, необязательное описание объясняет правила, а счётчик всегда расположен справа или под текстом на мобильном. Так число результатов не конкурирует с названием раздела и одинаково читается в рекордах и полевых сигналах.
+
+Каталоги, detail-выборки и страницы прозрачности используют `PageHero`: один контекст, один `h1`, одно короткое пояснение. Это сохраняет одинаковый вертикальный ритм и SEO-иерархию независимо от наличия данных.
+
 ## План внедрения
 
 Рабочие статусы B01–B06 ведутся в [ROADMAP.md](ROADMAP.md). После каждого пакета выполняются Astro check/build и адресная визуальная проверка 320/390/768/1280 px. Новые bitmap-иллюстрации не добавляются, пока существующие SVG/CSS-мотивы решают задачу без лишнего веса.