Add OperatorLogo component for airline branding

src/features/online-board/components/BoardDetailsHeader/OperatorLogo.test.tsx

@@ -0,0 +1,52 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { OperatorLogo } from "./OperatorLogo.js";
+import type { ISimpleFlight } from "../../types.js";
+
+vi.mock("@/i18n/provider.js", () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+function makeFlight(carrier: string): ISimpleFlight {
+  return {
+    id: "X", routeType: "Direct", flyingTime: "1h", status: "Scheduled",
+    flightId: { carrier, flightNumber: "0022", suffix: "", date: "20260417" },
+    operatingBy: { carrier, flightNumber: "0022" },
+    leg: {} as never,
+  } as ISimpleFlight;
+}
+
+describe("OperatorLogo", () => {
+  it("renders with company-logo and company-logo--SU classes", () => {
+    render(<OperatorLogo flight={makeFlight("SU")} locale="en" />);
+    const el = screen.getByTestId("operator-logo");
+    expect(el.className).toContain("company-logo");
+    expect(el.className).toContain("company-logo--SU");
+  });
+
+  it("adds ru class when locale is ru", () => {
+    render(<OperatorLogo flight={makeFlight("SU")} locale="ru" />);
+    expect(screen.getByTestId("operator-logo").className).toContain("ru");
+  });
+
+  it("adds large class when large=true", () => {
+    render(<OperatorLogo flight={makeFlight("SU")} locale="en" large />);
+    expect(screen.getByTestId("operator-logo").className).toContain("large");
+  });
+
+  it("adds round class when round=true", () => {
+    render(<OperatorLogo flight={makeFlight("SU")} locale="en" round />);
+    expect(screen.getByTestId("operator-logo").className).toContain("round");
+  });
+
+  it("renders caption when caption=true", () => {
+    render(<OperatorLogo flight={makeFlight("SU")} locale="en" caption />);
+    expect(screen.getByText("SHARED.AVIACOMPANY")).toBeTruthy();
+  });
+
+  it("does not render caption by default", () => {
+    render(<OperatorLogo flight={makeFlight("SU")} locale="en" />);
+    expect(screen.queryByText("SHARED.AVIACOMPANY")).toBeNull();
+  });
+});

src/features/online-board/components/BoardDetailsHeader/OperatorLogo.tsx

@@ -0,0 +1,44 @@
+import type { FC } from "react";
+import { useTranslation } from "@/i18n/provider.js";
+import type { ISimpleFlight } from "../../types.js";
+import "./OperatorLogo.scss";
+
+export interface OperatorLogoProps {
+  flight: ISimpleFlight;
+  locale: string;
+  large?: boolean;
+  round?: boolean;
+  caption?: boolean;
+}
+
+export const OperatorLogo: FC<OperatorLogoProps> = ({
+  flight,
+  locale,
+  large,
+  round,
+  caption,
+}) => {
+  const { t } = useTranslation();
+  const carrier = flight.operatingBy.carrier ?? flight.flightId.carrier;
+
+  const classes = [
+    "company-logo",
+    `company-logo--${carrier}`,
+    large ? "large" : "",
+    round ? "round" : "",
+    locale === "ru" ? "ru" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div>
+      {caption && <div className="operator-logo__caption">{t("SHARED.AVIACOMPANY")}</div>}
+      <div
+        className={classes}
+        data-testid="operator-logo"
+        title={carrier}
+      />
+    </div>
+  );
+};