Add Station component for multi-leg timeline

src/features/online-board/components/FullRouteTimeline/Station.test.tsx

@@ -0,0 +1,53 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Station } from "./Station.js";
+import type { IFlightLegStation } from "../../types.js";
+
+function makeStation(overrides: Partial<{ city: string; airportCode: string; terminal: string }> = {}): IFlightLegStation {
+  return {
+    scheduled: {
+      airport: "",
+      airportCode: overrides.airportCode ?? "SVO",
+      city: overrides.city ?? "Moscow",
+      cityCode: "MOW",
+      countryCode: "RU",
+    },
+    latest: {
+      airport: "",
+      airportCode: overrides.airportCode ?? "SVO",
+      city: overrides.city ?? "Moscow",
+      cityCode: "MOW",
+      countryCode: "RU",
+    },
+    dispatch: "",
+    gate: "",
+    terminal: overrides.terminal ?? "D",
+  } as IFlightLegStation;
+}
+
+describe("Station", () => {
+  it("renders city, code, and terminal", () => {
+    render(<Station station={makeStation()} />);
+    expect(screen.getByText("Moscow")).toBeTruthy();
+    expect(screen.getByText("SVO")).toBeTruthy();
+    expect(screen.getByText("TD")).toBeTruthy();
+  });
+
+  it("hides terminal line when empty string", () => {
+    const { container } = render(<Station station={makeStation({ terminal: "" })} />);
+    expect(container.querySelector(".station__terminal")).toBeNull();
+  });
+
+  it("applies align modifier", () => {
+    const { container } = render(<Station station={makeStation()} align="right" />);
+    const el = container.querySelector(".station");
+    expect(el?.className).toContain("station--right");
+  });
+
+  it("applies size modifier", () => {
+    const { container } = render(<Station station={makeStation()} size="large" />);
+    const el = container.querySelector(".station");
+    expect(el?.className).toContain("station--large");
+  });
+});

src/features/online-board/components/FullRouteTimeline/Station.tsx

@@ -0,0 +1,27 @@
+import type { FC } from "react";
+import type { IFlightLegStation } from "../../types.js";
+
+export type StationAlign = "left" | "right" | "center";
+export type StationSize = "small" | "medium" | "large";
+
+export interface StationProps {
+  station: IFlightLegStation;
+  align?: StationAlign;
+  size?: StationSize;
+}
+
+export const Station: FC<StationProps> = ({ station, align = "left", size = "medium" }) => {
+  const classes = [
+    "station",
+    `station--${align}`,
+    `station--${size}`,
+  ].join(" ");
+
+  return (
+    <div className={classes}>
+      <span className="station__city">{station.scheduled.city}</span>
+      <span className="station__code">{station.scheduled.airportCode}</span>
+      {station.terminal && <span className="station__terminal">T{station.terminal}</span>}
+    </div>
+  );
+};