Add AircraftPanel component for flight details accordion

src/features/online-board/components/details-panels/AircraftPanel.test.tsx

@@ -0,0 +1,51 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { AircraftPanel } from "./AircraftPanel.js";
+import type { IEquipmentFull } from "../../types.js";
+
+vi.mock("@/i18n/provider.js", () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+describe("AircraftPanel", () => {
+  it("renders actual title when present", () => {
+    const eq: IEquipmentFull = { aircraft: { actual: { title: "Airbus A321" } } };
+    render(<AircraftPanel equipment={eq} />);
+    expect(screen.getByText("Airbus A321")).toBeTruthy();
+  });
+
+  it("falls back to scheduled when actual.title is empty", () => {
+    const eq: IEquipmentFull = {
+      aircraft: { actual: { title: "" }, scheduled: { title: "Boeing 737" } },
+    };
+    render(<AircraftPanel equipment={eq} />);
+    expect(screen.getByText("Boeing 737")).toBeTruthy();
+  });
+
+  it("renders both actual and scheduled when they differ", () => {
+    const eq: IEquipmentFull = {
+      aircraft: {
+        actual: { title: "Airbus A321" },
+        scheduled: { title: "Airbus A320" },
+      },
+    };
+    render(<AircraftPanel equipment={eq} />);
+    expect(screen.getByText("Airbus A321")).toBeTruthy();
+    expect(screen.getByText("Airbus A320")).toBeTruthy();
+  });
+
+  it("renders configuration when present", () => {
+    const eq: IEquipmentFull = {
+      aircraft: { actual: { title: "A320" }, configuration: "C12Y138" },
+    };
+    render(<AircraftPanel equipment={eq} />);
+    expect(screen.getByText("C12Y138")).toBeTruthy();
+  });
+
+  it("has data-testid", () => {
+    const eq: IEquipmentFull = { aircraft: { actual: { title: "A320" } } };
+    render(<AircraftPanel equipment={eq} />);
+    expect(screen.getByTestId("aircraft-panel")).toBeTruthy();
+  });
+});

src/features/online-board/components/details-panels/AircraftPanel.tsx

@@ -0,0 +1,51 @@
+import type { FC } from "react";
+import { useTranslation } from "@/i18n/provider.js";
+import type { IEquipmentFull } from "../../types.js";
+import "./panels.scss";
+
+export interface AircraftPanelProps {
+  equipment: IEquipmentFull;
+}
+
+export const AircraftPanel: FC<AircraftPanelProps> = ({ equipment }) => {
+  const { t } = useTranslation();
+  const aircraft = equipment.aircraft;
+  const actualTitle = aircraft?.actual?.title;
+  const scheduledTitle = aircraft?.scheduled?.title;
+  const configuration = aircraft?.configuration;
+
+  // If actual has content and differs from scheduled, show both; otherwise
+  // fall back to whichever is present.
+  const showBoth = Boolean(actualTitle && scheduledTitle && actualTitle !== scheduledTitle);
+  const primaryTitle = actualTitle || scheduledTitle;
+
+  return (
+    <div className="details-panel" data-testid="aircraft-panel">
+      {showBoth ? (
+        <>
+          <div className="details-panel__row">
+            <span className="details-panel__label">{t("DETAILS.ACTUAL")}</span>
+            <span className="details-panel__value">{actualTitle}</span>
+          </div>
+          <div className="details-panel__row">
+            <span className="details-panel__label">{t("DETAILS.SCHEDULED")}</span>
+            <span className="details-panel__value">{scheduledTitle}</span>
+          </div>
+        </>
+      ) : (
+        primaryTitle && (
+          <div className="details-panel__row">
+            <span className="details-panel__label">{t("DETAILS.AIRCRAFT")}</span>
+            <span className="details-panel__value">{primaryTitle}</span>
+          </div>
+        )
+      )}
+      {configuration && (
+        <div className="details-panel__row">
+          <span className="details-panel__label">{t("DETAILS.CONFIGURATION")}</span>
+          <span className="details-panel__value">{configuration}</span>
+        </div>
+      )}
+    </div>
+  );
+};