From c820cc6baff1230f17d3021f449ffed26748ecb3 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Mon, 20 Apr 2026 19:53:21 +0300
Subject: [PATCH] Render FullRouteTimeline on Schedule details for multi-leg
 flights (Angular parity)

---
 .../schedule/components/ScheduleDetailsPage.tsx   | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/features/schedule/components/ScheduleDetailsPage.tsx b/src/features/schedule/components/ScheduleDetailsPage.tsx
index 69df0ad6..944d562d 100644
--- a/src/features/schedule/components/ScheduleDetailsPage.tsx
+++ b/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) => {