Replace the inline 'Invalid parameters' fallbacks and the framework's
default '404' text with the existing Aeroflot 404 screen. Unknown
locale, malformed flight/route/station params, and unmatched URLs
(including bad paths like onlineboard//route/...) now all land on the
same ErrorPage component.
Angular's schedule renders 7 day pills ("20 пн … 26 вс") spanning the
active week, not weekly date ranges. Match that: tabs now render the
seven days of selectedMonday's week with day-num + weekday-abbr stack.
Prev/next arrows shift by full weeks. Day clicks scroll to the
matching day group in DayGroupedFlightList for the schedule UX.
Schedule list day accordion stays collapsed by default but auto-
opens the day matching today's date when it's in the visible week
window — mirrors Angular's p-accordion default-active behaviour
where today's flights are visible without a click. The user can
still collapse it; we never re-open after that for the same date.
Visual-diff URLs were hardcoded to a past date with the wrong React
URL format (Angular path-style /AAQ/16042026 instead of React's
single-segment /AAQ-20260420-00002400). Switch to dynamic
yyyyMMdd of today for onlineboard pages and Mon→Sun of the current
week for schedule. Schedule-route diff dropped from ~91% to ~28%
on desktop after these two fixes.
Match Angular's p-accordion default-collapsed state on the schedule
results page. State now tracks expanded days (default empty)
instead of collapsed days (default empty), so the initial render
shows day headers only and the user clicks to reveal flights.
Schedule details page used to show only a one-line FlightCard and
stop. Reuse ScheduleFlightBody so each flight in the chain renders
the same per-leg layout the schedule results page uses (route
summary, leg cards, transit pill, share/Купить/Детали рейса
actions). Add a `Вернуться к Расписанию` back link to the header.
While here, fix the SEO title key — buildScheduleDetailsSeo was
calling SEO.SCHEDULE.DETAILS.TITLE with `flights={...}`, but the
i18n bundle only defines SEO.SCHEDULE.FLIGHT-DETAILS.TITLE with
`flightNumber={...}`. The unresolved key was leaking into the
document title as "SEO.SCHEDULE.DETAILS.TITLE".
Round-trip schedules used to render outbound and inbound lists
stacked. Mirror Angular's schedule-direction-switch: keep both
fetches running, but render only the active direction's list and add
a button group to the sticky header that swaps which one is shown.
WeekTabs track the active direction's week independently, and tab
navigation updates whichever direction is currently active.
Each schedule + onlineboard search now records itself into the
existing useSearchHistory localStorage hook, with a structured
params payload (departure/arrival/dates/flightNumber). The
SearchHistory sidebar renders the rich Angular layout: clock or
plane icon, optional sub-title (e.g. "Расписание рейсов, в одну
сторону"), city pair, and date range, with inbound dates appended
for round-trip searches.
Schedule flight cards now expand into the rich Angular layout instead
of the online-board time/transition rows. Mirrors connecting-flight-
body / multi-flight-body: horizontal timeline summary, per-leg card
with section number + flight number + operator + aircraft + dep/arr
times + leg duration + stations, transfer-inline-extended pill
between legs (Пересадка, ground time, transit city), and the actions
row (share, Купить, Детали рейса).
Wired via a renderExpandedBody render prop on FlightCard/FlightList so
ui/flights doesn't need to know about schedule-specific bodies.
Replace OnlineBoardFilter on schedule pages with a dedicated
ScheduleFilter that matches Angular's schedule-filter:
- Город вылета / Город прилета with swap arrows
- 'Показать расписание на' date range picker
- 'Время вылета' time slider
- 'Только прямые рейсы' checkbox (sets connections=0)
- 'Показать обратные рейсы' checkbox
- 'Показать расписание' submit button (blue, full-width)
The OnlineBoardFilter accordion (Номер рейса + Маршрут tabs) is no
longer rendered on schedule pages — Angular only ships flight-number
search on the online-board side.
Add sort arrows on ВЫЛЕТ / ВРЕМЯ В ПУТИ / ПРИЛЕТ headers — clicking
toggles ascending/descending order; clicking again clears the sort.
Day groups (Понедельник 20 апреля, etc.) are now collapsible via the
header chevron — matches Angular's p-accordion structure where each
day is an accordionTab. Default state expanded.
- Connecting (multi-leg via transit) flights are now folded into a
synthetic MultiLeg shape with combined flight numbers (SU 6188,
SU 6233) and per-leg airline logos, matching Angular's
schedule-list-flight-header.
- Schedule grid now uses Angular's 8-column layout
(80/120/100/240/100/100/240/16). The middle status icon is
replaced by a duration column with the blue clock icon and
'3ч. 48мин.' / '4h 19m' formatting.
- Multi-leg airline logos use the round badge variant (separate
round.png assets) so two carriers fit side-by-side without overlap.
- Action buttons removed from collapsed rows — Angular only shows
flight-actions in the expanded body. Added chevron column for
every schedule card and made schedule cards expandable by default.
- Removed 'Туда: MOW → KUF' subhead from outbound section, matching
Angular's bare flight list under the column header.
Angular's FlightsMapFilterComponent only sets departure when
UserLocationService.location emits an actual position — there's no
fallback to Moscow. Removing the React fallback aligns the empty
initial state (no splines drawn before user input).
The mobile day-select dropdown was rendering as an empty <select>
on detail pages where the calendar API hasn't shipped any usable
days for that view. The empty box took layout space and looked
broken. Match Angular: don't render the picker when there's
nothing to pick.
ScheduleStartPage now starts dateFrom/dateTo as null so the input
shows the `ДД.ММ.ГГГГ - ДД.ММ.ГГГГ` placeholder Angular ships
instead of pre-filling with the current week. The submit handler
defaults to current-week range when the user submits without
picking dates, preserving the legacy "find this week" UX.
Same pattern as the onlineboard date fix.
- ScheduleSearchPage: H1 now reads `Расписание по маршруту: …`
using SCHEDULE.SCHEDULE-BY-ROUTE — the existing onlineboard
variant was leaking through. Matches Angular's schedule-search
title-bar verbatim.
- DayGroupedFlightList: render a non-sortable column header bar
above the list with `Рейс / Авиакомпания, борт / Вылет / Время
в пути / Прилет`. Mirrors Angular's schedule-list-flight-header
column row. Sort arrows still TBD.
- New i18n keys: SCHEDULE.COL-FLIGHT, COL-AIRLINE, COL-DEPARTURE,
COL-DURATION, COL-ARRIVAL (RU + EN both filled).
Schedule-route mismatch now 11.99% (was 12.47% pre-heading fix).
- flights-map: default departure to Москва (MOW) when geolocation
doesn't yield a city. Mirrors Angular which seeds the orange
marker on Moscow regardless of geo permission. Hook now has two
effects — a synchronous MOW fallback that fires once dictionaries
load, and the existing geo callback that may upgrade to a closer
city when permission is granted.
- Schedule: introduce DayGroupedFlightList. Buckets the flat result
list by scheduled-departure date and renders each group under a
`Воскресенье 19 Апреля`-style header (Intl-driven, weekday +
genitive month). Single-day result skips the grouping noise.
- Schedule: introduce WeekTabs. Replaces the daily DayTabs in the
schedule sticky-content with Monday-anchored 7-day windows like
`13 апр - 19 апр`, matching Angular's week-tabs component.
handleWeekChange recomputes both dateFrom (Monday) and dateTo
(Sunday) when the tab changes.
- Schedule: aircraft model now visible in the collapsed FlightCard
row when `direction === "schedule"` (Sukhoi SuperJet 100 / Airbus
A321 etc., per Angular's operator-logo-and-model column).
- FlightCard / FlightList: extend `direction` union with `"schedule"`.
Tests updated: useGeolocationDefault tests now assert the MOW
fallback fires when permission is denied / API missing / arrival
already set (was previously expected to no-op).
- OperatorLogo: accept BCP-47 codes (`ru-ru`) by trimming to first 2
chars before picking the en/ru asset variant. Fixes the Russian
flight-details page rendering ROSSIYA (Latin) instead of РОССИЯ.
- FlightCard / FlightList: thread `direction` from the search page so
arrival results show Высадка (deboarding) instead of Посадка
(boarding) — Angular parity. The arrival side reads from
arrivalLeg.transition.deboarding when direction === 'arrival'.
- OnlineBoardFilter:
- Дата рейса starts blank with `ДД.ММ.ГГГГ` placeholder; submit
handler defaults to today on empty.
- Город вылета / Город прилета placeholders flip to
`Все направления` when the opposite-direction field is filled.
- Filter content row now flows with $space-l vertical gap to match
Angular's accordion-content rhythm (was ~6 px tighter).
- FlightsMiniList: `display: none` on mobile. Avoids the duplicate
summary card that was floating above the main details on small
viewports — Angular hides the sidebar mini-list there.
- FlightsMap calendar trigger: override PrimeReact's filled-blue
button to a transparent outline so it reads as a glyph (matches
Angular's outline calendar icon).
Pixel-mismatch results (re-diffed via scripts/visual-diff.mjs):
en-onlineboard-route 5.50% → 4.62%
onlineboard-arrival 5.53% → 4.63%
onlineboard-departure 5.92% → 5.03%
onlineboard-route 5.16% → 4.78%
mobile-onlineboard-start 23.51% → 20.37%
mobile-flight-details 18.82% → 17.92%
flight-details carrier-logo verified visually; pixel
count unchanged (height delta dominates)
onlineboard-start 14.56% → 14.52%
Larger remaining mismatches (schedule-route 14%, flights-map 34%,
flight-details 11%) are dominated by structural Angular features the
React port doesn't yet ship (day grouping, code-share bundling on
schedule; geo-driven origin marker on map; height-delta on details).
Tracked as P1 follow-ups in the comparison report.
- URL surface now matches Angular: `/ru-ru/`, `/en-us/`, `/zh-cn/`, …
(BCP-47). Bare short codes still work — the [lang]/layout auto-
promotes them with a replace navigation. Internally everything that
needs the short language (i18n file lookup, API path segment,
Accept-Language header, dictionary `title[lang]` key, Intl
formatters) reads it through the new `useLocale()` hook, which
returns both `locale` (BCP-47) and `language` (short).
- ApiClient.locale is now mutable and is updated from the [lang]
layout whenever the URL locale changes — was hard-coded to "ru" in
the root layout before, so backend responses for /en/... still came
back in Russian. Cities / airports / flight statuses now arrive in
the active language.
- All 21 empty EN translation keys filled in (AIRPLANE.*, BOARD.
PREVIOUS-FLIGHT, SCHEDULE.FILE-NAME, SEO.SCHEDULE.*, SEO.FLIGHTS-
MAP.*, SHARED.FLIGHT-TRANSFER-PLURAL-*, SHARED.WEEK_FORMAT-WRONG)
so /en-us renders without falling back to raw keys.
- Added BOARD.LOAD-FAILED-TITLE / -MESSAGE keys (RU + EN) and removed
the three hardcoded Russian error strings from the search-page
error card.
- FlightStatus now reads `FLIGHT-STATUSES.{Status}` from i18n instead
of hardcoding the Russian labels.
- FlightCard's OperatorLogo now picks the en/ru carrier-logo variant
from `useLocale().language` instead of always passing "ru" — the
Aeroflot/Rossiya logos display in the active language where
variants exist.
- registerPrimeLocales(): all 9 supported languages get a PrimeReact
`addLocale` entry at module load (RU + EN hand-curated, others built
from Intl). Calendar/AutoComplete widgets switch with the URL.
- ErrorBoundary catches outside the i18n provider, so it now ships
its own minimal localised string table keyed off the URL locale —
no more "Something went wrong" leaking on the Russian site.
- Hreflang URLs now emit BCP-47 (`/en-us/...`) while `hreflang="en"`
stays the short Google-friendly form.
- Datetime helpers accept either short or BCP-47 locale (`isRussianLocale`)
so callers can pass through whatever the route hands them.
- Drop the React-only standalone /popular route (and its e2e
smoketest). Angular returns 404 for /ru-ru/popular; popular
requests are surfaced inline on onlineboard/schedule start pages
via PopularRequestsPanel (which stays). Matching the URL surface
is a contractual requirement for the MF remote.
- Replace ?tab/?departure/?arrival/?return query-string prefill on
the onlineboard and schedule start pages with a sessionStorage
transient slot. Mirrors Angular's OnlineBoardFiltersStateService /
ScheduleFiltersStateService cross-page singletons: URLs stay
clean of query strings, the start-page form still seeds itself
from a popular-request click, and a fresh page reload (which
bypasses the in-memory state in Angular) lands on a pristine form.
Same-page popular clicks remount the filter via key bump so the
useState initializers pick up the new prefill.
- SharePanel: fix wrong i18n key (SHARED.COPY → SHARE.COPY) and switch
to the brand-icon-on-top + translated-label layout that Angular uses
(renders as untranslated raw key + plain text list before).
- LastUpdate: stamp now reflects when the client received the data, not
the API record's mutation timestamp — Angular sets `flight.lastUpdate
= new Date()` in populate.logic.ts; we mirror that behavior so users
no longer see stale 'updated' values from cached API rows.
- FlightCard: keep operator logo + plane icon + status text on mobile
(previously hidden via display:none); regrid to 3-col layout so the
card mirrors Angular's mobile pattern. Boarding status row gains the
leading colour-coded dot Angular ships ('Уточняется' grey).
- OnlineBoardSearchPage: H1 for /flight/... search now reads
'Рейс: SU 6497, Сегодня' instead of 'Номер рейса: SU6497' (matches
Angular's title.service); add the '* Время в системе - МЕСТНОЕ.'
footer note Angular's <page-footer-notes> renders.
- FlightsMap filter: drop the React-only 'Найдите свой маршрут'
header; replace the horizontal swap glyph with vertical blue arrows
(Angular rotates the same SVG 90deg); add Leaflet city-tooltip
styling so labels render text-only with a white text-shadow halo
rather than as PrimeReact-default white pills.
- DayQuickPick: new mobile-only 3-day quick-pick row above the manual
date input on both onlineboard and flights-map filters, mirroring
Angular's calendar-input.component .calendar--mobile block. Uses
Intl.DateTimeFormat formatToParts to get the genitive month form.
Angular's crumb trail ends at 'Онлайн-Табло'; the route description
lives only in the h1 below. React was repeating the heading as a third
crumb, doubling up the text.
Drop the 8px margin below the day-tabs strip so the sticky card touches
the results frame, matching Angular's layout.
Add page-layout__scroll-overlay — a fixed 25px dark-blue strip across
the top of the viewport — so flight rows scrolling past the 20px-sticky
date row don't peek through the gap above it.
Realign DayTabs range to match Angular's boardSearchFrom=1 /
boardSearchTo=7 defaults (today-1 through today+7). Previous 2/14
window left today off-center in the 7-tab page.
Rebuild DayTabs to mirror Angular's flat single-line tab strip: one label
per tab ('17 апр.' siblings, '19 апреля' active), 48px tall, 7 tabs per
page, brand blue label on light-blue background with white active cell.
Single Intl.DateTimeFormat call keeps Russian months in genitive case.
Drop the 60px sticky-content offset to 20px so the date strip aligns
with the left filter column (both already sticky at top:20px).
Correct SEO.FLIGHTS_MAP translation key to SEO.FLIGHTS-MAP.MAIN — the
underscored path never existed in the locale files, so the browser tab
title on /{lang}/flights-map fell back to the raw key.
Angular's route/departure/arrival search result list picks a 'current
flight' on load and auto-expands + scrolls it into view — the flight
whose dep/arr time is closest to 'now' for today's searches, or the
first/last flight when the search is for a future/past day. React was
always rendering the list scrolled to the top, so on today's route
search the user sees flights from 00:30 onwards instead of landing on
whatever is departing right now.
- Add features/online-board/closestFlight.ts with a React-flavored port
of find-closest-flight.ts (plus a today-guard that reuses the same
'yyyymmdd' shape the URL parser produces).
- FlightList takes an optional initialCurrentFlightId, attaches a ref
to each card, and scrollIntoView's it on mount / list change.
- FlightCard takes an initialExpanded prop and seeds its useState so
the selected flight lands expanded, matching the Angular 'expanded:
true' assignment after setCurrentFlight.
- OnlineBoardSearchPage computes the id via findClosestFlightId using
the current params (type + date) and forwards it to FlightList.
Angular's search filter rewrites the 'Дата рейса' input value to the
translated 'Сегодня' label whenever the picked date equals today,
matching the 'Сегодня' that appears in the H1 and SEO strings. React
was showing the raw 'DD.MM.YYYY' even when today, so the filter read
clinical next to the warm page heading.
PrimeReact's Calendar doesn't support a custom display formatter, but
exposes an inputRef. Wire one up on both Calendar instances (flight
number tab + route tab) and rewrite the DOM value to SHARED.TODAY
whenever flightDate / routeDate is today. The ref update runs on
every mount + date change, so navigating between tabs also gets it
right.
On /ru/onlineboard/route/MOW-LED-20260419 (and /departure/, /arrival/)
the H1 already read 'Маршрут: Москва - Санкт-Петербург, Сегодня' but
document.title and meta[name=description] carried the raw 'MOW - LED
19.04.2026' because SeoHead runs at the route level with URL-only
params. Angular ships the resolved city names + 'Сегодня' in both.
Add a useEffect in OnlineBoardSearchPage that, once the dictionary
hook returns, overwrites document.title + meta description using the
same describeStation/dateLabel helpers that feed the H1. Route,
departure, and arrival search types all get handled; flight-number
search is unchanged.
Measured track Angular uses for .flight-route:
grid-template-columns: [depart-at] 97 [depart-to] 233
[status] 472 [arrive-at] 97
[arrive-to] 107
padding: 50px 20px 0;
React was rendering a symmetric 5-column grid
(1fr for every non-time column), which cut the progress/status column
to ~25% of the strip instead of ~40%. Visually the effect was a
cramped 'Прибыл' label with barely any room for the green progress
bar. Retune to an asymmetric grid with `minmax(300px, 2.5fr)` on the
status column and lift the top padding to 40px.
Also switch the route→details and accordion-row hairlines from
#e0e6f0 / dashed to Angular's measured 1.3px dotted #D1DCEA for a
softer, identical visual.
Angular's sprite icons (#service, #board, #deboard, #company, #food,
#additional_service) render at ~47×47 in the row caption column —
significantly larger than a typical inline affordance, creating a
clear visual anchor for each row. React's inline SVGs were sized at
28×28 (a quarter of the area), which made the icon column feel
like an afterthought next to the large red 'Закончена' status.
Bump .details-row__icon to 44×44 and set the svg width/height attrs
to match. Keep the grey stroke color (#657282).
Angular ships '← Вернуться к Онлайн-Табло' as a solid 48px-tall
primary button spanning the full 285px mini-list column (bg #4A90E2,
white text, 3px radius). React had it as a narrow pale-blue badge
(bg #E3F0FF, dark-navy text, 35px tall), which read as a secondary
link rather than the primary navigation affordance above the
sibling-flights list. Retune DetailsBackButton to the measured
Angular values.
Measured against the Angular deploy:
day chip: 12px / #333 / transparent w/ 1px #D6DDE6 border
'15:30' value: 12px / 400 / #F37B09 (dep/arr time = number-group)
'1ч. 30мин.': 16px / 500 / #333 (duration = magnitude)
week note: 12px / #657282
'Дни выполнения рейса' label: sentence case (no uppercase)
React was rendering the day-of-week strip as filled blue pills at
14px/500, the schedule 'Время в пути' value at 14px/600/#222, and the
schedule label with an uppercase text-transform. Swap day chips to a
minimal bordered-but-transparent style, split the flight-schedule value
into a --duration modifier so dep/arr render orange and duration
renders dark+larger, and drop the text-transform on the label.
Measured computed styles on the deployed Angular reference:
mini-list flight-number: 16px / 400 / #000 (mine: 12px / grey)
mini-list time: 20px / 500 / #022040 (mine: 17px / 600 / #222)
'Детали рейса' header: 16px / 400 / #333 (mine: 18px / 500 / #222)
'Расписание рейса' hdr: 16px / 400 / #333 (mine: 18px / 500 / #222)
React's mini-list was reading the carrier+number as secondary metadata
and the time as a loud bold chunk; Angular reverses the hierarchy —
the carrier+number is the tile's identifier, the time is a darker navy
number-group. Retune both. Also drop the collapse-header weight on
both details+schedule accordions so they read as section separators
rather than section titles; the row content below is the focus.
gnezim