Render FullRouteTimeline on Schedule details for multi-leg flights (Angular parity)

src/features/schedule/components/ScheduleDetailsPage.tsx

@@ -24,6 +24,7 @@ import { buildScheduleDetailsSeo } from "../seo.js";
 import { buildScheduleFlightJsonLd } from "../json-ld.js";
 import { ScheduleFlightBody } from "./ScheduleFlightBody.js";
 import { FlightSchedule } from "@/features/online-board/components/FlightSchedule/index.js";
+import { FullRouteTimeline } from "@/features/online-board/components/FullRouteTimeline/index.js";
 import type { IScheduleFlightId, IFlightLeg, ISimpleFlight } from "../types.js";
 import "./ScheduleDetailsPage.scss";
 
@@ -47,9 +48,8 @@ function formatApiDate(yyyymmdd: string): string {
 
 /**
  * Extract legs from a flight (handles both Direct and MultiLeg).
- * Currently unused but kept for the planned full-route renderer.
  */
-function _getLegs(flight: { routeType: string; leg?: IFlightLeg; legs?: IFlightLeg[] }): IFlightLeg[] {
+function getLegs(flight: { routeType: string; leg?: IFlightLeg; legs?: IFlightLeg[] }): IFlightLeg[] {
   if (flight.routeType === "Direct" && "leg" in flight && flight.leg) {
     return [flight.leg];
   }
@@ -194,6 +194,17 @@ export const ScheduleDetailsPage: FC<ScheduleDetailsPageProps> = ({
       breadcrumbs={[{ label: t("SCHEDULE.TITLE"), url: scheduleHref }]}
     >
       <SeoHead {...seoProps} />
+      {/* Angular renders `flight-details-full-route` once at the top for
+          multi-leg flights (connecting or single chained). Mirror that
+          for the first flight when it has more than one leg. */}
+      {flights[0] && flights[0].routeType !== "Direct" && (
+        <section className="frame">
+          <FullRouteTimeline
+            legs={getLegs(flights[0]) as IFlightLeg[]}
+            viewType="Schedule"
+          />
+        </section>
+      )}
       <section className="frame">
         <div className="schedule-details" data-testid="schedule-details">
           {flights.map((flight) => {