feat: add fishing activity timeline

apps/web/src/components/ActivityTimeline.astro

@@ -0,0 +1,19 @@
+---
+import type { Catch } from "../lib/api";
+const { catches } = Astro.props as { catches: Catch[] };
+const now = Date.now();
+const step = 12 * 60 * 60 * 1000;
+const buckets = Array.from({ length: 6 }, (_, index) => ({ index, count: 0 }));
+for (const item of catches) {
+  const timestamp = new Date(item.caught_at ?? item.reported_at).getTime();
+  const age = Math.floor((now - timestamp) / step);
+  if (age >= 0 && age < buckets.length) buckets[buckets.length - 1 - age].count += 1;
+}
+const max = Math.max(1, ...buckets.map(bucket => bucket.count));
+---
+<section class="activity-timeline" aria-labelledby="timeline-title">
+  <header><div><span class="overline">Последние 72 часа</span><h2 id="timeline-title">Леска активности</h2></div><p>По показанным ниже уловам · шаг 12 часов</p></header>
+  <div class="timeline-chart" role="img" aria-label={`Распределение ${catches.length} показанных уловов за последние 72 часа`}>
+    {buckets.map((bucket, index) => <div class="timeline-slot"><span class="timeline-line" style={`--height:${Math.max(8, bucket.count / max * 100)}%`}><i></i></span><strong>{bucket.count}</strong><small>{index === 0 ? "−72 ч" : index === 5 ? "сейчас" : `−${(5-index)*12} ч`}</small></div>)}
+  </div>
+</section>

apps/web/src/layouts/Layout.astro

@@ -5,6 +5,7 @@ import "../styles/source-status.css";
 import "../styles/data-passport.css";
 import "../styles/data-legend.css";
 import "../styles/coordinate-radar.css";
+import "../styles/activity-timeline.css";
 import FishingIcon from "../components/FishingIcon.astro";
 const {
   title = "RF4 Spotter — свежие точки клёва Russian Fishing 4",

apps/web/src/pages/spots/[id].astro

@@ -2,6 +2,7 @@
 import Layout from "../../layouts/Layout.astro";
 import SourceBadge from "../../components/SourceBadge.astro";
 import CoordinateRadar from "../../components/CoordinateRadar.astro";
+import ActivityTimeline from "../../components/ActivityTimeline.astro";
 import { activityLevel, api, kg, plural, type Activity, type Catch, type Spot } from "../../lib/api";
 const { id } = Astro.params;
 let spot: Spot | null = null, catches: Catch[] = [], activity: Activity | null = null, unavailable = false;
@@ -26,6 +27,7 @@ const breadcrumbs = spot ? { "@context": "https://schema.org", "@type": "Breadcr
   {unavailable || !spot ? <div class="state"><h1>Точка недоступна</h1><p>API не ответил или такой точки нет.</p></div> : <>
     <section class="spot-hero"><div><span class="eyebrow">{spot.waterbody}</span><h1>Точка {spot.x}:{spot.y}</h1><p>{spot.description}</p></div><CoordinateRadar x={spot.x} y={spot.y}/></section>
     <div class="periods"><div><strong>{spot.catches_24h}</strong><span>за 24 часа</span></div><div><strong>{spot.catches_3d}</strong><span>за 3 дня</span></div><div><strong>{spot.catches_7d}</strong><span>за 7 дней</span></div></div>
+    <ActivityTimeline catches={catches}/>
     <section class="detail-grid"><div><div class="section-heading"><h2>Последние уловы</h2></div>{catches.length ? <div class="catch-list">{catches.map(item => <article><div><strong>{item.fish}</strong><span>{item.bait ?? "Приманка не указана"}</span><SourceBadge source={item.source_system} href={item.source_url}/></div><div><strong>{kg(item.weight_g)}</strong><span>{item.player_name ?? "Анонимно"}</span></div></article>)}</div> : <div class="state compact-state"><h2>Уловов пока нет</h2><p>Для этой точки нет одобренных наблюдений.</p></div>}</div><aside><span class="eyebrow">Оценка за 24 часа</span>{activity && level ? <><h2>{activity.activity_score} / 100</h2><strong data-activity-level={level.short}>{level.description}</strong><div class="source-strip">{activity.sources.map(source => <SourceBadge source={source}/>)}</div><p>{activity.explanation}</p><p class="note">Основано на {activity.catches} {plural(activity.catches, ["наблюдении", "наблюдениях", "наблюдениях"])} от {activity.unique_players} {plural(activity.unique_players, ["игрока", "игроков", "игроков"])}. Уверенность: {activity.confidence_score}%.</p></> : <p>За последние 24 часа данных для расчёта нет.</p>}<span class="eyebrow">Лучшие приманки</span>{spot.top_baits.length ? <ol>{spot.top_baits.map(name => <li>{name}</li>)}</ol> : <p>Недостаточно данных.</p>}<p class="note">Учитываются только одобренные наблюдения.</p></aside></section>
   </>}
 </Layout>

apps/web/src/styles/activity-timeline.css

@@ -0,0 +1,3 @@
+.activity-timeline{width:min(1180px,calc(100% - 64px));margin:20px auto 0;padding:25px 28px;border-radius:14px;background:#fff;border:1px solid #d9e1da}.activity-timeline header{display:flex;align-items:end;justify-content:space-between;gap:20px}.activity-timeline h2{font:400 29px Georgia,serif;margin:5px 0 0}.activity-timeline header p{margin:0;color:#71817e;font-size:10px}
+.timeline-chart{height:145px;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:18px;padding-top:8px;border-bottom:1px solid #a9bbb1;background:repeating-linear-gradient(to top,transparent 0,transparent 35px,#dce5de 36px)}.timeline-slot{position:relative;display:grid;grid-template-rows:1fr auto;place-items:center}.timeline-line{position:relative;align-self:end;width:2px;height:var(--height);min-height:10px;background:#3f7779}.timeline-line i{position:absolute;left:0;top:0;width:12px;height:18px;margin:-4px 0 0 -5px;border-radius:7px 7px 9px 9px;background:linear-gradient(#ff785a 0 35%,var(--lime) 35%);box-shadow:0 0 0 4px #c9f45b18}.timeline-slot strong{position:absolute;top:2px;font:400 14px Georgia,serif;color:#365c5e}.timeline-slot small{position:absolute;bottom:-20px;color:#71817e;font-size:8px;white-space:nowrap}.activity-timeline+*{margin-top:42px}
+@media(max-width:720px){.activity-timeline{width:calc(100% - 28px);padding:20px 15px}.activity-timeline header{display:block}.activity-timeline header p{margin-top:6px}.timeline-slot small{font-size:7px}}