feat: show ordered tackle components

apps/web/src/components/CatchList.astro

@@ -4,16 +4,17 @@ import { ago, kg, type Catch } from "../lib/api";
 import TackleGlyph from "./TackleGlyph.astro";
 const { catches } = Astro.props as { catches: Catch[] };
 const methodLabels: Record<string, string> = { spinning: "Спиннинг", bottom: "Донная", float: "Поплавочная" };
+const roleLabels: Record<string, string> = { lure: "Приманка", bait: "Наживка", rig: "Монтаж", rod: "Удилище", reel: "Катушка", line: "Леска", hook: "Крючок", float: "Поплавок", sinker: "Груз" };
 ---
 <div class="catch-list">
   {catches.map(item => {
     const timestamp = item.caught_at ?? item.reported_at;
     return <article>
-      <div><strong>{item.fish}</strong><span class="tackle-label"><TackleGlyph name={item.bait} size={24}/><span>{item.bait ?? "Приманка не указана"}</span></span>{item.fishing_method && <span>Метод: {methodLabels[item.fishing_method] ?? item.fishing_method}</span>}{item.retrieve_method && <span>Проводка: {item.retrieve_method}{item.retrieve_speed != null ? ` · скорость ${item.retrieve_speed}` : ""}</span>}<SourceBadge source={item.source_system} href={item.source_url}/></div>
+      <div><strong>{item.fish}</strong><span class="tackle-label"><TackleGlyph name={item.bait} size={24}/><span>{item.bait ?? "Приманка не указана"}</span></span>{item.fishing_method && <span>Метод: {methodLabels[item.fishing_method] ?? item.fishing_method}</span>}{item.retrieve_method && <span>Проводка: {item.retrieve_method}{item.retrieve_speed != null ? ` · скорость ${item.retrieve_speed}` : ""}</span>}{item.tackle_components?.length > 0 && <span class="catch-components"><strong>Комплект:</strong> {item.tackle_components.map(component => <>{roleLabels[component.role] ?? component.role}: {component.tackle_item_id ? <a href={`/tackle/items/${component.tackle_item_id}`}>{component.raw_value}</a> : component.raw_value}</>)}</span>}<SourceBadge source={item.source_system} href={item.source_url}/></div>
       <div><strong>{kg(item.weight_g)}</strong><span>{item.player_name ?? "Анонимно"}</span><span>{item.caught_at ? "Время улова" : "Получено · время улова неизвестно"}</span><time datetime={timestamp}>{ago(timestamp)} · {new Date(timestamp).toLocaleString("ru-RU", { timeZone: "UTC" })} UTC</time></div>
     </article>;
   })}
 </div>
 <style>
-  time{margin-top:7px;color:var(--text-secondary);font-size:10px;font-weight:750}
+  time{margin-top:7px;color:var(--text-secondary);font-size:10px;font-weight:750}.catch-components{line-height:1.5}.catch-components a{color:inherit;text-underline-offset:3px}
 </style>

apps/web/src/lib/api.ts

@@ -15,7 +15,8 @@ export type PaginatedActivity = {
 };
 
 export type Spot = { id: string; waterbody_slug: string; waterbody: string; x: number; y: number; description: string | null; catches_24h: number; catches_3d: number; catches_7d: number; top_baits: string[]; coordinate_precision: "exact" | "approximate" | "area" | "missing"; coordinate_sources: string[]; source_conflicts: string[] };
-export type Catch = { id: string; fish: string; weight_g: number; bait: string | null; player_name: string | null; caught_at: string | null; reported_at: string; fishing_method: string | null; retrieve_method: string | null; retrieve_speed: number | null; source_system: string; source_url: string | null };
+export type CatchTackleComponent = { id: string; role: string; position: number; raw_value: string; tackle_item_id: string | null; rig_id: string | null; source_system: string | null; source_url: string | null };
+export type Catch = { id: string; fish: string; weight_g: number; bait: string | null; player_name: string | null; caught_at: string | null; reported_at: string; fishing_method: string | null; retrieve_method: string | null; retrieve_speed: number | null; source_system: string; source_url: string | null; tackle_components: CatchTackleComponent[] };
 export type DictionaryItem = { id: string; slug: string; name_ru: string; unlock_level?: number | null; fish_species_count?: number | null; source_system?: string | null; source_external_id?: string | null; source_url?: string | null; description?: string | null; source_aliases?: string[] | null; source_fish_species?: string[] | null; source_image_urls?: string[] | null; source_point_urls?: string[] | null; source_checked_at?: string | null };
 export type TackleItem = { id: string; name: string; category: string; subcategory: string | null; brand: string | null; family: string | null; unlock_level: number | null; source_system: string | null; source_external_id: string | null; source_url: string | null; source_checked_at: string | null; missing_fields: string[] };
 export type PaginatedTackleItems = { items: TackleItem[]; total: number; limit: number; offset: number };