feat: add subtle fish silhouettes

apps/web/src/components/ActivityCard.astro

@@ -3,6 +3,7 @@ import type { Activity } from "../lib/api";
 import { activityLevel, ago, kg, plural, spotPath } from "../lib/api";
 import FishingIcon from "./FishingIcon.astro";
 import DataPassport from "./DataPassport.astro";
+import FishSilhouette from "./FishSilhouette.astro";
 const { item } = Astro.props as { item: Activity };
 const level = activityLevel(item.activity_score);
 const limited = item.catches < 3;
@@ -12,6 +13,7 @@ const limited = item.catches < 3;
   <div class="spot-main">
     <div class="spot-topline"><span>{item.waterbody}</span><span class="activity-pill" data-activity-level={level.short}><i></i>{level.short}</span>{limited && <span class="data-quality">Данных мало</span>}</div>
     <h3>{item.fish}</h3>
+    <FishSilhouette name={item.fish}/>
     <div class="spot-meta"><span><FishingIcon name="pin" size={14}/> {item.x}:{item.y}</span><span><FishingIcon name="clock" size={14}/> {ago(item.last_confirmed_at)}</span></div>
     <p class="data-note">{item.explanation}</p>
     <DataPassport sources={item.sources} observedAt={item.last_confirmed_at} completeness={limited ? 75 : 100} confidence={item.confidence_score}/>

apps/web/src/components/FishSilhouette.astro

@@ -0,0 +1,9 @@
+---
+const { name, size = 92 } = Astro.props as { name: string; size?: number };
+const variant = [...name].reduce((sum, char) => sum + (char.codePointAt(0) ?? 0), 0) % 3;
+---
+<svg class="fish-silhouette" width={size} height={Math.round(size * .48)} viewBox="0 0 120 58" aria-hidden="true">
+  {variant === 0 && <><path d="M22 29C38 7 78 8 101 29 78 50 38 51 22 29Z"/><path d="m25 29-22-18v36Z"/><path d="M55 14 69 2l8 15M57 44l15 11 8-16"/><circle cx="91" cy="25" r="2.4" class="fish-eye"/></>}
+  {variant === 1 && <><path d="M19 30C39 14 80 13 104 29 80 45 39 47 19 30Z"/><path d="M22 30 3 17v28Z"/><path d="m48 17 11-14 13 13M47 44l12 11 13-12"/><path d="M101 29h15"/><circle cx="94" cy="25" r="2.4" class="fish-eye"/></>}
+  {variant === 2 && <><path d="M20 30C34 3 79 4 103 29 79 54 34 55 20 30Z"/><path d="M23 30 2 8v44Z"/><path d="m52 10 8-9 14 10M52 49l9 8 14-10"/><circle cx="92" cy="24" r="2.4" class="fish-eye"/></>}
+</svg>